修改界面主题

src/assets/styles/ruoyi.scss

@@ -336,9 +336,6 @@
 .el-checkbox__label{
   font-size: 16px!important;
 }
-.el-form-item__content{
-  font-size: 16px!important;
-}
 .el-input__inner{
   font-size: 14px!important;
 }
@@ -374,3 +371,4 @@
      }
    }
  }
+

src/assets/styles/sidebar.scss

@@ -15,7 +15,7 @@
     -webkit-transition: width .28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
+    //background-color: $base-menu-background;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -24,8 +24,8 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    //-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    //box-shadow: 2px 0 6px rgba(0,21,41,.35);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -93,7 +93,7 @@
       min-width: $base-sidebar-width !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(196, 46, 46, 0.06) !important;
       }
     }
 

src/assets/styles/variables.scss

@@ -11,15 +11,16 @@ $panGreen: #30B08F;
 // 默认菜单主题风格
 $base-menu-color:#bfcbd9;
 $base-menu-color-active:#f4f4f5;
-$base-menu-background:#f0f2f5;
+//$base-menu-background:#f0f2f5;
+$base-menu-background:#133f6f;
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);
 $base-menu-light-background:#ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
+$base-sub-menu-background:#182c4e;
+$base-sub-menu-hover:#005bac;
 
 // 自定义暗色菜单风格
 /**

src/components/Hamburger/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="padding: 0 15px;" @click="toggleClick">
+  <div style="padding: 0 10px;height: 100%" @click="toggleClick">
     <svg
       :class="{'is-active':isActive}"
       class="hamburger"
@@ -7,6 +7,7 @@
       xmlns="http://www.w3.org/2000/svg"
       width="64"
       height="64"
+      :style=" {fill: settings.sideTheme === 'theme-dark'? '#fff' : '#000' }"
     >
       <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
     </svg>
@@ -14,14 +15,19 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
   name: 'Hamburger',
   props: {
     isActive: {
       type: Boolean,
-      default: false
+      default: false,
     }
   },
+  computed:{
+    ...mapState(["settings"]),
+  },
   methods: {
     toggleClick() {
       this.$emit('toggleClick')
@@ -32,8 +38,10 @@ export default {
 
 <style scoped>
 .hamburger {
+  position: absolute;
   display: inline-block;
   vertical-align: middle;
+  margin-bottom: -1px;
   width: 20px;
   height: 20px;
 }
@@ -41,4 +49,5 @@ export default {
 .hamburger.is-active {
   transform: rotate(180deg);
 }
+
 </style>

src/layout/components/Navbar.vue

@@ -126,10 +126,10 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
-  height: 50px;
+  height: 51px;
   overflow: hidden;
   position: relative;
-  background-color: #008CD6 !important;  /* 修改导航栏背景色*/
+  background-color: #005bac !important;  /* 修改导航栏背景色*/
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
   .hamburger-container {
     line-height: 46px;
@@ -158,7 +158,7 @@ export default {
     width: 360px;
     height: 50px;
     color: #fff;
-    padding-left:12px;
+    //padding-left:12px;
     display: inline-grid;
     align-items: center;
   }

src/layout/components/Sidebar/Logo.vue

@@ -3,7 +3,7 @@
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? '#ffffff' : '#001529' }">{{ title }} </h1>
+        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? '#ffffff' : '#001529' }">{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
@@ -58,7 +58,7 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background-color: #008CD6 !important;  /* 修改logo背景色*/
+  background-color: #005bac !important;  /* 修改logo背景色*/
   text-align: center;
   overflow: hidden;
 

src/layout/components/Sidebar/index.vue

@@ -4,20 +4,20 @@
       :class="{ 'has-logo': showLogo,  }"
       :style="{
         backgroundColor:
-          settings.sideTheme === 'theme-dark' ? '#f0f2f5' : '#ffffff',
+          settings.sideTheme === 'theme-dark' ? '#133f6f' : '#ffffff',
       }"
     >
       <logo v-if="showLogo" :collapse="isCollapse" />
       <div class="scro">
-        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
+        <el-scrollbar :class="settings.sideTheme" style="height: 100%" wrap-class="scrollbar-wrapper">
         <el-menu
           :default-active="activeMenu"
           :collapse="isCollapse"
           :background-color="
-            settings.sideTheme === 'theme-dark' ? '#f0f2f5' : '#ffffff'
+            settings.sideTheme === 'theme-dark' ? '#133f6f' : '#ffffff'
           "
           :text-color="
-            settings.sideTheme === 'theme-dark' ? '#bfcbd9' : 'rgba(0,0,0,.70)'
+            settings.sideTheme === 'theme-dark' ? '#bfcbd9' : '#182c4e'
           "
           :unique-opened="true"
           :active-text-color="settings.theme"
@@ -34,7 +34,7 @@
       </el-scrollbar>
       </div>
 
-      <div class="bottomBox">
+      <div class="bottomBox" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? '#133f6f' : '#ffffff' }">
         <hamburger
           id="hamburger-container"
           :is-active="sidebar.opened"
@@ -81,9 +81,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .hamburger {
+  margin-bottom: -1px;
   width: 100%;
   height: 100%;
-  background-color: #f0f2f5;
+  background-color: #133f6f;
 }
 .scro {
   position: relative;
@@ -92,13 +93,14 @@ export default {
   overflow-y: auto !important;
 }
 .bottomBox {
-  //   position: absolute;
   position: relative;
+  height: 10vh;
   width: 100%;
-  margin-top: 10px;
+  //margin-top: 10px;
   padding-left: 10px;
+  color: #FFFFFF;
 
-  bottom: 2%;
+  bottom: 1%;
   border-top: #ccc;
   .hamburger-container {
     // text-align: center;

src/settings.js

@@ -2,7 +2,7 @@ module.exports = {
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
-  sideTheme: 'theme-light',
+  sideTheme: 'theme-dark',
 
   /**
    * 是否系统布局配置