修改主题色

src/layout/components/AppMain.vue

@@ -20,12 +20,13 @@ export default {
 <style scoped>
 .app-main {
   /*50 = navbar  */
-  min-height: calc(100vh - 50px);
+  height: calc(100vh - 50px);
   width: 100%;
   position: relative;
-  overflow: hidden;
+  overflow-y: scroll;
   background: #f5f5f5;
 }
+
 .fixed-header+.app-main {
   padding-top: 50px;
 }

src/layout/components/Navbar.vue

@@ -7,8 +7,8 @@
       <div style="display: flex;align-items: center;margin-right: 25px">
 
         <div style="display: flex; align-items: center; margin-right: 15px;margin-top: 6px">
-          <i class="el-icon-bell" style="margin-right: 5px; font-size: 16px; color: #5a5e66;" />
-          <el-switch v-model="isSoundOn" @change="handleSoundChange" />
+          <i class="el-icon-bell" style="margin-right: 5px; font-size: 16px; color: #fff;" />
+          <el-switch v-model="isSoundOn" active-color="#13ce66" @change="handleSoundChange" />
         </div>
 
         <el-popover placement="bottom" width="170" trigger="hover">
@@ -49,8 +49,9 @@
             </div>
           </div>
           <div slot="reference" style="cursor: pointer; display: flex; align-items: center;margin-top: 6px">
-            <el-badge :value="totalPending" :max="99" :hidden="totalPending <= 0" style="line-height: 1; margin-right: 5px;">
-              <span style="font-size: 14px; color: #5a5e66;">待处理 <i class="el-icon-arrow-down" /></span>
+            <el-badge :value="totalPending" :max="99" :hidden="totalPending <= 0"
+              style="line-height: 1; margin-right: 5px;">
+              <span style="font-size: 14px;">待处理 <i class="el-icon-arrow-down" /></span>
             </el-badge>
           </div>
         </el-popover>
@@ -58,7 +59,7 @@
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
           <img src="../../assets/images/logo.webp" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+          <i class="el-icon-caret-bottom" style="color: #fff;" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <el-dropdown-item @click.native="logout">
@@ -139,7 +140,7 @@ export default {
   },
   methods: {
     goPage(pagePath) {
-      this.$router.push({name: pagePath})
+      this.$router.push({ name: pagePath })
     },
     // 新增：监听开关状态变化并写入缓存
     handleSoundChange(val) {
@@ -213,8 +214,9 @@ export default {
   margin-top: -10px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  background: #2B5198;
   box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+  color: #fff;
 
   .hamburger-container {
     line-height: 72px;
@@ -223,10 +225,6 @@ export default {
     cursor: pointer;
     transition: background .3s;
     -webkit-tap-highlight-color: transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, .025)
-    }
   }
 
   .breadcrumb-container {
@@ -248,7 +246,6 @@ export default {
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
       vertical-align: text-bottom;
 
       &.hover-effect {
@@ -287,40 +284,6 @@ export default {
   }
 }
 
-.online_title {
-  color: #333;
-  font-size: 16px;
-}
-
-.online_box {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  height: 90%;
-  width: 340px;
-  height: 36px;
-  margin: 18px 19px 18px 5px;
-  padding: 0 5%;
-  background: #F3F2F2;
-  border-radius: 18px 18px 18px 18px;
-
-  .online_item {
-    width: 23%;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-
-    .type_icon {
-      width: 20px;
-      height: 20px;
-    }
-
-    .type_num {
-      font-size: 16px;
-      color: #666;
-    }
-  }
-}
 
 .remind {
   width: 24px;
@@ -337,18 +300,19 @@ export default {
   top: 0;
   left: 0;
   z-index: 1;
-  background-color: #3E7BFA;
+  background-color: #2B5198;
   font-weight: 800;
   font-size: 14px;
   color: #FFFFFF;
 }
 
-.pending-text{
+.pending-text {
   transition: .3s;
   cursor: pointer;
   user-select: none;
 }
-.pending-text:hover{
+
+.pending-text:hover {
   color: #409eff;
 }
 </style>

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,22 +1,15 @@
 <template>
   <div>
-    <el-submenu v-if="item.children.length>0"  ref="subMenu" :index="item.uri" popper-append-to-body>
+    <el-submenu v-if="item.children.length > 0" ref="subMenu" :index="item.uri" popper-append-to-body>
       <template slot="title">
-        <item  :icon="item && item.icon" :title="item.title"/>
+        <item :icon="item && item.icon" :title="item.title" />
       </template>
-      <sidebar-item
-        v-for="child in item.children"
-        :key="child.uri"
-        :is-nest="true"
-        :item="child"
-        :base-path="child.uri"
-      />
+      <sidebar-item v-for="child in item.children" :key="child.uri" :is-nest="true" :item="child"
+        :base-path="child.uri" />
     </el-submenu>
-    <router-link v-else :to="{ name: item.uri}">
-      <el-menu-item @click="openMenuItem(item)" :index="item.uri"
-                    :class="{'submenu-title-noDropdown':!isNest}"
-      >
-        <item :icon="item.icon" :title="item.title"/>
+    <router-link v-else :to="{ name: item.uri }">
+      <el-menu-item @click="openMenuItem(item)" :index="item.uri" :class="{ 'submenu-title-noDropdown': !isNest }">
+        <item :icon="item.icon" :title="item.title" />
       </el-menu-item>
     </router-link>
   </div>

src/layout/components/Sidebar/index.vue

@@ -1,19 +1,12 @@
 <template>
-  <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse"/>
+  <div :class="{ 'has-logo': showLogo }">
+    <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
-            <el-menu
-              :default-active="activeMenu"
-              :collapse="isCollapse"
-              :background-color="variables.menuBg"
-              :text-color="variables.menuText"
-              :unique-opened="false"
-              :active-text-color="variables.menuActiveText"
-              :collapse-transition="false"
-              mode="vertical"
-            >
-              <sidebar-item v-for="route in routes" :key="route.uri" :item="route" :base-path="route.uri"/>
-            </el-menu>
+      <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg"
+        :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText"
+        :collapse-transition="false" mode="vertical">
+        <sidebar-item v-for="route in routes" :key="route.uri" :item="route" :base-path="route.uri" />
+      </el-menu>
     </el-scrollbar>
   </div>
 </template>

src/layout/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div :class="classObj" class="app-wrapper">
-    <div v-if="device!=='mobile'&&sidebar.opened" class="theTitle">后台管理</div>
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar class="sidebar-container"/>
+    <div v-if="device !== 'mobile' && sidebar.opened" class="theTitle">后台管理</div>
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <sidebar class="sidebar-container" />
     <div class="main-container">
-<!--      <div :class="{'fixed-header':fixedHeader}">-->
-        <navbar/>
-<!--      </div>-->
-      <app-main/>
+      <!--      <div :class="{'fixed-header':fixedHeader}">-->
+      <navbar />
+      <!--      </div>-->
+      <app-main />
     </div>
   </div>
 </template>
@@ -176,7 +176,7 @@ export default {
   top: 0;
   left: 0;
   z-index: 1999;
-  background-color: #3E7BFA;
+  background-color: #2B5198;
   font-weight: 800;
   font-size: 14px;
   color: #FFFFFF;

src/styles/element-ui.scss

@@ -211,9 +211,8 @@ input[type="number"]{
 }
 .layout-vertical{
   display: flex;
-  overflow: hidden;
   flex-direction: column;
-  height: 100%;
+  height:calc(100% - 40px);
   gap: 0px;
 }
 .ym-table .el-pagination{

src/styles/sidebar.scss

@@ -81,7 +81,7 @@
     // menu hover
     .submenu-title-noDropdown, .el-submenu__title {
       &:hover {
-        color: #3E7BFA !important;
+        color: #0cffdf !important;
         background-color: $menuHover !important;
       }
     }
@@ -96,7 +96,7 @@
 
       &:hover {
         background-color: $subMenuHover !important;
-        color: #2474d3 !important;
+        color: #0cffdf !important;
       }
     }
   }
@@ -199,7 +199,7 @@
   .nest-menu .el-submenu > .el-submenu__title, .el-menu-item {
     &:hover {
       // you can use $subMenuHover
-      color: #2474d3;
+      color: #0cffdf;
       background-color: $menuHover !important;
     }
   }
@@ -226,6 +226,6 @@
 }
 
 .sidebar-container .el-menu-item.is-active {
-  color: #2474d3 !important;
-  background-color: #E7EEFF !important;
+  color: #0cffdf !important;
+  background-color: #2B5198 !important;
 }

src/styles/variables.scss

@@ -1,16 +1,16 @@
 // sidebar
-$menuText:#333;
-$menuActiveText:#2474d3;
-$subMenuActiveText:#3E7BFA; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#fff;
+$menuActiveText:#0cffdf;
+$subMenuActiveText:#0cffdf; //https://github.com/ElemeFE/element/issues/12951
 
 // $menuBg:#304156;
-$menuBg:#FFFFFF;
+$menuBg:#2B5198;
 // $menuHover:#263445;
-$menuHover:#E7EEFF;
+$menuHover:#2B5198;
 
 // $subMenuBg:#1f2d3d;
-$subMenuBg:#001529;
-$subMenuHover:#E7EEFF;
+$subMenuBg:#2B5198;
+$subMenuHover:#2B5198;
 // $subMenuHover:#409eff;
 
 $sideBarWidth: 210px;