fix

src/views/report/Index.vue

@@ -27,7 +27,7 @@ async function getReportClassify(){
             ...arr,
             {
                 id: -1,
-                classify_name: "ONLINE VEDIO",
+                classify_name: "Online Video",
                 child: videoResList
             },
             {

src/views/roadShow/List.vue

@@ -133,6 +133,13 @@ function goDetail(item){
     window.open(url.href,'_blank')
 }
 
+// 格式化视频时长
+function getVideoTime(e){
+    const minus = parseInt(e / 60);
+    const sec = parseInt(e % 60);
+    return `${minus > 9 ? minus : "0" + minus}:${sec > 9 ? sec : "0" + sec}`;
+}
+
 
 </script>
 
@@ -156,11 +163,22 @@ function goDetail(item){
                 >{{item.classify_name}}</span>
             </div>
         </div>
-        <div class="video-list-wrap">
+        <div class="mobile-nav-wrap">
+            <span :class="!listState.secClassifyId?'active':''" @click="handleChangeSecClassify({id:0})">All</span>
+            <span 
+                v-for="item in listState.secClassifyOpt" 
+                :key="item.id"
+                :class="item.id===listState.secClassifyId?'active':''"
+                @click="handleChangeSecClassify(item)"
+            >{{item.classify_name}}</span>
+        </div>
+        <div class="empty-box" v-if="listState.list.length==0&&listState.finished">no results</div>
+        <div class="video-list-wrap" v-else>
             <div class="item" v-for="item in listState.list" :key="item.id" @click="goDetail(item)">
                 <div class="multi-ellipsis-l2 title">{{item.title}}</div>
                 <div class="img">
                     <img :src="item.video_cover_url" alt="">
+                    <span class="time">{{getVideoTime(item.video_seconds)}}</span>
                 </div>
                 <div class="time">{{item.publish_time}}</div>
             </div>
@@ -207,6 +225,15 @@ function goDetail(item){
             }
         }
     }
+    .mobile-nav-wrap{
+        display: none;
+    }
+    .empty-box{
+        text-align: center;
+        color: #666;
+        font-size: 16px;
+        padding-top: 100px;
+    }
     .video-list-wrap{
         margin-top: 30px;
         display: flex;
@@ -217,8 +244,8 @@ function goDetail(item){
             padding: 37px 12px 30px 12px;
             border: 1px solid #E6E6E6;
             .title{
-                min-height: 46px;
-                padding-bottom: 10px;
+                min-height: 36px;
+                margin-bottom: 10px;
             }
             .time{
                 text-align: right;
@@ -237,6 +264,15 @@ function goDetail(item){
                 }
                 
                 position: relative;
+                .time{
+                    position: absolute;
+                    bottom: 10px;
+                    right: 10px;
+                    background-color: rgba(0, 0, 0, 0.3);
+                    color: #fff;
+                    font-size: 12px;
+                    padding: 4px 8px;
+                }
                 &::after{
                     content: '';
                     display: block;
@@ -260,23 +296,49 @@ function goDetail(item){
 }
 @media (max-width: 768px){
     .roadshow-list-page{
-        .first-nav-box{
+        .nav-warp{
+            display: none;
+        }
+        .mobile-nav-wrap{
+            display: flex;
             padding: 15px 20px 10px 20px;
             border-bottom: 1px solid #E6E6E6;
             width: 100vw;
             position: relative;
             left: -20px;
-            display: flex;
             overflow-x: auto;
             margin-bottom: 10px;
             span{
                 margin-right: 25px;
+                position: relative;
                 &.active::after{
+                    display: block;
+                    content: '';
+                    position: absolute;
                     bottom: -10px;
-                    height: 2px;
+                    width: 100%;
+                    height: 4px;
+                    background-color: var(--el-color-primary);
                 }
             }
         }
+        // .first-nav-box{
+        //     padding: 15px 20px 10px 20px;
+        //     border-bottom: 1px solid #E6E6E6;
+        //     width: 100vw;
+        //     position: relative;
+        //     left: -20px;
+        //     display: flex;
+        //     overflow-x: auto;
+        //     margin-bottom: 10px;
+        //     span{
+        //         margin-right: 25px;
+        //         &.active::after{
+        //             bottom: -10px;
+        //             height: 2px;
+        //         }
+        //     }
+        // }
         .video-list-wrap{
             display: block;
             .item{
@@ -287,7 +349,7 @@ function goDetail(item){
                 padding: 15px 0;
                 .title{
                     min-height: 0;
-                    padding-bottom: 5px;
+                    margin-bottom: 5px;
                 }
                 .img{
                     width: 100%;