调整

src/assets/styles/common.css

@@ -29,6 +29,19 @@
 .fl {
   float: left;
 }
+.clearfix {
+  clear: both;
+  overflow: auto;
+}
+
+.clearfix:before {
+  content: "";
+  clear: both;
+}
+.clearfix:after {
+  content: "";
+  clear: both;
+}
 .step {
   background-color: rgba(52, 73, 94, 1);
   color: #fff;

src/components/Header/index.vue

 <template lang="pug">
   el-container.header-container
     nav.header-nav.clear
-      ul.clear
-        li.nav-item.fl('@click'="handleShowMemus('show',$event)")
+      ul.clearfix
+        li.nav-item.fl('@click'="handleShowMenus('show',$event)")
           a.link
             i.fa.fa-th-list
-        li.nav-item.fl
+        li.nav-item.fl(@click="handleEditMenus()")
           a.link
             i.fa.fa-th-large
         li.nav-item.fl
@@ -24,12 +24,14 @@
         li.nav-item.fr
           a.link
             i.fa.fa-comments
-      el-row.meuns-nav
-        el-menu&attributes({
+      el-row.meuns-nav(v-show="showMenusPanel")
+        el-menu(@click="toggleMenus($event)")&attributes({
           'default-active':"2",
           'class':"el-menu-vertical",
           '@open':"handleOpen",
           '@close':"handleClose",
+          'text-color':'#2a3f54',
+          'active-text-color':'#fff'
         })
           el-submenu.menus-body.clear(index="1")
             el-menu-item-group.menus-groups.fl('v-for'="(item,index) in menus",':key'="index")
@@ -38,32 +40,29 @@
                   i(class="fa",':class'="item.ico", style={'margin-right':'5px'})
                   span.main-menus-title {{item.name}}
               el-menu-item&attributes({
-                ':index':"idx | pipeString(index)",
+                ':index':"formatPathString(index,idx)",
                 'v-for':'(it,idx) in item.children',
                 ':key':"idx"
-              }) {{it.name}}
-                el-menu-item-group.menus-tags('v-for'="(i,inx) in it.children",':key'="inx")
-                  <!--template(slot="title") {{i.name}}-->
+              })
+                el-menu-item-group.menus-tags
+                  template(slot="title")
+                    span {{it.name}}
                   el-menu-item&attributes({
-                    ':index':"inx | pipeString(index,idx)",
-                    ':key':"inx"
+                    'v-for':'(i,inx) in it.children',
+                    ':index':"formatPathString(index,idx,inx)",
+                    ':key':"inx",
+                    '@click':'setActiveStyle(i,$event)',
+                    ':class':"{ active:formatPathString(index,idx,inx) === currentSelectIndex}"
                   }) {{i.name}}
 </template>
 <style lang="stylus">
   .header-container
     position fixed
-    left 0
     right 0
     top 0
+    left 70px
     z-index 99
     box-shadow 0 1px 1px rgba(0,0,0,.2)
-  .header-nav
-    position relative
-    background #ededed
-    width 100%
-    margin-left  70px
-    .el-submenu__title
-      display none
     .nav-item
       display inline-block
       position relative
@@ -82,19 +81,76 @@
   .history-links-preview
     margin-top 16px
     margin-left 15px
+  .menus-body
+    .el-menu
+      margin-bottom 200px
+  .header-nav
+    position relative
+    background #ededed
+    width 100%
+    .el-menu--inline
+      display block !important
+    .menus-tags
+      .el-menu-item
+        background #f5f5f5
+        line-height 30px
+        padding 0 10px
+        color #2a3f54
+        min-width 120px
+        cursor pointer
+        &:hover,
+        &:focus
+          background #f5f5f5
+    .menus-groups
+      & > .el-menu-item-group__title
+        &:before
+          display none
+    .el-submenu__title
+      display none
+    .el-menu-item-group__title
+      position relative
+      padding-left 10px !important
+      margin-left 10px
+      color: #2a3f54;
+      font-size: 14px;
+      font-weight: bold;
+      padding-left: 10px;
+      position: relative;
+      &::before
+        content ''
+        position absolute
+        width 4px
+        height 4px;
+        border-radius 50%
+        left 0
+        top 50%
+        margin-top -2px
+        background #2a3f54
+    .main-menus-title
+      font-size 15px
+    .el-menu-item
+      padding 0 10px !important
+      &.active
+        background: #1ABB9C !important
+        color: #fff !important
 </style>
 <style lang="stylus" scoped>
   .meuns-nav
     position absolute
     left 0
     right 0
-    bottom 0
+    height 1000px
+    box-sizing border-box
     top 70px
     z-index 9
+    overflow-y scroll
   .menus-body
     display flex
   .menus-groups
     width 200px
+    border-right: 1px solid #ddd;
+    margin: 15px 0;
+    padding 1px
   .main-menus
     color #2a3f54
     font-size 15px
@@ -127,6 +183,11 @@
   .el-menu-item
     height auto
     line-height 1.5
+    overflow hidden
+    text-align left
+    &:hover,
+    &:focus
+      background none
 </style>
 <script>
 import { mapGetters } from 'vuex'
@@ -134,6 +195,8 @@ export default {
   name: 'headerNav',
   data () {
     return {
+      showMenusPanel: false,
+      currentSelectIndex: -1,
       user: {
         headerImage: 'http://photo.bigaka.com/photos//2132/201805/56741525659969939_144_144.jpg',
         name: '测试商户组'
@@ -170,11 +233,19 @@ export default {
     },
     handleOpen () {},
     handleClose () {},
-    handleShowMemus (type) {
-      this.$nextTick(() => {
-        let dom = document.querySelector('.el-submenu__title')
-        dom.click()
-      })
+    handleShowMenus () {
+      this.showMenusPanel = !this.showMenusPanel
+    },
+    toggleMenus (...args) {
+      console.log(args)
+    },
+    handleEditMenus () {},
+    setActiveStyle (item, ev) {
+      this.currentSelectIndex = ev.index
+      console.log(item)
+    },
+    formatPathString (...args) {
+      return args.join('-')
     }
   }
 }

src/components/menus/edit.vue

+<template>
+  <div class="menus-edit--control">
+    <div class="content">
+      <div class="dropdown-menu quick-links-panel in">
+        <!-- 快捷入口 -->
+        <div class="clearfix quick-links-container">
+          <a class="fl"><i class="fa fa-thumb-tack"></i></a>
+          <div class="quick-links inline"></div>
+          <span class="tips inline">Tips:快速触达，最多10个</span>
+          <a class="fr" @cilck="showEditMenus()" ><i class="fa fa-times"></i></a>
+          <a class="fr" @cilck="hideEditMenus()" ><i class="fa fa-ellipsis-h"></i></a>
+        </div>
+      </div>
+    </div>
+    <div class="warpper" v-show="false">
+      <menusTemplete  />
+    </div>
+  </div>
+</template>
+<style>
+  .dropdown-menu.quick-links-panel,.dropdown-menu.quick-links-panel a {
+    color: #73879c;
+    margin-right: 20px;
+  }
+  .dropdown-menu.quick-links-panel a i {
+    font-size: 24px;
+    line-height: 42px;
+  }
+
+  .dropdown-menu.quick-links-panel .quick-links-container {
+    padding-left: 15px;
+  }
+
+  .dropdown-menu.quick-links-panel {
+    left: 0;
+    width: 100%;
+    line-height: 42px;
+    border-top: 0;
+    z-index: 999;
+    border: 0;
+    background: #f9f9f9;
+  }
+
+  .dropdown-menu.menu-links-panel.in, .dropdown-menu.quick-links-panel.in {
+    transform: translateY(0);
+    -webkit-transform: translateY(0);
+    opacity: 1;
+  }
+
+  .menus-edit--control .warpper {
+    position: fixed;
+    top: 58px;
+    bottom: 0;
+    width: 100%;
+    z-index: 9;
+    background: rgba(0,0,0,.5);
+  }
+
+  .menus-edit--control .btns {
+    bottom: 20px;
+  }
+</style>
+<script>
+import menusTemplete from './menusTemplete'
+export default {
+  components: {
+    menusTemplete
+  },
+  methods: {
+    hideEditMenus () {
+
+    },
+    showEditMenus () {
+
+    }
+  }
+}
+</script>

src/components/menus/menusTemplete.vue

+<template lang="pug">
+  .menus-templete
+    el-row.meuns-nav
+      el-menu(@click="toggleMenus($event)")&attributes({
+        'default-active':"2",
+        'class':"el-menu-vertical",
+        '@open':"handleOpen",
+        '@close':"handleClose",
+        'text-color':'#2a3f54',
+        'active-text-color':'#fff'
+      })
+        el-submenu.menus-body.clear(index="1")
+          el-menu-item-group.menus-groups('v-for'="(item,index) in menus",':key'="index")
+            template(slot="title")
+              .main-menus
+                i(class="fa",':class'="item.ico", style={'margin-right':'5px'})
+                span.main-menus-title {{item.name}}
+            el-menu-item&attributes({
+              ':index':"formatPathString(index,idx)",
+              'v-for':'(it,idx) in item.children',
+              ':key':"idx"
+            })
+              el-menu-item-group.menus-tags
+                template(slot="title")
+                  span {{it.name}}
+                el-menu-item&attributes({
+                  'v-for':'(i,inx) in it.children',
+                  ':index':"formatPathString(index,idx,inx)",
+                  ':key':"inx",
+                  '@click':'setActiveStyle(i,$event)',
+                  ':class':"{ active:formatPathString(index,idx,inx) === currentSelectIndex}"
+                }) {{i.name}}
+      el-row.fixed-footer
+        el-button(round) 取消
+        el-button(type="primary", round) 确定
+        span(style={'margin-left':'10px'}) 已选：{{num}}个快捷菜单，最多可选10个
+</template>
+<style lang="stylus">
+  .menus-templete
+    overflow auto
+    padding-bottom 80px
+    height 700px
+    .el-menu--inline
+      display block
+    .menus-body
+      & > ul
+        display flex !important
+        flex-wrap nowrap
+        flex 1
+        flex-direction row
+        &:before,
+        &:after
+          display none
+    .menus-tags
+      .el-menu-item
+        background #f5f5f5
+        line-height 30px
+        padding 0 10px
+        color #2a3f54
+        min-width 120px
+        width auto
+        cursor pointer
+        &:hover,
+        &:focus
+          background #f5f5f5
+    .menus-groups
+      & > ul
+        display flex
+        flex-wrap wrap
+      & > .el-menu-item-group__title
+        &:before
+          display none
+    .el-submenu__title
+      display none
+    .el-menu-item-group__title
+      position relative
+      padding-left 10px !important
+      margin-left 10px
+      color: #2a3f54;
+      font-size: 14px;
+      font-weight: bold;
+      position: relative;
+      &::before
+        content ''
+        position absolute
+        width 4px
+        height 4px;
+        border-radius 50%
+        left 0
+        top 50%
+        margin-top -2px
+        background #2a3f54
+    .main-menus-title
+      font-size 15px
+    .el-menu-item
+      display: flex
+      padding 0 10px !important
+      &.active
+        background: #1ABB9C !important
+        color: #fff !important
+  .fixed-footer
+    position fixed
+    display flex
+    justify-content center
+    align-items center
+    bottom 0
+    width 100%
+    background #fff
+    height 50px
+</style>
+<style lang="stylus" scoped>
+  .meuns-nav
+    position relative
+    overflow auto
+  .el-submenu,
+  .el-menu-item
+    min-width 120px
+  .menus-body
+    display flex
+    flex-direction row
+  .menus-groups
+    border-right: 1px solid #ddd;
+    margin: 15px 0;
+    padding 1px
+    max-width 356px
+  .main-menus
+    color #2a3f54
+    font-size 15px
+    font-weight bold
+    text-align left
+  .el-menu-item
+    height auto
+    line-height 1.5
+    overflow hidden
+    text-align left
+    &:hover,
+    &:focus
+      background none
+</style>
+<script>
+export default {
+  name: 'headerNav',
+  data () {
+    return {
+      currentSelectIndex: -1,
+      num: 3
+    }
+  },
+  filters: {
+    limit (array, num) {
+      if (num) {
+        return array
+      }
+      return array.slice(0, num)
+    },
+    pipeString (...args) {
+      return args.join('-')
+    }
+  },
+  computed: {
+    menus () {
+      const names = ['会员中心', '营销中心', '销售中心', '渠道中心', '系统设置', '平台管理', '智能营销', '分析师']
+      return this.$store.state.global.menus.filter(item => names.indexOf(item.name) > -1)
+    }
+  },
+  methods: {
+    clickItem () {
+      console.log(this)
+    },
+    handleOpen () {},
+    handleClose () {},
+    handleShowMenus () {
+      this.showMenusPanel = !this.showMenusPanel
+    },
+    toggleMenus (...args) {
+      console.log(args)
+    },
+    handleEditMenus () {},
+    setActiveStyle (item, ev) {
+      this.currentSelectIndex = ev.index
+    },
+    formatPathString (...args) {
+      return args.join('-')
+    }
+  }
+}
+</script>

src/pages/home/index.vue

 <template>
   <div class="wrapper">
-    <home-header></home-header>
     <home-sidebar></home-sidebar>
+    <section class="main">
+      <home-header></home-header>
       <div class="content-box">
+        <menus-edit />
         <div class="content">
           <transition name="move" mode="out-in">
             <!-- <keep-alive exclude="prize"> -->
@@ -11,16 +13,19 @@
           </transition>
         </div>
       </div>
+    </section>
   </div>
 </template>
 <script>
 import { mapActions } from 'vuex'
 import HomeSidebar from 'components/Sidebar'
 import HomeHeader from 'components/Header'
+import menusEdit from 'components/menus/edit'
 export default {
   components: {
     HomeSidebar,
-    HomeHeader
+    HomeHeader,
+    menusEdit
   },
   created () {
     this.getMenus()
@@ -34,14 +39,21 @@ export default {
 </script>
 <style lang="stylus" scoped>
 .wrapper
+  display flex
   width 100%
   height 100%
   overflow hidden
+  .main
+    flex 1
+    display flex
+    position relative
 .content-box
-  position absolute
+  /*position absolute*/
   display inline-block
-  top 58px
-  bottom 0
+  flex 1
+  margin-top 58px
+  /*top 58px*/
+  /*bottom 0*/
   width 80%
   -webkit-transition left 0.3s ease-in-out
   transition left 0.3s ease-in-out