安全管控-首页

src/views/NewPages/iframe4.vue

@@ -5,7 +5,7 @@
       <personnel></personnel>
     </div>
     <div class="iframe-2">
-      <div v-for="(pItem, pIndex) in videoArray" :key="pIndex" width="95%" height="48vh" @click="openVideoDialog(cItem)">
+      <div v-for="(pItem, pIndex) in videoArray" :key="pIndex" width="95%" height="48vh" @click="openVideoDialog(pItem)">
         <div class="mask"></div>
         <iframe :src="pItem.url + pItem.token" />
       </div>
@@ -16,16 +16,8 @@
     <div class="iframe-4">
       <!-- <personnel></personnel> -->
     </div>
-    <el-dialog top="50px" title="查看视频" :custom-class="videoDialogClass" v-model="showVideoDialog" width="80%" :destroy-on-close="true" :before-close="
-        (done) => {
-          videoDialogClass = 'modal animated a1 bounceOut';
-          delaylyFn(450, done);
-        }
-      " @closed="
-        dialogVideoUrl = '';
-        videoDialogClass = 'modal animated a1 bounceIn';
-      ">
-      <iframe class="videoBoxiframe" width="95%" height="800px" :src="dialogVideoUrl" />
+    <el-dialog top="50px" v-model="showVideoDialog" width="80vw" :destroy-on-close="true" :custom-class="videoDialogClass">
+      <iframe class="videoBoxiframe" width="100%" height="600px" :src="dialogVideoUrl" />
     </el-dialog>
   </div>
 </template>
@@ -76,7 +68,6 @@ export default {
   },
   methods: {
     openVideoDialog(item) {
-      alert(555);
       if (item.url && item.token) {
         this.dialogVideoUrl = item.url + item.token;
         this.showVideoDialog = true;
@@ -121,25 +112,27 @@ export default {
     flex: 0 0 36.69vw;
     margin-left: 11.9vw;
     margin-top: 5.5vh;
+    position: relative;
     div {
       display: flex;
       height: 18.2vh;
       width: 12.2vw;
       float: left;
+      position: relative;
       iframe {
         height: 18.2vh;
         width: 12.2vw;
         // float: left;
       }
-      // .mask {
-      //   flex: 0 0 100%;
-      //   position: absolute;
-      //   left: 0;
-      //   top: 0;
-      //   width: 100%;
-      //   height: 100%;
-      //   z-index: 5;
-      // }
+      .mask {
+        flex: 0 0 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 5;
+      }
     }
   }
   .iframe-3 {
@@ -152,5 +145,8 @@ export default {
       width: 100%;
     }
   }
+  .modal.el-dialog {
+    background: rgba(18, 29, 28, 0.95);
+    }
 }
 </style>