update HotVideo.vue

src/components/card/HotVideo.vue

@@ -5,14 +5,14 @@
       <span>热播排行</span>
     </div>
     <div
-      v-for="(video, index) in videos"
+      v-for="(video, index) in dataList"
       :key="index"
-      :title="video.vname"
+      :title="video.title"
       class="item"
     >
       <div :class="rank(index + 1)">{{ index + 1 }}</div>
-      <router-link target="_blank" :to="`/video/vlrQvVnAlJ`">
-        {{ video.vname }}
+      <router-link target="_blank" :to="`/video/${video.videoId}`">
+        <span style="left: 0;margin-bottom: 0px;color: blue;">{{ video.title | ellipsis }}</span>
       </router-link>
     </div>
   </el-card>
@@ -23,9 +23,19 @@ import { getHotVideo } from '@/api/video'
 
 export default {
   name: 'HotVideo',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 15
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
   data() {
     return {
-      videos: []
+      dataList: []
     }
   },
   computed: {
@@ -51,73 +61,10 @@ export default {
   created() {
     getHotVideo().then(res => {
       if (res.code === 0) {
-        console.log(res.data)
+        this.dataList = res.data
       } else {
       }
     })
-
-    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
-      }
-    ]
   },
   methods: {}
 }