1

public/index.html

@@ -13,7 +13,7 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-      <!-- <script language=javascript>
+      <script language=javascript>
           // 禁止右键菜单
             document.oncontextmenu = function () { return false; };
             // 禁止文字选择
@@ -24,6 +24,6 @@
             document.oncut = function () { return false; };
             // 禁止粘贴
             document.onpaste = function () { return false; };
-      </script> -->
+      </script>
   </body>
 </html>

src/views/hallList/parts/kjpdlist.vue

@@ -46,7 +46,6 @@ export default {
     },
     //管理进入
     async adminBtn(item) {
-      console.log(this.user);
       if (this.user.room_id) {
         this.$router.push({ path: '/kjpdCenter/index', query: { num: '1' } });
       } else {

src/views/kjpdhall/index.vue

@@ -16,27 +16,26 @@
                   {{ info.title }}
                 </el-col>
                 <el-col :span="24" class="video">
-                  <!-- <video :src="videoUrl" autoplay="" controls="controls" controlsList="nodownload">
-                    您的浏览器不支持 video 标签。
-                  </video>
-                  <el-col :span="9" class="choose">
-                    <el-col :span="24" class="name">节目单</el-col>
-                    <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
-                      <p>{{ item.title }}</p>
-                    </el-col>
-                  </el-col> -->
-                  <el-col :span="17" class="left">
-                    <video :src="videoUrl" autoplay="" controls="controls" controlsList="nodownload">
+                  <el-col :span="18" class="left">
+                    <video :src="videoUrl" controls="" controlsList="nodownload">
                       您的浏览器不支持 video 标签。
                     </video>
                   </el-col>
-                  <el-col :span="7" class="right">
+                  <el-col :span="6" class="right">
                     <el-col :span="24" class="txt">
                       视频列表
                     </el-col>
                     <el-col :span="24" class="list">
-                      <el-col :span="24" class="videolist" v-for="(item, index) in videolist" :key="index" @click.native="show(item)">
-                        <p>{{ item.title }}</p>
+                      <el-col :span="24" class="videolist" v-for="(item, index) in videolist" :key="index" @click.native="show(item, index)">
+                        <el-col :span="12" class="listvideo">
+                          <video :src="item.file_path" controlsList="nodownload">
+                            您的浏览器不支持 video 标签。
+                          </video>
+                        </el-col>
+                        <el-col :span="12" class="listtxt">
+                          <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.title }}</p>
+                          <p>{{ item.start_time }}</p>
+                        </el-col>
                       </el-col>
                     </el-col>
                   </el-col>
@@ -84,10 +83,13 @@ export default {
       info: {},
       videoUrl: '',
       videolist: [],
+      menuIndex: '',
+      menuColor: 'rgb(64,158,255)',
     };
   },
   async created() {
     await this.search();
+    this.show(this.videolist[0], '0');
   },
   methods: {
     ...channel(['query', 'fetch', 'update', 'create', 'delete']),
@@ -105,8 +107,9 @@ export default {
         this.$set(this, `videolist`, res.data);
       }
     },
-    show(data) {
-      this.videoUrl = data.file_path;
+    show(data, index) {
+      this.menuIndex = index;
+      this.$set(this, `videoUrl`, data.file_path);
     },
   },
   computed: {
@@ -179,14 +182,45 @@ export default {
               height: 410px;
               overflow-y: auto;
               padding: 0 10px;
+              background-color: #000;
               .videolist {
-                height: 140px;
-                border: 1px dashed #ccc;
+                height: 100px;
+                border: 1px solid #fff;
                 border-radius: 5px;
-                p {
-                  text-align: center;
-                  font-size: 16px;
-                  padding: 25px 0;
+                margin: 5px 0 5px 0;
+                .listvideo {
+                  padding: 10px;
+                  video {
+                    width: 100%;
+                    height: 75px;
+                  }
+                }
+                .listtxt {
+                  color: #fff;
+                  p:nth-child(1) {
+                    padding: 15px 0 0 0;
+                    font-size: 14px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    -webkit-line-clamp: 2;
+                    word-break: break-all;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    height: 40px;
+                    font-weight: bold;
+                  }
+                  p:nth-child(2) {
+                    height: 20px;
+                    line-height: 28px;
+                  }
+                }
+              }
+              .videolist:hover {
+                cursor: pointer;
+                .listtxt {
+                  p:nth-child(1) {
+                    color: #409eff;
+                  }
                 }
               }
             }