提交

1

src/views/liveClassManager/liveClassDetail.vue

@@ -125,8 +125,7 @@
           @click="opneVideo(item)"
         >
           <video width="110px" :src="item.url"></video>
-          <i class="el-icon-video-play linkIcon"></i
-          >
+          <i class="el-icon-video-play linkIcon"></i>
           <p :underline="false" type="text" class="lineTitle">
             {{ item.endTime | dateForMinFormat }}
           </p>
@@ -146,14 +145,26 @@
       v-if="videoVisible"
     >
       <!-- activeUrl -->
-      <video
-        style="width: 640px"
-        :src="activeVideo.url"
-        ref="dialogVideo"
-        controls="controls"
-      >
-        您的浏览器不支持视频播放
-      </video>
+      <div class="activeVideoWrap">
+        <video
+          v-if="activeVideo.os == 'mobile'"
+          style="width: 320px"
+          :src="activeVideo.url"
+          ref="dialogVideo"
+          controls="controls"
+        >
+          您的浏览器不支持视频播放
+        </video>
+        <video
+          v-else
+          style="width: 640px"
+          :src="activeVideo.url"
+          ref="dialogVideo"
+          controls="controls"
+        >
+          您的浏览器不支持视频播放
+        </video>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -308,19 +319,20 @@ export default {
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
-  justify-content: space-around;
+
 
   .linkItem {
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-right: 5px;
     cursor: pointer;
     position: relative;
     &:hover {
       color: var(--color-primary);
-      .lineTitle{
-         color: var(--color-primary);
-         font-weight: bold;
+      .lineTitle {
+        color: var(--color-primary);
+        font-weight: bold;
       }
     }
     .linkIcon {
@@ -328,7 +340,6 @@ export default {
       position: absolute;
       top: 30px;
       color: #fff;
-
     }
   }
   .lineTitle {
@@ -342,4 +353,9 @@ export default {
     border-radius: 4px;
   }
 }
+.activeVideoWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 </style>