背景蒙版样式调整

src/components/Viewer/smViewer.scss

@@ -5,6 +5,11 @@
     overflow: hidden;
     width: 100%;
     height: 100%;
+    // width: 66rem;
+    // height: 34.5rem;
+    // position: absolute;
+    // left: 27rem;
+    // top: 9%;
 
     // width: 100%;
     // height: 100%;

src/components/Viewer/smViewer.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="cesiumContainer" class="cockpitNew" :class="isbig ? 'cesiumbig' : ''" ref="viewer">
-    <i class="cesiumbtn" :class="isbig ? 'el-icon-aim' : 'el-icon-rank'" :title="isbig ? '缩小' : '放大'"
+  <div id="cesiumContainer" class="cockpitNew" :class="isbig|| $props.isdefaultbig ? 'cesiumbig' : ''" ref="viewer">
+    <i class="cesiumbtn" v-if="!$props.isdefaultbig" :class="isbig ? 'el-icon-aim' : 'el-icon-rank'" :title="isbig ? '缩小' : '放大'"
       @click="viewerChange"></i>
     <!-- 工具选择组件 -->
     <!-- <tool-bar></tool-bar>
@@ -32,6 +32,10 @@ export default {
       //是否折叠
       type: Boolean,
     },
+    isdefaultbig:{
+      //是否默认最大
+      type: Boolean,
+    }
   },
   data() {
     return {

src/views/cockpitNew1/bjxm.vue

@@ -278,6 +278,7 @@ export default {
   border-radius: 0px;
   -webkit-box-shadow: none;
   box-shadow: none;
+  z-index: 100;
 }
 
 .title {

src/views/cockpitNew1/borderTemplate.vue

@@ -17,13 +17,13 @@
 export default {
   name: "borderTemplate",
   props: {
-    titleName: ""
+    titleName: "",
   },
   data() {
     return {};
   },
   mounted() {},
-  methods: {}
+  methods: {},
 };
 </script>
 <style lang="scss" scoped>
@@ -36,6 +36,7 @@ export default {
   height: calc((100% - 52px) / 3);
   display: -ms-flexbox;
   display: flex;
+  z-index: 100;
 
   .title {
     border-width: 0px;

src/views/cockpitNew1/gkzb.vue

@@ -217,6 +217,7 @@ export default {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
+  z-index: 100;
 }
 
 .title {

src/views/cockpitNew1/hysy.vue

@@ -409,6 +409,7 @@ export default {
     width: 416px;
     height: 310px;
     display: flex;
+    z-index: 100;
 }
 
 

src/views/cockpitNew1/tdsc.vue

@@ -642,6 +642,7 @@ export default {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
+  z-index: 100;
 }
 
 .title {

src/views/cockpitNew1/tdsy.vue

@@ -1060,6 +1060,7 @@ export default {
   left: 434px;
   top: 68%;
   width: 640px;
+  z-index: 100;
 
   .box1 {
     border-width: 0px;

src/views/map3d.vue

@@ -81,11 +81,10 @@
     <div class="routerContainer">
       <router-view ref="routeViewRef"></router-view>
     </div>
-    <sm-viewer @viewerChange="viewerChange"> </sm-viewer>
+    <sm-viewer @viewerChange="viewerChange" :isdefaultbig="true"> </sm-viewer>
     <!-- <div class="masking_top">
       <div class="top_left"></div>
       <div class="top_right"></div>
-asdasd
     </div>
     <div class="masking_left"></div>
     <div class="masking_bottom"></div>

src/views/viewer.vue

@@ -1,5 +1,10 @@
 <template>
-    <div v-show="flag">
+    <div v-show="flag" class="viewer">
+        <div class="bg">
+            <div class="bg_left"></div>
+            <div class="bg_right"></div>
+            <div class="bg_bottom"></div>
+        </div>
         <datePicker @dateChange="dateChange"></datePicker>
         <ser-center></ser-center>
         <GKZB ref="gkzb_ref"/>
@@ -382,4 +387,37 @@ export default {
     deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
-<style  scoped></style>
+<style  scoped lang="scss" >
+.viewer{
+    width: 100%;
+    height: 100%;
+}
+.bg{
+    width: 100%;
+    height: 100%;
+    .bg_left{
+        width: 21.6%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        z-index: 100;
+        background: linear-gradient(to right, rgba(6, 37, 66, 1), rgba(26, 28, 53, 0));
+    }
+    .bg_right{
+        width: 21.6%;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        z-index: 100;
+        background: linear-gradient(to left, rgba(6, 37, 66, 1), rgba(26, 28, 53, 0));
+    }
+    .bg_bottom{
+        width: 100%;// 56.8%;
+        height: 30%;
+        position: absolute;
+        // left: 21.6%;
+        bottom:0;
+        z-index: 100;
+        background: linear-gradient(to top, rgba(6, 37, 66, 0.5), rgba(26, 28, 53, 0));
+    }
+}</style>