修改左侧tab为供应链安全、iframe尺寸问题

.env.development

@@ -5,6 +5,6 @@ ENV = 'development'
 VUE_APP_BASE_API = '/dashboard'
 
 # VUE_APP_BASE_API2 = 'http://39.101.188.84:9027'
-VUE_APP_BASE_API2 = 'http://192.168.0.110:9035'
+# VUE_APP_BASE_API2 = 'http://192.168.0.110:9035'
-# VUE_APP_BASE_API2 = 'http://39.101.188.84:9035'
+VUE_APP_BASE_API2 = 'http://39.101.188.84:9035'
 BASE_API = 'http://10.10.3.35:9070'

src/router/index.js

@@ -53,7 +53,7 @@ export const constantRoutes = [
       // },
       {
         path: "supplyChain",
-        name: "供应链管理",
+        name: "供应链安全",
         component: (resolve) => {
           require(["@/views/privateOrder/supplyChain"], resolve);
         },

src/views/privateOrder/Screen.vue

@@ -114,7 +114,7 @@ export default {
       isActive: 0,
       menusTwo: [
         { id: 1, name: "态势感知", path: "/screen/security" },
-        { id: 2, name: "供应链管理", path: "/screen/supplyChain" },
+        { id: 2, name: "供应链安全", path: "/screen/supplyChain" },
         { id: 3, name: "处置与应急", path: "/screen/disposeMeet" },
       ],
       isShow: true,
@@ -188,22 +188,24 @@ export default {
   .left-tabs-box {
     position: absolute;
     left: 0px;
-    width: 50px;
+    width: 30px;
-    top: 15%;
+    top: 130px;
     background-color: transparent;
     z-index: 1000;
     display: flex;
     flex-direction: column;
+    background-color: #001832;
+    height: $iframeHeight;
     .nav_item_two {
       // width: 281px;
       // width: 250px;
       // height: 69px;
       // height: 50px;
-      width: 50px;
+      width: 30px;
       height: 250px;
       font-family: PangMenZhengDao;
-      font-size: 40px;
+      // font-size: 40px;
-      // font-size: 27px;
+      font-size: 27px;
       letter-spacing: 4px;
       display: flex;
       flex-wrap: wrap;
@@ -211,7 +213,7 @@ export default {
       justify-content: center;
       cursor: pointer;
       color: #85c9ff;
-      margin-bottom: 30px;
+      margin-bottom: 10px;
       // z-index: 1000;
       // display: inline-block; /* 使得 transform 属性生效 */
       // transform: rotate(90deg); /* 旋转90度 */
@@ -223,7 +225,7 @@ export default {
       // width: 250px;
       // height: 69px;
       // height: 50px;
-      width: 50px;
+      width: 30px;
       height: 250px;
       position: relative;
       // display: flex;
@@ -240,9 +242,9 @@ export default {
       content:'';
       position: absolute;
       left: 0;
-      top: -50px;
+      top: -30px;
       width: 250px;
-      height: 50px;
+      height: 30px;
       background: url("~@/assets/privateOrder/topNar/seleted_nav.png");
       background-size: 100% 100%;
       transform: rotate(90deg); /* 旋转90度 */

src/views/privateOrder/disposeMeet.vue

@@ -1,6 +1,10 @@
 <template>
-  <div>
+  <div class="iframeTwo">
-    <iframe :src="iframeSrc"  id="disposeMeet" allowtransparency="true" style="background-color: rgba(0, 24, 50, 0.5);"></iframe>
+    <div class="iframe-box">
+      <div class="test">
+        <iframe :src="iframeSrc"  id="disposeMeet" allowtransparency="true" style="background-color: rgba(0, 24, 50, 0.5);"></iframe>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -26,8 +30,41 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+// .iframeTwo {
+//   // background: url("~@/assets/privateOrder/common/bg-left.png") no-repeat;
+//   // background-size: 100% 100%;
+//   background-color: #001832;
+//   width: $ScreenWidth;
+//   height: $ScreenHeight;
+//   position: relative;
+// }
+.iframeTwo {
+  // background: url("~@/assets/privateOrder/common/bg-left.png") no-repeat;
+  // background-size: 100% 100%;
+  background-color: #001832;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .iframe-box {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 3;
+    width: $ScreenWidth;
+    height: $ScreenHeight;
+    .test {
+      width: $iframeWidth;
+      height: $iframeHeight;
+      margin: 130px 0 0 30px;
+    }
+  }
+}
 #disposeMeet {
-  width: $ScreenWidth;
+  width: $iframeWidth;
   height: $iframeHeight;
+  // margin-left: 20px;
+  // margin-top: 120px;
+  border: none;
 }
 </style>

src/views/privateOrder/supplyChain.vue

@@ -1,6 +1,11 @@
 <template>
-  <div>
+  <div class="iframeOne">
-    <iframe :src="iframeSrc" id="supplyChain" allowtransparency="true" style="background-color: rgba(0, 24, 50, 0.5);"></iframe>
+    <div class="iframe-box">
+      <div class="test">
+        <iframe :src="iframeSrc" id="supplyChain" allowtransparency="true" style="background-color: rgba(0, 24, 50, 0.5);"></iframe>
+        <!-- <iframe src="http://127.0.0.1:5501/html/index.html" id="supplyChain" allowtransparency="true" style="background-color: rgba(0, 24, 50, 0.5);"></iframe> -->
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -20,13 +25,38 @@ export default {
         console.log(res);
         this.iframeSrc = res.data;
       })
-    }
+    },
-  },
+  }
 }
 </script>
 <style lang="scss" scoped>
+.iframeOne {
+  // background: url("~@/assets/privateOrder/common/bg-left.png") no-repeat;
+  // background-size: 100% 100%;
+  background-color: #001832;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .iframe-box {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 3;
+    width: $ScreenWidth;
+    height: $ScreenHeight;
+    .test {
+      width: $iframeWidth;
+      height: $iframeHeight;
+      margin: 130px 0 0 30px;
+    }
+  }
+}
 #supplyChain {
-  width: $ScreenWidth;
+  width: $iframeWidth;
   height: $iframeHeight;
+  // margin-left: 20px;
+  // margin-top: 120px;
+  border: none;
 }
 </style>