侧边栏提交

src/layout/components/Sidebar/Logo.vue

@@ -24,8 +24,8 @@ export default {
   },
   data() {
     return {
-      title: '信息化管理系统',
-      logo: require('@/assets/image/logo.png')
+      title: '网络设备监控管理平台',
+      logo: require('@/assets/image/logo_index.png')
     }
   }
 }
@@ -56,8 +56,8 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 34px;
+      height: 39px;
       vertical-align: middle;
       margin-right: 12px;
     }
@@ -68,7 +68,7 @@ export default {
       color: #fff;
       font-weight: 600;
       line-height: 50px;
-      font-size: 16px;
+      font-size: 18px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
     }

src/styles/sidebar.scss

@@ -29,6 +29,7 @@
 
     .scrollbar-wrapper {
       overflow-x: hidden !important;
+      background-color: #1D3D55;
     }
 
     .el-scrollbar__bar.is-vertical {
@@ -218,57 +219,52 @@
   background-color: #fff !important;
 }
 
-#app .sidebar-container .el-submenu .el-menu-item.is-active {
-  background-color: #fff !important;
-}
-
 .router-link-active .el-menu-item.is-active {
   background-color: #ffffff !important;
 }
 
 // hover样式
 .el-submenu__title:hover {
-  color: #46bcf2 !important;
+  color: #fff !important;
   .el-submenu__icon-arrow {
-    color: #46bcf2 !important;
+    color: #fff !important;
   }
 }
 .nest-menu .el-submenu > .el-submenu__title:hover {
   background-color: #fff !important;
-  color: #46bcf2 !important;
+  color: #fff !important;
 }
 .is-active > .el-submenu__title:hover {
-  color: #46bcf2 !important;
+  color: #fff !important;
 }
 .el-submenu .el-menu-item:hover {
-  color: #46bcf2 !important;
+  color: #fff !important;
 }
 .el-menu-item.submenu-title-noDropdown:hover {
-  color: #46bcf2 !important;
+  color: #fff !important;
 }
 .el-menu--vertical .el-menu-item:hover {
-  color: #46bcf2 !important;
+  color: #fff !important;
 }
-
 .el-submenu.is-opened {
   background-color: #FFFFFF !important;
 
   > .el-submenu__title {
-    background-color: #fff !important;
-    color: #46bcf2 !important;
+    background-color: #168DE8 !important;
+    color: #fff !important;
 
     .el-submenu__icon-arrow {
-      color: #46bcf2 !important;
+      color: #fff !important;
     }
   }
 
   .el-menu {
     .el-menu-item {
-      background-color: #fff !important;
-      color: #000000 !important;
+      background-color: #142A3B !important;
+      color: #fff !important;
 
       &.is-active {
-        color: #46bcf2 !important;
+        color: #fff !important;
       }
     }
   }
@@ -279,8 +275,19 @@
       color: #000000 !important;
 
       .el-submenu__icon-arrow {
-        color: #46bcf2 !important;
+        color: #fff !important;
       }
     }
   }
 }
+#app .sidebar-container .el-submenu .el-menu-item.is-active {
+  // background-color: #168DE8 !important;
+  color: #168DE8 !important;
+}
+#app .sidebar-container .el-submenu .el-menu-item:hover {
+  background-color: #142A3B !important;
+  color: #168DE8 !important;
+}
+#app .sidebar-container .nest-menu li {
+  padding-left: 70px !important;
+}

src/styles/variables.scss

@@ -84,8 +84,8 @@ $menuText:#fff;
 $menuActiveText:#46BCF2;
 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#46BCF2;
-$menuHover:#fff;
+$menuBg: #1D3D55;
+$menuHover: #168DE8;
 
 $subMenuBg:#46BCF2;
 $subMenuHover:#fff;

src/views/login/login.vue

@@ -232,6 +232,10 @@ export default {
       background-color: #1f6aa2;
       border-color: #1f6aa2;
     }
+    .blue-btn:hover {
+      background-color: #168DE8;
+      border-color: #168DE8;
+    }
   }
   .el-input {
     height: 38px;