sync

src/layout/components/AppMain.vue

@@ -23,26 +23,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/variables.scss";
 .app-main {
-  /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
+  min-height: calc(100vh - #{$headerHeight});
   width: 100%;
   position: relative;
   overflow: hidden;
 }
 
 .fixed-header+.app-main {
-  padding-top: 50px;
+  padding-top: #{$headerHeight};
 }
 
 .hasTagsView {
   .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    /* 34 = tags-view */
+    min-height: calc(100vh - 34px - #{$headerHeight});
   }
 
   .fixed-header+.app-main {
-    padding-top: 84px;
+    padding-top: calc(34px + #{$headerHeight});
   }
 }
 </style>

src/layout/components/Sidebar/Item.vue

@@ -15,7 +15,7 @@ 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 +25,9 @@ export default {
     }
 
     if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
+      vnodes.push(<div>{(title)}</div>)
     }
-    return vnodes
+    return [node]
   }
 }
 </script>

src/styles/sidebar.scss

@@ -105,6 +105,20 @@
       padding: 0 !important;
       position: relative;
 
+      &.el-menu-item{
+        height: 100px;
+        .menu-title{
+          line-height: 0;
+          text-align: center;
+        }
+      }
+      .svg-icon {
+        margin-left: 20px;
+      }
+
+      .sub-el-icon {
+        margin-left: 19px;
+      }
       .el-tooltip {
         padding: 0 !important;
 

src/styles/variables.scss

@@ -10,17 +10,17 @@ $panGreen: #30B08F;
 
 // sidebar
 $menuText: #bfcbd9;
-$menuActiveText: #409EFF;
-$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+$menuActiveText: #36a3f7;
+$subMenuActiveText: #36a3f7; // https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #304156;
-$menuHover: #263445;
+$menuBg: #ffffff;
+$menuHover: #f0f2f5;
 
-$subMenuBg: #1f2d3d;
-$subMenuHover: #001528;
+$subMenuBg: #ffffff;
+$subMenuHover: #f0f2f5;
 
 $sideBarWidth: 210px;
-$headerHeight: 80px;
+$headerHeight: 0px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass