修改菜单颜色logo

src/layout/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container class="layout-container-demo">
-    <el-aside width="210px" :style="{ 'background-color': '#304156' }">
+    <el-aside width="210px" :style="{ 'background-color': '#59b2e4' }">
       <component :is="cAside"></component>
     </el-aside>
     <el-main>

src/layout/parts/Sidebar.vue

@@ -5,10 +5,18 @@
       <el-col :span="24" class="main">
         <el-col :span="24" class="first">
           <img src="/logo.png" class="logo-image" />
-          <span class="logo-title">{{ $t('login.title') }}</span>
+          <div class="logo-title">{{ $t('login.title') }}</div>
         </el-col>
         <el-col :span="24" class="second">
-          <el-menu class="sidebar-el-menu" :default-active="onRoutes" unique-opened router background-color="#304156" text-color="#bfcbd9" active-text-color="#409eff">
+          <el-menu
+            class="sidebar-el-menu"
+            :default-active="onRoutes"
+            unique-opened
+            router
+            background-color="#304156"
+            text-color="#bfcbd9"
+            active-text-color="#409eff"
+          >
             <menu-item :items="items"></menu-item>
           </el-menu>
         </el-col>
@@ -68,21 +76,22 @@ watch(
 .main {
   .first {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 50px;
-    background-color: #242f42;
+    background-color: #29a2e6;
+    padding: 5px 0;
 
     .logo-image {
-      width: 20px;
-      height: 20px;
+      width: 135px;
+      height: 40px;
     }
 
     .logo-title {
       margin-left: 10px;
       font-size: 14px;
       font-weight: bold;
-      color: white;
+      color: #000;
     }
   }
 
@@ -97,6 +106,17 @@ watch(
       font-size: 18px;
       margin: 0 5px 0 0;
     }
+    :deep(.el-menu-item.is-active) {
+      color: #ffff !important;
+    }
+    :deep(.el-menu-item) {
+      background-color: #59b2e4 !important;
+      color: #000 !important;
+    }
+    :deep(.el-sub-menu__title) {
+      background-color: #59b2e4 !important;
+      color: #000 !important;
+    }
   }
 }
 </style>

src/layout/parts/sidebar/items.vue

@@ -37,4 +37,21 @@ export default {
   outline: none;
   margin-right: 5px;
 }
+.el-menu {
+  background-color: #59b2e4 !important;
+  color: #000 !important;
+}
+.sidebar-el-menu {
+  background-color: #59b2e4 !important;
+  color: #000 !important;
+}
+.el-menu-item.is-active {
+  background-color: #59b2e4 !important;
+  color: #fff !important;
+}
+.el-menu-item:focus,
+.el-menu-item:hover {
+  background-color: #59b2e4 !important;
+  color: #000 !important;
+}
 </style>