左侧导航展现效果修改，上导航点击导航之外自动收起

src/assets/scss/smp.scss

@@ -697,7 +697,7 @@ html,body{
 ------------------------------ */
 .navbar-menu{
   flex:1;
-  padding:0 120px 0 0;
+  padding:0 0 0 0;
   z-index:100;
   position:relative;
   .nbm-wraper{
@@ -742,7 +742,7 @@ html,body{
   }
   .nbm-switch{
     position:absolute;
-    right:120px;
+    right:0;
     top:0;
     width:120px;
     height:80px;
@@ -927,46 +927,59 @@ html,body{
   }
   .smps-menu{
     border-right:none;
-    .el-menu-item,.el-submenu__title{
-      height:44px;
-      display: flex;
-      align-items: center;
-      i.smp-nav-icon{
-        margin:0 5px 0 0;
-      }
-      em{
-        font-size:30px;
-        padding:0 3px 0 10px;
-      }
-      span{
-        font-size:14px;
-      }
+    .smpsbm-point{
+      color:$smp--color-font-color-6;
+      font-size:30px;
+      padding:0 3px 0 0;
     }
-    .el-menu-item.is-active{
-      background-color:$smp--color-blue ;
-      .smpsbm-point{
-        color:$smp--color-white;
-      }
-      .smpsbm-name{
-        color:$smp--color-white;
-      }
+    .smp-nav-icon{
+      margin:0 5px 0 0;
     }
-    .el-submenu__title:hover{
-      background-color:$smp--color-blue-white-3 ;
-      color:$smp--color-white;
-      .el-submenu__icon-arrow{
-        color:$smp--color-white;
-      }
+    .smpsbm-lv1-name{
+      color:$smp--color-font-color-3;
+      font-size:15px;
+      font-weight:bold;
     }
-    .el-menu-item:hover{
-      background-color:$smp--color-blue-white-3 ;
-      .smpsbm-point{
-        color:$smp--color-white;
+    .smpsbm-name{
+      color:$smp--color-font-color-6;
+    }
+    .el-submenu__title,.el-menu-item{
+      height:44px;
+      display: flex;
+      align-items: center;
+      &.is-active,&:hover{
+        background-color:$smp--color-blue ;
+        .smpsbm-lv1-name,.smpsbm-point,.smpsbm-name,.el-submenu__icon-arrow{
+          color:#fff;
+        }
       }
-      .smpsbm-name{
-        color:$smp--color-white;
+      &:hover{
+        background-color:$smp--color-blue-white-3;
       }
     }
+    // .el-menu-item.is-active{
+    //   background-color:$smp--color-blue ;
+    //   .smpsbm-point{
+    //     color:$smp--color-white;
+    //   }
+    //   .smpsbm-name{
+    //     color:$smp--color-white;
+    //   }
+    // }
+    // .el-submenu__title{
+      
+    // }
+    // .el-menu-item{
+    //   &:hover{
+    //     background-color:$smp--color-blue-white-3 ;
+    //     .smpsbm-point{
+    //       color:$smp--color-white;
+    //     }
+    //     .smpsbm-name{
+    //       color:$smp--color-white;
+    //     }
+    //   }
+    // }
     .el-submenu.is-opened{
       background-color: $smp--color-gray_f5;
       .el-menu--inline{
@@ -983,7 +996,52 @@ html,body{
       font-weight:bold;
       color:$smp--color-font-color-6;
     }
+    // .el-submenu__title{
+    //   .smpsbm-lv1-title{
+    //     font-weight:bold;
+    //     font-size:15px;
+    //     color:$smp--color-font-color-3;
+    //   }
+    //   &:hover{
+        
+    //     background-color:$smp--color-blue-white-3 ;
+    //     .smpsbm-lv1-title,span{
+    //       color:$smp--color-white;
+    //     }
+    //     .el-submenu__icon-arrow{
+    //       color:$smp--color-white;
+    //     }
+    //   }
+    // }
+    // .smpsbm-lv1{
+    //   &.el-menu-item{
+    //     .smpsbm-name{
+    //       color:$smp--color-font-color-3;
+    //       font-weight:bold;
+    //       font-size:15px;
+    //     }
+    //   }
+    //   &.el-menu-item:hover{
+    //     .smpsbm-name{
+    //       color:$smp--color-white;
+    //     }
+    //   }
+    //   &.el-menu-item.is-active{
+    //     .smpsbm-name{
+    //       color:$smp--color-white;
+    //     }
+    //   }
+    // }
+    // .smpsbm-lv2{
+      
+    //   .smpsbm-name{
+    //     color:$smp--color-font-color-6;
+    //   }
+    // }
   }
+  
+  
+  
 }
 
 /* smp crumb

src/components/smp-map/smp-map-func.vue

@@ -48,7 +48,7 @@ export default {
   },
   methods: {
     mapTool () {
-      console.log(123)
+      // console.log(123)
     },
     doTool (item) {
       item.isOn = !item.isOn

src/main.js

@@ -29,6 +29,23 @@ if (process.env.NODE_ENV !== 'production') {
   require('@/mock')
 }
 
+// 点击非自身或者子类，则触发事件
+Vue.directive('click-outside', {
+  bind: function (el, binding, vnode) {
+    el.clickOutsideEvent = function (event) {
+      // here I check that click was outside the el and his childrens
+      if (!(el === event.target || el.contains(event.target))) {
+        // and if it did, call method provided in attribute value
+        vnode.context[binding.expression](event)
+      }
+    }
+    document.body.addEventListener('click', el.clickOutsideEvent)
+  },
+  unbind: function (el) {
+    document.body.removeEventListener('click', el.clickOutsideEvent)
+  }
+})
+
 // 挂载全局
 Vue.prototype.$http = http
 Vue.prototype.$postReq = postReq

src/views/main/main-navbar-menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar-menu">
+  <div class="navbar-menu" v-click-outside="clickOutSide">
     <div class="nbm-wraper" ref="nbm-wraper" :class="{'nbmw-open':menuOpen}">
       <div class="nbm-item" :class="{'on':item.on}" v-for="(item,index) in menuList" :key="index" @click="gotoPage(item)">
         <i class="smp-nav-icon" :class="[item.icon,{'on':item.on}]"></i>
@@ -114,6 +114,9 @@ export default {
     // this.setIndexPage()
   },
   methods: {
+    clickOutSide () {
+      this.menuOpen = false
+    },
     initMenuMoreBtn () {
       let wraper = this.$refs['nbm-wraper']
       let wraperW = wraper.getBoundingClientRect().width

src/views/main/main-navbar-user.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar-user" @click="showUserFunc">
+  <div class="navbar-user" @click="showUserFunc" v-click-outside="clickOutSide">
     <div class="nu-main">
       <div class="nu-l">
         <img v-if="useHeadPictureUrl" :src="useHeadPictureUrl">
@@ -52,6 +52,9 @@ export default {
     }
   },
   methods: {
+    clickOutSide (e) {
+      this.isUserFuncOpen = false
+    },
     showUserFunc () {
       this.isUserFuncOpen = !this.isUserFuncOpen
     },

src/views/main/main-sidebar-sub-menu.vue

@@ -1,8 +1,21 @@
 <template>
   <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="false">
     <template slot="title">
-      <i :class="['smp-nav-icon',menu.icon]"></i>
-      <span>{{ menu.name }}</span>
+      <template v-if="menu.lv===1">
+        <i v-if="menu.lv===1" :class="['smp-nav-icon',menu.icon]"></i>
+        <span class="smpsbm-lv1-name">
+          {{ menu.name }}
+        </span>
+      </template>
+      <template v-if="menu.lv>=2">
+        <em class="smpsbm-point" v-if="menu.lv>=2">&middot;</em>
+        <span class="smpsbm-name" :title=" menu.name">
+          {{ menu.name }}
+        </span>
+      </template>
+      <!-- <i :class="['smp-nav-icon',menu.icon]"  v-if="menu.lv===1"></i>
+      <em class="smpsbm-point" v-if="menu.lv===2">&middot;</em>
+      <span :class="[{'smpsbm-lv1-title':menu.lv===1}]">{{ menu.name }}</span> -->
     </template>
     <div v-if="menuClose" class="smpsm-close-hd">
       <span>{{menu.name}}</span>
@@ -10,12 +23,19 @@
     </div>
     <sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
   </el-submenu>
-  <el-menu-item v-else :index="menu.id" @click="gotoRouteHandle(menu)" :class="[{'smpsbm-lv2':menu.lv>=2}]">
-    <i v-if="menu.lv===1" :class="['smp-nav-icon',menu.icon]"></i>
-    <em class="smpsbm-point" v-if="menu.lv===2">&middot;</em>
-    <span class="smpsbm-name">
-      {{ menu.name }}
-    </span>
+  <el-menu-item v-else :index="menu.id" @click="gotoRouteHandle(menu)">
+    <template v-if="menu.lv===1">
+      <i v-if="menu.lv===1" :class="['smp-nav-icon',menu.icon]"></i>
+      <span class="smpsbm-lv1-name">
+        {{ menu.name }}
+      </span>
+    </template>
+    <template v-if="menu.lv>=2">
+      <em class="smpsbm-point" v-if="menu.lv>=2">&middot;</em>
+      <span class="smpsbm-name" :title=" menu.name">
+        {{ menu.name }}
+      </span>
+    </template>
   </el-menu-item>
 </template>
 

src/views/main/main-sidebar.vue

@@ -180,7 +180,7 @@ export default {
   },
   watch: {
     currentMenuItem () {
-      console.log(123)
+      // console.log(123)
       this.currentMenuList = this.currentMenuItem.children || []
       this.currentMenuName = this.currentMenuItem.name
       this.initMenu()