zc

src/components/fullH5PlayerVideo/fullH5PlayerVideo.vue

@@ -25,6 +25,9 @@ import { iotCameraGetPreviewURLs } from '@/api/index'
     created() {
     },
     mounted() {
+      // 将全屏容器移到 body 直接子级，避免父容器 transform 创建的层叠上下文
+      // 导致 position:fixed 无法覆盖 Header 等元素
+      document.body.appendChild(this.$el);
       this.iotCameraGetPreviewURLs();
     },
     methods: {
@@ -179,6 +182,10 @@ import { iotCameraGetPreviewURLs } from '@/api/index'
     beforeDestroy() {
       let self = this
       self.videoOff()
+      // 移除挂载到 body 的元素
+      if (this.$el && this.$el.parentNode === document.body) {
+        document.body.removeChild(this.$el);
+      }
     }
   }
 </script>
@@ -188,7 +195,7 @@ import { iotCameraGetPreviewURLs } from '@/api/index'
     margin: 0;
     padding: 0;
     display: inline-block;
-    z-index:11;
+    z-index:10000;
     height: 100%;
     width:100%;
     position: fixed;

src/components/videoForMod/videoForMod.vue

@@ -63,12 +63,14 @@
       stopTime(cameraIndexCode){
         this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
         this.$set(this,'fullVideoType',true);
+        document.body.classList.add('video-fullscreen-active');
       },
       //全屏关闭-开启轮播
       outFullScreen(){
         let self = this;
         this.$set(this,'fullVideoType',false);
         this.$set(this,'fullVideoProps',{});
+        document.body.classList.remove('video-fullscreen-active');
       },
     }
   }

src/styles/global.scss

@@ -227,4 +227,13 @@ html, body {
 }
 .el-select-dropdown{
   max-width: 200px;
+}
+// 视频全屏时，确保全屏层在所有内容之上
+body.video-fullscreen-active {
+  .top-nav {
+    z-index: 0 !important;
+  }
+  .screen {
+    z-index: 0 !important;
+  }
 }