yb8.0提测

src/views/video/List.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {ref,reactive,onMounted,onActivated} from 'vue'
-import { useRouter } from 'vue-router'
+import { useElementSize } from '@vueuse/core'
 
 import {apiFICCPermissionList,apiGetWechatQRCode} from '@/api/common'
 import {apiVideoList} from '@/api/video'
@@ -8,8 +8,9 @@ import {apiVideoList} from '@/api/video'
 import SelfList from '@/components/SelfList.vue'
 
 
-const router=useRouter()
-
+//监听列表页面版心宽度
+const listPageEl=ref('')
+const {width}=useElementSize(listPageEl)
 
 // 获取品种权限数据
 let permissionState=reactive({
@@ -122,8 +123,8 @@ onActivated(()=>{
 </script>
 
 <template>
-    <div class="video-list-page">
-        <div class="top-nav-box">
+    <div class="video-list-page" ref="listPageEl">
+        <div class="top-nav-box" :style="{width:width+'px'}">
             <div class="first-nav-box">
                 <span 
                     v-for="item in permissionState.firstNavList" 
@@ -160,13 +161,12 @@ onActivated(()=>{
             </div>
         </div>
         <SelfList 
-            
             :finished="listState.finished" 
             :isEmpty="listState.list.length===0&&listState.finished"
             :loading="listState.loading"
             @listOnload="onLoad"
         >
-            <div class="flex list-wrap" >
+            <div class="flex list-wrap">
                 <div class="video-item" v-for="item in listState.list" :key="item.community_video_id">
                     <el-popover
                         :width="200"
@@ -188,7 +188,6 @@ onActivated(()=>{
                     <div class="time">发布时间：{{item.publish_time}}</div>
                 </div>
             </div>
-            
         </SelfList>
     </div>
 </template>
@@ -271,13 +270,18 @@ onActivated(()=>{
     }
 
     .list-wrap{
-        margin-top: 150px;
+        padding-top: 150px;
+        border-left: 1px solid #E2E2E2;
+        border-right: 1px solid #E2E2E2;
         flex-wrap: wrap;
         .video-item{
             width: 50%;
             padding: 30px;
-            border: 1px solid #E2E2E2;
+            border-bottom: 1px solid #E2E2E2;
             position: relative;
+            &:nth-of-type(odd){
+                border-right: 1px solid #E2E2E2;
+            }
             .title{
                 font-size: 16px;
                 color: #666;