|
|
@@ -0,0 +1,37 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="gap10">
|
|
|
+ <div class="line_vertical"></div>
|
|
|
+ <div class="font_size20 bold">{{$t('common.qitakechengtuijian')}}</div>
|
|
|
+ </div>
|
|
|
+ <div v-for="item in list" :key="item.courseId" class="flex-between mt20">
|
|
|
+ <img :src="item.coverImageUrl" alt="" style="width: 160px; height: 90px;" class="border_radius_8">
|
|
|
+ <div class="ml10 flex_1">
|
|
|
+ <div class="font_size16 bold line1">{{ item.courseTitle }}</div>
|
|
|
+ <el-button type="primary" size="mini" plain class="mt5" v-if="item.skillTagName">{{item.skillTagName}}</el-button>
|
|
|
+ <div class="font_size12 gray mt5">{{ item.viewCount }} {{ $t('common.renkanguo') }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { getCourseList } from '@/api/course.js'
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+
|
|
|
+const list = ref([]);
|
|
|
+onMounted(() => {
|
|
|
+ getList();
|
|
|
+});
|
|
|
+const getList = async (type) => {
|
|
|
+ const res = await getCourseList({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ })
|
|
|
+ if(res.code === 200){
|
|
|
+ list.value = res.rows || [];
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|