update Home.vue

src/components/card/SiteNotice.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="box-card">
+  <el-card class="box-card" style="height: 300px">
     <div slot="header" class="clearfix">
       <img src="@/assets/img/icon/speaker.png" alt="" class="recommand-icon">
       <span>站点公告</span>

src/views/home/Home.vue

@@ -1,29 +1,24 @@
 <template>
   <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-row>
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <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-col>
-      <el-col :md="12">
-        <el-row>
-          <el-col :md="24">
-            <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-col>
+      <el-row>
+        <el-col :md="12">
+          <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+            <site-notice />
+          </el-row>
+        </el-col>
+        <el-col :md="12">
+          <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+            <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-col>
+      </el-row>
     </el-row>
     <el-scrollbar style="width: 100%; height: 100vh">
       <el-row class="movie-list">
@@ -64,7 +59,6 @@ export default {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       nextId: 0,
-      sideDataList: [],
       dataList: [],
       loading: false,
       max: 0,
@@ -74,7 +68,7 @@ export default {
   created() {
     this.videoRecommendWrapper(this.nextId)
     this.getHotVideoWrapper()
-    this.initServerSendEvent()
+    // this.initServerSendEvent()
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -92,31 +86,44 @@ export default {
           this.loading = false
           const respData = resp.data
           if (respData.length === 0) {
-            this.$message('已经到底啦~~~')
+            this.$message(
+              {
+                message: '已经到底啦~~~',
+                type: 'info',
+                duration: 1000
+              }
+            )
             return
           }
 
-          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)
-            }
+          for (const item of respData) {
+            this.dataList.push(item)
           }
           this.nextId++
+          this.$message(
+            {
+              message: '已加载新数据~~~',
+              type: 'info',
+              duration: 1000
+            }
+          )
         } else {
-          this.$notify(
+          this.$message(
             {
-              title: '提示',
               message: '获取数据失败, 请重新刷新页面',
               type: 'warning',
-              duration: 3000
+              duration: 1000
             }
           )
         }
       }).catch(error => {
-        this.$message.error(error.message)
+        this.$message(
+          {
+            message: error.message,
+            type: 'error',
+            duration: 1000
+          }
+        )
       }).finally(() => {
       })
     },
@@ -132,7 +139,13 @@ export default {
           this.carouselList = resp.data
         }
       }).catch(error => {
-        this.$message.error(error.message)
+        this.$message(
+          {
+            message: error.message,
+            type: 'error',
+            duration: 1000
+          }
+        )
       }).finally(() => {
       })
     },
@@ -153,7 +166,13 @@ export default {
           }
         }
       } else {
-        this.$message.error('抱歉，你的浏览器不支持 SSE...')
+        this.$message(
+          {
+            message: '抱歉，你的浏览器不支持 SSE...',
+            type: 'warning',
+            duration: 1000
+          }
+        )
       }
     }
   }