From 8186d9ef3aaffe23e32acdb0fa2d52d3e6db4e61 Mon Sep 17 00:00:00 2001
From: pixel <303176530@qq.com>
Date: Thu, 21 May 2020 17:22:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/view/layout/aside/index.vue | 50 ++++++++++++++---------------
 web/src/view/layout/index.vue       |  9 +++++-
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/web/src/view/layout/aside/index.vue b/web/src/view/layout/aside/index.vue
index 19672f68..9fc5a6ee 100644
--- a/web/src/view/layout/aside/index.vue
+++ b/web/src/view/layout/aside/index.vue
@@ -1,26 +1,28 @@
 <template>
   <div>
-    <el-scrollbar style="height:calc(100vh)">
-      <el-menu
-        class="el-menu-vertical"
-        :collapse="isCollapse"
-        :collapse-transition="true"
-        :default-active="active"
-        @select="selectMenuItem"
-        active-text-color="#fff"
-        text-color="rgb(191, 203, 217)"
-        unique-opened
-      >
-        <template v-for="item in asyncRouters[0].children">
-          <aside-component :key="item.name" :routerInfo="item" v-if="!item.hidden" />
-        </template>
-      </el-menu>
+    <el-scrollbar style="height:calc(100vh - 64px)">
+      <transition :duration="{ enter: 800, leave: 100 }" mode="out-in" name="el-fade-in-linear">
+        <el-menu
+          :collapse="isCollapse"
+          :collapse-transition="true"
+          :default-active="active"
+          @select="selectMenuItem"
+          active-text-color="#fff"
+          class="el-menu-vertical"
+          text-color="rgb(191, 203, 217)"
+          unique-opened
+        >
+          <template v-for="item in asyncRouters[0].children">
+            <aside-component :key="item.name" :routerInfo="item" v-if="!item.hidden" />
+          </template>
+        </el-menu>
+      </transition>
     </el-scrollbar>
   </div>
 </template>
 
 <script>
-import { mapGetters,mapMutations } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import AsideComponent from '@/view/layout/aside/asideComponent'
 export default {
   name: 'Aside',
@@ -31,7 +33,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations("history",["addHistory"]),
+    ...mapMutations('history', ['addHistory']),
     selectMenuItem(index) {
       if (index === this.$route.name) return
       this.$router.push({ name: index })
@@ -39,7 +41,6 @@ export default {
   },
   computed: {
     ...mapGetters('router', ['asyncRouters'])
-
   },
   components: {
     AsideComponent
@@ -47,17 +48,16 @@ export default {
   created() {
     this.active = this.$route.name
     let screenWidth = document.body.clientWidth
-     if(screenWidth<1000){
-       this.isCollapse = !this.isCollapse
-      }
+    if (screenWidth < 1000) {
+      this.isCollapse = !this.isCollapse
+    }
 
-     this.$bus.on('collapse', (item) => {
+    this.$bus.on('collapse', item => {
       this.isCollapse = item
     })
-
   },
-  watch:{
-    $route(){
+  watch: {
+    $route() {
       this.active = this.$route.name
     }
   },
diff --git a/web/src/view/layout/index.vue b/web/src/view/layout/index.vue
index 145d2ece..ad74443f 100644
--- a/web/src/view/layout/index.vue
+++ b/web/src/view/layout/index.vue
@@ -319,8 +319,15 @@ $mainHight: 100vh;
       &:not(.el-menu--collapse) {
         width: 220px;
       }
+      
     }
-
+.el-menu--collapse{
+        li{
+          .el-tooltip,.el-submenu__title{
+            padding:0px 15px !important;
+          }
+        }
+      }
     &::-webkit-scrollbar {
       display: none;
     }