From a809b8abb6918a52d518c9f62b89884f73930367 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Thu, 2 Dec 2021 13:54:05 +0800
Subject: [PATCH] ddd

---
 src/assets/scss/main-shuju.scss      | 100 +++++++++-------
 src/router/index.js                  |  14 ++-
 src/views/main-shuju/main-navbar.vue | 168 ++++++++++++++-------------
 3 files changed, 160 insertions(+), 122 deletions(-)

diff --git a/src/assets/scss/main-shuju.scss b/src/assets/scss/main-shuju.scss
index ce4ca79d..190f8aef 100644
--- a/src/assets/scss/main-shuju.scss
+++ b/src/assets/scss/main-shuju.scss
@@ -1,5 +1,5 @@
-@import '~@/element-ui/theme-variables.scss';
-@import './variables.scss';
+@import "~@/element-ui/theme-variables.scss";
+@import "./variables.scss";
 
 // $navbar--height: 60px;
 body {
@@ -72,8 +72,8 @@ body {
     background-color: transparent;
   }
   &-add {
-    > span > *[class*='el-icon-'],
-    > span > *[class*='icon'] {
+    > span > *[class*="el-icon-"],
+    > span > *[class*="icon"] {
       vertical-align: middle;
       font-size: 18px;
       margin-right: 5px;
@@ -233,17 +233,13 @@ body {
     font-family: FZZCHJW;
     font-weight: normal;
     color: #ffffff;
-    background: linear-gradient(
-      0deg,
-      #03c7ff 24.609375%,
-      #ffffff 81.0791015625%
-    );
+    background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: rgba(#fff, 0.7);
 
     &::before {
       position: absolute;
-      content: '';
+      content: "";
       z-index: 100000;
       display: block;
       bottom: -10px;
@@ -289,13 +285,15 @@ body {
       text-decoration: none;
     }
     &.z-div {
-      .el-menu-item {
+      .el-menu-item,
+      .sub-menu {
         position: relative;
 
-        &.is-active {
+        &.is-active,
+        &.z-on {
           &::before {
             position: absolute;
-            content: '';
+            content: "";
             display: block;
             bottom: -6px;
             left: 0;
@@ -317,7 +315,7 @@ body {
 
         &::after {
           position: absolute;
-          content: '';
+          content: "";
           right: 0;
           top: 0;
           bottom: 0;
@@ -328,8 +326,41 @@ body {
         }
       }
     }
+
+    .sub-menu {
+      position: relative;
+      float: left;
+      cursor: pointer;
+      &:hover {
+        .sub-menu-list {
+          display: block;
+        }
+      }
+
+      .sub-menu-list {
+        position: absolute;
+        display: none;
+        padding: 0 10px;
+        width: 120px;
+        left: -100px;
+        right: -100px;
+        margin: 0 auto;
+        background-color: rgba(#176dec, 0.9);
+        text-align: center;
+        cursor: pointer;
+        > div {
+          border-top: 1px dashed rgba(#fff, 0.4);
+          color: rgba(#fff, 0.7);
+          transition: all ease 0.5s;
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+    }
+
     .el-menu-item,
-    .el-submenu > .el-submenu__title {
+    .sub-menu {
       height: $navbar--height;
       padding: 0 15px;
       line-height: $navbar--height;
@@ -337,14 +368,12 @@ body {
       color: #fff;
     }
     .el-menu-item.is-active,
-    .el-submenu.is-active > .el-submenu__title {
+    .sub-menu.z-on {
       color: #fff;
       font-weight: bold;
-      &:focus,
-      &:hover {
-      }
     }
-    .el-menu-item {
+    .el-menu-item,
+    .sub-menu {
       i {
         color: #fff;
       }
@@ -388,9 +417,10 @@ body {
       }
     }
   }
+
   .navbar__search {
-    > *[class*='el-icon-'],
-    > *[class*='icon'] {
+    > *[class*="el-icon-"],
+    > *[class*="icon"] {
       display: inline-block;
       vertical-align: middle;
     }
@@ -446,9 +476,7 @@ body {
     min-height: calc(#{$content--fill-height} - 2px);
   }
   > .aui-card--fill > .el-card__header + .el-card__body {
-    min-height: calc(
-      #{$content--fill-height} - #{$content--card-header-height} - 2px
-    );
+    min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px);
   }
   &--tabs {
     padding: $content--tabs-header-height 0 0;
@@ -520,7 +548,7 @@ body {
               position: absolute;
               bottom: 0;
               left: 0;
-              content: '';
+              content: "";
               width: 100%;
               height: 2px;
               background-color: $--color-primary;
@@ -553,15 +581,10 @@ body {
           min-height: calc(#{$content--fill-height-tabs} - 2px);
         }
         > .aui-card--fill > .el-card__header + .el-card__body {
-          min-height: calc(
-            #{$content--fill-height-tabs} - #{$content--card-header-height} -
-              2px
-          );
+          min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
         }
         &.is-iframe {
-          height: calc(
-            #{$content--fill-height-tabs} + #{$content--padding * 2}
-          );
+          height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2});
           margin: -$content--padding;
           min-height: auto;
           > .aui-card--fill {
@@ -580,10 +603,7 @@ body {
             background-color: #fff;
           }
           > .aui-card--fill > .el-card__header + .el-card__body {
-            height: calc(
-              #{$content--fill-height-tabs} - #{$content--card-header-height} -
-                2px
-            );
+            height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
           }
         }
       }
@@ -613,7 +633,7 @@ body {
 
 /* Page
 ------------------------------ */
-*[class*='aui-page__'] {
+*[class*="aui-page__"] {
   padding-top: 0;
   .aui-content {
     min-height: auto;
@@ -625,9 +645,7 @@ body {
       min-height: calc(100vh - #{$content--padding * 2} - 2px);
     }
     > .aui-card--fill > .el-card__header + .el-card__body {
-      min-height: calc(
-        100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px
-      );
+      min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px);
     }
   }
 }
diff --git a/src/router/index.js b/src/router/index.js
index dbf8448e..d997154b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -229,9 +229,21 @@ router.beforeEach((to, from, next) => {
       window.SITE_CONFIG["menuShujuList"] = [
         {
           icon: "icon-setting",
-          id: "2",
+          id: "22213213",
           name: "基础信息",
           url: "visual/basicinfo/basicInfoMain",
+          children: [
+            {
+              url: "/visual/basicinfo/basicInfoMain",
+              name: "基础信息",
+              id: "5feawfwaefwa5",
+            },
+            {
+              url: "/visual/basicinfo/basicInfoMain",
+              name: "人员类别分析",
+              id: "5fwaefwaefawef5",
+            },
+          ],
         },
         {
           icon: "icon-setting",
diff --git a/src/views/main-shuju/main-navbar.vue b/src/views/main-shuju/main-navbar.vue
index 181e7d51..19c148a4 100644
--- a/src/views/main-shuju/main-navbar.vue
+++ b/src/views/main-shuju/main-navbar.vue
@@ -1,13 +1,10 @@
 <template>
   <div>
-    <nav
-      v-if="showHeader"
-      class="m-navbar"
-    >
+    <nav v-if="showHeader" class="m-navbar">
       <div class="navbar__header">
         <h1 class="navbar__brand" @click="$router.push({ name: 'home' })">
           <a class="navbar__brand-lg" href="javascript:;">{{
-            userType === 'work' ? customerName : $t('brand.lg')
+            userType === "work" ? customerName : $t("brand.lg")
           }}</a>
           <a class="navbar__brand-mini" href="javascript:;">{{
             customerName.slice(0, 2)
@@ -21,10 +18,7 @@
             @click="$store.state.sidebarFold = !$store.state.sidebarFold"
           >
             <svg
-              class="
-                icon-svg
-                navbar__icon-menu navbar__icon-menu--switch
-              "
+              class="icon-svg navbar__icon-menu navbar__icon-menu--switch"
               aria-hidden="true"
             >
               <use xlink:href="#icon-outdent"></use>
@@ -45,21 +39,39 @@
           mode="horizontal"
           class="navbar__menu mr-auto z-div"
         >
-          <el-menu-item
-            @click="toIndexPage"
-          >
+          <el-menu-item index="index" @click="toIndexPage">
             <span>首页</span>
           </el-menu-item>
 
-          <el-menu-item
-            v-for="(menu, idx) in $store.state.mainShuju.menuList"
-            :key="menu.id"
-            :menu="menu"
-            :index="menu.id"
-            @click="gotoRouteHandle(menu.id, idx)"
-          >
-            <span>{{ menu.name }}</span>
-          </el-menu-item>
+          <template v-for="(menu, idx) in $store.state.mainShuju.menuList">
+            <li
+              class="sub-menu"
+              :class="$store.state.mainShuju.activeName==menu.name ? 'z-on':''"
+              v-if="menu.children"
+              :key="menu.id"
+              @click="gotoRouteHandle(menu.id, idx)"
+            >
+              <span>{{ menu.name }}</span>
+              <div class="sub-menu-list">
+                <div
+                  :key="subMenu.id"
+                  @click="gotoRouteHandle(subMenu.id, subIndex)"
+                  v-for="(subMenu, subIndex) in menu.children"
+                >
+                  {{ subMenu.name }}
+                </div>
+              </div>
+            </li>
+            <el-menu-item
+              v-else
+              :key="menu.id"
+              :menu="menu"
+              :index="menu.id"
+              @click="gotoRouteHandle(menu.id, idx)"
+            >
+              <span>{{ menu.name }}</span>
+            </el-menu-item>
+          </template>
         </el-menu>
 
         <el-menu class="navbar__menu" mode="horizontal">
@@ -83,10 +95,8 @@
               </svg>
             </a>
           </el-menu-item> -->
-          <el-menu-item index="3"
-                        @click="fullscreenHandle()">
-            <svg class="icon-svg navbar__icon-menu"
-                 aria-hidden="true">
+          <el-menu-item index="3" @click="fullscreenHandle()">
+            <svg class="icon-svg navbar__icon-menu" aria-hidden="true">
               <use xlink:href="#icon-fullscreen"></use>
             </svg>
           </el-menu-item>
@@ -99,12 +109,11 @@
                 <i class="el-icon-arrow-down"></i>
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  @click.native="updatePasswordHandle()"
-                  >{{ $t('updatePassword.title') }}</el-dropdown-item
-                >
+                <el-dropdown-item @click.native="updatePasswordHandle()">{{
+                  $t("updatePassword.title")
+                }}</el-dropdown-item>
                 <el-dropdown-item @click.native="logoutHandle()">{{
-                  $t('logout')
+                  $t("logout")
                 }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
@@ -122,114 +131,114 @@
 </template>
 
 <script>
-import { messages } from '@/i18n'
-import { mapGetters } from 'vuex'
-import screenfull from 'screenfull'
-import UpdatePasswordWork from './main-navbar-update-password-work'
-import { clearLoginInfo } from '@/utils'
+import { messages } from "@/i18n";
+import { mapGetters } from "vuex";
+import screenfull from "screenfull";
+import UpdatePasswordWork from "./main-navbar-update-password-work";
+import { clearLoginInfo } from "@/utils";
 export default {
-  inject: ['refresh'],
+  inject: ["refresh"],
   data() {
     return {
       showHeader: true,
       i18nMessages: messages,
       updatePassowrdVisible: false,
-      customerName: localStorage.getItem('customerName')
-    }
+      customerName: localStorage.getItem("customerName"),
+    };
   },
   components: {
-    UpdatePasswordWork
+    UpdatePasswordWork,
   },
   created() {
-    let platformToken = localStorage.getItem('showHeader') || ''
+    let platformToken = localStorage.getItem("showHeader") || "";
     if (
-      typeof platformToken !== 'undefined' &&
-      platformToken !== 'undefined' &&
-      platformToken !== ''
+      typeof platformToken !== "undefined" &&
+      platformToken !== "undefined" &&
+      platformToken !== ""
     ) {
-      this.showHeader = false
+      this.showHeader = false;
     }
-    console.log('=============================', this.userType)
-    this.$store.state.mainShuju.menuList = window.SITE_CONFIG['menuShujuList']
+    console.log("=============================", this.userType);
+    this.$store.state.mainShuju.menuList = window.SITE_CONFIG["menuShujuList"];
   },
   computed: {
     userType() {
-      return localStorage.getItem('userType')
-    }
+      return localStorage.getItem("userType");
+    },
   },
   methods: {
-    toIndexPage(){
-      this.$router.replace('/indexWork')
+    toIndexPage() {
+      this.$router.replace("/indexWork");
     },
     // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
     gotoRouteHandle(menuId, idx) {
-      var route = window.SITE_CONFIG['dynamicMenuRoutesShuju'].filter(
+      var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter(
         (item) => item.meta.menuId === menuId
-      )[0]
+      )[0];
       if (route) {
-        this.$router.push({ name: route.name })
+        this.$router.push({ name: route.name });
       }
-      this.$store.state.mainShuju.activeName = menuId
+      this.$store.state.mainShuju.activeName = menuId;
     },
     changeCustomerName(customerName) {
-      this.customerName = localStorage.getItem('customerName')
+      this.customerName = localStorage.getItem("customerName");
     },
     // 全屏
     fullscreenHandle() {
       if (!screenfull.enabled) {
         return this.$message({
-          message: this.$t('fullscreen.prompt'),
-          type: 'warning',
-          duration: 500
-        })
+          message: this.$t("fullscreen.prompt"),
+          type: "warning",
+          duration: 500,
+        });
       }
-      screenfull.toggle()
+      screenfull.toggle();
     },
     // 修改密码
     updatePasswordHandle() {
-      this.updatePassowrdVisible = true
+      this.updatePassowrdVisible = true;
       this.$nextTick(() => {
-        this.$refs.updatePassowrd.init()
-      })
+        this.$refs.updatePassowrd.init();
+      });
     },
     // 退出
     logoutHandle() {
       this.$confirm(
-        this.$t('prompt.info', { handle: this.$t('logout') }),
-        this.$t('prompt.title'),
+        this.$t("prompt.info", { handle: this.$t("logout") }),
+        this.$t("prompt.title"),
         {
-          confirmButtonText: this.$t('confirm'),
-          cancelButtonText: this.$t('cancel'),
-          type: 'warning'
+          confirmButtonText: this.$t("confirm"),
+          cancelButtonText: this.$t("cancel"),
+          type: "warning",
         }
       )
         .then(() => {
           //关闭所有标签页
           // tabs, 关闭全部
           this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-            (item) => item.name === 'home2'
-          )
+            (item) => item.name === "home2"
+          );
 
           this.$http
-            .post('/auth/login/logout')
+            .post("/auth/login/logout")
             .then(({ data: res }) => {
               if (res.code !== 0) {
                 //别处登陆时 退出不提示 直接跳登陆页即可
                 if (res.code !== 10007) {
-                  this.$message.error(res.msg)
+                  this.$message.error(res.msg);
                 }
               }
 
-              clearLoginInfo()
+              clearLoginInfo();
 
-              this.$router.push({ name: 'login' })
+              this.$router.push({ name: "login" });
             })
-            .catch(() => {})
+            .catch(() => {});
         })
-        .catch(() => {})
-    }
-  }
-}
+        .catch(() => {});
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -240,4 +249,3 @@ export default {
 </style>
 
 <style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style>
-