refactor:头部切换按钮移除引发的样式调整问题解决

src/components/base-main/base-main.vue

@@ -22,7 +22,7 @@ export default {
 <style lang="scss" scoped>
 .baseMainContainer{
     width: px-to-rem(361);
-    margin: px-to-rem(10) px-to-rem(19);
+    margin: px-to-rem(15) px-to-rem(19);
     .header{
         background:url('@/assets/image/common/header-bg.png') no-repeat;
         background-size: contain;
@@ -44,7 +44,7 @@ export default {
     }
     .content-area{
         width: px-to-rem(360);
-        min-height: px-to-rem(252);
+        min-height: px-to-rem(264);
         background: url('@/assets/image/common/areaBg.png') no-repeat 0 0 / 100% 100%;
     }
 }

src/views/components/layerList/index.vue

@@ -27,15 +27,9 @@
 
 <script>
 import * as mars3d from 'mars3d'
-import { mapState } from 'vuex'
 let layerCache = {}
 export default {
   name: 'LayerListView',
-  mounted() {
-    this.$globalEventBus.$on('toggleLeftPanel', (val) => {
-      this.leftPanelHide = val
-    })
-  },
   data() {
     return {
       leftPanelHide: false,
@@ -83,18 +77,22 @@ export default {
             { id: '3-3', label: '兴平市汤坊龙兴1区采砂区', meta: { type: 'polygon', url: '/geojson/longxing.geojson' } }
           ]
         }
-      ]
+      ],
+      mainMenu:''
     }
   },
-  computed: {
-    ...mapState({
-      mainMenu: (state) => state.home.mainMenu
+    created(){
+    this.mainMenu = this.$route.params.menu
+  },  
+  mounted() {
+    this.$globalEventBus.$on('toggleLeftPanel', (val) => {
+      this.leftPanelHide = val
     })
   },
   watch: {
     mainMenu: {
       handler(val) {
-        if (val === '水文信息') {
+        if (val === 'hydrologicInfo') {
           this.handleData(true)
         } else {
           this.handleData(false)

src/views/comprehensive-overview/left.vue

@@ -165,7 +165,7 @@ export default {
 <style lang="scss" scoped>
 .comprehensive-container {
   position: absolute;
-  top: px-to-rem(66);
+  top: px-to-rem(30);
   z-index: 1;
   left: px-to-rem(-4);
   .main-container {
@@ -176,7 +176,7 @@ export default {
         width: 100%;
       }
       :deep(.el-image__inner) {
-        height: px-to-rem(166);
+        height: px-to-rem(182);
         width: 100%;
       }
       .txt {
@@ -268,8 +268,8 @@ export default {
     font-weight: bold;
     font-size: px-to-rem(14);
     color: #ffffff;
-    margin-top: px-to-rem(6);
-    padding-bottom: px-to-rem(6);
+    margin-top: px-to-rem(15);
+    padding-bottom: px-to-rem(10);
     border-bottom: px-to-rem(1) solid #5980a9;
   }
   .base-info-card {
@@ -337,6 +337,7 @@ export default {
     display: flex;
     justify-content: space-between;
     padding: 0 px-to-rem(10);
+    margin-top: px-to-rem(9);
     .area {
       align-items: center;
       display: flex;

src/views/comprehensive-overview/right.vue

@@ -106,7 +106,7 @@ export default {
 <style lang="scss" scoped>
 .comprehensive-container{
     position: absolute;
-    top: px-to-rem(66);
+    top: px-to-rem(30);
     z-index: 1;
     .sw-container{
         padding: px-to-rem(59) px-to-rem(12) px-to-rem(70) px-to-rem(16);

src/views/hydrologic-info/left.vue

@@ -192,7 +192,7 @@ export default {
 <style lang="scss" scoped>
 .hydrologic-container {
   position: absolute;
-  top: px-to-rem(66);
+   top: px-to-rem(30);
   z-index: 1;
   left: px-to-rem(-4);
   .dateRadio {

src/views/hydrologic-info/right.vue

@@ -342,7 +342,7 @@ export default {
 <style lang="scss" scoped>
 .hydrologic-container {
   position: absolute;
-  top: px-to-rem(66);
+   top: px-to-rem(30);
   z-index: 1;
   left: px-to-rem(-4);
   .dateRadio {

src/views/index.vue

@@ -6,7 +6,9 @@
     <el-container class="content-container">
       <el-main>
         <div class="home-view">
-          <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
+          <keep-alive>
+            <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
+          </keep-alive>
           <LayerListPanel></LayerListPanel>
           <SandMonitorLeft v-if="this.mainMenu === 'sandMonitor'"></SandMonitorLeft>
           <SandMonitorRight v-if="this.mainMenu === 'sandMonitor'"></SandMonitorRight>

src/views/smart-early-warning/left.vue

@@ -136,10 +136,10 @@ export default {
 <style lang="scss" scoped>
 .warning-container {
   position: absolute;
-  top: px-to-rem(66);
+   top: px-to-rem(30);
   z-index: 1;
   left: px-to-rem(-4);
-  height: calc(100% - px-to-rem(75));
+  height: calc(100% - px-to-rem(55));
   :deep(.baseMainContainer) {
     height: inherit;
     .content-area {

src/views/smart-early-warning/right.vue

@@ -170,10 +170,10 @@ export default {
 <style lang="scss" scoped>
 .warning-container {
   position: absolute;
-  top: px-to-rem(66);
+   top: px-to-rem(30);
   z-index: 1;
   left: px-to-rem(-4);
-  height: calc(100% - px-to-rem(75));
+  height: calc(100% - px-to-rem(55));
   :deep(.baseMainContainer) {
     height: inherit;
     .content-area {
@@ -223,7 +223,7 @@ export default {
       border-bottom: 0;
     }
     :deep(.el-collapse-item__content) {
-      padding: px-to-rem(8) px-to-rem(0);
+      padding: px-to-rem(13) px-to-rem(0);
     }
   }
 }