Merge remote-tracking branch 'origin/dev-ui' into dev

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

@@ -4,20 +4,28 @@
 **/
 
 /* theme color */
-$--color-primary: #1890ff;
-$--color-success: #13ce66;
-$--color-warning: #ffba00;
-$--color-danger: #ff4949;
-// $--color-info: #1E1E1E;
+$--color-primary: #2f5d8a;
+$--color-success: #3f6b55;
+$--color-warning: #a56a2a;
+$--color-danger: #b55252;
+$--color-info: #6c7a89;
 
 $--button-font-weight: 400;
 
-// $--color-text-regular: #1f2d3d;
+$--color-text-primary: #1f2d3d;
+$--color-text-regular: #1f2d3d;
+$--color-text-secondary: #5f6b7a;
+$--color-text-placeholder: #8a97a6;
 
-$--border-color-light: #dfe4ed;
-$--border-color-lighter: #e6ebf5;
+$--border-color-base: #d9e3ee;
+$--border-color-light: #d9e3ee;
+$--border-color-lighter: #e7edf5;
+$--border-color-extra-light: #eef3f8;
 
-$--table-border: 1px solid #dfe6ec;
+$--table-border: 1px solid #d9e3ee;
+$--background-color-base: #f4f7fb;
+$--box-shadow-base: 0 8px 24px rgba(31, 45, 61, 0.08);
+$--box-shadow-light: 0 8px 20px rgba(31, 45, 61, 0.06);
 
 /* icon font path, required */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';

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

@@ -5,16 +5,33 @@
 @import './sidebar.scss';
 @import './btn.scss';
 
+:root {
+  --ccdi-page-bg: #f4f7fb;
+  --ccdi-surface: #ffffff;
+  --ccdi-text-primary: #1f2d3d;
+  --ccdi-text-secondary: #5f6b7a;
+  --ccdi-text-muted: #8a97a6;
+  --ccdi-primary: #2f5d8a;
+  --ccdi-primary-hover: #244a6d;
+  --ccdi-primary-soft: #eaf1f8;
+  --ccdi-border: #d9e3ee;
+  --ccdi-line: #e7edf5;
+  --ccdi-shadow: 0 8px 24px rgba(31, 45, 61, 0.05);
+  --ccdi-shadow-soft: 0 12px 28px rgba(31, 45, 61, 0.08);
+}
+
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  background: var(--ccdi-page-bg);
+  color: var(--ccdi-text-primary);
 }
 
 label {
-  font-weight: 700;
+  font-weight: 600;
 }
 
 html {
@@ -122,6 +139,7 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
+  background: transparent;
 }
 
 .components-container {
@@ -159,11 +177,11 @@ aside {
 
 .link-type,
 .link-type:focus {
-  color: #337ab7;
+  color: var(--ccdi-primary);
   cursor: pointer;
 
   &:hover {
-    color: rgb(32, 160, 255);
+    color: var(--ccdi-primary-hover);
   }
 }
 

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

@@ -88,14 +88,88 @@
   padding: 10px 20px 0;
 }
 
+.el-form-item__label {
+  color: #5f6b7a;
+  font-weight: 600;
+}
+
+.el-input__inner,
+.el-textarea__inner,
+.el-range-editor.el-input__inner,
+.el-select .el-input__inner,
+.vue-treeselect__control {
+  border-color: #d9e3ee !important;
+  border-radius: 10px;
+  color: #1f2d3d;
+  box-shadow: none;
+}
+
+.el-input__inner::placeholder,
+.el-textarea__inner::placeholder {
+  color: #8a97a6;
+}
+
+.el-input__inner:hover,
+.el-textarea__inner:hover,
+.el-range-editor.el-input__inner:hover,
+.vue-treeselect__control:hover {
+  border-color: #c8d7e6 !important;
+}
+
+.el-input.is-focus .el-input__inner,
+.el-textarea.is-focus .el-textarea__inner,
+.el-select .el-input.is-focus .el-input__inner,
+.el-range-editor.is-active,
+.el-range-editor.is-active:hover,
+.vue-treeselect--focused .vue-treeselect__control {
+  border-color: #2f5d8a !important;
+  box-shadow: 0 0 0 3px rgba(47, 93, 138, 0.08);
+}
+
+.el-button {
+  border-radius: 10px;
+}
+
+.el-button--primary {
+  box-shadow: 0 6px 16px rgba(47, 93, 138, 0.18);
+}
+
+.el-button--primary:focus,
+.el-button--primary:hover {
+  background-color: #244a6d;
+  border-color: #244a6d;
+}
+
+.el-button.is-plain {
+  border-color: #d9e3ee;
+}
+
+.el-card,
+.tree-border,
+.pagination-container,
+.splitpanes.default-theme .splitpanes__pane {
+  background: transparent !important;
+}
+
+.el-card {
+  border: 1px solid #d9e3ee;
+  border-radius: 14px;
+  box-shadow: 0 8px 24px rgba(31, 45, 61, 0.05);
+}
+
 .el-table {
+  border: 1px solid #d9e3ee;
+  border-radius: 12px;
+  overflow: hidden;
+
   .el-table__header-wrapper, .el-table__fixed-header-wrapper {
     th {
       word-break: break-word;
-      background-color: #f8f8f9;
-      color: #515a6e;
+      background-color: #f7fafd;
+      color: #5f6b7a;
       height: 40px;
       font-size: 13px;
+      border-bottom-color: #d9e3ee;
     }
   }
 
@@ -106,6 +180,19 @@
   }
 }
 
+.el-table th.el-table__cell,
+.el-table td.el-table__cell {
+  border-bottom-color: #e7edf5;
+}
+
+.el-table::before {
+  background-color: #d9e3ee;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background: #f9fbfe;
+}
+
 /** 表单布局 **/
 .form-header {
   font-size: 15px;
@@ -120,14 +207,17 @@
   display: flex;
   justify-content: flex-end;
   margin-top: 20px;
+  padding: 0;
+  background: transparent;
 }
 
 /* tree border */
 .tree-border {
   margin-top: 5px;
-  border: 1px solid #e5e6e7;
-  background: #FFFFFF none;
-  border-radius: 4px;
+  border: 1px solid #d9e3ee;
+  background: #ffffff none;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(31, 45, 61, 0.05);
 }
 
 /* horizontal el menu */
@@ -195,12 +285,13 @@
 }
 
 .el-card__header {
-  padding: 14px 15px 7px;
+  padding: 16px 18px 10px;
   min-height: 40px;
+  border-bottom-color: #e7edf5;
 }
 
 .el-card__body {
-  padding: 15px 20px 20px 20px;
+  padding: 18px 20px 20px 20px;
 }
 
 .card-box {
@@ -238,23 +329,23 @@
 }
 
 .text-success {
-  color: #1c84c6;
+  color: #3f6b55;
 }
 
 .text-info {
-  color: #23c6c8;
+  color: #2f5d8a;
 }
 
 .text-warning {
-  color: #f8ac59;
+  color: #a56a2a;
 }
 
 .text-danger {
-  color: #ed5565;
+  color: #b55252;
 }
 
 .text-muted {
-  color: #888888;
+  color: #8a97a6;
 }
 
 /* image */
@@ -293,5 +384,45 @@
 
 /* 分割面板样式 */
 .splitpanes.default-theme .splitpanes__pane {
-  background-color: #fff!important;
+  background-color: transparent!important;
+}
+
+.el-dialog {
+  border-radius: 16px;
+  box-shadow: 0 16px 36px rgba(31, 45, 61, 0.12);
+}
+
+.el-dialog__header {
+  border-bottom: 1px solid #e7edf5;
+}
+
+.el-dialog__title {
+  color: #1f2d3d;
+  font-weight: 700;
+}
+
+.el-dialog__footer {
+  border-top: 1px solid #e7edf5;
+}
+
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .el-pager li {
+  background: #ffffff;
+  border: 1px solid #d9e3ee;
+  color: #5f6b7a;
+  border-radius: 8px;
+  min-width: 30px;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background: #2f5d8a;
+  border-color: #2f5d8a;
+  color: #ffffff;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled):hover,
+.el-pagination.is-background .btn-next:hover,
+.el-pagination.is-background .btn-prev:hover {
+  color: #2f5d8a;
 }

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

@@ -9,17 +9,17 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-color:#d4deea;
+$base-menu-color-active:#ffffff;
+$base-menu-background:#24384c;
 $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:#1d2e40;
+$base-sub-menu-hover:#2a435d;
 
 // 自定义暗色菜单风格
 /**