修改项目主题

src/layout/components/Sidebar/Logo.vue

@@ -2,11 +2,12 @@
   <div class="sidebar-logo-container" :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/welcome">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
+        <!-- <img v-if="logo" :src="logo" class="sidebar-logo"> -->
+        <!-- v-else -->
+        <h1  class="sidebar-title">{{ title }} </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/welcome">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <!-- <img v-if="logo" :src="logo" class="sidebar-logo"> -->
         <h1 class="sidebar-title">{{ title }} </h1>
       </router-link>
     </transition>
@@ -68,7 +69,8 @@ export default {
       margin: 0;
       vertical-align: top;
       // color: #000;
-      color: #1890ff;
+      color: #fff;
+      //#1890ff;
       font-weight: 600;
       line-height: 88px;
       height: 80px;;

src/styles/element-ui.scss

@@ -87,14 +87,16 @@
 
 
 #app .sidebar-container .el-submenu .el-menu-item.is-active{
-  background-color: $--color-primary !important;
-  color:#fff !important;
+  // background-color: $--color-primary !important;
+  color:#000 !important;
+  font-weight: bold!important;
 }
 
 
 #app .sidebar-container .el-submenu .el-menu-item.is-active:hover{
-  background-color: $--color-primary !important;
-  color:#fff !important;
+  // background-color: $--color-primary !important;
+  color:#000 !important;
+  font-weight: bold!important;
 }
 
 .el-menu-item.is-active{

src/styles/element-variables.scss

@@ -116,7 +116,7 @@ $--color-black: #515a6e;
 $--color-grey: rgba(0, 0, 0, 0.65);
 
 #app .sidebar-container{
-  background-color: #00152a !important;
+  background:  linear-gradient(270deg,#ff8c1f,#ff6a00)!important;
 }
 
 // $--color-text-regular: #1f2d3d;

src/styles/variables.css

@@ -0,0 +1,10 @@
+:export {
+  menuText: #f4f4f5;
+  menuActiveText: #409EFF;
+  subMenuActiveText: #f4f4f5;
+  menuBg: transparent;
+  menuHover: transparent;
+  subMenuBg: transparent;
+  subMenuHover: transparent;
+  sideBarWidth: 210px;
+}

src/styles/variables.min.css

@@ -0,0 +1 @@
+:export{menuText:#f4f4f5;menuActiveText:#409EFF;subMenuActiveText:#f4f4f5;menuBg:transparent;menuHover:transparent;subMenuBg:transparent;subMenuHover:transparent;sideBarWidth:210px}

src/styles/variables.scss

@@ -46,15 +46,19 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 // sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#fff;
+$menuText:#f4f4f5;
+$menuActiveText:#409EFF;
 $subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#00152a;
-$menuHover:#263445;
+$menuBg:transparent;
+//#00152a;
+$menuHover:transparent;
+//#263445;
 
-$subMenuBg:#0f0606;
-$subMenuHover:#001528;
+$subMenuBg:transparent;
+//#0f0606;
+$subMenuHover:transparent;
+//#001528;
 
 $sideBarWidth: 210px;