菜单变细

src/dashoo.cn/frontend_web/src/assets/styles/base/variables.scss

@@ -60,8 +60,8 @@ $main-light:                #3e4c59;
 $main-dark:                 #283643;
 // $main:                      #2b3b49;
 // $main-darker:               #24313c;
-$main:                      #263238;
-$main-darker:               #004EA2;
+$main:                      #FFFFFF;
+$main-darker:               #BBBBBB;
 
 // - Brand color
 $primary:                   #20A0FF;

src/dashoo.cn/frontend_web/src/components/sidebar.vue

@@ -11,50 +11,57 @@
   </aside>
 </template>-->
 
+<!--background-color="#263238"
+text-color="#fff"
+active-text-color="#1890FF"
+:unique-opened="true"-->
+
+<!--background-color="#304156"
+        text-color="#bfcbd9"
+        active-text-color="#409EFF"-->
+
 <template>
-  <aside class="sidebar" id="aside" :class="{ collapse: isMenuHidden }">
-    <div style="height: calc(100vh - 75px); overflow-y: auto; overflow-x: hidden" class="test">
-    <el-menu
-      :collapse="isCollapse"
-      class="el-menu-vertical-demo"
-      :router="true"
-      default-active="/"
-      background-color="#263238"
-      text-color="#fff"
-      active-text-color="#1890FF"
-      :collapse-transition="false"
-    >
-      <template v-for="(item, index) in menus">
-        <el-menu-item v-if="!item.children" :index="item.url" :key="item.id" >
-          <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 10px;"></i>
-          <span slot="title">{{ item.name }}</span>
-        </el-menu-item>
-
-        <el-submenu v-if="item.children" :index="item.name" :key="item.id">
-          <template slot="title">
+  <aside class="sidebar-container sidebar" id="aside" :class="{ collapse: isMenuHidden }">
+    <el-scrollbar style="height: calc(100vh - 75px); overflow: hidden;" wrap-class="scrollbar-wrapper">
+      <el-menu
+        :collapse="isCollapse"
+        :router="true"
+        default-active="/"
+        :collapse-transition="false"
+
+      >
+        <template v-for="(item, index) in menus">
+          <el-menu-item v-if="!item.children" :index="item.url" :key="item.id">
             <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 10px;"></i>
             <span slot="title">{{ item.name }}</span>
-          </template>
-          <template v-if="item.children" v-for="sub in item.children" >
-            <el-menu-item v-if="!sub.children"  :index="sub.url"  :key="sub.id">
+          </el-menu-item>
+
+          <el-submenu v-if="item.children" :index="item.name" :key="item.id" class="">
+            <template slot="title">
+              <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 10px;"></i>
+              <span slot="title">{{ item.name }}</span>
+            </template>
+            <template v-if="item.children" v-for="sub in item.children" >
+              <el-menu-item v-if="!sub.children"  :index="sub.url"  :key="sub.id">
                 <!--<i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 10px;"></i>-->
                 <span slot="title">{{ sub.name }}</span>
-            </el-menu-item>
-            <el-submenu v-if="sub.children" :index="sub.name" :key="sub.id">
-              <template slot="title">
-                <i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 10px;"></i>
-                <span slot="title">{{ sub.name }}</span>
-              </template>
-              <el-menu-item v-for="sub2 in sub.children" :index="sub2.url" :key="sub2.id">
-                <span slot="title">{{ sub2.name }}</span>
               </el-menu-item>
-            </el-submenu>
-          </template>
+              <el-submenu v-if="sub.children" :index="sub.name" :key="sub.id">
+                <template slot="title">
+                  <i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 10px;"></i>
+                  <span slot="title">{{ sub.name }}</span>
+                </template>
+                <el-menu-item v-for="sub2 in sub.children" :index="sub2.url" :key="sub2.id">
+                  <span slot="title">{{ sub2.name }}</span>
+                </el-menu-item>
+              </el-submenu>
+            </template>
+
+          </el-submenu>
+        </template>
+      </el-menu>
+    </el-scrollbar>
 
-        </el-submenu>
-      </template>
-    </el-menu>
-    </div>
     <footer class="footer">
       <el-button size="mini" type="text" icon="icon-before icon-circle-right" circle v-if="isCollapse == true" @click="floderMenu"></el-button>
       <el-button size="mini" type="text" icon="icon-before icon-circle-left" circle v-if="isCollapse == false" @click="floderMenu"></el-button>
@@ -184,11 +191,244 @@ export default class Sidebar extends Vue {
 }
 </script>
 
-<style>
-.test::-webkit-scrollbar {
-   opacity:0.5;
-}
-  .el-menu-vertical-demo:not(.el-menu--collapse) {
-    width: 200px;
+<style lang="scss">
+  // base color
+  $blue:#324157;
+  $light-blue:#3A71A8;
+  $red:#C03639;
+  $pink: #E65D6E;
+  $green: #30B08F;
+  $tiffany: #4AB7BD;
+  $yellow:#FEC171;
+  $panGreen: #30B08F;
+
+  //sidebar
+  /*$menuText:#bfcbd9;
+  $menuActiveText:#409EFF;
+  $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951*/
+
+  $menuBg:#E6F7FF;
+  $menuHover:#ECF5FF;
+
+  $subMenuBg:#E6F7FF;
+  $subMenuHover:#ECF5FF;
+
+  $sideBarWidth: 200px;
+
+  // 侧边栏 Sidebar container
+  .sidebar-container {
+    /*transition: width 0.28s;
+    width: $sideBarWidth !important;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    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;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+
+      .el-scrollbar__view {
+        height: 100%;
+      }
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
+    .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;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: $menuHover !important;
+      }
+    }
+
+    //self-defined
+    .el-menu-item, .el-submenu__title {
+      height: 40px;
+      line-height: 40px;
+    }
+
+    .is-active>.el-submenu__title {
+      /*color: $subMenuActiveText !important;*/
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: $sideBarWidth !important;
+      background-color: $subMenuBg !important;
+
+      &:hover {
+        background-color: $subMenuHover !important;
+      }
+    }
   }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    .svg-icon {
+      margin-right: 0px;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      &>.el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $sideBarWidth !important;
+  }
+
+  // 适配移动端, Mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform .28s;
+      width: $sideBarWidth !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$sideBarWidth, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+
+  // when menu collapsed
+  .el-menu--vertical {
+    & > .el-menu {
+      .svg-icon {
+        margin-right: 16px;
+      }
+    }
+
+    .nest-menu .el-submenu > .el-submenu__title,
+    .el-menu-item {
+      height: 30px;
+      line-height: 30px;
+      &:hover {
+        // you can use $subMenuHover
+        background-color: $menuHover !important;
+      }
+    }
+
+    // the scroll bar appears when the subMenu is too long
+    > .el-menu--popup {
+      max-height: 100vh;
+      overflow-y: auto;
+
+      &::-webkit-scrollbar-track-piece {
+        background: #d3dce6;
+      }
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #99a9bf;
+        border-radius: 20px;
+      }
+    }
+  }
+
 </style>