直播详情改版

1

src/views/liveClassManager/liveClassDetail.vue

@@ -16,7 +16,11 @@
           <p class="teacherName sub">
             主题：<span>{{ detail.roomTitle }}</span>
           </p>
-          <el-button type="text" class="fontBtn" @click="payVisible = true" v-if=" videoList.length>0"
+          <el-button
+            type="text"
+            class="fontBtn"
+            @click="payVisible = true"
+            v-if="videoList.length > 0"
             >直播回放 <i class="el-icon-video-play"></i
           ></el-button>
         </el-row>
@@ -114,15 +118,17 @@
       title="直播回放"
     >
       <div class="lineWrap">
-        <el-link
-          :underline="false"
+        <div
+          class="linkItem"
           v-for="(item, index) in videoList"
           :key="index"
-          type="text"
-          class="line"
           @click="opneVideo(item)"
-          >{{ item.endTime | dateForMinFormat }}</el-link
         >
+          <video width="110px" :src="item.url"></video>
+          <p :underline="false" type="text" class="lineTitle">
+            {{ item.endTime | dateForMinFormat }}
+          </p>
+        </div>
       </div>
 
       <div slot="footer" class="dialog-footer">
@@ -130,15 +136,22 @@
         <el-button type="primary" @click="payVisible = false">确 定</el-button>
       </div></el-dialog
     >
-        <el-dialog :title="activeVideo.endTime | dateForMinFormat"
-               width="680px"
-               append-to-body
-               :visible.sync="videoVisible" v-if="videoVisible">
+    <el-dialog
+      :title="activeVideo.endTime | dateForMinFormat"
+      width="680px"
+      append-to-body
+      :visible.sync="videoVisible"
+      v-if="videoVisible"
+    >
       <!-- activeUrl -->
-      <video style="width:640px;"
-             :src="activeVideo.url"
-             ref="dialogVideo"
-             controls="controls">您的浏览器不支持视频播放</video>
+      <video
+        style="width: 640px"
+        :src="activeVideo.url"
+        ref="dialogVideo"
+        controls="controls"
+      >
+        您的浏览器不支持视频播放
+      </video>
     </el-dialog>
   </div>
 </template>
@@ -153,7 +166,7 @@ export default {
   data() {
     return {
       searchForm: {
-        search:''
+        search: "",
       },
       tableList: [],
       detail: {
@@ -175,8 +188,8 @@ export default {
       },
       videoList: [],
       payVisible: false,
-      videoVisible:false,
-      activeVideo:{ endTime:''}
+      videoVisible: false,
+      activeVideo: { endTime: "" },
     };
   },
   mounted() {
@@ -189,12 +202,12 @@ export default {
       this.$store.dispatch("delVisitedViews", this.$route);
     },
     search() {
-      this.rules.page =1
-        this.getList();
+      this.rules.page = 1;
+      this.getList();
     },
     onReSet() {
-      this.searchForm.search = ''
-      this.search()
+      this.searchForm.search = "";
+      this.search();
     },
     async getList() {
       try {
@@ -226,7 +239,7 @@ export default {
     },
     opneVideo(row) {
       this.activeVideo = row;
-      this.videoVisible = true
+      this.videoVisible = true;
     },
   },
 };
@@ -293,5 +306,30 @@ export default {
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
+  justify-content: space-around;
+
+  .linkItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    &:hover {
+      color: var(--color-primary);
+      .lineTitle{
+         color: var(--color-primary);
+         font-weight: bold;
+      }
+    }
+  }
+  .lineTitle {
+    height: 40px;
+    line-height: 40px;
+    color: rgba(102, 102, 102, 0.9);
+    padding: 0 17px;
+    overflow: hidden;
+    margin-bottom: 10px;
+    position: relative;
+    border-radius: 4px;
+  }
 }
 </style>