导航修改

src/components/Header/index.vue

-<template>
-  <el-container>
-    <el-header style="text-align: right; font-size: 12px">
-      <i class="el-icon-menu"></i>
-      <el-dropdown>
-        <i class="el-icon-setting" style="margin-right: 15px"></i>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item>查看</el-dropdown-item>
-          <el-dropdown-item>新增</el-dropdown-item>
-          <el-dropdown-item>删除</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-      <span>王小虎</span>
-    </el-header>
-  </el-container>
+<template lang="pug">
+  el-container.header-container
+    nav.header-nav
+      ul.clear
+        li.nav-item.fl
+          a.link
+            i.fa.fa-th-list
+        li.nav-item.fl
+          a.link
+            i.fa.fa-th-large
+        li.nav-item.fl
+          a.link
+            i.fa.fa-clock-o
+        .history-links-preview.fl
+          .history-item.fl('v-for'="(history,index) in historysLimit",':key'="index") {{history.name}}
+        li.nav-item.fr
+          a.link
+            img.user-img(':src'="user.headerImage")
+            span.user-name {{user.name}}
+            i.fa.fa-angle-down
+        li.nav-item.fr
+          a.link
+            i.fa.fa-envelope-o
+        li.nav-item.fr
+          a.link
+            i.fa.fa-comments
 </template>
-<style>
-.el-header {
-  background-color: gray;
-  color: #333;
-  line-height: 60px;
-}
-.el-aside {
-  color: #333;
-}
+<style lang="stylus">
+  .header-container
+    position fixed
+    left 0
+    right 0
+    top 0
+    z-index 99
+    box-shadow 0px 1px 1px rgba(0,0,0,.2)
+  .header-nav
+    background #EDEDED
+    width 100%
+    padding-left 70px
+    .nav-item
+      display inline-block
+      position relative
+      .link
+        position relative
+        display block
+        padding 13px 15px 12px
+        font-weight 500
+        margin-left 0
+        line-height 32px
+        color #5A738E
+      i
+        font-size 26px
+        vertical-align middle
+        margin-top -2px
+  .history-links-preview
+    margin-top 16px
+    margin-left 15px
 </style>
+<style lang="stylus" scoped>
+  .history-item
+    line-height 1.7
+    border 1px solid #73879c
+    padding 0 15px
+    border-radius 12px
+    color #73879c
+    & + &
+      margin-left 15px
+    &:hover
+      color inherit
+      border-color inherit
+      background-color inherit
+  .user-img
+    width 30px
+    height 30px
+    border-radius 50%
+    vertical-align middle
+    margin-right 10px
+    margin-top 1px
+  .user-name
+    margin-right 5px
+  i.fa.fa-angle-down
+    font-size 15px
+</style>
+<script>
+export default {
+  name: 'headerNav',
+  data () {
+    return {
+      user: {
+        headerImage: 'http://photo.bigaka.com/photos//2132/201805/56741525659969939_144_144.jpg',
+        name: '测试商户组'
+      },
+      historys: [{'name': '自动标签', 'index': '1,0,2', 'time': '2018-11-01 10:06:07'}, {'name': '快速查询', 'index': '1,0,0', 'time': '2018-10-31 17:17:09'}, {'name': '营销推送', 'index': '2,0,0', 'time': '2018-10-31 17:12:53'}, {'name': '会员圈选', 'index': '1,0,1', 'time': '2018-10-31 16:52:47'}, {'name': '概览', 'index': '0,0,0', 'time': '2018-10-31 13:31:59'}, {'name': '趋势', 'index': '0,1,0', 'time': '2018-10-29 15:52:31'}, {'name': '会员卡设置', 'index': '1,1,0', 'time': '2018-10-29 15:51:00'}, {'name': '生日营销(new)', 'index': '2,0,2', 'time': '2018-10-29 15:50:18'}]
+    }
+  },
+  filters: {
+    limit (array, num) {
+      if (num) {
+        return array
+      }
+      console.log(array.slice(0, num))
+      return array.slice(0, num)
+    }
+  },
+  props: ['icon', 'link', 'type', 'id', 'sort', 'name', 'pid', 'grade'],
+  computed: {
+    historysLimit () {
+      let historys = this.historys
+      if (historys.length > 5) {
+        return historys.slice(0, 5)
+      } else {
+        return [...historys]
+      }
+    }
+  },
+  methods: {
+    clickItem () {
+      console.log(this)
+    }
+  }
+}
+</script>

src/components/Sidebar/index.vue

@@ -123,7 +123,7 @@ export default {
     position relative
     height 100px
     display inline-block
-    z-index 5
+    z-index 100
   .sidebar
     position fixed
     left 0

src/pages/home/index.vue

@@ -31,7 +31,7 @@ export default {
 .content-box
   position absolute
   display inline-block
-  top 70px
+  top 58px
   bottom 0
   width 80%
   -webkit-transition left 0.3s ease-in-out