[Update] 修改菜单

src/components/Hamburger/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="" @click="toggleClick">
-    <el-button type="primary" size="mini"> <i class="fa fa-bars" style="color: white" /> </el-button>
+    <el-button type="primary" size="mini"> <i class="fa fa-bars" style="color: white; margin-right: 0" /> </el-button>
   </div>
 </template>
 

src/layout/components/Sidebar/Item.vue

@@ -17,7 +17,9 @@ export default {
     const vnodes = []
 
     if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
+      const cls = 'fa fa-' + icon
+      vnodes.push(<i class={cls} />)
+      // vnodes.push(<svg-icon icon-class={icon}/>)
     }
 
     if (title) {

src/router/index.js

@@ -204,19 +204,6 @@ export const constantRoutes = [
         meta: { title: 'databasePermissionList' }
       }
     ]
-  },
-
-  {
-    path: '/form',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        name: 'Form',
-        component: () => import('@/views/form/index'),
-        meta: { title: 'Form', icon: 'form' }
-      }
-    ]
   }
 ]
 

src/styles/menu.scss

@@ -3,47 +3,71 @@
   font-weight: 600;
 }
 
-.el-menu {
-  border: 0px !important;
-}
-// 重置下拉菜单Padding
-li.el-submenu.is-opened > ul > .el-menu-item {
-  padding-left: 50px !important;
-  font-size: 13px !important;
-  height: 30px !important;
-  line-height: 30px !important;
-}
-//重置字体大小 菜单宽度
-.el-submenu /deep/ .el-submenu__title, .submenu-title-noDropdown{
-  height: 46px !important;
-  line-height: 46px !important;
+.el-menu  i.fa {
+  width: 14px;
+  margin-right: 10px;
 }
 
-.el-submenu, .el-menu-item {
-  font-size: 14px !important;
-  font-weight: 600;
+.el-menu .is-active i.fa {
+  color: white;
 }
 
-.el-menu-item:not(.submenu-title-noDropdown) {
-  height: 32px !important;
-  line-height: inherit !important;
+.el-submenu .el-menu-item {
+  height: 35px;
+  line-height: 35px;
+  padding: 0 52px;
+  min-width: 200px;
 }
 
-.nest-menu:last-child {
-  margin-bottom: 10px;
+.el-menu-item, .el-submenu__title {
+  height: 46px;
+  line-height: 46px;
 }
 
 li.is-opened{
   border-left: 4px solid #19aa8d;
 }
 
-.el-submenu.is-opened > ul > li > li{
-  padding-right: 41px !important;
-  min-width: 0 !important;
-}
-.el-submenu > div i{
-  margin-right: 10px;
-}
-.el-menu-item i {
-  margin-right: 10px;
-}
+//
+//.el-menu {
+//  border: 0px !important;
+//}
+//// 重置下拉菜单Padding
+//li.el-submenu.is-opened > ul > .el-menu-item {
+//  padding-left: 50px !important;
+//  font-size: 13px !important;
+//  height: 30px !important;
+//  line-height: 30px !important;
+//}
+////重置字体大小 菜单宽度
+//.el-submenu /deep/ .el-submenu__title, .submenu-title-noDropdown{
+//  height: 46px !important;
+//  line-height: 46px !important;
+//}
+//
+//.el-submenu, .el-menu-item {
+//  font-size: 14px !important;
+//  font-weight: 600;
+//}
+//
+//.el-menu-item:not(.submenu-title-noDropdown) {
+//  height: 32px !important;
+//  line-height: inherit !important;
+//}
+//
+//.nest-menu:last-child {
+//  margin-bottom: 10px;
+//}
+//
+
+//
+//.el-submenu.is-opened > ul > li > li{
+//  padding-right: 41px !important;
+//  min-width: 0 !important;
+//}
+//.el-submenu > div i{
+//  margin-right: 10px;
+//}
+//.el-menu-item i {
+//  margin-right: 10px;
+//}

src/styles/variables.scss

@@ -4,13 +4,13 @@ $menuActiveText: white;
 $menuTextWeight: 600;
 $subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#304156;
-$menuHover:#263445;
+$menuBg: #2f4050;
+$menuHover: #293846;
 
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
+$subMenuBg: #1f2d3d;
+$subMenuHover: #001528;
 
-$sideBarWidth: 210px;
+$sideBarWidth: 220px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass