头部导航栏修改

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 class="left-submenu" :index="index" v-if="item.children && item.children.length > 0">
+            <el-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">
@@ -38,12 +38,12 @@
         </el-menu>
 
         <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">
+          background-color="rgb(4,16,36,0)" 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">{{
               item.title
             }}</el-menu-item>
-            <el-submenu  class="right-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">
@@ -110,7 +110,7 @@ export default {
       menu_left: [],
       menu_right: [],
 
-      // activeIndex: 0,
+      activeIndex: 0,
       formattedText: "",
       formattedTime: "",
       activeMenuId: 0,
@@ -121,11 +121,7 @@ export default {
   created() {
     this.GetRouters();
   },
-  computed: {
-    activeIndex() {
-      return this.$route.path;
-    },
-  },
+  computed: {},
   mounted() {
     //动态时间回显
     setInterval(() => {
@@ -374,34 +370,6 @@ export default {
   top: 20px;
 }
 
-.menu {
-  display: inline-block;
-  width: 108px;
-  height: 100%;
-  line-height: 35px;
-  margin-left: 9px;
-  cursor: pointer;
-  background-image: url("/static/images/overview/menu.png");
-  background-size: 100% 100%;
-}
-
-.activemenu {
-  display: inline-block;
-  width: 108px;
-  height: 100%;
-  line-height: 35px;
-  margin-left: 9px;
-  cursor: pointer;
-  background-image: url("/static/images/overview/menuactive.png");
-  background-size: 100% 100%;
-}
-
-.menu:hover,
-.activemenu:hover {
-  /* background: blue; */
-  font-weight: bold;
-}
-
 .timeline {
   position: absolute;
   left: 11px;
@@ -470,7 +438,7 @@ export default {
   background-color: rgba(4, 16, 36, 0) !important;
   font-weight: 700;
 
-  .el-menu-item,.is-opend {
+  .el-menu-item {
     background-image: url("/static/images/overview/right_mune_button.png");
     background-size: 100% 100%;
     float: left;
@@ -484,21 +452,21 @@ export default {
     margin-right: -0.8vw;
   }
 
-  .el-menu-item:hover {
-    font-weight: bold;
-    color: white !important;
-    background-image: url("/static/images/overview/right_mune_button_click.png");
+  // .el-menu-item:hover {
+  //   font-weight: bold;
+  //   color: white !important;
+  //   background-image: url("/static/images/overview/right_mune_button_click.png");
 
-  }
+  // }
 
-  // 暂时隐藏
+  // // 暂时隐藏
 
-  .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%;
+  // }
 
 }
 
@@ -522,7 +490,7 @@ export default {
 
 }
 
-.left-submenu,
+.el-submenu,
 .is-opend {
   background-image: url("/static/images/overview/left_mune_button.png");
   background-size: 100% 100%;
@@ -547,6 +515,28 @@ export default {
   margin-right: -1rem;
 }
 
+// .right-submenu{
+//   /deep/.el-menu-item {
+//     background-image: url("/static/images/overview/right_mune_button.png") !important;
+//   background-size: 100% 100%;
+//   float: left;
+//   height: 37px;
+//   line-height: 43px !important;
+//   margin: 0;
+//   border: none;
+//   color: white;
+//   width: 120px;
+//   margin-right: -1vw;
+// }
+// }
+
+// .right-submenu,.el-menu-item:hover {
+//   font-weight: bold;
+//   color: white !important;
+//   background-image: url("/static/images/overview/right_mune_button_click.png");
+
+// }
+
 .el-menu--popup .el-submenu {
   width: 100% !important;