update

src/components/recommend/Recommend.vue

@@ -1,179 +0,0 @@
-<template>
-  <div v-if="$user && videos.length > 0" id="recommend">
-    <el-tag style="font-size: 15px" type="danger" effect="light">
-      猜您喜欢
-    </el-tag>
-    <div class="text-container">
-      <transition class="inner-container" name="slide" mode="out-in">
-        <div
-          v-if="text.val !== undefined"
-          :key="text.id"
-          class="text"
-        >
-          {{ text.val.vname }}
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script>
-import { videoRecommend } from '@/api/video'
-
-export default {
-  name: 'Recommend',
-  data() {
-    return {
-      videos: [],
-      number: 0
-    }
-  }, // 混入toPlayer()方法
-  computed: {
-    text() {
-      return {
-        id: this.number,
-        val: this.videos[this.number]
-      }
-    }
-  },
-  mounted() {
-    this.startMove()
-  },
-  created() {
-    videoRecommend(1).then(res => {
-      console.log(res)
-    })
-
-    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
-      }
-    ]
-
-    /* const user = this.$user
-    if (user) {
-      getRecommendVideos(user.uid).then((res) => {
-        this.videos = res
-      })
-    }*/
-  },
-
-  methods: {
-    startMove() {
-      setTimeout(() => {
-        if (this.number === this.videos.length - 1) {
-          this.number = 0
-        } else {
-          this.number += 1
-        }
-        this.startMove()
-      }, 3000)
-    }
-  }
-}
-</script>
-
-<style scoped>
-#recommend {
-  padding-top: 20px;
-  padding-right: 6%;
-  display: flex;
-  align-items: center;
-}
-
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  #recommend {
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-    padding-top: 3%;
-  }
-}
-
-.text-container {
-  height: 30px;
-  overflow: hidden;
-}
-.text {
-  color: #66b1ff;
-}
-.text-container div {
-  margin-top: 5px;
-  cursor: pointer;
-  height: 20px;
-  overflow: hidden;
-  width: 450px;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 1; /*行数*/
-  -webkit-box-orient: vertical;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.5s linear;
-}
-.slide-leave-to {
-  transform: translateY(-20px);
-}
-.slide-enter {
-  transform: translateY(20px);
-}
-</style>

src/views/home/Index.vue

@@ -11,10 +11,6 @@
           <video-card :video="video" />
         </el-col>
       </el-col>
-      <!--热播列表-->
-      <!--      <el-col :md="6">
-        <hot-list />
-      </el-col>-->
     </el-row>
     <el-row v-else class="not-result">
       <el-col :span="12" :offset="6">
@@ -27,12 +23,11 @@
 
 <script>
 import VideoCard from '@/components/card/VideoCard'
-import Recommend from '@/components/recommend/Recommend'
 import { videoRecommend } from '@/api/video'
 
 export default {
   name: 'Index',
-  components: { VideoCard, Recommend },
+  components: { VideoCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小

src/views/home/Video.vue

@@ -6,19 +6,14 @@
           <el-button
             v-for="(item, index) in category"
             :key="index"
-            type="primary"
-            size="medium"
+            type="info"
+            size="mini"
             :plain="currentCategory !== index"
-            circle
             @click="chooseCategory(item, index)"
           >{{ item }}
           </el-button>
         </div>
       </el-col>
-      <el-col :md="12">
-        <!--猜您喜欢-->
-<!--        <recommend />-->
-      </el-col>
     </el-row>
     <el-row>
       <el-col :md="12">
@@ -26,10 +21,9 @@
           <el-button
             v-for="(item, index) in childCategory"
             :key="index"
-            type="primary"
-            size="medium"
+            type="warning"
+            size="mini"
             :plain="currentChildCategory !== index"
-            circle
             @click="getVideoList(item.id, index)"
           >{{ item.name }}
           </el-button>
@@ -80,13 +74,12 @@
 
 <script>
 import VideoCard from 'components/card/VideoCard'
-import Recommend from 'components/recommend/Recommend'
 import HotList from 'components/hotlist/HotList'
 import { videoCategory, videoPage} from '@/api/video'
 
 export default {
   name: 'Video',
-  components: { VideoCard, Recommend, HotList },
+  components: { VideoCard, HotList },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -125,28 +118,6 @@ export default {
         }
       }
     })
-
-    /*const query = this.$route.query
-    var nextId = query.nextId
-    if (nextId !== undefined) {
-      this.nextId = nextId
-    }
-
-    var pageNumber = query.pageNumber
-    if (pageNumber !== undefined) {
-      const pn = parseInt(pageNumber)
-      if (pn !== this.currentPage) {
-        this.currentPage = pn
-        this.$router.push({
-          path: '/video',
-          query: {
-            pageNumber: this.currentPage,
-            nextId: this.nextId
-          }
-        })
-      }
-    }*/
-
     this.videoPageWrapper(this.currentPage, this.prevId, this.nextId, this.categoryId)
   },
   mounted() {
@@ -199,6 +170,8 @@ export default {
       this.prevId = 0
       this.nextId = 0
       this.currentPage = 1
+
+      this.videoList = []
       this.videoPageWrapper(this.currentPage, this.prevId, this.nextId, this.categoryId)
     }
   }