背景蒙板

src/App.vue

@@ -1,6 +1,10 @@
 <template>
-  <div id="app">
-    <router-view />
+  <div style="    width: 100%;
+    background: rgb(6, 37, 66);
+    height: 100%;">
+    <div id="app">
+      <router-view />
+    </div>
   </div>
 </template>
 
@@ -10,8 +14,13 @@ export default {
 };
 </script>
 <style lang="scss">
-// #app {
-//   background-image: url("/static/images/overview/驾驶背景遮罩.png");
-
-// }
+#app {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background-image:
+    radial-gradient(RGBA(54, 130, 198, 0.4) 50%, rgba(28, 61, 104, 0.4) 70%, rgba(32, 54, 77, 0.4) 90%);
+}
 </style>

src/views/cockpitNew1/hysy.vue

@@ -291,6 +291,7 @@ export default {
     top: 1rem;
     width: 32rem;
     height: 14rem;
+    display: none;
 }
 
 .box {

src/views/cockpitNew1/tdsc.vue

@@ -5,6 +5,15 @@
       <span>土地收储</span>
     </div>
     <div class="content">
+      <div class="icon_info">
+
+      </div>
+      <div class="info_left">
+
+      </div>
+      <div class="info_main">
+
+      </div>
 
     </div>
     <div id="tdsc_echart">
@@ -467,8 +476,8 @@ export default {
   background: no-repeat;
   width: 100%;
   height: 44px;
-  border: 1px solid red;
-  // background-image: url("/static/images/overview/info.jpg");
+  // border: 1px solid red;
+  position: relative;
 }
 
 #tdsc_echart {
@@ -485,4 +494,40 @@ export default {
   width: 32rem;
   height: 11rem;
 }
+
+.icon_info {
+  background: no-repeat;
+
+  background-image: url("/static/images/overview/icon_info.png");
+  display: inline-block;
+  width: 2rem;
+  height: 3rem;
+  position: absolute;
+  left: 1.23rem;
+  top: 0.5rem;
+}
+
+.info_left {
+  background: no-repeat;
+
+  background-image: url("/static/images/overview/info_left.png");
+  display: inline-block;
+  width: 10rem;
+  height: 2.5rem;
+  background-size: 100%;
+  position: absolute;
+  left: 2rem;
+}
+
+.info_main {
+  background: no-repeat;
+
+  background-image: url("/static/images/overview/info_main.png");
+  display: inline-block;
+  width: 13rem;
+  height: 2.5rem;
+  background-size: 100%;
+  position: absolute;
+  left: 12rem;
+}
 </style>

src/views/map3d.vue

@@ -77,10 +77,14 @@
       <router-view ref="routeViewRef"></router-view>
     </div>
     <sm-viewer @viewerChange="viewerChange"> </sm-viewer>
+    <!-- <div class="masking_top">
+      <div class="top_left"></div>
+      <div class="top_right"></div>
 
+    </div>
     <div class="masking_left"></div>
     <div class="masking_bottom"></div>
-    <div class="masking_right"></div>
+    <div class="masking_right"></div> -->
 
   </div>
 </template>
@@ -256,10 +260,30 @@ export default {
   align-items: center;
   background-image: url("/static/images/overview/title_new.png");
 
-  // background-image: url("/static/images/overview/masking_top.png");
   background-size: 100% 100%;
 }
 
+.masking_top {
+  height: 60px;
+  position: fixed;
+  top: 0px;
+  width: 100%;
+  background: no-repeat;
+
+  // // background-image: url("/static/images/overview/masking_top.png");
+  // .top_left {
+  //   height: 100%;
+  //   width: 29%;
+  //   background: -webkit-linear-gradient(left, RGBA(11, 32, 61, 1), RGBA(8, 40, 60, 1));
+  // }
+
+  // .top_right {
+  //   background: -webkit-linear-gradient(right, RGBA(8, 40, 60, 1), RGBA(11, 32, 61, 1));
+
+  // }
+
+}
+
 .masking_left {
   width: 415px;
   height: 100%;
@@ -284,7 +308,10 @@ export default {
   height: 100%;
   background: no-repeat;
   background-image: url("/static/images/overview/masking_right.png");
-
+  position: fixed;
+  right: -1rem;
+  top: 1rem;
+  z-index: 1;
 }
 
 .systemTitle {
@@ -383,6 +410,7 @@ export default {
   background-color: rgba(4, 16, 36, 0) !important;
   position: fixed;
   left: 14.5rem;
+  font-weight: 700;
 
   .el-menu--horizontal>.el-menu-item.is-active,
   .el-menu-item.is-active,
@@ -401,6 +429,7 @@ export default {
   right: 22.3rem;
   top: 1.3rem;
   background-color: rgba(4, 16, 36, 0) !important;
+  font-weight: 700;
 
   .el-menu-item {
     background-image: url("/static/images/overview/right_mune_button.png");
@@ -505,4 +534,5 @@ export default {
   background-color: transparent !important;
   border: none !important;
   text-align: center !important;
-}</style>
+}
+</style>