guhongwei 4 年 前
コミット
7e1878c942
1 ファイル変更36 行追加8 行削除
  1. 36 8
      src/views/channel/detail.vue

+ 36 - 8
src/views/channel/detail.vue

@@ -7,7 +7,7 @@
         </el-col>
         <el-col :span="24" class="main">
           <el-col :span="24" class="video">
-            <video autoplay controls :src="videoUrl"></video>
+            <video controls="" controlsList="nodownload" :src="videoUrl"></video>
           </el-col>
           <el-col :span="24" class="text">
             <van-collapse v-model="activeNames">
@@ -31,7 +31,13 @@
             <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)">
-                  <p :class="{ active: changeColor == index }">{{ item.title }}</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>
                 </van-swipe-item>
               </van-swipe>
             </el-col>
@@ -185,15 +191,37 @@ export default {
       }
     }
     .two {
-      margin-top: 5px;
+      margin-top: 10px;
+      background: #000;
       .list {
-        text-align: center;
-        height: 105px;
-        padding: 1% 0;
-        background: #f1f1f1;
+        height: 90px;
+        padding: 1% 0px;
         border-radius: 5px;
-        p {
+        .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;
+          }
         }
       }
     }