tweak

src/styles/element-ui.scss

@@ -1,4 +1,4 @@
- //to reset element-ui default css
+//to reset element-ui default css
 .el-upload {
   input[type="file"] {
     display: none !important;
@@ -21,6 +21,7 @@
 .upload-container {
   .el-upload {
     width: 100%;
+
     .el-upload-dragger {
       width: 100%;
       height: 200px;

src/styles/index.scss

@@ -21,7 +21,7 @@ html {
   box-sizing: border-box;
 }
 
-#app{
+#app {
   height: 100%;
 }
 
@@ -40,9 +40,9 @@ a:hover {
   text-decoration: none;
 }
 
-div:focus{
+div:focus {
   outline: none;
- }
+}
 
 a:focus,
 a:active {
@@ -69,7 +69,7 @@ a:hover {
 }
 
 //main-container全局样式
-.app-main{
+.app-main {
   min-height: 100%
 }
 

src/styles/mixin.scss

@@ -10,9 +10,11 @@
   &::-webkit-scrollbar-track-piece {
     background: #d3dce6;
   }
+
   &::-webkit-scrollbar {
     width: 6px;
   }
+
   &::-webkit-scrollbar-thumb {
     background: #99a9bf;
     border-radius: 20px;
@@ -24,4 +26,3 @@
   width: 100%;
   height: 100%;
 }
-

src/styles/sidebar.scss

@@ -1,15 +1,17 @@
 #app {
+
   // 主体区域
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
-    margin-left: 180px;
+    margin-left: $sideBarWidth;
     position: relative;
   }
+
   // 侧边栏
   .sidebar-container {
     transition: width 0.28s;
-    width: 180px !important;
+    width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -18,62 +20,79 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
+
     //reset element-ui css
     .horizontal-collapse-transition {
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
     }
-    .el-scrollbar__bar.is-vertical{
+
+    .el-scrollbar__bar.is-vertical {
       right: 0px;
     }
+
     .scrollbar-wrapper {
-      overflow-x: hidden!important;
+      overflow-x: hidden !important;
+
       .el-scrollbar__view {
         height: 100%;
       }
     }
+
     .is-horizontal {
       display: none;
     }
+
     a {
       display: inline-block;
       width: 100%;
       overflow: hidden;
     }
+
     .svg-icon {
       margin-right: 16px;
     }
+
     .el-menu {
       border: none;
       height: 100%;
       width: 100% !important;
     }
-    .is-active > .el-submenu__title{
-      color: #f4f4f5!important;
+
+    .is-active>.el-submenu__title {
+      color: #f4f4f5 !important;
     }
   }
+
   .hideSidebar {
     .sidebar-container {
       width: 36px !important;
     }
+
     .main-container {
       margin-left: 36px;
     }
+
     .submenu-title-noDropdown {
       padding-left: 10px !important;
       position: relative;
+
       .el-tooltip {
         padding: 0 10px !important;
       }
     }
+
     .el-submenu {
       overflow: hidden;
+
       &>.el-submenu__title {
         padding-left: 10px !important;
+
         .el-submenu__icon-arrow {
           display: none;
         }
       }
     }
+
     .el-menu--collapse {
       .el-submenu {
         &>.el-submenu__title {
@@ -88,16 +107,19 @@
       }
     }
   }
+
   .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
   .sidebar-container .el-submenu .el-menu-item {
-    min-width: 180px !important;
+    min-width: $sideBarWidth !important;
     background-color: $subMenuBg !important;
+
     &:hover {
       background-color: $menuHover !important;
     }
   }
+
   .el-menu--collapse .el-menu .el-submenu {
-    min-width: 180px !important;
+    min-width: $sideBarWidth !important;
   }
 
   //适配移动端
@@ -105,18 +127,22 @@
     .main-container {
       margin-left: 0px;
     }
+
     .sidebar-container {
       transition: transform .28s;
-      width: 180px !important;
+      width: $sideBarWidth !important;
     }
+
     &.hideSidebar {
       .sidebar-container {
         transition-duration: 0.3s;
-        transform: translate3d(-180px, 0, 0);
+        transform: translate3d(-$sideBarWidth, 0, 0);
       }
     }
   }
+
   .withoutAnimation {
+
     .main-container,
     .sidebar-container {
       transition: none;
@@ -124,9 +150,9 @@
   }
 }
 
-.el-menu--vertical{
-  & >.el-menu{
-    .svg-icon{
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
       margin-right: 16px;
     }
   }

src/styles/transition.scss

@@ -16,10 +16,12 @@
 .fade-transform-enter-active {
   transition: all .5s;
 }
+
 .fade-transform-enter {
   opacity: 0;
   transform: translateX(-30px);
 }
+
 .fade-transform-leave-to {
   opacity: 0;
   transform: translateX(30px);

src/styles/variables.scss

@@ -2,3 +2,4 @@
 $menuBg:#304156;
 $subMenuBg:#1f2d3d;
 $menuHover:#001528;
+$sideBarWidth: 180px;