no message

Former-commit-id: 08914438f5ff8386284563d43482572552e5ec8e
Former-commit-id: 0d520c6d365d5d44b8a2c93f3bab8a8368566013
Former-commit-id: 8172f79950f2dd5d7bd582cf169cfd8b74b12cb0

src/assets/style/theme/default.scss

@@ -81,6 +81,8 @@ $color: #409EFF;
     .el-container {
       // 侧边栏
       .el-aside {
+        transition: width .3s;
+        overflow: inherit;
         .dd-side-menu-empty {
           background-color: rgba(#000, .03);
           margin: $margin;
@@ -91,18 +93,19 @@ $color: #409EFF;
           color: $color-text-sub;
         }
         .el-menu {
-          background-color: transparent;
+          background-color: $color-bg;
+          border-right: none;
           .el-menu-item {
             &:focus {
-              background-color: transparent;
+              background-color: $color-bg;
             }
             &:hover {
-              background-color: transparent;
+              background-color: $color-bg;
             }
           }
           .el-submenu__title {
             &:hover {
-              background-color: transparent;
+              background-color: $color-bg;
             }
           }
         }

src/components/core/MainLayout/index.vue

@@ -4,15 +4,15 @@
       <div class="logo-group">
         <img src="@/assets/image/logo/header.png">
       </div>
-      <div class="toggle-sidemenu-btn">
+      <div class="toggle-sidemenu-btn" @click="toggleAside">
         <Icon name="bars"></Icon>
       </div>
       <HeaderMenu></HeaderMenu>
       <HeaderRight></HeaderRight>
     </el-header>
     <el-container>
-      <el-aside style="width: 200px;">
+      <el-aside :style="asideStyle">
-        <SideMenu></SideMenu>
+        <SideMenu :collapse="collapse"></SideMenu>
       </el-aside>
       <el-main>
         <router-view></router-view>
@@ -30,7 +30,20 @@ export default {
   },
   data () {
     return {
-      theme: 'default'
+      theme: 'default',
+      collapse: false
+    }
+  },
+  computed: {
+    asideStyle () {
+      return {
+        width: `${this.collapse ? '65' : '200'}px`
+      }
+    }
+  },
+  methods: {
+    toggleAside () {
+      this.collapse = !this.collapse
     }
   }
 }