调整菜单样式

jwtech-admin-page/src/assets/styles/index.scss

@@ -143,8 +143,9 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
-  background-color: #eef3ff;
-  min-height: calc(100vh - 50px);
+  // background-color: #eef3ff;
+  background-color: #f4f9f7;
+  min-height: calc(100vh - 56px);
 }
 
 .components-container {

jwtech-admin-page/src/assets/styles/sidebar.scss

@@ -6,24 +6,25 @@
     margin-left: $sideBarWidth;
     position: relative;
     //margin-top: 70px;
-    padding-top: 50px;
+    padding-top: 56px;
   }
 
   .sidebar-container {
     transition: width 0.28s;
     width: $sideBarWidth !important;
     background-color: $menuBg;
-    height: calc(100% - 50px);
+    height: calc(100% - 56px);
     //height: 100%;
     position: fixed;
     font-size: 0px;
-    top: 50px;
+    top: 56px;
     //top: 0;
     bottom: 0;
     left: 0;
     z-index: 1001;
     //z-index: -1001;
     overflow: hidden;
+    box-shadow: 2px 0px 8px 0px #0000000d;
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -66,14 +67,46 @@
       border: none;
       height: 100%;
       width: 100% !important;
+
+      .el-submenu.is-opened  > .el-submenu__title .el-submenu__icon-arrow {
+        transform: rotate(180deg);
+      }
+      
+      .el-submenu.is-opened > .el-submenu__title {
+        margin-bottom: 0;
+      }
+
+      .el-menu-item.is-active {
+        position: relative;
+        font-weight: 600;
+        background-color: #ebf7f5 !important;
+        &::after {
+          content: "";
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 3px;
+          height: 100%;
+          background: #36b29e;
+        }
+        &:hover {
+          background-color: #ebf7f5 !important;
+        }
+      }
     }
 
     // menu hover
-    .submenu-title-noDropdown,
+    .submenu-title-noDropdown {
+      font-weight: 600;
+      &:hover {
+        color: #36b29e !important;
+        background-color: $menuHover !important;
+      }
+    }
     .el-submenu__title {
+      font-weight: 600;
       &:hover {
-        color: #36b29e;
-        // background-color: $menuHover !important;
+        background-color: $menuHover !important;
       }
     }
 
@@ -84,11 +117,11 @@
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
-      background-color: $subMenuBg !important;
+      background-color: $subMenuBg;
 
       &:hover {
-        color: #36b29e;
-        // background-color: $subMenuHover !important;
+        color: #36b29e !important;
+        background-color: $subMenuHover !important;
       }
     }
   }
@@ -96,6 +129,9 @@
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;
+      .el-submenu.is-opened > .el-submenu__title {
+        margin-bottom: 13px;
+      }
     }
 
     .main-container {

jwtech-admin-page/src/assets/styles/variables.scss

@@ -16,10 +16,10 @@ $subMenuActiveText:#36b29e; // https://github.com/ElemeFE/element/issues/12951
 
 
 $menuBg:#fff;
-$menuHover:#2d4391;
+$menuHover:#f8f9fb;
 
 $subMenuBg:#fff;
-$subMenuHover:#2d4391;
+$subMenuHover:#f8f9fb;
 
 $sideBarWidth: 256px;
 

jwtech-admin-page/src/layout/components/AppMain.vue

@@ -33,14 +33,14 @@ export default {
 <style lang="scss" scoped>
 .app-main {
   /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
+  min-height: calc(100vh - 56px);
   width: 100%;
   position: relative;
   overflow: hidden;
 }
 
 .fixed-header + .app-main {
-  padding-top: 50px;
+  padding-top: 56px;
 }
 
 .hasTagsView {

jwtech-admin-page/src/layout/components/Navbar.vue

@@ -150,10 +150,10 @@ export default {
     rgba(131, 179, 107, 1) 100%
   ) !important;
   // height: 70px;
-  height: 50px;
+  height: 56px;
   overflow: hidden;
   position: relative;
-  background: #eef3ff;
+  // background: #eef3ff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   display: flex;
   align-items: center;
@@ -222,6 +222,7 @@ export default {
           cursor: pointer;
           width: 30px;
           height: 30px;
+          background: #fff;
           border-radius: 50%;
         }
 

jwtech-admin-page/src/layout/components/Sidebar/Logo.vue

@@ -21,7 +21,7 @@
 <script>
 // import logoImg from '@/assets/logo/logo-white.png'
 // import logoImg from '@/assets/logo/log-2.png'
-import logoImg from "@/assets/logo/log-tianhui.png";
+import logoImg from "@/assets/logo/logo-shuili.jpg";
 // import logoImg from '@/assets/logo/logo.png'
 
 export default {
@@ -77,7 +77,7 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      //width: 32px;
+      width: 32px;
       //height: 32px;
       vertical-align: middle;
       margin-right: 12px;

jwtech-admin-page/src/layout/index.vue

@@ -132,7 +132,8 @@ export default {
   position: relative;
   height: 100%;
   width: 100%;
-  background: #eef3ff;
+  // background: #eef3ff;
+  background: #f4f9f7;
 
   &.mobile.openSidebar {
     position: fixed;