SiderBar V1

src/layout/components/AppMain.vue

@@ -32,11 +32,6 @@ export default {
 }
 
 .hasTagsView {
-  .app-main {
-    /* 34 = tags-view */
-    min-height: calc(100vh - 34px - #{$headerHeight});
-  }
-
   .fixed-header+.app-main {
     padding-top: 34px;
   }

src/layout/components/HeaderTop.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="header-container">
-    <!-- <div class="header-left">
+    <div class="header-left">
       <div>
         <img class="logo" src="/images/logo.png" alt="logo">
       </div>
@@ -11,7 +11,7 @@
           <div class="tip-theme-right">牢记使命</div>
         </div>
       </div>
-    </div> -->
+    </div>
     <div class="header-right">
       <div class="right-top">
         <el-popover class="right-top-item" placement="bottom-start" width="400" trigger="click" @show="showData">

src/layout/components/Sidebar/Item.vue

@@ -15,7 +15,6 @@ export default {
   render(h, context) {
     const { icon, title } = context.props
     const vnodes = []
-    const node = <div><svg-icon icon-class={icon}/><div class='menu-title'>{(title)}</div></div>
     if (icon) {
       if (icon.includes('el-icon')) {
         vnodes.push(<i class={[icon, 'sub-el-icon']} />)
@@ -25,9 +24,9 @@ export default {
     }
 
     if (title) {
-      vnodes.push(<div>{(title)}</div>)
+      vnodes.push(<span class='menu-title'>{(title)}</span>)
     }
-    return [node]
+    return <div class='menu-box'>{vnodes}</div>
   }
 }
 </script>

src/layout/index.vue

@@ -86,7 +86,7 @@ export default {
   }
 
   .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
+    width: calc(100% - #{$siderBarCollapseWidth})
   }
 
   .mobile .fixed-header {

src/router/modules/application.js

@@ -10,7 +10,7 @@ export default {
     name: 'App',
     meta: {
       title: '软件下载',
-      icon: 'lock'
+      icon: 'xiazai'
     }
   }]
 }

src/router/modules/business.js

@@ -10,7 +10,7 @@ export default {
     name: 'Biz',
     meta: {
       title: '业务中心',
-      icon: 'lock'
+      icon: 'yewu'
     }
   }]
 }

src/router/modules/faq.js

@@ -10,7 +10,7 @@ export default {
     name: 'Faq',
     meta: {
       title: '常见问题',
-      icon: 'lock'
+      icon: 'wenti'
     }
   }]
 }

src/router/modules/home.js

@@ -12,7 +12,7 @@ export default {
     name: 'Home',
     meta: {
       title: '工作台',
-      icon: 'dashboard'
+      icon: 'shouye'
     }
   }]
 }

src/router/modules/info.js

@@ -10,7 +10,7 @@ export default {
     name: 'Info',
     meta: {
       title: '信息管理',
-      icon: 'lock'
+      icon: 'xinxiguanli'
     }
   }]
 }

src/router/modules/log.js

@@ -11,7 +11,7 @@ export default {
     name: 'Log',
     meta: {
       title: '日志查询',
-      icon: 'lock'
+      icon: 'rizhi-01'
     }
   }]
 }

src/router/modules/system.js

@@ -10,7 +10,7 @@ export default {
     name: 'System',
     meta: {
       title: '应用中心',
-      icon: 'lock'
+      icon: 'yingyongzhongxin'
     }
   }]
 }

src/styles/index.scss

@@ -6,8 +6,13 @@
 @import './sidebar.scss';
 @import './btn.scss';
 
-body {
+html {
   height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  height: calc(100% - #{$headerHeight});
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -18,11 +23,6 @@ label {
   font-weight: 700;
 }
 
-html {
-  height: 100%;
-  box-sizing: border-box;
-}
-
 #app {
   height: 100%;
 }

src/styles/sidebar.scss

@@ -6,13 +6,15 @@
     margin-left: $sideBarWidth;
     margin-top: $headerHeight;
     position: relative;
+    background-color: #f5f8fe;
+    padding-left: 5px;
   }
 
   .sidebar-container {
     transition: width 0.28s;
     width: $sideBarWidth !important;
     background-color: $menuBg;
-    height: 100%;
+    height: calc(100% - 120px);
     position: fixed;
     font-size: 0px;
     top: $headerHeight;
@@ -20,6 +22,7 @@
     bottom: 0;
     z-index: 1001;
     overflow: hidden;
+    border-right: 1px solid #ececec;
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -94,24 +97,36 @@
 
   .hideSidebar {
     .sidebar-container {
-      width: 54px !important;
+      width: $siderBarCollapseWidth !important;
     }
 
     .main-container {
-      margin-left: 54px;
+      margin-left: $siderBarCollapseWidth;
     }
 
     .submenu-title-noDropdown {
       padding: 0 !important;
       position: relative;
 
-      &.el-menu-item{
-        height: 100px;
-        .menu-title{
-          line-height: 0;
+      &.el-menu-item {
+        .menu-box {
+          line-height: 0 !important;
           text-align: center;
+          padding-top: 10px;
+        }
+
+        .svg-icon {
+          margin: 0;
+        }
+
+        .menu-title {
+          display: block;
+          font-size: 10px;
+          height: 30px;
+          line-height: 30px;
         }
       }
+
       .svg-icon {
         margin-left: 20px;
       }
@@ -119,6 +134,7 @@
       .sub-el-icon {
         margin-left: 19px;
       }
+
       .el-tooltip {
         padding: 0 !important;
 

src/styles/variables.scss

@@ -10,16 +10,17 @@ $panGreen: #30B08F;
 
 // sidebar
 $menuText: #bfcbd9;
-$menuActiveText: #36a3f7;
+$menuActiveText: #0056DD;
 $subMenuActiveText: #36a3f7; // https://github.com/ElemeFE/element/issues/12951
 
 $menuBg: #ffffff;
-$menuHover: #f0f2f5;
+$menuHover: #ebf2fd;
 
 $subMenuBg: #ffffff;
 $subMenuHover: #f0f2f5;
 
 $sideBarWidth: 210px;
+$siderBarCollapseWidth: 64px;
 $headerHeight: 120px;
 
 // the :export directive is the magic sauce for webpack
@@ -33,4 +34,5 @@ $headerHeight: 120px;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
+  siderBarCollapseWidth: $siderBarCollapseWidth;
 }

src/views/home/index.vue

@@ -174,10 +174,6 @@ export default {
   }
 }
 
-.vue-grid-layout {
-    background: #eee;
-}
-
 .vue-grid-item:not(.vue-grid-placeholder) {
     background: #ccc;
     border: 1px solid black;