菜单

src/views/map3d.vue

@@ -21,7 +21,7 @@
             <el-menu-item v-if="!item.children" :index="item.path">{{
               item.title
             }}</el-menu-item>
-            <el-submenu :index="index" v-if="item.children && item.children.length > 0">
+            <el-submenu class="left-submenu" :index="index" v-if="item.children && item.children.length > 0">
               <template slot="title">{{ item.title }}</template>
 
               <template v-for="(subitem, subindex) in item.children">
@@ -43,7 +43,7 @@
             <el-menu-item v-if="!item.children" :index="item.path">{{
               item.title
             }}</el-menu-item>
-            <el-submenu :index="index" v-if="item.children && item.children.length > 0">
+            <el-submenu  class="right-submenu":index="index" v-if="item.children && item.children.length > 0">
               <template slot="title">{{ item.title }}</template>
 
               <template v-for="(subitem, subindex) in item.children">
@@ -59,7 +59,7 @@
           </template>
         </el-menu>
       </div>
-      <div class="systemTitle">海南省国土空间智慧治理试点（三亚）</div>
+      <div class="systemTitle">海南省国土空间智慧治理试点（三亚）{{ activeIndex }}</div>
       <tool-bar></tool-bar>
       <!-- <div class="timeline">
         <div class="timeline-item" v-html="formattedText"></div>
@@ -110,7 +110,7 @@ export default {
       menu_left: [],
       menu_right: [],
 
-      activeIndex: 0,
+      // activeIndex: 0,
       formattedText: "",
       formattedTime: "",
       activeMenuId: 0,
@@ -121,7 +121,11 @@ export default {
   created() {
     this.GetRouters();
   },
-  computed: {},
+  computed: {
+    activeIndex() {
+      return this.$route.path;
+    },
+  },
   mounted() {
     //动态时间回显
     setInterval(() => {
@@ -466,7 +470,7 @@ export default {
   background-color: rgba(4, 16, 36, 0) !important;
   font-weight: 700;
 
-  .el-menu-item {
+  .el-menu-item,.is-opend {
     background-image: url("/static/images/overview/right_mune_button.png");
     background-size: 100% 100%;
     float: left;
@@ -489,12 +493,12 @@ export default {
 
   // 暂时隐藏
 
-  // .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%;
-  // }
+  .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%;
+  }
 
 }
 
@@ -518,7 +522,7 @@ export default {
 
 }
 
-.el-submenu,
+.left-submenu,
 .is-opend {
   background-image: url("/static/images/overview/left_mune_button.png");
   background-size: 100% 100%;
@@ -530,6 +534,18 @@ export default {
   width: 120px;
   margin-right: -1rem;
 }
+.right-submenu,
+.is-opend {
+  background-image: url("/static/images/overview/right_mune_button.png");
+  background-size: 100% 100%;
+  height: 34px;
+  line-height: 34px !important;
+  margin: 0;
+  border: none;
+  color: white;
+  width: 120px;
+  margin-right: -1rem;
+}
 
 .el-menu--popup .el-submenu {
   width: 100% !important;