Browse Source

菜单修改

shilin 3 years atrás
parent
commit
a4d05d5d2f
2 changed files with 510 additions and 500 deletions
  1. 48 51
      src/views/layout/Header.vue
  2. 462 449
      src/views/layout/Menu.vue

+ 48 - 51
src/views/layout/Header.vue

@@ -1,7 +1,11 @@
 <template>
 <template>
   <div class="header-menu">
   <div class="header-menu">
     <ul class="header-menu-list">
     <ul class="header-menu-list">
-      <li class="header-menu-item" v-for="(menu, index) of menus" :key="menu" @click="click(index, menu)" :class="{ active: activeIndex == index }">
+      <li class="header-menu-item"
+          v-for="(menu, index) of menus"
+          :key="menu"
+          @click="click(index, menu)"
+          :class="{ active: activeIndex == index }">
         {{ menu.text }}
         {{ menu.text }}
       </li>
       </li>
     </ul>
     </ul>
@@ -24,35 +28,22 @@ export default {
     return {
     return {
       menus: [
       menus: [
         {
         {
-          id: "monitor",
-          text: "状态监视",
-          path: "/monitor/home",
-          isActive: true,
-        },
-
-        {
-          id: "performanceAnalysis",
-          text: "增发分析",
-          path: "/performanceAnalysis",
-          isActive: false,
+          id: 'monitor',
+          text: '状态监视',
+          path: '/monitor/home',
+          isActive: true
         },
         },
         {
         {
-          id: "ztfx",
-          text: "降损分析",
-          path: "/new/ztfx",
-          isActive: false,
-        },
-         {
-          id: "realSearch",
-          text: "数据支撑",
-          path: "/realSearch",
-          isActive: false,
+          id: 'ztfx',
+          text: '经济运行',
+          path: '/new/ztfx',
+          isActive: false
         },
         },
         {
         {
-          id: "health",
-          text: "健康管理",
-          path: "/health",
-          isActive: false,
+          id: 'health',
+          text: '智慧检修',
+          path: '/health',
+          isActive: false
         },
         },
         // {
         // {
         //   id: "decision",
         //   id: "decision",
@@ -61,19 +52,25 @@ export default {
         //   isActive: false,
         //   isActive: false,
         // },
         // },
         {
         {
-          id: "personnel",
-          text: "安措管控",
-          path: "/new/personnel",
-          isActive: false,
+          id: 'personnel',
+          text: '安全管控',
+          path: '/new/personnel',
+          isActive: false
         },
         },
         {
         {
-          id: "bdzcx",
-          text: "智能报表",
-          path: "/bdzcx",
-          isActive: false,
+          id: 'bdzcx',
+          text: '智能报表',
+          path: '/bdzcx',
+          isActive: false
         },
         },
+        {
+          id: 'realSearch',
+          text: '其他',
+          path: '/realSearch',
+          isActive: false
+        }
       ],
       ],
-      activeIndex: 0,
+      activeIndex: 0
       // menusDropdown: [
       // menusDropdown: [
       //   {
       //   {
       //     text: "子菜单1",
       //     text: "子菜单1",
@@ -89,39 +86,39 @@ export default {
       //   },
       //   },
       // ],
       // ],
       // dropdown: false,
       // dropdown: false,
-    };
+    }
   },
   },
   methods: {
   methods: {
     click(index, data) {
     click(index, data) {
-      this.activeIndex = index;
-      this.$router.push(data.path);
+      this.activeIndex = index
+      this.$router.push(data.path)
     },
     },
     clickSubMenu(index, code) {
     clickSubMenu(index, code) {
-      console.log(index, code);
+      console.log(index, code)
     },
     },
     clickMenu() {
     clickMenu() {
-      this.dropdown = !this.dropdown;
-    },
+      this.dropdown = !this.dropdown
+    }
   },
   },
   computed: {
   computed: {
     activeClass(data) {
     activeClass(data) {
-      return data.isActive ? "active" : "";
-    },
+      return data.isActive ? 'active' : ''
+    }
   },
   },
   watch: {
   watch: {
     $route: {
     $route: {
       handler: function(val, oldVal) {
       handler: function(val, oldVal) {
         this.menus.some((t, index) => {
         this.menus.some((t, index) => {
           if (val.path.includes(t.id)) {
           if (val.path.includes(t.id)) {
-            this.activeIndex = index;
+            this.activeIndex = index
           }
           }
-        });
+        })
       },
       },
       //深度观察监听
       //深度观察监听
-      deep: true,
-    },
-  },
-};
+      deep: true
+    }
+  }
+}
 </script>
 </script>
 
 
 <style lang="less">
 <style lang="less">
@@ -158,7 +155,7 @@ export default {
         transition: color 0.2s ease-in-out;
         transition: color 0.2s ease-in-out;
 
 
         &::after {
         &::after {
-          content: "";
+          content: '';
           position: absolute;
           position: absolute;
           width: 100%;
           width: 100%;
           height: 0.463vh;
           height: 0.463vh;
@@ -215,7 +212,7 @@ export default {
         background-color: fade(@write, 5%);
         background-color: fade(@write, 5%);
 
 
         &::after {
         &::after {
-          content: "";
+          content: '';
           position: absolute;
           position: absolute;
           width: 100%;
           width: 100%;
           height: 0.463vh;
           height: 0.463vh;

File diff suppressed because it is too large
+ 462 - 449
src/views/layout/Menu.vue