Browse Source

feat:增加了轮播图显示精选课程图片,点击可以跳转功能

DingXiaoYu 4 years ago
parent
commit
949ce32d6f
1 changed files with 19 additions and 2 deletions
  1. 19 2
      src/views/PortalPage/components/CarouselCard.vue

+ 19 - 2
src/views/PortalPage/components/CarouselCard.vue

@@ -1,12 +1,13 @@
 <template>
   <el-carousel id="carousel-card-body" :interval="4000" height="180px" type="card">
-    <el-carousel-item v-for="item in contents" :key="item">
-      <img :src=item alt="err" style="object-fit: cover;object-position:top;height: 180px; width: 600px">
+    <el-carousel-item v-for="(item,index) in contents" :key="item">
+      <img :src=item alt="err" style="object-fit: cover;object-position:top;height: 180px; width: 600px" @click="jump(index)">
     </el-carousel-item>
   </el-carousel>
 </template>
 
 <script>
+
 export default {
   name: "CarouselCard",
   data() {
@@ -16,7 +17,23 @@ export default {
         require("@/assets/carousel-SE2.png"),
         require("@/assets/seec-banner.png"),
       ],
+      link:[]
     };
+  },
+  async created() {
+    const exampleClasses = (await this.$apis.getExampleCourses()).data.data;
+    for (let i=0; i<Math.min(exampleClasses.length,3); i++){
+      this.contents[i]=exampleClasses[i].imageUrl;
+      this.link[i]=exampleClasses[i].id;
+    }
+    this.$forceUpdate();
+  },
+  methods:{
+    jump(k){
+      if (this.link.length>k){
+        this.$router.push({ name: "CourseDetail", params: {id:this.link[k] } });
+      }
+    }
   }
 };
 </script>