update

src/components/card/HotSearch.vue

@@ -55,7 +55,7 @@ export default {
       } else {
       }
     })
-    /*this.videos = [
+    this.videos = [
       {
         vname: '大奶',
         coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
@@ -116,7 +116,8 @@ export default {
         releasetime: '2023-04-24 16:47:00',
         visited: 10
       }
-    ]*/
+    ]
+
     /* getHotTen().then((res) => {
       this.videos = res
     })*/

src/components/card/HotVideo.vue

@@ -56,7 +56,7 @@ export default {
       }
     })
 
-    /*this.videos = [
+    this.videos = [
       {
         vname: '哈1',
         coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
@@ -117,7 +117,7 @@ export default {
         releasetime: '2023-04-24 16:47:00',
         visited: 10
       }
-    ]*/
+    ]
   },
   methods: {}
 }

src/components/hotlist/HotList.vue

@@ -1,223 +0,0 @@
-<template>
-  <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
-    <div slot="header" class="clearfix">
-      <img src="@/assets/img/icon/like.png" alt="" class="recommand-icon">
-      <span>热播排行</span>
-    </div>
-    <div
-      v-for="(video, index) in videos"
-      :key="index"
-      :title="video.vname"
-      class="item"
-    >
-      <div :class="rank(index + 1)">{{ index + 1 }}</div>
-      <router-link target="_blank" :to="`/video/vlrQvVnAlJ`">
-        {{ video.vname }}
-      </router-link>
-    </div>
-  </el-card>
-</template>
-
-<script>
-export default {
-  name: 'HotList',
-  data() {
-    return {
-      videos: []
-    }
-  },
-  computed: {
-    rank() {
-      return (index) => {
-        // index是使用时的参数
-        // console.log(index)
-        if (index === 1) {
-          return 'first'
-        }
-        if (index === 2) {
-          return 'second'
-        }
-        if (index === 3) {
-          return 'third'
-        }
-        if (index > 3) {
-          return 'other'
-        }
-      }
-    }
-  },
-  created() {
-    this.videos = [
-      {
-        vname: '哈1',
-        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-        releasetime: '2023-04-24 16:47:00',
-        visited: 10
-      },
-      {
-        vname: '哈2',
-        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-        releasetime: '2023-04-24 16:47:00',
-        visited: 10
-      },
-      {
-        vname: '哈3',
-        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-        releasetime: '2023-04-24 16:47:00',
-        visited: 10
-      },
-      {
-        vname: '哈4',
-        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-        releasetime: '2023-04-24 16:47:00',
-        visited: 10
-      },
-      {
-        vname: '哈5',
-        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-        releasetime: '2023-04-24 16:47:00',
-        visited: 10
-      },
-      {
-        vname: '哈1',
-        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-        releasetime: '2023-04-24 16:47:00',
-        visited: 10
-      },
-      {
-        vname: '哈2',
-        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-        releasetime: '2023-04-24 16:47:00',
-        visited: 10
-      },
-      {
-        vname: '哈3',
-        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-        releasetime: '2023-04-24 16:47:00',
-        visited: 10
-      },
-      {
-        vname: '哈4',
-        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-        releasetime: '2023-04-24 16:47:00',
-        visited: 10
-      },
-      {
-        vname: '哈5',
-        coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-        releasetime: '2023-04-24 16:47:00',
-        visited: 10
-      }
-    ]
-    /* getHotTen().then((res) => {
-      this.videos = res
-    })*/
-  },
-  methods: {}
-}
-</script>
-
-<style scoped>
-.item {
-  height: 25px;
-  margin-top: 4px;
-  margin-bottom: 16px;
-  cursor: pointer;
-  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
-
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 1; /*行数*/
-  -webkit-box-orient: vertical;
-}
-.item:hover {
-  transform: scale(1.1); /*鼠标放上之后元素变成1.1倍大小*/
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-.clearfix:after {
-  clear: both;
-}
-
-.clearfix {
-  position: relative;
-}
-.clearfix span {
-  font-size: 20px;
-  position: absolute;
-  bottom: 8px;
-  left: 35px;
-}
-.box-card {
-  width: 100%;
-}
-
-.recommand-icon {
-  width: 30px;
-}
-
-@media screen and (max-width: 768px) {
-  .clearfix span {
-    font-size: 15px;
-    position: absolute;
-    bottom: 8px;
-    left: 35px;
-  }
-  .text {
-    font-size: 13px;
-  }
-}
-
-.other {
-  display: inline-block;
-  background-color: rgb(176, 183, 194);
-  width: 22px;
-  height: 22px;
-  line-height: 20px;
-  text-align: center;
-  color: #ffffff;
-  font-size: 15px;
-  border-radius: 5px;
-}
-.first {
-  display: inline-block;
-  background-color: rgb(255, 74, 74);
-  width: 22px;
-  height: 22px;
-  line-height: 20px;
-  text-align: center;
-  color: #ffffff;
-  font-size: 15px;
-  border-radius: 5px;
-}
-.second {
-  display: inline-block;
-  background-color: rgb(255, 119, 1);
-  width: 22px;
-  height: 22px;
-  line-height: 20px;
-  text-align: center;
-  color: #ffffff;
-  font-size: 15px;
-  border-radius: 5px;
-}
-.third {
-  display: inline-block;
-  background-color: rgb(255, 180, 0);
-  width: 22px;
-  height: 22px;
-  line-height: 20px;
-  text-align: center;
-  color: #ffffff;
-  font-size: 15px;
-  border-radius: 5px;
-}
-.el-card__body {
-  padding-top: 0px;
-}
-</style>

src/components/layout/SearchBox.vue

@@ -95,7 +95,7 @@ export default {
           path: '/search',
           query: {
             keyword: this.keyword,
-            page: 1
+            pageNumber: 1
           }
         })
         this.$router.go(0)
@@ -104,7 +104,7 @@ export default {
           path: '/search',
           query: {
             keyword: this.keyword,
-            page: 1
+            pageNumber: 1
           }
         })
         window.open(routeUrl.href, '_blank')

src/views/home/Search.vue

@@ -10,30 +10,34 @@
       </el-breadcrumb-item>
     </el-breadcrumb>
 
-    <el-row v-if="dataList.length !== 0 " class="movie-list">
-      <el-col v-for="(video,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
-        <video-card :video="video" />
-      </el-col>
-
-      <!--
+    <el-row class="movie-list">
+      <el-col :md="18">
+        <el-col v-for="(video,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
+          <video-card :video="video" />
+        </el-col>
+        <!--
 					分页按钮：
 						page-size：每页显示条数
 						total：总条数
 						hide-on-single-page： 页数为一时隐藏
 				-->
-      <el-col :span="24" class="pagination">
-        <el-pagination
-          background
-          hide-on-single-page
-          layout="prev, pager, next"
-          :current-page="currentPage"
-          :page-size="pageSize"
-          :total="total"
-          @current-change="handleCurrentChange"
-        />
+        <el-col :span="24" class="pagination">
+          <el-pagination
+            background
+            hide-on-single-page
+            layout="prev, pager, next"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="total"
+            @current-change="handleCurrentChange"
+          />
+        </el-col>
+      </el-col>
+      <el-col :md="6">
+        <hot-search />
       </el-col>
     </el-row>
-    <el-row v-else class="not-result">
+    <el-row v-if="showEmpty" class="not-result">
       <el-col :span="12" :offset="6">
         <img src="@/assets/img/icon/not-result.png">
         <div>没有结果</div>
@@ -44,11 +48,13 @@
 
 <script>
 import VideoCard from '@/components/card/VideoCard'
+import HotSearch from '@/components/card/HotSearch'
+
 import { videoQuery } from '@/api/search'
 
 export default {
   name: 'Search',
-  components: { VideoCard },
+  components: { VideoCard, HotSearch },
   data() {
     return {
       keyword: null,
@@ -56,7 +62,8 @@ export default {
       total: 0,
       length: 0,
       pageSize: 12,
-      dataList: []
+      dataList: [],
+      showEmpty: true
     }
   },
   created() {
@@ -75,7 +82,6 @@ export default {
           pageNumber: currentPage
         }
       })
-      this.$router.go(0)
     },
     videoQueryWrapper(keyword, pageNumber) {
       videoQuery(keyword, pageNumber)
@@ -86,8 +92,9 @@ export default {
             this.length = resData.totalPages
             this.dataList = resData.list
 
-            // 页面跳转后滚动到页面顶部
-            //this.$vuetify.goTo(0)
+            if (this.total !== 0) {
+              this.showEmpty = false
+            }
           } else {
             console.error(res.msg)
           }

src/views/home/Video.vue

@@ -60,7 +60,7 @@
 
       <!--热播列表-->
       <el-col :md="6">
-        <hot-list />
+        <hot-video />
       </el-col>
     </el-row>
     <el-row v-if="showEmpty" class="not-result">
@@ -74,12 +74,13 @@
 
 <script>
 import VideoCard from 'components/card/VideoCard'
-import HotList from 'components/hotlist/HotList'
+import HotVideo from '@/components/card/HotVideo'
+
 import { videoCategory, videoPage} from '@/api/video'
 
 export default {
   name: 'Video',
-  components: { VideoCard, HotList },
+  components: { VideoCard, HotVideo },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小