diff --git a/src/components/MessageBox/MessageBox.vue b/src/components/MessageBox/MessageBox.vue
index 81da5ee..50a0785 100644
--- a/src/components/MessageBox/MessageBox.vue
+++ b/src/components/MessageBox/MessageBox.vue
@@ -13,7 +13,7 @@
       <el-badge :value="menuNum.summary"
                 :max="9"
                 class="item">
-        <svgIcon icon-class="dashboard_notification"
+        <svgIcon icon-class="notification"
                  class="icon"
                  @click.native="visible = true"></svgIcon>
       </el-badge>
@@ -45,14 +45,14 @@ export default {
 </script>
 <style lang="scss" scoped>
 .icon {
-  width: 2em !important;
-  height: 2em !important;
+  width: 2.5em !important;
+  height: 100% !important;
   cursor: pointer;
-  margin-top:16px;
-  margin-bottom: 16px;
+  // margin-top: 16px;
+  // margin-bottom: 16px;
   transition: all 0.5s ease-out;
   &:hover {
-    transform: translateX(-4px);
+  box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
   }
 }
 </style>
diff --git a/src/icons/svg/dashboard/notification.svg b/src/icons/svg/dashboard/notification.svg
new file mode 100644
index 0000000..f676fa6
--- /dev/null
+++ b/src/icons/svg/dashboard/notification.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577668264578" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1261" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M0 0m204.8 0l614.4 0q204.8 0 204.8 204.8l0 614.4q0 204.8-204.8 204.8l-614.4 0q-204.8 0-204.8-204.8l0-614.4q0-204.8 204.8-204.8Z" fill="#71A8FF" p-id="1262"></path><path d="M819.2 0H534.272A756.48 756.48 0 0 0 0 483.584V819.2a204.8 204.8 0 0 0 204.8 204.8h614.4a204.8 204.8 0 0 0 204.8-204.8V204.8a204.8 204.8 0 0 0-204.8-204.8z" fill="#73A2FF" p-id="1263"></path><path d="M819.2 0h-3.84a755.2 755.2 0 0 0-539.392 1024H819.2a204.8 204.8 0 0 0 204.8-204.8V204.8a204.8 204.8 0 0 0-204.8-204.8z" fill="#739BFF" p-id="1264"></path><path d="M497.152 721.152A752.384 752.384 0 0 0 560.384 1024H819.2a204.8 204.8 0 0 0 204.8-204.8V204.8a204.8 204.8 0 0 0-89.088-168.96 755.2 755.2 0 0 0-437.76 685.312z" fill="#7193FF" p-id="1265"></path><path d="M512 166.4a243.2 243.2 0 0 1 243.2 243.2v268.8h-486.4V409.6A243.2 243.2 0 0 1 512 166.4z" fill="#E9F6FF" p-id="1266"></path><path d="M473.6 169.728a242.944 242.944 0 0 0-204.8 239.872v268.8h409.6V409.6a242.944 242.944 0 0 0-204.8-239.872z" fill="#FFFFFF" p-id="1267"></path><path d="M512 755.2m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z" fill="#FFFFFF" p-id="1268"></path><path d="M217.6 665.6m51.2 0l486.4 0q51.2 0 51.2 51.2l0 0q0 51.2-51.2 51.2l-486.4 0q-51.2 0-51.2-51.2l0 0q0-51.2 51.2-51.2Z" fill="#E9F6FF" p-id="1269"></path></svg>
\ No newline at end of file
diff --git "a/src/icons/svg/menu/\345\267\245\344\275\234\346\241\214\351\235\242.svg" "b/src/icons/svg/menu/\345\267\245\344\275\234\346\241\214\351\235\242.svg"
index f15ef3b..1f4e65a 100755
--- "a/src/icons/svg/menu/\345\267\245\344\275\234\346\241\214\351\235\242.svg"
+++ "b/src/icons/svg/menu/\345\267\245\344\275\234\346\241\214\351\235\242.svg"
@@ -6,8 +6,8 @@
 	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
 	.st1{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;}
 	.st2{fill:#313131;}
-	.st3{fill:#FFFFFF;}
-	.st4{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
+	.st3{fill:#313131;}
+	.st4{fill:#313131;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
 </style>
 <g>
 	<g>
diff --git "a/src/icons/svg/menu/\345\274\200\345\217\221\344\272\272\345\221\230\345\267\245\345\205\267.svg" "b/src/icons/svg/menu/\345\274\200\345\217\221\344\272\272\345\221\230\345\267\245\345\205\267.svg"
index b152695..396d951 100755
--- "a/src/icons/svg/menu/\345\274\200\345\217\221\344\272\272\345\221\230\345\267\245\345\205\267.svg"
+++ "b/src/icons/svg/menu/\345\274\200\345\217\221\344\272\272\345\221\230\345\267\245\345\205\267.svg"
@@ -6,8 +6,8 @@
 	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
 	.st1{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;}
 	.st2{fill:#313131;}
-	.st3{fill:#FFFFFF;}
-	.st4{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
+	.st3{fill:#313131;}
+	.st4{fill:#313131;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
 </style>
 <g>
 	<g>
diff --git "a/src/icons/svg/menu/\347\263\273\347\273\237\347\256\241\347\220\206.svg" "b/src/icons/svg/menu/\347\263\273\347\273\237\347\256\241\347\220\206.svg"
index bb45871..29d389d 100755
--- "a/src/icons/svg/menu/\347\263\273\347\273\237\347\256\241\347\220\206.svg"
+++ "b/src/icons/svg/menu/\347\263\273\347\273\237\347\256\241\347\220\206.svg"
@@ -6,8 +6,8 @@
 	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
 	.st1{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;}
 	.st2{fill:#313131;}
-	.st3{fill:#FFFFFF;}
-	.st4{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
+	.st3{fill:#313131;}
+	.st4{fill:#313131;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
 </style>
 <g>
 	<g>
diff --git "a/src/icons/svg/menu/\351\200\232\347\237\245\345\205\254\345\221\212.svg" "b/src/icons/svg/menu/\351\200\232\347\237\245\345\205\254\345\221\212.svg"
index c0fc12c..ae0986f 100644
--- "a/src/icons/svg/menu/\351\200\232\347\237\245\345\205\254\345\221\212.svg"
+++ "b/src/icons/svg/menu/\351\200\232\347\237\245\345\205\254\345\221\212.svg"
@@ -6,8 +6,8 @@
 	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
 	.st1{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;}
 	.st2{fill:#313131;}
-	.st3{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
-	.st4{fill:#FFFFFF;}
+	.st3{fill:#313131;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
+	.st4{fill:#313131;}
 	.st5{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
 </style>
 <g>
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
index ab2dd36..ba693c9 100644
--- a/src/styles/element-variables.scss
+++ b/src/styles/element-variables.scss
@@ -7,7 +7,7 @@ http://element-cn.eleme.io/#/zh-CN/component/custom-theme#strong-xiu-gai-bian-li
 
 // 官方说如果这个文件存在，字体路径是必须覆盖的，我没时间测试删除以后会怎样
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
-$--color-primary:#1867c0;
+$--color-primary:#616dad;
 $--color-success:#4CAF50;
 $--color-warning:#fb8c00;
 $--color-danger:#ff5252;
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
index 866d43e..d73d02f 100755
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
@@ -1,92 +1,74 @@
 <!--
 @file 框架页布局
-@author BoBo
+@author ytyang
 @copyright NanJing Anshare Tech .Com
 @createDate 2018年11月13日14:50:08
 -->
 <template>
-  <div class="app-wrapper">
+  <div :class="classObj"
+       class="app-wrapper">
     <!-- 导航栏 -->
     <Header />
     <!-- 左侧边栏 -->
     <div class="main-container">
-      <!-- 面包屑导航 -->
-      <Breadcrumb></Breadcrumb>
+      <!-- TAB标签页 -->
+      <!-- <TagsView /> -->
+      <!-- <Breadcrumb></Breadcrumb> -->
       <!-- 包含二级路由，可以继续嵌套子页面 -->
       <AppMain />
     </div>
+
     <el-backtop target=".main-container"></el-backtop>
-    <div class="elevator">
-      <!-- 消息中心 -->
-      <MessageBox></MessageBox>
-    </div>
+
   </div>
 </template>
 
-<script lang="ts">
-import { mapGetters } from 'vuex';
-import MessageBox from '@/components/MessageBox/MessageBox.vue';
+<script>
 
-import {
-  AppMain,
-  Header, // TagsView 暂时去掉tab
-} from '@/views/layout/components/index.ts';
-import { Component, Vue, Watch } from 'vue-property-decorator';
-import Breadcrumb from '@/components/Breadcrumb/index.vue';
+import { AppMain, Header } from '@/views/layout/components/index.ts';
+// import Breadcrumb from '@/components/Breadcrumb/index.vue';
 
-@Component({
+export default {
+  name: 'Layout',
+  data() {
+    return {};
+  },
   components: {
     AppMain,
-    MessageBox,
+    // TagsView,
     Header,
-    Breadcrumb,
+    // Breadcrumb,
   },
-})
-export default class Layout extends Vue {
-  created() {
-    this.$store.dispatch('initFlowTree');
-  }
-}
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar;
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+      };
+    },
+  },
+
+  mounted() {
+    window.addEventListener('scroll', () => {});
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import 'src/styles/mixin.scss';
 .app-wrapper {
   @include clearfix;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background: #eee;
   overflow: auto;
-  .elevator {
-    position: fixed;
-    top: 45%;
-    padding: 0 8px;
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-    margin-top: -140px;
-    right: 0;
-    background-color: #fff;
-    box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
-  }
+  height: 100%;
+  background: #f0f3f7;
   // 主体区域
   .main-container {
-    left: 0px;
-    top: 80px;
-    right: 0;
-    height: auto;
-    position: absolute;
-    width: 90%;
-    margin: 10px auto 10px;
+    background: #f0f3f7;
+    padding: 10px 50px;
+    height: calc(100% - 120px);
   }
 }
-.drawer-bg {
-  background: #000;
-  opacity: 0.3;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
-}
 </style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
index 360052e..26d98b5 100644
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -1,56 +1,53 @@
 <!--
 @file 本页面用于加载其他二级路由对应的子页面，被layout/layout.vue引用
       嵌套顺序App.vue->Layout.vue->AppMain.vue
-@author BoBo
+@author ytyang
 @copyright NanJing Anshare Tech .Com
 @createDate 2018年11月13日14:48:28
 -->
 <template>
   <section class="app-main"
            ref="appmain"
-           @scroll="handleScroll">
-    <router-view :scrollTop="scrollTop"
-                 :key="key"
-                 @viewScroll="viewScroll" />
+           @scroll="handleScroll"
+          >
+      <router-view :scrollTop="scrollTop"
+                   :key="key"
+                   @viewScroll="viewScroll" />
   </section>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({
+<script>
+export default {
   name: 'AppMain',
-})
-export default class AppMain extends Vue {
-  $refs!: {
-    appmain: HTMLFormElement;
-  };
-
-  scrollTop = 0;
-
-  ISPUBLIC = process.env.VUE_APP_ISPUBLIC;
-
-  get cachedViews() {
-    return this.$store.state.tagsView.cachedViews;
-  }
-
-  get key() {
-    return this.$route.fullPath;
-  }
-
-  // 根据右侧滚动条实时刷新滚动条距离顶部的位置，并通过<router-view>传入子页面
-  handleScroll() {
-    this.scrollTop = this.$refs.appmain.scrollTop;
-  }
-
-  // 重定位滚动条
-  viewScroll(v) {
-    this.$refs.appmain.scrollTop = v;
-  }
-}
+  data() {
+    return {
+      scrollTop: 0,
+      ISPUBLIC: process.env.VUE_APP_ISPUBLIC,
+    };
+  },
+  computed: {
+    cachedViews() {
+      return this.$store.state.tagsView.cachedViews;
+    },
+    key() {
+      return this.$route.fullPath;
+    },
+  },
+  methods: {
+    // 根据右侧滚动条实时刷新滚动条距离顶部的位置，并通过<router-view>传入子页面
+    handleScroll() {
+      this.scrollTop = this.$refs.appmain.scrollTop;
+    },
+    // 重定位滚动条
+    viewScroll(v) {
+      this.$refs.appmain.scrollTop = v;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .app-main {
   // padding-top: 16px;
-  height: 100%;
+  height:100%;
 }
 </style>
diff --git a/src/views/layout/components/Header.vue b/src/views/layout/components/Header.vue
index 8943536..e413cf3 100644
--- a/src/views/layout/components/Header.vue
+++ b/src/views/layout/components/Header.vue
@@ -9,17 +9,16 @@
   <div>
     <el-header height="80px"
                class="navHeader"
-               style="background:#1a4bae">
-      <div class="title-container"
-           :class="{close:isCollapse}">
+               style="background:#f0f3f7">
+      <div class="title-container close"
+           id="title-container">
         <img class="header_logo"
              src="@/assets/logo.png">
         <span class="title">{{title}}</span>
       </div>
-      <!-- Nav菜单栏 -->
-      <NavMenu></NavMenu>
       <!-- 姓名及下拉菜单 -->
       <div class="user-container"
+           id="user-container"
            :class="{close:isCollapse}">
         <img :src="photo"
              v-if="photo"
@@ -29,62 +28,66 @@
                  v-else
                  icon-class="header_user"
                  @click.native="showCard"></svgIcon>
-        <span class="userName el-dropdown-link"> {{ this.$store.getters.realname }}
-          <i class="el-icon-switch-button icon"
-             @click="logOut"></i></span>
+        <span class="userName el-dropdown-link"> {{ this.$store.getters.realname }}</span>
+        <i class="el-icon-switch-button icon"
+           @click="logOut"></i>
+      </div>
+      <div class="elevator">
+        <MessageBox></MessageBox>
       </div>
+      <Sidebar />
     </el-header>
     <PersonInfoCard ref="personInfoCard"></PersonInfoCard>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+<script>
 import { mapGetters } from 'vuex';
 import Hamburger from '@/components/Hamburger/Hamburger.vue';
+import MessageBox from '@/components/MessageBox/MessageBox';
 import PersonInfoCard from './PersonInfoCard.vue';
-import NavMenu from './NavMenu.vue';
 
-@Component({
+import Sidebar from './Sidebar.vue';
+
+export default {
   name: 'Header',
   components: {
     // Hamburger,
     PersonInfoCard,
-    NavMenu,
+    Sidebar,
+    MessageBox,
+  },
+  data() {
+    return {
+      visibleMember: false,
+      driver: null,
+    };
   },
   computed: {
-    ...mapGetters(['menuNum', 'candidateUser', 'photo', 'config']),
+    isCollapse() {
+      return !this.$store.getters.sidebar.opened;
+    },
+    sidebar() {
+      return this.$store.getters.sidebar.opened;
+    },
+    // 是否是外网脱敏版本
+    isPublic() {
+      return process.env.VUE_APP_ISPUBLIC === 'true';
+    },
+    ...mapGetters(['menuNum', 'candidateUser', 'photo']),
+    title() {
+      return process.env.VUE_APP_NAME;
+    },
   },
-})
-export default class Header extends Vue {
-  visibleMember = false;
-
-  config!: any;
-
-  $refs!: {
-    personInfoCard: HTMLFormElement;
-  };
-
-  get isCollapse() {
-    return !this.$store.getters.sidebar.opened;
-  }
-
-  get sidebar() {
-    return this.$store.getters.sidebar.opened;
-  }
-
-  get title() {
-    return this.config.systemName || process.env.VUE_APP_NAME;
-  }
-
-  showCard() {
-    this.$refs.personInfoCard.showDialog();
-  }
-
-  logOut() {
-    this.$store.dispatch('clearToken');
-  }
-}
+  methods: {
+    showCard() {
+      this.$refs.personInfoCard.showDialog();
+    },
+    logOut() {
+      this.$store.dispatch('clearToken');
+    },
+  },
+};
 </script>
 <style scoped>
 .tag >>> .el-tag__close {
@@ -103,13 +106,14 @@ export default class Header extends Vue {
     height: 3em;
     vertical-align: -13px;
     margin-right: 20px;
+    border-radius: 50%;
   }
   .title {
     font-weight: 500;
     font-family: 'YaHei';
     font-size: 24px;
-    text-shadow: 2px 2px 2px #000;
-    color: white;
+    text-shadow: 1px 1px 1px #9e9e9e;
+    color: #3f51b5;
   }
   .icon {
     text-shadow: 3px 3px 3px #000;
@@ -117,69 +121,49 @@ export default class Header extends Vue {
   }
 }
 .el-header {
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  color: #fff;
+  color: black;
   padding-left: 0px !important;
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1;
   .logo {
     width: 2em;
     height: 2em;
     position: relative;
     top: 0.5em;
   }
-  .hamburger-container {
-    display: block;
-    position: absolute;
-    top: 1.3em;
-    left: 250px;
-    color: #fff;
-  }
 }
-
+.elevator {
+  float: right;
+  line-height: 100px;
+  height: 80px;
+  margin-right: 50px;
+}
 // 姓名及下拉菜单
 .user-container {
-  top: 7px;
   height: 80px;
-  position: fixed;
-  right: 0;
+  float: right;
+  line-height: 80px;
   text-align: center;
-  padding: 0 5px;
-  width: auto;
-  color: #fff;
   .photo {
     width: 3em;
     height: 3em;
-    display: block;
-    margin: 0 auto !important;
+    vertical-align: -15px;
     border-radius: 50%;
     cursor: pointer;
-    transition: transform 1s ease-in-out;
-    &:hover {
-      transform: rotateZ(360deg);
-    }
   }
   .userName {
-    color: #fff;
+    color: #777777;
     text-align: center;
     vertical-align: middle;
-    font-size: 16px;
-    display: inline-block;
-    width: auto;
-    text-shadow: 1px 1px 1px #606266;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    margin-left: 10px;
+    margin-right: 5px;
+    font-size: 18px;
   }
   .icon {
-    color: #fff;
+    color: #707070;
     font-size: 18px;
     display: inline;
     outline: none;
     cursor: pointer;
+    vertical-align: -2px;
   }
   .user_icon {
     width: 28px;
diff --git a/src/views/layout/components/MenuItem.vue b/src/views/layout/components/MenuItem.vue
deleted file mode 100644
index 13122d3..0000000
--- a/src/views/layout/components/MenuItem.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--
-@file 左侧边栏菜单子项
-@author BoBo
-@copyright NanJing Anshare Tech .Com
-@createDate 2018年11月13日15:21:56
--->
-<template>
-  <div>
-    <template v-for="item in routes">
-      <router-link v-if="!item.hidden&&item.children.length===1"
-                   :key="item.name"
-                   :to="{name:item.children[0].name}">
-        <el-menu-item :index="item.children[0].name"
-                      class="menu-item">
-          <SvgIcon v-if="item.children[0].meta.title"
-                   class="icon"
-                   :icon-class="item.title" /> {{ item.children[0].meta.title }}
-        </el-menu-item>
-      </router-link>
-      <el-submenu v-else-if="!item.hidden"
-                  :index="item.name"
-                  :key="item.name">
-        <template slot="title">
-          <div class="menu-item">
-            <!-- <SvgIcon v-if="item.icon"
-                    :icon-class="item.icon" /> {{ item.title }} -->
-
-            <SvgIcon :icon-class="item.title"
-                     class="icon"
-                     v-if="showIcon(item)" />{{ item.title }}
-          </div>
-
-        </template>
-        <template v-for="child in item.children.filter(s=>!s.hidden)">
-          <menu-item v-if="child.children&&child.children.length>0"
-                     :key="child.name"
-                     :routes="[child]"
-                     class="menu-indent" />
-          <router-link v-else
-                       :key="child.name"
-                       :to="{name:child.name}"
-                       class="menu-indent">
-            <el-menu-item :index="child.name">
-              {{ child.meta.title }}
-            </el-menu-item>
-          </router-link>
-        </template>
-      </el-submenu>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-
-@Component({
-  name: 'MenuItem',
-})
-export default class MenuItem extends Vue {
-  @Prop({
-    type: Array,
-    default: () => [],
-  })
-  routes: any;
-
-  showIcon(item) {
-    if (item.meta) {
-      if (item.meta.icon === false) {
-        return false;
-      }
-      return true;
-    }
-    return true;
-  }
-}
-</script>
-<style scoped>
-.subitem >>> .el-badge__content {
-  margin-top: 0px;
-  margin-left: 5px;
-}
-</style>
-<style rel="stylesheet/scss" lang="scss" scoped>
-.menu-item:hover .icon {
-  /* Start the shake animation and make the animation last for 0.5 seconds */
-  animation: shake 1s;
-
-  /* When the animation is finished, start again */
-  animation-iteration-count: infinite;
-}
-
-@keyframes shake {
-  0% {
-    transform: translate(1px, 1px) rotate(0deg);
-  }
-  10% {
-    transform: translate(-1px, -1px) rotate(-1deg);
-  }
-  20% {
-    transform: translate(-1px, 0px) rotate(1deg);
-  }
-  30% {
-    transform: translate(1px, 1px) rotate(0deg);
-  }
-  40% {
-    transform: translate(1px, -1px) rotate(1deg);
-  }
-  50% {
-    transform: translate(-1px, 1px) rotate(-1deg);
-  }
-  60% {
-    transform: translate(-1px, 1px) rotate(0deg);
-  }
-  70% {
-    transform: translate(1px, 1px) rotate(-1deg);
-  }
-  80% {
-    transform: translate(-1px, -1px) rotate(1deg);
-  }
-  90% {
-    transform: translate(1px, 1px) rotate(0deg);
-  }
-  100% {
-    transform: translate(1px, -1px) rotate(-1deg);
-  }
-}
-
-.icon {
-  width: 28px !important;
-  margin: 0 auto;
-  display: block;
-  height: 28px !important;
-  vertical-align: -0.4em !important;
-}
-.item {
-  position: absolute;
-  top: 0px;
-}
-.margin_right_4px {
-  margin-right: 4px !important;
-}
-</style>
diff --git a/src/views/layout/components/NavMenu.vue b/src/views/layout/components/NavMenu.vue
deleted file mode 100644
index 92fb785..0000000
--- a/src/views/layout/components/NavMenu.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<!--
-@file 左侧边栏菜单
-@author BoBo
-@copyright NanJing Anshare Tech .Com
-@createDate 2018年11月13日15:17:37
--->
-<template>
-  <div id="menu-wrapper"
-       ref="container2">
-    <el-menu :default-active="$route.path"
-             unique-opened
-             mode="horizontal"
-             background-color="transparent"
-             text-color="#fff"
-             active-text-color="#3f51b5"
-             style="border:none"
-             id="menu-container">
-      <!-- 菜单项组件 -->
-      <MenuItem :routes="routers" />
-    </el-menu>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { mapGetters } from 'vuex';
-import MenuItem from './MenuItem.vue';
-
-@Component({
-  name: 'NavMenu',
-  components: {
-    MenuItem,
-  },
-  computed: {
-    ...mapGetters(['routers']),
-  },
-})
-export default class NavMenu extends Vue {
-  mounted() {
-    // 动态适应菜单栏宽度
-    (document.getElementById('menu-wrapper') as HTMLElement).style.left = `${(document.getElementsByClassName('title-container')[0] as HTMLElement).offsetWidth + 30}px`;
-    (document.getElementById('menu-wrapper') as HTMLElement).style.right = `${(document.getElementsByClassName('user-container')[0] as HTMLElement).offsetWidth + 30}px`;
-  }
-
-  handleDropDownCommand(command) {
-    switch (command) {
-      case 'contactus':
-        // TODO:联系我们跳转外网无意义，需求确认后继续开发
-        break;
-      case 'changepwd':
-        this.$prompt('请输入新密码', '提示', {
-          confirmButtonText: '确定并重新登录',
-          cancelButtonText: '取消',
-        }).then(({ value } : any) => {
-          this.$store.dispatch('changePassword', { password: value });
-        });
-        break;
-      case 'logout':
-        this.$store.dispatch('clearToken');
-        break;
-      default:
-        break;
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-#menu-wrapper {
-  position: fixed;
-  top: 0;
-  height: 80px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  text-align: right;
-  z-index: 2001;
-}
-</style>
-
-<style rel="stylesheet/scss" lang="scss">
-.el-menu--horizontal.el-menu {
-  width: 100%;
-  .el-submenu__icon-arrow {
-    display: none;
-  }
-  .el-submenu__title {
-    height: 80px;
-    padding: 10px 20px !important;
-    line-height: 35px;
-    min-width: 80px;
-    text-align: center;
-  }
-  .router-link-active > .el-menu-item {
-    background: #17449d !important;
-    color: #ffd04b;
-  }
-  .el-submenu.is-active {
-    background: #17449d !important;
-    color: #ffd04b;
-  }
-  .el-submenu.is-opened {
-    background: #17449d !important;
-    color: #ffd04b;
-  }
-  .el-submenu {
-    display: inline-block;
-    // float:left;
-    height: 80px;
-    color: white;
-    height: 80px !important;
-    line-height: 25px !important;
-    &:hover {
-      background-color: #17449d;
-    }
-    .el-menu-item {
-      background-color: transparent !important;
-      height: 40px;
-      float: left;
-      line-height: 40px;
-      padding-left: 50px !important;
-      padding-right: 30px !important;
-    }
-  }
-  .el-menu-item {
-    display: inline-block;
-    padding: 10px 20px !important;
-    line-height: 35px;
-    height: 80px;
-    min-width: 80px;
-    text-align: center;
-    color: white !important;
-  }
-}
-
-/* 侧边栏hover（收起状态的左边栏不在app中，所以无法使用scoped） */
-.el-menu-item,
-.el-submenu > .el-submenu__title {
-  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-    padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-.el-menu-item:hover,
-.el-submenu > .el-submenu__title:hover {
-  background: rgba(0, 0, 0, 0.07) !important;
-}
-// 打开子菜单的父级菜单
-.el-submenu.is-active > .el-submenu__title {
-  color: #fff !important;
-}
-.el-menu--horizontal {
-  .el-menu--popup-bottom-start {
-    margin-right: 0px;
-    min-width: 150px;
-    .el-submenu__title {
-      color: #303133 !important;
-    }
-  }
-
-  & > .el-menu {
-    background: white !important;
-    padding-left: 5px;
-  }
-  .el-menu-item {
-    color: #303133 !important;
-  }
-}
-</style>
diff --git a/src/views/layout/components/PersonInfoCard.vue b/src/views/layout/components/PersonInfoCard.vue
index a2e8139..afe8652 100644
--- a/src/views/layout/components/PersonInfoCard.vue
+++ b/src/views/layout/components/PersonInfoCard.vue
@@ -46,6 +46,15 @@
           <p>单位: {{ this.$store.getters.companyname }}</p>
           <p>部门: {{$store.getters.deptname}}</p>
           <p>角色: {{ this.$store.getters.rolename }}</p>
+          <p v-if="isAuth">当前委托人: {{ candidateUser }}
+            <el-tooltip class="item"
+                        effect="dark"
+                        content="取消授权"
+                        placement="right">
+              <i class="cancelIcon el-icon el-icon-circle-close"
+                 @click="clearAuth"></i>
+            </el-tooltip>
+          </p>
         </el-col>
       </el-row>
       <div slot="footer"
@@ -58,91 +67,68 @@
     <ChangePasswordDialog ref="passwordDialog"></ChangePasswordDialog>
   </div>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+
+<script>
 import { mapGetters } from 'vuex';
 import ChangePasswordDialog from '@/components/ChangePasswordDialog/ChangePasswordDialog.vue';
 
-@Component({
-  name: 'PersonInfoCard',
+export default {
   components: {
     ChangePasswordDialog,
   },
-})
-export default class PersonInfoCard extends Vue {
-  $refs!: {
-    passwordDialog: HTMLFormElement;
-  };
-
-  visible = false;
-
-  visibleMember = false;
-
-  imageUrl = '';
-
+  data() {
+    return {
+      visible: false,
+      visibleMember: false,
+      imageUrl: '',
+    };
+  },
   created() {
     this.imageUrl = this.photo;
-  }
-
-  get photo() {
-    return this.$store.getters.photo;
-  }
-
-  get userid() {
-    return this.$store.getters.userid;
-  }
-
-  get token() {
-    return this.$store.getters.token;
-  }
-
-  get candidateUser() {
-    return this.$store.getters.candidateUser;
-  }
-
-  get isAuth() {
-    return this.candidateUser !== '暂无授权';
-  }
-
-  get uploadUrl() {
-    return `${process.env.VUE_APP_API_URL}users/uploadImage`;
-  }
-
-  showDialog(param = {}) {
-    this.visible = true;
-  }
-
-  handleCommand(command) {
-    switch (command) {
-      case 'changepwd':
-        this.$refs.passwordDialog.showDialog();
-        break;
-      case 'auth':
-        this.visibleMember = true;
-        break;
-      default:
-        break;
-    }
-  }
-
-  handleAvatarSuccess(res, file) {
-    this.imageUrl = res.data;
-    this.$store.commit('SET_PHOTO', res.data);
-  }
-
-  beforeAvatarUpload(file) {
-    const isJPG = file.type === 'image/jpeg';
-    const isLt2M = file.size / 1024 / 1024 < 2;
-
-    if (!isJPG) {
-      this.$message.error('上传头像图片只能是 JPG 格式!');
-    }
-    if (!isLt2M) {
-      this.$message.error('上传头像图片大小不能超过 2MB!');
-    }
-    return isJPG && isLt2M;
-  }
-}
+  },
+  computed: {
+    uploadUrl() {
+      return `${process.env.VUE_APP_API_URL}users/uploadImage`;
+    },
+    ...mapGetters(['candidateUser', 'photo', 'userid', 'token']),
+  },
+  methods: {
+    showDialog(param = {}) {
+      this.visible = true;
+    },
+    handleCommand(command) {
+      switch (command) {
+        case 'changepwd':
+          this.$refs.passwordDialog.showDialog();
+          break;
+        case 'auth':
+          this.visibleMember = true;
+          break;
+        default:
+          break;
+      }
+    },
+    closeEvent() {
+      this.clearAuth();
+    },
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = res.data;
+      this.$store.commit('SET_PHOTO', res.data);
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!');
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!');
+      }
+      return isJPG && isLt2M;
+    },
+  },
+};
 </script>
 
 <style lang='scss' scoped>
diff --git a/src/views/layout/components/Sidebar.vue b/src/views/layout/components/Sidebar.vue
new file mode 100644
index 0000000..e802708
--- /dev/null
+++ b/src/views/layout/components/Sidebar.vue
@@ -0,0 +1,84 @@
+<!--
+@file 左侧边栏菜单
+@author ytyang
+@copyright NanJing Anshare Tech .Com
+@createDate 2018年11月13日15:17:37
+-->
+<template>
+  <!-- 导航菜单+滚动条 -->
+  <el-menu collapse
+           :default-active="$route.path"
+           unique-opened
+           mode="vertical"
+           background-color="#f5e8e8"
+           text-color="#000"
+           active-text-color="#3f51b5"
+           class="menu"
+           id="menu-container">
+    <!-- 菜单项组件 -->
+    <SidebarItem :routes="routers" />
+  </el-menu>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import SidebarItem from './SidebarItem.vue';
+
+export default {
+  data() {
+    return {
+      waitListNum: null,
+      bg: null,
+    };
+  },
+  components: {
+    SidebarItem,
+  },
+  computed: {
+    ...mapGetters(['routers', 'menuNum']),
+  },
+  methods: {
+    handleDropDownCommand(command) {
+      switch (command) {
+        case 'contactus':
+          // TODO:联系我们跳转外网无意义，需求确认后继续开发
+          break;
+        case 'changepwd':
+          this.$prompt('请输入新密码', '提示', {
+            confirmButtonText: '确定并重新登录',
+            cancelButtonText: '取消',
+          }).then(({ value }) => {
+            this.$store.dispatch('changePassword', value);
+          });
+          break;
+        case 'logout':
+          this.$store.dispatch('clearToken');
+          break;
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.el-submenu__icon-arrow el-icon-arrow-right {
+  display: none;
+}
+</style>
+<style lang="scss" scoped>
+.menu {
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  z-index:200;
+  width: 33px;
+  top: 100px;
+  max-height:80%;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+   &::-webkit-scrollbar {
+        display: none;
+  }
+}
+</style>
diff --git a/src/views/layout/components/SidebarItem.vue b/src/views/layout/components/SidebarItem.vue
new file mode 100644
index 0000000..23ce9ba
--- /dev/null
+++ b/src/views/layout/components/SidebarItem.vue
@@ -0,0 +1,128 @@
+<!--
+ * @file:
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2019-09-05 21:55:47
+ -->
+<!--
+@file 左侧边栏菜单子项
+@author ytyang
+@copyright NanJing Anshare Tech .Com
+@createDate 2018年11月13日15:21:56
+-->
+<template>
+  <div class="menu-wrapper">
+    <template v-for="item in routes">
+      <router-link v-if="!item.hidden&&item.children.length===1"
+                   :key="item.name"
+                   :to="item.path === '/' ? '/':item.path+'/'+item.children[0].path">
+        <el-tooltip effect="dark"
+                    :content="item.children[0].meta.title"
+                    placement="right">
+          <el-menu-item :index="item.path === '/' ? '/':item.path+'/'+item.children[0].path">
+            <!-- <SvgIcon v-if="item.icon"
+                    :icon-class="item.icon" /> {{ item.children[0].meta.title }} -->
+            <SvgIcon :icon-class="item.title" /> {{ item.children[0].meta.title }}
+          </el-menu-item>
+        </el-tooltip>
+      </router-link>
+      <el-submenu v-else-if="!item.noDropdown&&!item.hidden"
+                  :index="item.name"
+                  :key="item.name">
+        <template slot="title">
+          <!-- <SvgIcon v-if="item.icon"
+                    :icon-class="item.icon" /> {{ item.title }} -->
+          <SvgIcon :icon-class="item.title" /> {{ item.title }}
+          <!-- 父级待办事项红点 -->
+          <el-badge is-dot
+                    class="item"
+                    v-if="visibleParentCountNum(item)>0"></el-badge>
+        </template>
+        <template v-for="child in item.children"
+                  v-if="!child.hidden">
+          <sidebar-item v-if="child.children&&child.children.length>0"
+                        :key="child.name"
+                        :routes="[child]"
+                        class="menu-indent" />
+          <router-link v-else
+                       :key="child.name"
+                       :to="item.path+'/'+child.path"
+                       class="menu-indent">
+            <el-menu-item :index="item.path+'/'+child.path">
+              {{ child.meta.title }}
+              <!-- 待办事项数量统计 -->
+              <template v-if="child.meta.visibleCountNum">
+                <el-badge :value="getListNum(child.meta.visibleCountNum)"
+                          v-if="getListNum(child.meta.visibleCountNum) !== 0"
+                          class="subitem"></el-badge>
+              </template>
+            </el-menu-item>
+          </router-link>
+        </template>
+      </el-submenu>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarItem',
+  props: {
+    routes: {
+      type: Array,
+      default: () => [],
+    },
+    waitListNum: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    getWaitListNum() {
+      return this.waitListNum || {};
+    },
+  },
+  methods: {
+    // 返回各个待办菜单数量
+    getListNum(key) {
+      return this.getWaitListNum[key] || 0;
+    },
+    // 计算父级菜单是否需要显示 红点
+    visibleParentCountNum(item) {
+      let sum = 0;
+      for (const child of item.children) {
+        if (child.meta.visibleCountNum) {
+          sum += this.getListNum(child.meta.visibleCountNum);
+        }
+      }
+      return sum;
+    },
+  },
+};
+</script>
+<style scoped>
+.subitem >>> .el-badge__content {
+  margin-top: 10px;
+}
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.SvgIcon {
+  margin-left: -13px;
+  width: 22px !important;
+  height: 22px !important;
+  vertical-align: -0.4em !important;
+}
+
+.hideSidebar .menu-indent {
+  display: block;
+  text-indent: 1em;
+}
+.item {
+  margin-top: 8px !important;
+  margin-left: 8px !important;
+}
+.subitem {
+  position: absolute;
+  right: 15%;
+}
+</style>
diff --git a/src/views/layout/components/index.ts b/src/views/layout/components/index.ts
index 515d874..26d4b12 100644
--- a/src/views/layout/components/index.ts
+++ b/src/views/layout/components/index.ts
@@ -1,4 +1,5 @@
 
+export { default as Sidebar } from './Sidebar.vue';
 export { default as TagsView } from './TagsView.vue';
 export { default as AppMain } from './AppMain.vue';
 export { default as Header } from './Header.vue';