1

src/views/channel/detail.vue

@@ -31,13 +31,15 @@
             <el-col :span="24" class="two">
               <van-swipe>
                 <van-swipe-item class="list" v-for="(item, index) in videodata" :key="index" @click="changevideo(index, item)">
-                  <el-col :span="12" class="listvideo">
+                  <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.title }}</p>
+                  <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.start_time }}</p>
+                  <!-- <el-col :span="12" class="listvideo">
                     <video :src="item.file_path" controlsList="nodownload"></video>
                   </el-col>
                   <el-col :span="12" class="listtxt">
                     <p :class="{ active: changeColor == index }">{{ item.title }}</p>
                     <p>{{ item.start_time }}</p>
-                  </el-col>
+                  </el-col> -->
                 </van-swipe-item>
               </van-swipe>
             </el-col>
@@ -78,7 +80,8 @@ export default {
       form: {},
       videodata: [],
       videoUrl: '',
-      changeColor: 0,
+      menuIndex: '',
+      menuColor: 'rgb(64,158,255)',
     };
   },
   async created() {
@@ -104,7 +107,7 @@ export default {
       }
     },
     changevideo(index, item) {
-      this.changeColor = index;
+      this.menuIndex = index;
       this.$set(this, `videoUrl`, item.file_path);
     },
     back() {
@@ -137,7 +140,7 @@ export default {
 
 <style lang="less" scoped>
 .active {
-  color: #409eff;
+  color: #ff0000;
 }
 .style {
   width: 100%;
@@ -192,37 +195,53 @@ export default {
     }
     .two {
       margin-top: 10px;
-      background: #000;
+      background: #000000;
+      border-radius: 10px;
       .list {
         height: 90px;
         padding: 1% 0px;
         border-radius: 5px;
-        .listvideo {
-          border: 1px solid #fff;
-          video {
-            width: 100%;
-            height: 90px;
-          }
-        }
-        .listtxt {
+        p {
           color: #fff;
-          padding: 0 10px;
-          font-size: 14px;
-          p:nth-child(1) {
-            font-size: 16px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            -webkit-line-clamp: 3;
-            word-break: break-all;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            font-weight: bold;
-          }
-          p:nth-child(2) {
-            height: 33px;
-            line-height: 50px;
-          }
+          padding: 5px 10px;
+          text-align: center;
+        }
+        p:nth-child(1) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 3;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          min-height: 10px;
+          max-height: 59px;
         }
+        // .listvideo {
+        //   border: 1px solid #fff;
+        //   video {
+        //     width: 100%;
+        //     height: 90px;
+        //   }
+        // }
+        // .listtxt {
+        //   color: #fff;
+        //   padding: 0 10px;
+        //   font-size: 14px;
+        //   p:nth-child(1) {
+        //     font-size: 16px;
+        //     overflow: hidden;
+        //     text-overflow: ellipsis;
+        //     -webkit-line-clamp: 3;
+        //     word-break: break-all;
+        //     display: -webkit-box;
+        //     -webkit-box-orient: vertical;
+        //     font-weight: bold;
+        //   }
+        //   p:nth-child(2) {
+        //     height: 33px;
+        //     line-height: 50px;
+        //   }
+        // }
       }
     }
   }