视频控件 移动端

src/components/Adult/phonePreview/TinyModule.vue

@@ -112,7 +112,7 @@ export default {
 .Big-Book-prev-Tiny-phone {
   img {
     max-width: 100%;
-    max-height: fit-content;
+    height: auto;
   }
   .el-dialog__header,
   .el-dialog__body {

src/components/Adult/phonePreview/VideoControl.vue

@@ -30,7 +30,7 @@ export default {
     return {
       qxdShow: true,
       VideoStatus: "",
-      player: null,
+      player: null
     };
   },
   //计算属性 类似于data概念
@@ -38,7 +38,7 @@ export default {
   //监控data中数据变化
   watch: {
     player: {
-      handler: function () {
+      handler: function() {
         //do something
         // if (this.player._hasStart) {
         //this.zantingAudio()
@@ -47,16 +47,20 @@ export default {
           this.zantingAudio();
         });
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   //方法集合
   methods: {
     zantingAudio() {
       let audio = document.getElementsByTagName("audio");
-      if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
-        audio.forEach((item) => {
-            item.pause();
+      if (
+        audio &&
+        audio.length > 0 &&
+        window.location.href.indexOf("GCLS-Learn") == -1
+      ) {
+        audio.forEach(item => {
+          item.pause();
         });
       }
     },
@@ -80,7 +84,7 @@ export default {
       if (this.player._hasStart) {
         this.zantingAudio();
       }
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -106,13 +110,13 @@ export default {
         _this.curQue.img_list.length > 0 ? _this.curQue.img_list[0].id : "", //视频封面
       height: "100%",
       width: "100%",
-      keyShortcut: "off",
+      keyShortcut: "off"
     });
     // 设置清晰度
     _this.player.emit("resourceReady", [
       { name: "高清", url: _this.curQue.video_list[0].id },
       { name: "标清", url: _this.curQue.definition_list[1].id },
-      { name: "流畅", url: _this.curQue.definition_list[0].id },
+      { name: "流畅", url: _this.curQue.definition_list[0].id }
     ]);
     setTimeout(() => {
       let name = document.getElementsByClassName("name")[0];
@@ -139,16 +143,16 @@ export default {
   //生命周期-销毁完成
   destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
+  activated() {}
 };
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .videoView {
-  width: 780px;
-  height: 398px;
-  padding: 16px;
-  background: #ffffff;
+  width: 100%;
+  height: 200px;
+  padding: 0px;
+  // background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
   border-radius: 8px;
@@ -177,4 +181,11 @@ export default {
     opacity: 0;
   }
 }
-</style>
+</style>
+<style lang="scss">
+.xgplayer-skin-default .xgplayer-start,
+.xgplayer-skin-default .xgplayer-controls,
+.xgplayer-skin-default .xgplayer-poster {
+  z-index: 1;
+}
+</style>

src/components/Adult/preview/TinyModule.vue

@@ -58,10 +58,4 @@ export default {
     margin: 0;
   }
 }
-.Big-Book-prev-Tiny-phone {
-  img {
-    max-width: 100%;
-    max-height: fit-content;
-  }
-}
 </style>