系统框架整体做科技感颜色适配

ruoyi-framework/src/main/java/com/ruoyi/framework/config/CaptchaConfig.java

@@ -50,10 +50,13 @@ public class CaptchaConfig
         Properties properties = new Properties();
         // 是否有边框 默认为true 我们可以自己设置yes，no
         properties.setProperty(KAPTCHA_BORDER, "yes");
-        // 边框颜色 默认为Color.BLACK
-        properties.setProperty(KAPTCHA_BORDER_COLOR, "105,179,90");
-        // 验证码文本字符颜色 默认为Color.BLACK
-        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR, "blue");
+        // 边框颜色 修改为科技蓝
+        properties.setProperty(KAPTCHA_BORDER_COLOR, "64,158,255");
+        // 验证码文本字符颜色 修改为白色适配深色背景
+        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR, "255,255,255");
+        //背景颜色渐变 修改为统一的深蓝科技感背景
+        properties.setProperty(KAPTCHA_BACKGROUND_CLR_FROM, "28,132,198");
+        properties.setProperty(KAPTCHA_BACKGROUND_CLR_TO, "28,132,198");
         // 验证码图片宽度 默认为200
         properties.setProperty(KAPTCHA_IMAGE_WIDTH, "160");
         // 验证码图片高度 默认为50
@@ -70,8 +73,8 @@ public class CaptchaConfig
         properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_LENGTH, "6");
         // 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
         properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_NAMES, "Arial,Courier");
-        // 验证码噪点颜色 默认为Color.BLACK
-        properties.setProperty(KAPTCHA_NOISE_COLOR, "white");
+        // 验证码噪点颜色 修改为科技蓝
+        properties.setProperty(KAPTCHA_NOISE_COLOR, "64,158,255");
         // 干扰实现类
         properties.setProperty(KAPTCHA_NOISE_IMPL, "com.google.code.kaptcha.impl.NoNoise");
         // 图片样式 水纹com.google.code.kaptcha.impl.WaterRipple 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy
@@ -80,4 +83,5 @@ public class CaptchaConfig
         defaultKaptcha.setConfig(config);
         return defaultKaptcha;
     }
+
 }

ruoyi-ui/src/assets/styles/element-variables.scss

@@ -4,24 +4,32 @@
 **/
 
 /* theme color */
-$--color-primary: #1890ff;
-$--color-success: #13ce66;
-$--color-warning: #ffba00;
-$--color-danger: #ff4949;
-// $--color-info: #1E1E1E;
+$--color-primary: #00d4ff;
+$--color-success: #00ff9d;
+$--color-warning: #ffaa00;
+$--color-danger: #ff4d4d;
+$--color-info: #6b7280;
 
 $--button-font-weight: 400;
 
-// $--color-text-regular: #1f2d3d;
+$--color-text-primary: #ffffff;
+$--color-text-regular: #e2e8f0;
+$--color-text-secondary: #cbd5e1;
+$--color-text-placeholder: #94a3b8;
 
-$--border-color-light: #dfe4ed;
-$--border-color-lighter: #e6ebf5;
+$--border-color-base: #334155;
+$--border-color-light: #475569;
+$--border-color-lighter: #64748b;
 
-$--table-border: 1px solid #dfe6ec;
+$--background-color-base: #1a1a2e;
+$--color-white: #1e1e2d;
+
+$--table-border: 1px solid #334155;
 
 /* icon font path, required */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
+
 @import "~element-ui/packages/theme-chalk/src/index";
 
 // the :export directive is the magic sauce for webpack

ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -125,8 +125,8 @@
 /* tree border */
 .tree-border {
   margin-top: 5px;
-  border: 1px solid #e5e6e7;
-  background: #FFFFFF none;
+  border: 1px solid #2a3a3a;
+  background:  var(--tech-card-bg) none;
   border-radius: 4px;
 }
 
@@ -283,5 +283,11 @@
 
 /* 分割面板样式 */
 .splitpanes.default-theme .splitpanes__pane {
-  background-color: #fff!important;
+  background-color: rgba(13, 23, 47, 0.85)!important;
 }
+//用户管理分隔符
+.splitpanes.default-theme .splitpanes__splitter {
+  background-color: #10a3c1 !important;
+  border-left: 1px solid #10a3c1 !important;
+}
+

ruoyi-ui/src/assets/styles/sidebar.scss

@@ -80,7 +80,7 @@
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(0, 212, 255, 0.1) !important;
       }
     }
 
@@ -93,16 +93,24 @@
       min-width: $base-sidebar-width !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(0, 212, 255, 0.1) !important;
       }
     }
 
     & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
       background-color: $base-sub-menu-background !important;
+      color: hsla(0,0%,100%,.65);
 
       &:hover {
         background-color: $base-sub-menu-hover !important;
+        color: #00d4ff !important;
+      }
+
+      &.is-active {
+        color: #00d4ff !important;
+        background-color: rgba(0, 212, 255, 0.15) !important;
+        border-left: 3px solid #00d4ff;
       }
     }
   }
@@ -159,6 +167,10 @@
 
   .el-menu--collapse .el-menu .el-submenu {
     min-width: $base-sidebar-width !important;
+
+    .el-submenu__title.is-active {
+      background-color: rgba(0, 212, 255, 0.15) !important;
+    }
   }
 
   // mobile responsive
@@ -202,7 +214,7 @@
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      background-color: rgba(0, 212, 255, 0.1) !important;
     }
   }
 
@@ -210,9 +222,10 @@
   >.el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
+    background-color: #16213e !important;
 
     &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
+      background: #000c17;
     }
 
     &::-webkit-scrollbar {
@@ -220,7 +233,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
+      background: #00d4ff;
       border-radius: 20px;
     }
   }

ruoyi-ui/src/assets/styles/variables.scss

@@ -8,24 +8,10 @@ $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
 
-// 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
-$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-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
+$base-menu-color-active:#00d4ff;
+$base-menu-background:#16213e;
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);
@@ -34,7 +20,6 @@ $base-logo-light-title-color: #001529;
 
 $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
-*/
 
 $base-sidebar-width: 200px;
 

ruoyi-ui/src/components/Pagination/index.vue

@@ -105,7 +105,7 @@ export default {
 
 <style scoped>
 .pagination-container {
-  background: #fff;
+  background: #1e1e2d;
 }
 .pagination-container.hidden {
   display: none;

ruoyi-ui/src/layout/components/Navbar.vue

@@ -114,8 +114,9 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  background: rgba(13, 23, 47, 0.85); // 深蓝科技感背景
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  border-bottom: 1px solid rgba(64, 158, 255, 0.2); // 科技蓝边框
 
   .hamburger-container {
     line-height: 46px;
@@ -124,9 +125,10 @@ export default {
     cursor: pointer;
     transition: background .3s;
     -webkit-tap-highlight-color: transparent;
+    color: #e4e7ed; // 图标颜色适配深色背景
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(64, 158, 255, 0.1); // 科技蓝悬停效果
     }
   }
 
@@ -148,6 +150,7 @@ export default {
     float: right;
     height: 100%;
     line-height: 50px;
+    background: rgba(13, 23, 47, 0.85); /* 确保右侧菜单背景色 */
 
     &:focus {
       outline: none;
@@ -158,7 +161,7 @@ export default {
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
+      color: #e4e7ed; // 浅色文字适配深色背景
       vertical-align: text-bottom;
 
       &.hover-effect {
@@ -166,7 +169,7 @@ export default {
         transition: background .3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(64, 158, 255, 0.1); // 科技蓝悬停效果
         }
       }
     }
@@ -185,6 +188,7 @@ export default {
           width: 30px;
           height: 30px;
           border-radius: 50%;
+          border: 1px solid rgba(64, 158, 255, 0.2); // 科技蓝边框
         }
 
         .user-nickname{
@@ -193,6 +197,7 @@ export default {
           left: 2px;
           font-size: 14px;
           font-weight: bold;
+          color: #e4e7ed; // 浅色文字适配深色背景
         }
 
         .el-icon-caret-bottom {
@@ -201,6 +206,7 @@ export default {
           right: -20px;
           top: 25px;
           font-size: 12px;
+          color: #e4e7ed; // 图标颜色适配深色背景
         }
       }
     }

ruoyi-ui/src/layout/components/Settings/index.vue

@@ -271,12 +271,12 @@ export default {
       }
     }
   }
-
   .drawer-container {
     padding: 20px;
     font-size: 14px;
     line-height: 1.5;
     word-wrap: break-word;
+    background-color: #898b8d;
 
     .drawer-title {
       margin-bottom: 12px;

ruoyi-ui/src/layout/components/TagsView/index.vue

@@ -240,10 +240,9 @@ export default {
 <style lang="scss" scoped>
 .tags-view-container {
   height: 34px;
-  width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  border-bottom: 1px solid rgba(64, 158, 255, 0.2);
+  background: rgba(13, 23, 47, 0.85);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -251,13 +250,14 @@ export default {
       cursor: pointer;
       height: 26px;
       line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
-      padding: 0 8px;
+      border: 1px solid rgba(64, 158, 255, 0.3);
+      color: #e4e7ed;
+      background: rgba(255, 255, 255, 0.08);
+      padding: 0 12px;
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
+      border-radius: 4px;
       &:first-of-type {
         margin-left: 15px;
       }
@@ -265,9 +265,9 @@ export default {
         margin-right: 15px;
       }
       &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
+        background: linear-gradient(135deg, #1a73e8, #0d47a1);
+        color: #ffffff;
+        border-color: #1a73e8;
         &::before {
           content: '';
           background: #fff;
@@ -279,6 +279,10 @@ export default {
           margin-right: 2px;
         }
       }
+      &:hover {
+        background: rgba(64, 158, 255, 0.2);
+        color: #ffffff;
+      }
     }
   }
 
@@ -303,7 +307,7 @@ export default {
       padding: 7px 16px;
       cursor: pointer;
       &:hover {
-        background: #eee;
+        background: rgba(0, 212, 255, 0.1);
       }
     }
   }
@@ -327,6 +331,7 @@ export default {
         display: inline-block;
         vertical-align: -3px;
       }
+
       &:hover {
         background-color: #b4bccc;
         color: #fff;

ruoyi-ui/src/views/login.vue

@@ -167,44 +167,109 @@ export default {
   background-image: url("../assets/images/login-background.jpg");
   background-size: cover;
 }
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
-}
 
 .login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
+  border-radius: 12px;
+  background: rgba(13, 23, 47, 0.85); /* 深蓝科技感背景 */
+  width: 420px;
+  padding: 30px 30px 20px 30px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(64, 158, 255, 0.3);
   z-index: 1;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
 }
+
+.login-header {
+  text-align: center;
+  margin-bottom: 25px;
 }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
+
+.login-title {
+  color: #409eff; /* 科技蓝 */
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 8px;
 }
+
+.login-subtitle {
+  color: #c0c4cc; /* 浅灰色 */
+  font-size: 14px;
+  margin: 0;
 }
+
 .login-tip {
   font-size: 13px;
   text-align: center;
   color: #bfbfbf;
 }
+
 .login-code {
-  width: 33%;
-  height: 38px;
+  width: 37%;
+  height: 46px;
   float: right;
+
   img {
+    margin-left: 1px;
     cursor: pointer;
     vertical-align: middle;
+    border-radius: 8px;
+    height: 46px;
+  }
+}
+
+/* 输入框样式调整 */
+.el-input {
+  height: 46px;
+
+  ::v-deep .el-input__inner {
+    height: 46px;
+    background-color: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(64, 158, 255, 0.2);
+    color: #fff;
+    border-radius: 8px;
+
+    &::placeholder {
+      color: #909399;
     }
   }
+
+  ::v-deep .el-input__prefix {
+    left: 12px;
+  }
+
+  .input-icon {
+    height: 46px;
+    width: 14px;
+    margin-left: 0;
+  }
+}
+
+/* 复选框颜色调整 */
+::v-deep .el-checkbox {
+  color: #e4e7ed;
+
+  .el-checkbox__label {
+    color: #e4e7ed;
+  }
+}
+
+/* 按钮样式 */
+::v-deep .el-button--primary {
+  height: 46px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #1a73e8, #0d47a1);
+  border: none;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 1px;
+
+  &:hover {
+    background: linear-gradient(135deg, #0d47a1, #1a73e8);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(26, 115, 232, 0.3);
+  }
+}
+
 .el-login-footer {
   height: 40px;
   line-height: 40px;
@@ -217,7 +282,9 @@ export default {
   font-size: 12px;
   letter-spacing: 1px;
 }
+
 .login-code-img {
-  height: 38px;
+  height: 46px;
+  border-radius: 8px;
 }
 </style>

ruoyi-ui/src/views/system/user/profile/userAvatar.vue

@@ -171,7 +171,7 @@ export default {
   right: 0;
   top: 0;
   bottom: 0;
-  color: #eee;
+  color: #94a3b8;
   background: rgba(0, 0, 0, 0.5);
   font-size: 24px;
   font-style: normal;