使用 el-carousel 替换 HotSearch card 显示热播视频列表

src/views/home/Index.vue

@@ -1,62 +1,75 @@
 <template>
-  <div>
-    <el-row id="movie-list">
-      <el-col :md="6">
+  <el-row>
+    <el-row class="movie-list">
+      <el-col :md="12">
         <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <site-notice />
+          <el-carousel :interval="3000" height="300px">
+            <el-carousel-item v-for="(item, index) in carouselList" :key="index">
+              <router-link target="_blank" :to="`/video/${item.videoId}`">
+                <img class="carousel_image_type" :src="item.coverUrl" alt="img">
+              </router-link>
+            </el-carousel-item>
+          </el-carousel>
         </el-row>
         <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <hot-search :card-prop="cardProp" />
+          <site-notice style="height: 300px;" />
         </el-row>
       </el-col>
-      <el-col :md="18">
+      <el-col :md="12">
         <!--电影列表，与推荐列表-->
-        <el-row
-          v-if="dataList.length !== 0"
-          v-infinite-scroll="load"
-          infinite-scroll-disabled="loading"
-          infinite-scroll-distance="10"
-        >
+        <el-row>
           <!--电影列表-->
           <el-col :md="24">
-            <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+            <el-col v-for="(item, index) in sideDataList" :key="index" :md="12" :sm="12" :xs="12">
               <video-card :video="item" />
             </el-col>
           </el-col>
         </el-row>
-        <el-row v-else class="not-result">
-          <el-col :span="12" :offset="6">
-            <img src="@/assets/img/icon/not-collection.png">
-            <div>推荐数据正在计算中</div>
-          </el-col>
-        </el-row>
       </el-col>
     </el-row>
-  </div>
+    <el-row class="movie-list">
+      <!--电影列表，与推荐列表-->
+      <el-row
+        v-if="dataList.length !== 0"
+        v-infinite-scroll="load"
+        infinite-scroll-disabled="loading"
+        infinite-scroll-distance="10"
+      >
+        <!--电影列表-->
+        <el-col :md="24">
+          <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+            <video-card :video="item" />
+          </el-col>
+        </el-col>
+      </el-row>
+      <el-row v-else class="not-result">
+        <el-col :span="12" :offset="6">
+          <img src="@/assets/img/icon/not-collection.png">
+          <div>推荐数据正在计算中</div>
+        </el-col>
+      </el-row>
+    </el-row>
+  </el-row>
 </template>
 
 <script>
 import VideoCard from '@/components/card/VideoCard'
-import HotSearch from '@/components/card/HotSearch'
 import SiteNotice from '@/components/card/SiteNotice'
 import { getHotVideo, videoRecommend } from '@/api/video'
 
 export default {
   name: 'Index',
-  components: { VideoCard, HotSearch, SiteNotice },
+  components: { VideoCard, SiteNotice },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
-      nextId: '1',
+      nextId: 0,
+      sideDataList: [],
       dataList: [],
       loading: false,
       max: 0,
-      cardProp: {
-        title: null,
-        type: null,
-        dataList: []
-      }
+      carouselList: []
     }
   },
   created() {
@@ -73,9 +86,7 @@ export default {
 
     getHotVideo().then(resp => {
       if (resp.code === 0) {
-        this.cardProp.dataList = resp.data
-        this.cardProp.title = '热播排行'
-        this.cardProp.type = 'hotWatch'
+        this.carouselList = resp.data
       }
     })
   },
@@ -89,10 +100,17 @@ export default {
             return
           }
 
-          for (const item of respData) {
-            this.dataList.push(item)
+          if (this.nextId === 0) {
+            this.sideDataList = respData.slice(0, 4)
+            this.dataList = respData.slice(4, 12)
+          } else {
+            for (const item of respData) {
+              this.dataList.push(item)
+            }
           }
+
           this.loading = false
+          this.nextId++
         } else {
           this.$notify(
             {
@@ -107,7 +125,7 @@ export default {
     },
     load() {
       this.max++
-      if (this.max > 1) {
+      if (this.max > 0) {
         return
       }
 
@@ -123,14 +141,14 @@ export default {
 <style scoped>
 /*处于手机屏幕时*/
 @media screen and (max-width: 768px){
-  #movie-list {
+  .movie-list {
     padding-top: 8px;
     padding-left: 0.5%;
     padding-right: 0.5%;
   }
 }
 
-#movie-list {
+.movie-list {
   padding-top: 15px;
   padding-left: 6%;
   padding-right: 6%;
@@ -141,4 +159,16 @@ export default {
   padding-bottom: 100px;
   text-align: center;
 }
+
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 18px;
+  opacity: 0.75;
+  line-height: 300px;
+  margin: 0;
+}
+
+.carousel_image_type{
+  width: 100%;
+}
 </style>