其他-首页，右上角六个厂视频。弹窗未实现

src/views/NewPages/iframe4.vue

@@ -1,30 +1,85 @@
 <template>
   <div class="iframe4">
-    <div class="back"></div>
-    <!-- <iframe src="https://www.baidu.com/" frameborder="0" class="iframe-1"></iframe>
-      <iframe src="http://10.75.17.10/doc/page/preview.asp" frameborder="0" class="iframe-2"></iframe>
-      <iframe src="https://www.baidu.com/" frameborder="0" class="iframe-3"></iframe>
-      <iframe src="https://www.baidu.com/" frameborder="0" class="iframe-4"></iframe> -->
+    <!-- <iframe src="http://10.75.17.10/doc/page/preview.asp" frameborder="0" class="iframe-2"></iframe> -->
     <div class="iframe-1">
       <personnel></personnel>
     </div>
-    <iframe src="http://10.75.17.10/doc/page/preview.asp" frameborder="0" class="iframe-2"></iframe>
-    <iframe src="http://192.168.1.52/webiui/#/online" frameborder="0" class="iframe-3"></iframe>
+    <div class="iframe-2">
+      <div v-for="(pItem, pIndex) in videoArray" :key="pIndex" width="95%" height="48vh" @click="openVideoDialog(cItem)">
+        <div class="mask"></div>
+        <iframe  :src="pItem.url + pItem.token" />
+      </div>
+    </div>
+    <!-- <iframe src="http://192.168.1.52/webiui/#/online" frameborder="0" class="iframe-3"></iframe> -->
     <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>
   </div>
 </template>
 
 <script>
-// src\views\NewPages\iframe4.vue
-// src\views\NewPages\personnel.vue
 import personnel from "./personnel.vue";
+import PanelSand from "@com/coms/panel/panel-sand.vue";
 export default {
   setup() {},
-  components: { personnel },
+  components: { personnel, PanelSand },
   data() {
-    return {};
+    return {
+      showVideoDialog: false,
+      dialogVideoUrl: "",
+      videoArray: [
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=SBQ_FDC_SC&autoplay=true",
+          switch: true,
+        },
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=NSS_FDC_SC&autoplay=true",
+          switch: true,
+        },
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=QS_FDC_SC&autoplay=true",
+          switch: true,
+        },
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=MHS_FDC_SC&autoplay=true",
+          switch: true,
+        },
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=XS_FDC_SC&autoplay=true",
+          switch: true,
+        },
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=PL_GDC_SC&autoplay=true",
+          switch: true,
+        },
+      ],
+    };
+  },
+  methods: {
+    openVideoDialog(item) {
+      alert(555);
+      if (item.url && item.token) {
+        this.dialogVideoUrl = item.url + item.token;
+        this.showVideoDialog = true;
+      }
+    },
   },
   created() {},
 };
@@ -32,51 +87,47 @@ export default {
 
 <style lang="less">
 .iframe4 {
-  .back {
-    position: fixed;
-    z-index: -1;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    background: url(../../assets/background-iframe4.png) no-repeat;
-    background-size: 100% 100%;
-  }
-
+  // width: 98.5vw;
+  // height: 98.5vh;
+  background: url(../../assets/background-iframe4.png) no-repeat;
+  background-size: 100% 100%;
+  background-position-y: -5.1vh;
+  display: flex;
+  /* flex-wrap: wrap; */
+  height: 98vh;
   .iframe-1,
   .iframe-2,
   .iframe-3,
   .iframe-4 {
-    position: fixed;
-    z-index: 1;
-    width: 37.4vw;
+    // position: fixed;
+    // z-index: 1;
+    width: 36.8vw;
     height: 37.31vh;
   }
 
-  .iframe-1,
-  .iframe-3 {
-    left: 6.61vw;
-  }
-
-  .iframe-1,
-  .iframe-2 {
-    top: 10.74vh;
-  }
-
-  .iframe-2,
-  .iframe-4 {
-    left: 56.09vw;
-  }
-
-  .iframe-3,
-  .iframe-4 {
-    top: 57.31vh;
-  }
   .iframe-1 {
+    margin-left: 6.5vw;
+    margin-top: 5.3vh;
     .personnel {
-      height: calc(37vh);
+      height: calc(36.6vh);
       .personnel-box-item {
-        width: 11.71vw;
+        width: 11.5vw;
+      }
+    }
+  }
+  .iframe-2 {
+    flex: 0 0 36.69vw;
+    margin-left: 11.9vw;
+    margin-top: 5.5vh;
+    div{
+      display: flex;
+      height: 18.2vh;
+      width: 12.2vw;
+      float: left;
+      iframe {
+        height: 18.2vh;
+        width: 12.2vw;
+        // float: left;
       }
     }
   }