导航栏修改

src/views/map3d.vue

@@ -32,7 +32,7 @@
           </template>
         </el-menu>
 
-        <el-menu :default-active="activeIndex" class="el-menu-demo1" mode="horizontal" @select="handleMenuSelect"
+        <el-menu :default-active="activeIndex" class="el-menu-demo1" mode="horizontal" @select="handleMenuSelect1"
           background-color="rgb(4,16,36)" text-color="white" active-text-color="white">
           <template v-for="(item, index) in menu_right">
             <el-menu-item v-if="!item.children" :index="item.path">{{
@@ -54,7 +54,7 @@
           </template>
         </el-menu>
       </div>
-      <!-- <div class="systemTitle">海南省国土空间智慧治理试点</div> -->
+      <div class="systemTitle">海南省国土空间智慧治理试点（三亚）</div>
       <tool-bar></tool-bar>
       <!-- <div class="timeline">
         <div class="timeline-item" v-html="formattedText"></div>
@@ -106,7 +106,25 @@ export default {
       this.$refs.routeViewRef['switch']()
     },
     handleMenuSelect(item) {
+      console.log(item);
+
       this.$router.push({ path: item });
+      // 菜单切换的时候取消左或者右高亮菜单
+      // var lis = document.querySelectorAll('.el-menu-demo1 li');
+      // console.log(lis, "lis");
+
+      // lis.forEach(function (li) {
+      //   li.classList.remove('is-active');
+      // });
+    },
+    handleMenuSelect1(item) {
+
+
+      this.$router.push({ path: item });
+      // var lis = document.querySelectorAll('.el-menu-demo li');
+      // lis.forEach(function (li) {
+      //   li.classList.remove('is-active');
+      // });
     },
     updateTime() {
       let s = new Date().toLocaleString().split(" ");
@@ -127,7 +145,7 @@ export default {
         this.menu_left = res.data[0].children.slice(0, 3);
         this.menu_right = res.data[0].children.slice(3, 5);
 
-        // console.log(this.menu);
+        console.log(this.menu_left, "eqweqwe");
         let curRouter = this.$router.currentRoute.path;
         if (curRouter == "/") {
           this.activeIndex = this.menu[0].path;
@@ -202,23 +220,28 @@ export default {
   top: 0px;
   width: 100%;
   z-index: 999999;
-  background: rgb(4, 16, 36);
+  // background: RGBA(31, 35, 41, 1);
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: url("/static/images/overview/导航栏.png");
+  background-image: url("/static/images/overview/title_new.png");
   background-size: 100% 100%;
 }
 
 .systemTitle {
   height: 100%;
-  width: 338px;
+  width: 430;
   position: absolute;
   top: 0px;
   line-height: 60px;
   font-size: 25px;
-  color: white;
+  // color: white;
+  background: linear-gradient(180deg, rgba(212, 250, 255, 1) 10%, rgba(54, 215, 215, 1) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-family: auto;
+  font-weight: 600;
 }
 
 .menuClass {
@@ -294,7 +317,8 @@ export default {
   position: relative;
   left: 8rem;
   background-color: rgba(4, 16, 36, 0) !important;
-
+  position: fixed;
+  left: 14.5rem;
 
   .el-menu--horizontal>.el-menu-item.is-active,
   .el-menu-item.is-active,
@@ -309,9 +333,9 @@ export default {
   border: none !important;
   height: 100%;
   background-color: transparent;
-  position: absolute;
-  right: -77rem;
-  top: 0rem;
+  position: fixed;
+  right: 22.3rem;
+  top: 1.3rem;
   background-color: rgba(4, 16, 36, 0) !important;
 
   .el-menu-item {
@@ -324,6 +348,7 @@ export default {
     border: none;
     color: white;
     width: 120px;
+    margin-right: -1.2rem;
   }
 
   .el-menu-item:hover {
@@ -333,10 +358,14 @@ export default {
 
   }
 
-  .el-submenu.is-active {
-    background-image: url("/static/images/overview/right_mune_button_click.png");
-    background-size: 100% 100%;
-  }
+  // 暂时隐藏
+
+  // .el-menu--horizontal>.el-menu-item.is-active,
+  // .el-menu-item.is-active,
+  // .el-submenu.is-active {
+  //   background-image: url("/static/images/overview/right_mune_button_click.png");
+  //   background-size: 100% 100%;
+  // }
 
 }
 
@@ -350,6 +379,7 @@ export default {
   border: none;
   color: white;
   width: 120px;
+  margin-right: -1.2rem;
 }
 
 .el-menu-item:hover {
@@ -369,6 +399,7 @@ export default {
   border: none;
   color: white;
   width: 120px;
+  margin-right: -1.2rem;
 }
 
 .el-menu--popup .el-submenu {