From 30c319694cf7361fee981e55bc3218f160eec50e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= Date: Mon, 3 Nov 2025 11:16:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0UI=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将侧边栏主题从深色改为浅色 - 移除多个组件的背景色和金属风格样式 - 调整按钮、表格和分页组件的样式和间距 - 新增easycode扫码功能页面 - 更新基础URL配置和应用版本号 - 优化登录后跳转逻辑和登出功能 - 调整滚动条和菜单项的样式 --- apps/hand-factory/config.js | 4 +- apps/hand-factory/manifest.json | 4 +- apps/hand-factory/pages.json | 60 +- apps/hand-factory/pages/easycode/easycode.vue | 60 + apps/hand-factory/pages/login.vue | 4 +- apps/hand-factory/pages/mine/index.vue | 4 +- apps/l2/src/assets/styles/btn.scss | 26 +- apps/l2/src/assets/styles/element-ui.scss | 1537 +++++++++++++---- .../src/assets/styles/element-variables.scss | 9 +- apps/l2/src/assets/styles/index.scss | 1 - apps/l2/src/assets/styles/klp.scss | 291 ++++ apps/l2/src/assets/styles/ruoyi.scss | 415 ----- apps/l2/src/assets/styles/sidebar.scss | 53 +- apps/l2/src/assets/styles/variables.scss | 73 +- apps/l2/src/components/Breadcrumb/index.vue | 6 +- apps/l2/src/components/Hamburger/index.vue | 2 +- apps/l2/src/components/Pagination/index.vue | 10 +- apps/l2/src/layout/components/AppMain.vue | 2 +- apps/l2/src/layout/components/Navbar.vue | 4 +- .../src/layout/components/Sidebar/index.vue | 6 +- .../src/layout/components/TagsView/index.vue | 6 +- apps/l2/src/layout/index.vue | 1 - apps/l2/src/main.js | 2 +- apps/l2/src/settings.js | 2 +- apps/l2/src/views/index.vue | 2 +- .../views/l2/roller/components/history.vue | 6 +- .../src/views/l2/roller/components/online.vue | 2 +- 27 files changed, 1756 insertions(+), 836 deletions(-) create mode 100644 apps/hand-factory/pages/easycode/easycode.vue create mode 100644 apps/l2/src/assets/styles/klp.scss delete mode 100644 apps/l2/src/assets/styles/ruoyi.scss diff --git a/apps/hand-factory/config.js b/apps/hand-factory/config.js index b5f8e87..14fb220 100644 --- a/apps/hand-factory/config.js +++ b/apps/hand-factory/config.js @@ -1,7 +1,7 @@ // 应用全局配置 module.exports = { - baseUrl: 'http://192.168.31.116:8080', - // baseUrl: 'http://140.143.206.120:8080', + // baseUrl: 'http://192.168.31.116:8080', + baseUrl: 'http://140.143.206.120:8080', // baseUrl: 'http://localhost:8080', // 应用信息 appInfo: { diff --git a/apps/hand-factory/manifest.json b/apps/hand-factory/manifest.json index afd1b07..e2dbaee 100644 --- a/apps/hand-factory/manifest.json +++ b/apps/hand-factory/manifest.json @@ -2,8 +2,8 @@ "name" : "科伦普", "appid" : "__UNI__E781B49", "description" : "", - "versionName" : "1.2.0", - "versionCode" : "100", + "versionName" : "3.4", + "versionCode" : 1, "transformPx" : false, "app-plus" : { "usingComponents" : true, diff --git a/apps/hand-factory/pages.json b/apps/hand-factory/pages.json index 1ce4cc7..1572e23 100644 --- a/apps/hand-factory/pages.json +++ b/apps/hand-factory/pages.json @@ -1,11 +1,12 @@ { "pages": [ { - "path": "pages/index", - "style": { - "navigationBarTitleText": "首页", + "path" : "pages/easycode/easycode", + "style" : + { + "navigationBarTitleText" : "扫码", "navigationStyle": "custom" - } + } }, { "path": "pages/login", @@ -13,6 +14,13 @@ "navigationBarTitleText": "登录" } }, + { + "path": "pages/index", + "style": { + "navigationBarTitleText": "首页", + "navigationStyle": "custom" + } + }, { "path": "pages/mine/index", @@ -91,28 +99,28 @@ "navigationBarTitleText": "RuoYi", "navigationBarBackgroundColor": "#FFFFFF" }, - "tabBar": { - "list": [ - { - "text": "产线", - "pagePath": "pages/index", - "selectedIconPath": "/static/images/tabbar/home_.png", - "iconPath": "/static/images/tabbar/home.png" - }, - { - "text": "扫码", - "pagePath": "pages/code/code", - "selectedIconPath": "/static/images/tabbar/work_.png", - "iconPath": "/static/images/tabbar/work.png" - }, - { - "text": "我的", - "pagePath": "pages/mine/index", - "selectedIconPath": "/static/images/tabbar/mine_.png", - "iconPath": "/static/images/tabbar/mine.png" - } - ] - }, + // "tabBar": { + // "list": [ + // { + // "text": "产线", + // "pagePath": "pages/index", + // "selectedIconPath": "/static/images/tabbar/home_.png", + // "iconPath": "/static/images/tabbar/home.png" + // }, + // { + // "text": "扫码", + // "pagePath": "pages/code/code", + // "selectedIconPath": "/static/images/tabbar/work_.png", + // "iconPath": "/static/images/tabbar/work.png" + // }, + // { + // "text": "我的", + // "pagePath": "pages/mine/index", + // "selectedIconPath": "/static/images/tabbar/mine_.png", + // "iconPath": "/static/images/tabbar/mine.png" + // } + // ] + // }, "easycom": { "autoscan": true, "custom": { diff --git a/apps/hand-factory/pages/easycode/easycode.vue b/apps/hand-factory/pages/easycode/easycode.vue new file mode 100644 index 0000000..d15d4c1 --- /dev/null +++ b/apps/hand-factory/pages/easycode/easycode.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/apps/hand-factory/pages/login.vue b/apps/hand-factory/pages/login.vue index 0ea5f4b..772a0e3 100644 --- a/apps/hand-factory/pages/login.vue +++ b/apps/hand-factory/pages/login.vue @@ -64,7 +64,7 @@ onLoad() { //#ifdef H5 if (getToken()) { - this.$tab.reLaunch('/pages/index') + this.$tab.reLaunch('/pages/easycode/easycode') } //#endif }, @@ -122,7 +122,7 @@ loginSuccess(result) { // 设置用户信息 this.$store.dispatch('GetInfo').then(res => { - this.$tab.reLaunch('/pages/index') + this.$tab.reLaunch('/pages/easycode/easycode') }) } } diff --git a/apps/hand-factory/pages/mine/index.vue b/apps/hand-factory/pages/mine/index.vue index 7965153..1ed71f8 100644 --- a/apps/hand-factory/pages/mine/index.vue +++ b/apps/hand-factory/pages/mine/index.vue @@ -103,9 +103,9 @@ }, handleLogout() { this.$modal.confirm('确定注销并退出系统吗？').then(() => { - // this.$store.dispatch('LogOut').then(() => {}).finally(() => { + this.$store.dispatch('LogOut').then(() => {}).finally(() => { this.$tab.reLaunch('/pages/login') - // }) + }) }) }, handleToEditInfo() { diff --git a/apps/l2/src/assets/styles/btn.scss b/apps/l2/src/assets/styles/btn.scss index e6ba1a8..49a40e8 100644 --- a/apps/l2/src/assets/styles/btn.scss +++ b/apps/l2/src/assets/styles/btn.scss @@ -41,11 +41,11 @@ @include colorBtn($yellow) } -.pan-btn { +.el-button.pan-btn { font-size: 14px; color: #fff; - padding: 14px 36px; - border-radius: 8px; + padding: 4px !important; + border-radius: 4px; border: none; outline: none; transition: 600ms ease all; @@ -81,7 +81,7 @@ } } -.custom-button { +.el-button.custom-button { display: inline-block; line-height: 1; white-space: nowrap; @@ -93,7 +93,21 @@ box-sizing: border-box; outline: 0; margin: 0; - padding: 10px 15px; + padding: 2px !important; font-size: 14px; - border-radius: 4px; + border-radius: 2px; } + + +.el-table__cell { + padding: 0 !important; +} + +.el-table__cell .el-button { + padding: 0 !important; +} + +.el-table__cell + .el-button { + margin-left: 4px !important; + padding: 0; +} \ No newline at end of file diff --git a/apps/l2/src/assets/styles/element-ui.scss b/apps/l2/src/assets/styles/element-ui.scss index 798a4cb..c8ae50c 100644 --- a/apps/l2/src/assets/styles/element-ui.scss +++ b/apps/l2/src/assets/styles/element-ui.scss @@ -1,89 +1,197 @@ -// element-variables.scss - 工业金属风（深色高对比，表格/按钮强化） -// 适配 Element UI 2.x +// ====================== 1. 基础颜色变量（Sass直接处理）====================== +$primary-base: #5F7BA0; +// $primary-base: #2bf; +/* 工业蓝灰（主色原始值） */ +$success-base: #2ECC71; +/* 成功色原始值 */ +$warning-base: #E67E22; +/* 警告色原始值 */ +$danger-base: #E74C3C; +/* 危险色原始值 */ +$info-base: #AEB6BF; +/* 次主色原始值 */ -// ====================== 基础品牌色 ====================== -$--color-primary: #5F7BA0 !default; // 工业蓝灰 -$--color-success: #2ECC71 !default; -$--color-warning: #E67E22 !default; -$--color-danger: #E74C3C !default; -$--color-info: #AEB6BF !default; // 次主色（冷灰） +// 背景色原始值 +// 暗色 +// $background-base: #2B2F36; +// $background-light-base: lighten($background-base, 5%); +// $background-lighter-base: lighten($background-base, 10%); +// $panel-bg-base: #3A3F45; +// $table-bg-base: #1E2227; -// ====================== 背景层级 ====================== -$--color-background: #2B2F36 !default; // 页面底色 -$--color-background-light: lighten($--color-background, 5%) !default; -$--color-background-lighter: lighten($--color-background, 10%) !default; +// // 暗色边框色原始值 +// $border-color-base: #6E757D; +// $border-color-light: #828991; +// $border-color-lighter: #9AA1A9; -// 面板/卡片/输入等容器底色（层次更亮一点） -$--panel-bg: #3A3F45 !default; -$--table-bg: #1E2227 !default; +// 亮色 +$background-base: #F5F5F5; +$background-light-base: lighten($background-base, 5%); +$background-lighter-base: lighten($background-base, 10%); +$--color-text-primary: #1a1a1a; +$panel-bg-base: $--color-text-primary; +$table-bg-base: transparent; -// ====================== 文字（高对比） ====================== -// 深背景上使用浅文字，确保对比度（WCAG AA+） -$--color-text-primary: #FFFFFF !default; // 标题/重点 -$--color-text-regular: #EAEAEA !default; // 主体文本 -$--color-text-secondary: #B6BDC5 !default; // 次要文本 -$--color-text-placeholder:#8A9098 !default; // 占位/禁用 +// 亮色边框色原始值 +$border-color-base: #6E757D; +$border-color-light: #828991; +$border-color-lighter: #9AA1A9; -// 与 Element 内置变量兼容（可选） -$--font-color-primary: $--color-text-regular !default; -$--font-color-regular: $--color-text-regular !default; + +// ====================== 2. 间距/尺寸变量（Sass变量）====================== +$--spacing-sm: 4px; +$--spacing-base: 8px; +$--spacing-md: $--spacing-base; +$--spacing-lg: $--spacing-base * 2; +$--form-item-margin: $--spacing-base; +$--btn-height: 24px; + +// 关键修复：添加缺失的$--border-color变量，指向基础边框色 +$--border-color: $border-color-base; + + +// ====================== 3. CSS变量（与Sass变量同步）====================== +:root { + /* 颜色体系 - 同步自Sass原始变量 */ + --color-primary: #{$primary-base}; + --color-success: #{$success-base}; + --color-warning: #{$warning-base}; + --color-danger: #{$danger-base}; + --color-info: #{$info-base}; + + /* 背景层级 */ + --color-background: #{$background-base}; + --color-background-light: #{$background-light-base}; + --color-background-lighter: #{$background-lighter-base}; + --panel-bg: #{$panel-bg-base}; + --table-bg: #{$table-bg-base}; + + /* 文本色 */ + --color-text-primary: #{$--color-text-primary}; + --color-text-regular: #333333; + --color-text-secondary: #555555; + --color-text-placeholder: #777777; + + /* 边框色 */ + --border-color-base: #{$border-color-base}; + --border-color-light: #{$border-color-light}; + --border-color-lighter: #{$border-color-lighter}; + --border-color: #{$--border-color}; + /* 同步新增的边框色变量 */ + + /* 间距/尺寸体系 */ + --spacing-sm: #{$--spacing-sm}; + --spacing-base: #{$--spacing-base}; + --spacing-md: #{$--spacing-md}; + --spacing-lg: #{$--spacing-lg}; + --form-item-margin: #{$--form-item-margin}; + --btn-height: #{$--btn-height}; + + /* 金属质感变量 */ + // --metal-gradient-light: linear-gradient(145deg, #3E434A, #363B41); + // --metal-gradient-dark: linear-gradient(145deg, #363B41, #3E434A); + --metal-gradient-light: linear-gradient(145deg, --color-background-light, --color-background); + --metal-gradient-dark: linear-gradient(145deg, --color-background, --color-background-light); + --metal-highlight: rgba(255, 255, 255, .14); + --metal-shadow: 5px 5px 12px rgba(0, 0, 0, .22), -5px -5px 12px rgba(255, 255, 255, .06); + --metal-shadow-inset: inset 3px 3px 6px rgba(0, 0, 0, .28), inset -3px -3px 6px rgba(255, 255, 255, .06); +} + + +// ====================== 4. Element UI适配变量 ======================= +$--color-primary: $primary-base !default; +$--color-success: $success-base !default; +$--color-warning: $warning-base !default; +$--color-danger: $danger-base !default; +$--color-info: $info-base !default; + +$--color-background: $background-base !default; +$--color-background-light: $background-light-base !default; +$--color-background-lighter: $background-lighter-base !default; +$--panel-bg: $panel-bg-base !default; +$--table-bg: $table-bg-base !default; + +$--color-text-primary: var(--color-text-primary) !default; +$--color-text-regular: var(--color-text-regular) !default; +$--color-text-secondary: var(--color-text-secondary) !default; +$--color-text-placeholder: var(--color-text-placeholder) !default; + +// 边框色变量（包括新增的$--border-color） +$--border-color-base: $border-color-base !default; +$--border-color-light: $border-color-light !default; +$--border-color-lighter: $border-color-lighter !default; +$--border-color: $--border-color !default; +/* 关键修复：同步到Element变量 */ + +// 间距变量 +$--spacing-sm: $--spacing-sm !default; +$--spacing-base: $--spacing-base !default; +$--spacing-md: $--spacing-md !default; +$--spacing-lg: $--spacing-lg !default; +$--form-item-margin: $--form-item-margin !default; +$--btn-height: $--btn-height !default; + +$--metal-gradient-light: var(--metal-gradient-light) !default; +$--metal-gradient-dark: var(--metal-gradient-dark) !default; +$--metal-highlight: var(--metal-highlight) !default; +$--metal-shadow: var(--metal-shadow) !default; +$--metal-shadow-inset: var(--metal-shadow-inset) !default; + +// Element UI兼容变量 +$--font-color-primary: $--color-text-regular !default; +$--font-color-regular: $--color-text-regular !default; $--font-color-secondary: $--color-text-secondary !default; -$--font-color-placeholder:$--color-text-placeholder !default; +$--font-color-placeholder: $--color-text-placeholder !default; +$--color-loading: $--color-primary !default; -// ====================== 边框/分割线 ====================== -$--border-color-base: #6E757D !default; -$--border-color-light: #828991 !default; -$--border-color-lighter: #9AA1A9 !default; -// ====================== 拟物金属质感 ====================== -$--metal-gradient-light: linear-gradient( - 145deg, - lighten($--panel-bg, 6%), - darken($--panel-bg, 4%) -) !default; - -$--metal-gradient-dark: linear-gradient( - 145deg, - darken($--panel-bg, 6%), - lighten($--panel-bg, 2%) -) !default; - -$--metal-highlight: rgba(255,255,255,.14) !default; -$--metal-shadow: 5px 5px 12px rgba(0,0,0,.22), --5px -5px 12px rgba(255,255,255,.06) !default; - -$--metal-shadow-inset: inset 3px 3px 6px rgba(0,0,0,.28), -inset -3px -3px 6px rgba(255,255,255,.06) !default; - -// ====================== 全局基底 ====================== +// ====================== 2. 全局样式 ====================== body { background: $--color-background; color: $--color-text-regular; + font-size: 14px; + line-height: 1.5; + margin: 0; + padding: 0; } +// Element容器适配 .el-container, -.el-main { +.el-main, +.el-aside, +.el-header, +.el-footer { background: $--color-background; color: $--color-text-regular; + border: none; } -// ====================== 按钮 ====================== -@mixin button-variant($color, $bg, $border) { - color: $color; +// 标签页内容溢出修复 +.el-tabs__content { + overflow: visible !important; +} + + +// ====================== 3. 组件样式（按优先级合并）====================== +// ---------------------- 3.1 按钮（金属质感 + 紧凑尺寸）---------------------- +@mixin button-variant($text-color, $border-color) { + color: $text-color; background: $--metal-gradient-light; - border: 1px solid $--border-color-light; + border: 1px solid $border-color; box-shadow: $--metal-shadow; border-radius: 6px; - text-shadow: 0 1px 0 rgba(0,0,0,.16); + text-shadow: 0 1px 0 rgba(0, 0, 0, .16); transition: all .25s ease; + height: $--btn-height; + padding: 0 var(--spacing-lg); + font-size: 13px; &:hover, &:focus { - color: $color; + color: $text-color; background: $--metal-gradient-dark; border-color: $--border-color-base; - box-shadow: 6px 6px 14px rgba(0,0,0,.28), - -6px -6px 14px rgba(255,255,255,.08); + box-shadow: 6px 6px 14px rgba(0, 0, 0, .28), -6px -6px 14px rgba(255, 255, 255, .08); transform: translateY(-1px); } @@ -103,187 +211,590 @@ body { // 主按钮（品牌梯度） .el-button--primary { - @include button-variant(#fff, $--color-primary, darken($--color-primary, 10%)); - background: linear-gradient(145deg, lighten($--color-primary,6%), darken($--color-primary,6%)); - border-color: darken($--color-primary,10%); + @include button-variant($--color-text-primary, darken($--color-primary, 10%)); + background: linear-gradient(145deg, lighten($--color-primary, 6%), darken($--color-primary, 6%)); + border-color: darken($--color-primary, 10%); &:hover { - background: linear-gradient(145deg, $--color-primary, darken($--color-primary,8%)); + background: linear-gradient(145deg, $--color-primary, darken($--color-primary, 8%)); } } -// 成功/警告/危险按钮统一风格 -.el-button--success { @include button-variant(#fff, $--color-success, darken($--color-success, 10%)); background: linear-gradient(145deg, lighten($--color-success,6%), darken($--color-success,6%)); } -.el-button--warning { @include button-variant(#fff, $--color-warning, darken($--color-warning, 10%)); background: linear-gradient(145deg, lighten($--color-warning,6%), darken($--color-warning,6%)); } -.el-button--danger { @include button-variant(#fff, $--color-danger, darken($--color-danger, 10%)); background: linear-gradient(145deg, lighten($--color-danger,6%), darken($--color-danger,6%)); } -.el-button--info { @include button-variant(#111, $--color-info, darken($--color-info, 10%)); background: linear-gradient(145deg, lighten($--color-info,6%), darken($--color-info,6%)); } +// 功能按钮（统一风格） +.el-button--success { + @include button-variant($--color-text-primary, darken($--color-success, 10%)); + background: linear-gradient(145deg, lighten($--color-success, 6%), darken($--color-success, 6%)); +} -// 文本按钮（少干扰，高对比悬停） +.el-button--warning { + @include button-variant($--color-text-primary, darken($--color-warning, 10%)); + background: linear-gradient(145deg, lighten($--color-warning, 6%), darken($--color-warning, 6%)); +} + +.el-button--danger { + @include button-variant($--color-text-primary, darken($--color-danger, 10%)); + background: linear-gradient(145deg, lighten($--color-danger, 6%), darken($--color-danger, 6%)); +} + +.el-button--info { + @include button-variant(#111, darken($--color-info, 10%)); + background: linear-gradient(145deg, lighten($--color-info, 6%), darken($--color-info, 6%)); +} + +// 文本按钮（低干扰） .el-button--text { color: $--color-text-secondary; background: transparent; border: none; box-shadow: none; + height: auto; + padding: 4px 8px; &:hover { color: $--color-primary; background: rgba($--color-primary, .12); + transform: none; } } +// 图标按钮（圆形紧凑） .el-button--icon { - width: 36px; height: 36px; padding: 0; border-radius: 8px; - &:only-child { padding: 0; } + width: 36px; + height: 36px; + padding: 0; + border-radius: 8px; + + &:only-child { + padding: 0; + } } -// 按钮组 +// 按钮组（无缝衔接） .el-button-group { .el-button { border-radius: 0; margin: 0; border-left: 1px solid $--border-color-lighter; - &:first-child { border-radius: 6px 0 0 6px; border-left: none; } - &:last-child { border-radius: 0 6px 6px 0; } - &:not(:last-child) { border-right: none; } + &:first-child { + border-radius: 6px 0 0 6px; + border-left: none; + } + + &:last-child { + border-radius: 0 6px 6px 0; + } + + &:not(:last-child) { + border-right: none; + } } } -// ====================== 表格 ====================== +.el-button--medium { + padding: 4px 8px !important; + font-size: 12px; + height: $--btn-height - 4px; +} + +// 迷你按钮（超紧凑） +.el-button--mini { + padding: 4px 8px !important; + font-size: 12px; + height: $--btn-height - 4px; + &.is-circle { + padding: 4px !important; + } +} + +.el-button--small { + padding: 4px 8px !important; + font-size: 12px; + height: $--btn-height - 4px; +} + + +// ---------------------- 3.2 表格（深色交替 + 金属边框）---------------------- .el-table { background: $--table-bg; - border: 1px solid $--border-color-light; + // border: 1px solid $--border-color-light; border-radius: 8px; box-shadow: $--metal-shadow; color: $--color-text-regular; overflow: hidden; + margin-top: $--form-item-margin * 2; // 与表单间距 - // 分割线颜色 - &::before { background-color: $--border-color-lighter; } + // 分割线 + &::before { + background-color: $--border-color-lighter; + } - // 表格主体 + // 表头（深灰黑 + 纯白文字） + .el-table__header-wrapper { + th.el-table__cell { + background: $--color-background; + color: $--color-text-primary; + font-weight: 600; + border-bottom: 1px solid $--border-color-lighter; + // padding: 4px !important; // 紧凑 padding + height: auto; + font-size: 13px; + } + } + + // 表体（奇偶行交替 + hover高亮） .el-table__body-wrapper { .el-table__row { - // 奇数行背景（深一点） - &:nth-child(odd) { - .el-table__cell { - background: #2F3339; // 中深灰 - color: #EAEAEA; // 浅灰白文字 - } + + // 奇数行 + &:nth-child(odd) .el-table__cell { + background: $--color-background-light; + color: $--color-text-regular; } - // 偶数行背景（稍亮一点） - &:nth-child(even) { - .el-table__cell { - background: #353A40; // 稍亮的工业灰 - color: #EAEAEA; - } + // 偶数行 + &:nth-child(even) .el-table__cell { + background: $--color-background-light; + color: $--color-text-regular; } - // 鼠标悬停高亮 - &:hover { - .el-table__cell { - background: rgba(95, 123, 160, 0.25); // 工业蓝高亮 - color: #888888; - } + // hover + &:hover .el-table__cell { + background: rgba($--color-primary, 0.25); + color: #888888; } // 当前行 - &.current-row { - .el-table__cell { - background: rgba(95, 123, 160, 0.35); // 工业蓝更高对比 - color: #FFFFFF; - font-weight: 600; - } + &.current-row .el-table__cell { + background: rgba($--color-primary, 0.35); + color: $--color-text-primary; + // font-weight: 600; } } + // 单元格（统一边框 + 紧凑 padding） .el-table__cell { - border-bottom: 1px solid #444A52; // 工业灰分隔线 - color: #EAEAEA; // 主体文字清晰可见 + border-bottom: 1px solid $--border-color-lighter; + color: $--color-text-regular; + // padding: 2px 4px !important; // 超紧凑 + font-size: 13px; } } - // 表头 - .el-table__header-wrapper { - th { - background: #1F2227; // 深灰黑表头 - color: #FFFFFF; // 纯白标题 - font-weight: 600; - border-bottom: 1px solid #444A52; - } - } - - - .el-table__column-resize-proxy { background-color: $--color-primary; } - - // 底 + // 表尾 .el-table__footer-wrapper { border-top: 1px solid $--border-color-lighter; td { - background: linear-gradient(0deg, lighten($--color-background, 3%), $--color-background); + background: linear-gradient(0deg, $--color-background-light, $--color-background); color: $--color-text-secondary; + // padding: 4px !important; + } + } + + // 列宽调整线 + .el-table__column-resize-proxy { + background-color: $--color-primary; + } + + // 展开图标 + .el-table__expand-icon { + color: $--color-text-secondary; + + &.is-expanded, + &:hover { + color: $--color-primary; + } + } + + &__empty-block { + background: $--color-background; + } + + // 适配尺寸类（统一紧凑） + // &.el-table--medium .el-table__cell, + // &.el-table--mini .el-table__cell { + // padding: 0 !important; + // } +} + +.el-table__fixed-right { + // 表头（深灰黑 + 纯白文字） + .el-table__fixed-header-wrapper { + th.el-table__cell { + background: $--color-background; + color: $--color-text-primary; + font-weight: 600; + border-bottom: 1px solid $--border-color-lighter; + // padding: 4px !important; // 紧凑 padding + // font-size: 13px; + } + } + + // 表体（奇偶行交替 + hover高亮） + .el-table__fixed-body-wrapper { + .el-table__row { + + // 奇数行 + &:nth-child(odd) .el-table__cell { + background: $--color-background-light; + color: $--color-text-regular; + } + + // 偶数行 + &:nth-child(even) .el-table__cell { + background: $--color-background-light; + color: $--color-text-regular; + } + + // 当前行 + &.current-row .el-table__cell { + background: rgba($--color-primary, 0.35); + color: $--color-text-primary; + font-weight: 600; + } } } } -// 展开图标 -.el-table__expand-icon { - color: $--color-text-secondary; +// ---------------------- 3.2 日期范围选择器 ---------------------- +// 日期范围选择器主题样式 +.el-date-editor { + height: $--btn-height; - &.is-expanded { color: $--color-primary; } - &:hover { color: $--color-primary; } + // 基础样式 + &.el-range-editor { + background: $--color-background; + border: 1px solid $--border-color; + border-radius: 4px; + color: $--color-text-regular; + height: $--btn-height; + padding: 0 8px; + box-shadow: none; + transition: all 0.2s ease; + + // 悬停状态 + &:hover { + border-color: $--color-primary; + box-shadow: 0 0 0 2px rgba($--color-primary, 0.2); + } + + // 聚焦状态 + &.is-focus { + border-color: $--color-primary; + box-shadow: 0 0 0 2px rgba($--color-primary, 0.2); + outline: none; + } + + // 图标样式 + .el-input__icon { + color: $--color-text-secondary; + width: 18px; + height: 18px; + line-height: 18px; + + &:hover { + color: $--color-primary; + } + } + + // 输入框样式 + .el-range-input { + background: transparent; + border: none; + color: $--color-text-regular; + padding: 0 4px; + height: 100%; + font-size: 13px; + width: 80px; + + &::placeholder { + color: $--color-text-placeholder; + } + + &:focus { + outline: none; + } + } + + // 分隔符样式 + .el-range-separator { + color: $--color-text-secondary; + padding: 0 4px; + font-size: 13px; + } + + // 清除图标 + .el-range__close-icon { + margin-left: 4px; + + &:hover { + color: $--color-danger; + } + } + } + + &--medium.el-input__inner { + height: auto; + } } -// 选择框（与 Element 状态类配合） -.el-checkbox { - .el-checkbox__inner { +.el-range-editor--medium.el-input__inner { + height: $--btn-height !important; + width: auto !important; + + .el-range-separator { + padding: 0; + line-height: 16px; + font-size: 13px; + color: $--color-text-secondary; + } +} + +// 日期选择面板样式 +.el-picker-panel { + background: $--color-background; + border: 1px solid $--border-color; + border-radius: 6px; + box-shadow: $--metal-shadow; + color: $--color-text-regular; + + // 头部导航 + .el-picker-panel__header { + border-bottom: 1px solid $--border-color-lighter; + padding: 6px 10px; + + button { + color: $--color-text-secondary; + + &:hover { + color: $--color-primary; + background: rgba($--color-primary, 0.1); + } + } + + .el-picker-panel__icon-btn { + width: 24px; + height: 24px; + line-height: 24px; + border-radius: 4px; + } + + .el-date-picker__header-label { + color: $--color-text-primary; + font-weight: 500; + } + } + + // 日期表格 + .el-date-table { + border-collapse: separate; + border-spacing: 2px; + + th { + color: $--color-text-secondary; + font-weight: normal; + padding: 4px 0; + font-size: 12px; + } + + td { + padding: 0; + + .el-date-table__cell { + width: 28px; + height: 28px; + line-height: 28px; + border-radius: 4px; + margin: 1px; + font-size: 13px; + + &:hover { + background: rgba($--color-primary, 0.2); + } + + &.current { + background: $--color-primary; + color: $--color-text-primary; + } + + &.in-range { + background: rgba($--color-primary, 0.1); + + &::before { + background: $--color-primary; + } + } + + &.start-date, + &.end-date { + background: $--color-primary; + color: $--color-text-primary; + } + } + } + + .available.in-range div { + background-color: $--color-background; + } + } + + // 范围选择器底部按钮 + .el-range-picker__footer { + border-top: 1px solid $--border-color-lighter; + padding: 6px 10px; + + button { + background: $--color-background-light; + border: 1px solid $--border-color; + color: $--color-text-regular; + height: 24px; + line-height: 22px; + padding: 0 12px; + font-size: 12px; + border-radius: 4px; + + &:hover { + background: rgba($--color-primary, 0.2); + border-color: $--color-primary; + } + + &.el-button--primary { + background: $--color-primary; + border-color: $--color-primary; + color: $--color-text-primary; + + &:hover { + background: lighten($--color-primary, 10%); + border-color: lighten($--color-primary, 10%); + } + } + } + } +} + +// 自定义表格工具类（补充紧凑） +.small-padding .cell { + padding-left: $--spacing-base / 2; + padding-right: $--spacing-base / 2; +} + +.status-col .cell { + padding: 0 10px !important; + text-align: center; +} + + +// ---------------------- 3.3 表单/输入（金属内阴影 + 统一高度）---------------------- +// 表单项布局 +.el-form-item { + margin-bottom: $--form-item-margin !important; + font-size: 13px; + + // 标签样式 + .el-form-item__label { + color: $--color-text-secondary; + padding-right: $--spacing-base; + font-size: 13px; + } + + // 搜索表单 inline 布局 + &.search-form-item { + display: inline-block; + margin-right: $--spacing-base; + vertical-align: middle; + } +} + +// 输入框（统一高度 + 金属内阴影） +.el-input { + height: $--btn-height; + + .el-input__inner { background: $--metal-gradient-light; border-color: $--border-color-light; - box-shadow: $--metal-shadow-inset; + color: $--color-text-regular; + // box-shadow: $--metal-shadow-inset; + border-radius: 0; + height: $--btn-height; + line-height: $--btn-height; + font-size: 13px; + + &::placeholder { + color: $--color-text-placeholder; + } + + &:focus { + border-color: $--color-primary; + box-shadow: $--metal-shadow-inset; + } } - &.is-checked .el-checkbox__inner { - background: $--metal-gradient-dark; - border-color: $--border-color-base; + // 输入框图标 + .el-input__icon { + color: $--color-text-secondary; + height: $--btn-height; + line-height: $--btn-height; - &::after { border-color: $--color-text-primary; } + &:hover { + color: $--color-primary; + } + } + + // 尺寸适配（统一高度） + &.el-input--small .el-input__inner, + &.el-input--medium .el-input__inner, + &.el-input--large .el-input__inner { + height: $--btn-height; + line-height: $--btn-height; + } + + .el-input-group__append, + .el-input-group__prepend { + border-radius: 0; + border-left: 1px solid $--border-color-light; + background: $--metal-gradient-light; + color: $--color-text-regular; + // box-shadow: $--metal-shadow-inset; + font-size: 13px; } } -// ====================== 表单/输入 ====================== -.el-form-item__label { color: $--color-text-secondary; } - -.el-input__inner { +// 文本域 +.el-textarea .el-textarea__inner { background: $--metal-gradient-light; border-color: $--border-color-light; color: $--color-text-regular; - box-shadow: $--metal-shadow-inset; + // box-shadow: $--metal-shadow-inset; + border-radius: 0; + padding: $--spacing-base; + font-size: 13px; + + &::placeholder { + color: $--color-text-placeholder; + } - &::placeholder { color: $--color-text-placeholder; } &:focus { border-color: $--color-primary; box-shadow: $--metal-shadow-inset, 0 0 0 2px rgba($--color-primary, .22); } } -// 数字输入 +// 数字输入框 .el-input-number { .el-input__inner { - background: $--metal-gradient-light; - border-color: $--border-color-light; - box-shadow: $--metal-shadow-inset; - color: $--color-text-regular; - border-radius: 6px 0 0 6px; + border-radius: 0; } + // 增减按钮 .el-input-number__increase, .el-input-number__decrease { background: $--metal-gradient-light; border-color: $--border-color-light; box-shadow: $--metal-shadow; transition: all .2s ease; + height: $--btn-height; + line-height: $--btn-height; &:hover { background: $--metal-gradient-dark; @@ -300,28 +811,73 @@ body { } } - .el-input-number__increase { border-radius: 0 6px 6px 0; .el-icon-plus { color: $--color-text-regular; } } - .el-input-number__decrease { border-radius: 6px 0 0 6px; .el-icon-minus { color: $--color-text-regular; } } + .el-input-number__increase { + border-radius: 0; - &.el-input-number--small { - .el-input-number__increase, .el-input-number__decrease { width: 24px; height: 24px; } + .el-icon-plus { + color: $--color-text-regular; + } } - &.is-without-controls .el-input__inner { border-radius: 6px; } + .el-input-number__decrease { + border-radius: 0; + + .el-icon-minus { + color: $--color-text-regular; + } + } + + // 迷你尺寸 + &.el-input-number--small { + + .el-input-number__increase, + .el-input-number__decrease { + width: 24px; + height: 24px; + } + } + + // 无控制按钮 + &.is-without-controls .el-input__inner { + border-radius: 0; + } } -// 选择器/下拉 -.el-select-dropdown { - background: $--metal-gradient-light; - border: 1px solid $--border-color-light; - box-shadow: $--metal-shadow; - color: $--color-text-regular; +// 选择器/下拉框 +.el-select { + .el-input__inner { + border-radius: 0; + height: 24px !important; + } - .el-select-dropdown__item { + .el-select__tags { + .el-tag { + max-width: 100px; + } + } + + // 下拉面板 + .el-select-dropdown { + background: $--metal-gradient-light; + border: 1px solid $--border-color-light; + box-shadow: $--metal-shadow; color: $--color-text-regular; + border-radius: 6px; - &:hover { background-color: rgba($--color-primary, .12); } - &.selected{ background-color: rgba($--color-primary, .20); color: #fff; } + .el-select-dropdown__item { + color: $--color-text-regular; + padding: 6px 16px; + font-size: 13px; + + &:hover { + background-color: rgba($--color-primary, .12); + } + + &.selected { + background-color: rgba($--color-primary, .20); + color: $--color-text-primary; + } + } } } @@ -331,30 +887,44 @@ body { background-color: $--border-color-base; box-shadow: $--metal-shadow-inset; } - &.is-checked .el-switch__core { background-color: $--color-primary; } + + &.is-checked .el-switch__core { + background-color: $--color-primary; + } } // 滑块 -.el-slider__bar { background: $--metal-gradient-dark; } -.el-slider__button { +.el-slider__bar { + background: $--metal-gradient-dark; +} + +.el-slider__button { background: $--metal-gradient-light; border-color: $--border-color-light; box-shadow: $--metal-shadow; } -// 标签 -.el-tag { - background: $--metal-gradient-light; - border-color: $--border-color-light; - color: $--color-text-regular; +// 复选框 +.el-checkbox { + .el-checkbox__inner { + background: $--metal-gradient-light; + border-color: $--border-color-light; + box-shadow: $--metal-shadow-inset; + border-radius: 4px; + } - &.el-tag--primary { - background: rgba($--color-primary, .22); - color: $--color-primary; - border-color: transparent; + &.is-checked .el-checkbox__inner { + background: $--metal-gradient-dark; + border-color: $--border-color-base; + + &::after { + border-color: $--color-text-primary; + } } } + +// ---------------------- 3.4 卡片/对话框（金属外阴影 + 层级）---------------------- // 卡片 .el-card { background: $--metal-gradient-light; @@ -362,152 +932,114 @@ body { box-shadow: $--metal-shadow; border-radius: 8px; color: $--color-text-regular; + overflow: hidden; - .el-card__header { border-bottom: 1px solid $--border-color-lighter; color: $--color-text-primary; } + // 卡片头部 + .el-card__header { + padding: $--spacing-md $--spacing-lg; + border-bottom: 1px solid $--border-color-lighter; + color: $--color-text-primary; + background: transparent; + } + + // 卡片主体 + .el-card__body { + padding: $--spacing-lg; + } } // 对话框 .el-dialog { - background: $--metal-gradient-light; + transform: none; + left: 0; + position: relative; + margin: 10vh auto 0; + // background: $--metal-gradient-light !important; + background-color: white !important; + border: 1px solid $--border-color-light; + box-shadow: $--metal-shadow; + border-radius: 8px; + color: $--color-text-regular; + + // 对话框头部 + .el-dialog__header { + padding: $--spacing-lg; + border-bottom: 1px solid $--border-color-lighter; + } + + .el-dialog__title { + color: $--color-text-primary; + } + + // 对话框主体 + .el-dialog__body { + padding: $--spacing-lg; + max-height: 60vh; + overflow-y: auto; + } + + // 对话框底部 + .el-dialog__footer { + padding: $--spacing-md $--spacing-lg; + border-top: 1px solid $--border-color-lighter; + text-align: right; + } +} + +// 抽屉 +.el-drawer { + // background: $--metal-gradient-light; border: 1px solid $--border-color-light; box-shadow: $--metal-shadow; border-radius: 8px; color: $--color-text-regular; } -// Popover（使用 popper 箭头） +// Popover .el-popover { - background: $--metal-gradient-light; + // background: $--metal-gradient-light; border: 1px solid $--border-color-light; border-radius: 8px; box-shadow: $--metal-shadow; color: $--color-text-regular; + padding: $--spacing-lg; + &:focus { + outline: none; + } + + // Popover 标题 .el-popover__title { color: $--color-text-primary; border-bottom: 1px solid $--border-color-lighter; - padding-bottom: 8px; margin-bottom: 8px; font-weight: 600; + padding-bottom: $--spacing-md; + margin-bottom: $--spacing-md; + font-weight: 600; } + // Popover 底部 .el-popover__footer { border-top: 1px solid $--border-color-lighter; - padding-top: 12px; margin-top: 8px; text-align: right; + padding-top: $--spacing-md; + margin-top: $--spacing-md; + text-align: right; } - .popper__arrow { // 兼容 element 的箭头类 - &::after { background: $--metal-gradient-light; } + // 箭头样式 + .popper__arrow { + &::after { + background: $--metal-gradient-light; + } + border-color: $--border-color-light; } } -.el-popover:focus { outline: none; } -.el-button-group + .el-popover { margin-left: 5px; } - -// 日期选择器 -.el-date-picker { - .el-picker-panel { - background: $--metal-gradient-light; - border: 1px solid $--border-color-light; - border-radius: 8px; - box-shadow: $--metal-shadow; - color: $--color-text-regular; - - .el-date-picker__header { - border-bottom: 1px solid $--border-color-lighter; - color: $--color-text-primary; - - .el-date-picker__header-label { cursor: pointer; transition: color .2s; &:hover { color: $--color-primary; } } - .el-date-picker__header-btn { color: $--color-text-secondary; cursor: pointer; transition: color .2s; - &:hover { color: $--color-primary; } - &.is-disabled { color: $--color-text-placeholder; cursor: not-allowed; } - } - } - - .el-date-table { - th { color: $--color-text-secondary; font-weight: normal; } - td { - color: $--color-text-regular; - border-radius: 4px; - transition: all .2s; - - &.available { cursor: pointer; &:hover { background: $--metal-highlight; } } - &.today { color: $--color-primary; font-weight: 600; } - &.current, - &.selected { background: $--color-primary; color: #fff; &:hover { background: darken($--color-primary, 5%); } } - &.disabled { color: $--color-text-placeholder; cursor: not-allowed; &:hover { background: transparent; } } - } - } - - .el-picker-panel__shortcut { - padding: 10px; border-top: 1px solid $--border-color-lighter; - - .el-picker-panel__shortcut-btn { - padding: 4px 10px; border-radius: 4px; cursor: pointer; transition: all .2s; - color: $--color-text-regular; - - &:hover { background: $--metal-highlight; color: $--color-text-primary; } - &.is-selected { background: $--color-primary; color: #fff; &:hover { background: darken($--color-primary, 5%); } } - } - } - } - - .el-input__inner { - background: $--metal-gradient-light; - border-color: $--border-color-light; - box-shadow: $--metal-shadow-inset; - color: $--color-text-regular; - - &:focus { - border-color: $--color-primary; - box-shadow: $--metal-shadow-inset, 0 0 0 2px rgba($--color-primary,.22); - } - } - - .el-input__icon { - color: $--color-text-secondary; - transition: color .2s; - &:hover { color: $--color-primary; } - } -} - -// 其他 -$--color-loading: $--color-primary !default; - -.pagination-container { background-color: transparent !important; } - -.el-range-separator { color: $--color-text-regular; padding: 0 8px; } - -.el-range-input { - background-color: transparent !important; -} - -.el-tree { - background-color: transparent !important; - color: white -} - -.el-form-item__label { - color: white; -} - -.is-center.is-leaf.el-table__cell { - background-color: #1F2227; -} - -// 描述列表 -.el-descriptions { - .el-descriptions__body { - background-color: transparent !important; - } - - .el-descriptions-item__label { - color: white; - } - .el-descriptions-item__content { - color: white; - } +.el-button-group+.el-popover { + margin-left: 5px; } +// ====================== 标签页组件（el-tabs）样式 ======================= .el-tabs { // 标签页容器 background-color: transparent; @@ -527,7 +1059,7 @@ $--color-loading: $--color-primary !default; // background-color: $--color-background-light; border-radius: 6px 6px 0 0; padding: 0 var(--spacing-base); - box-shadow: inset 0 -1px 0 $--border-color-light; + // box-shadow: inset 0 -1px 0 $--border-color-light; } // 标签项 @@ -604,10 +1136,10 @@ $--color-loading: $--color-primary !default; // 标签内容区 .el-tabs__content { - padding: var(--spacing-lg); + // padding: var(--spacing-lg); background-color: $--metal-gradient-light; - border: 1px solid $--border-color-light; - border-radius: 0 0 6px 6px; + // border: 1px solid $--border-color-light; + // border-radius: 0 0 6px 6px; } // 卡片类型标签页 @@ -625,14 +1157,15 @@ $--color-loading: $--color-primary !default; .el-tabs__item { border: 1px solid $--border-color-light; border-bottom: none; - border-radius: 6px 6px 0 0; + // border-radius: 6px 6px 0 0; margin: 0 2px; background-color: $--metal-gradient-light; &.is-active { border-color: $--border-color-light; border-bottom-color: $--metal-gradient-light; - background-color: $--metal-gradient-light; + background-color: $--color-primary; + color: $--metal-gradient-light; position: relative; bottom: -1px; } @@ -718,4 +1251,424 @@ $--color-loading: $--color-primary !default; background-color: rgba($--color-primary, 0.08); } } +} + +// ---------------------- 3.5 日期选择器（深色适配 + 交互优化）---------------------- +.el-date-picker { + .el-picker-panel { + background: $--metal-gradient-light; + border: 1px solid $--border-color-light; + border-radius: 8px; + box-shadow: $--metal-shadow; + color: $--color-text-regular; + + // 头部（年月切换） + .el-date-picker__header { + border-bottom: 1px solid $--border-color-lighter; + color: $--color-text-primary; + padding: $--spacing-md; + + .el-date-picker__header-label { + cursor: pointer; + transition: color .2s; + + &:hover { + color: $--color-primary; + } + } + + .el-date-picker__header-btn { + color: $--color-text-secondary; + cursor: pointer; + transition: color .2s; + + &:hover { + color: $--color-primary; + } + + &.is-disabled { + color: $--color-text-placeholder; + cursor: not-allowed; + } + } + } + + // 日期表格 + .el-date-table { + th { + color: $--color-text-secondary; + font-weight: normal; + padding: $--spacing-sm; + } + + td { + color: $--color-text-regular; + border-radius: 4px; + transition: all .2s; + padding: $--spacing-sm; + + &.available { + cursor: pointer; + + &:hover { + background: $--metal-highlight; + } + } + + &.today { + color: $--color-primary; + font-weight: 600; + } + + &.current, + &.selected { + background: $--color-primary; + color: $--color-text-primary; + + &:hover { + background: darken($--color-primary, 5%); + } + } + + &.disabled { + color: $--color-text-placeholder; + cursor: not-allowed; + + &:hover { + background: transparent; + } + } + } + } + + // 快捷选项 + .el-picker-panel__shortcut { + padding: $--spacing-md; + border-top: 1px solid $--border-color-lighter; + + .el-picker-panel__shortcut-btn { + padding: 4px 10px; + border-radius: 4px; + cursor: pointer; + transition: all .2s; + color: $--color-text-regular; + + &:hover { + background: $--metal-highlight; + color: $--color-text-primary; + } + + &.is-selected { + background: $--color-primary; + color: $--color-text-primary; + + &:hover { + background: darken($--color-primary, 5%); + } + } + } + } + } + + // 范围选择器分隔符 + .el-range-separator { + color: $--color-text-regular; + padding: 0 $--spacing-md; + box-sizing: content-box; + } + + // 范围输入框 + .el-range-input { + background-color: transparent !important; + } + + .el-range-editor.el-input__inner { + display: inline-flex !important; + } +} + +// ====================== 描述列表组件（el-descriptions）- 深色模式 ====================== +.el-descriptions { + width: 100%; + // background: $--color-background !important; // 黑色背景 + box-shadow: $--metal-shadow; + overflow: hidden; + color: $--color-text-primary; // 白色文字 + + // 描述列表头部 + &__header { + padding: $--spacing-base $--spacing-lg; + border-bottom: 1px solid $--border-color-lighter; + // background: $--metal-gradient-dark; + color: $--color-text-primary; // 白色标题 + font-weight: 600; + font-size: 14px; + } + + // 描述列表主体容器 + &__body { + width: 100%; + background-color: transparent; + } + + // 描述列表行 + &__row { + display: flex; + width: 100%; + border-bottom: 1px solid $--border-color-lighter; + + // 最后一行移除底部边框 + &:last-child { + border-bottom: none; + } + } + + // 描述列表标签项（左侧） + .el-descriptions-item__label { + // padding: $--spacing-lg; + // background: $--color-background !important; // 极浅灰背景区分标签 + color: $--color-text-secondary; // 浅灰文字 + font-weight: 500; + // border-right: 1px solid $--border-color-lighter; + box-sizing: border-box; + white-space: nowrap; + font-size: 13px; + } + + // 描述列表内容项（右侧） + &-item__content { + // padding: $--spacing-lg; + // background: $--color-background-light; + color: $--color-text-primary; // 白色文字 + flex: 1; + box-sizing: border-box; + font-size: 13px; + word-break: break-word; + } + + // 带边框模式适配 + &--border { + border: 1px solid $--border-color-light; + border-radius: 8px; + overflow: hidden; + + .el-descriptions__label, + .el-descriptions__content { + border-color: $--border-color-lighter; + } + + .el-descriptions__header { + border-bottom: 1px solid $--border-color-light; + } + } + + // 尺寸适配 + &--small { + + .el-descriptions__label, + .el-descriptions__content { + padding: $--spacing-base / 2 $--spacing-base; + font-size: 12px; + } + + .el-descriptions__header { + padding: $--spacing-base / 2 $--spacing-base; + font-size: 13px; + } + } + + &--large { + + .el-descriptions__label, + .el-descriptions__content { + padding: $--spacing-lg $--spacing-lg; + font-size: 14px; + } + + .el-descriptions__header { + padding: $--spacing-base $--spacing-lg; + font-size: 15px; + } + } + + // 响应式适配 + @media (max-width: 768px) { + .el-descriptions__row { + flex-direction: column; + } + + .el-descriptions__label { + border-right: none; + border-bottom: 1px solid $--border-color-lighter; + width: 100%; + } + } +} + + +// ---------------------- 3.6 导航类（面包屑/菜单）---------------------- +// 面包屑 +.el-breadcrumb { + padding: $--spacing-md 0; + font-size: 13px; + + .el-breadcrumb__inner, + .el-breadcrumb__inner a { + font-weight: 400 !important; + color: $--color-text-secondary !important; + } + + .el-breadcrumb__separator { + margin: 0 $--spacing-sm; + color: $--border-color; + } +} + +// 菜单 +.el-menu { + border-right: 1px solid $--border-color; + background: $--color-background; + + .el-menu-item, + .el-submenu__title { + padding: 0 16px !important; + height: 40px !important; + line-height: 40px !important; + color: $--color-text-secondary; + font-size: 13px; + + &:hover { + background: rgba($--color-primary, .12); + color: $--color-primary; + } + } + + // 折叠菜单 + &.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow { + display: none; + } + + // 激活菜单 + .el-menu-item.is-active { + color: $--color-primary; + background: rgba($--color-primary, .15); + border-right: 3px solid $--color-primary; + } +} + + +// ---------------------- 3.7 其他组件（标签/分页/上传）---------------------- +// 标签 +.el-tag { + background: $--metal-gradient-light; + border-color: $--border-color-light; + color: $--color-text-regular; + padding: 2px 4px; + border-radius: 4px; + font-size: 12px; + height: auto; + margin-right: 0; + + // 主色标签 + &.el-tag--primary { + background: rgba($--color-primary, .22); + color: $--color-primary; + border-color: transparent; + } + + // 表格内标签（无圆角） + .cell & { + margin-right: 0; + padding: 1px !important; + border-radius: 4px !important; + } +} + +// 分页 +.el-pagination { + margin-top: 16px; + padding: 8px 0; + text-align: right; + + .el-pager li { + margin: 0 2px; + min-width: 30px; + height: 30px; + line-height: 30px; + border-radius: 4px; + background: $--metal-gradient-light; + border: 1px solid $--border-color-light; + + &:hover { + background: $--metal-gradient-dark; + color: $--color-primary; + } + + &.active { + background: $--color-primary; + color: $--color-text-primary; + border-color: $--color-primary; + } + } + + // 输入框后缀 + .el-input__suffix { + position: absolute; + line-height: 0; + } +} + +// 分页容器（透明背景） +div.pagination-container { + background-color: transparent !important; + padding: 0 !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + + .el-pagination { + padding: 0 !important; + } +} + +// 上传组件 +.el-upload { + input[type="file"] { + display: none !important; + } + + .el-upload__input { + display: none; + } + + // 拖拽上传容器 + .el-upload-dragger { + width: 100%; + height: 200px; + border-radius: 6px; + border: 2px dashed $--border-color; + background: $--metal-gradient-light; + color: $--color-text-secondary; + + &:hover { + border-color: $--color-primary; + background: $--metal-gradient-dark; + } + } +} + +// 树形组件 +.el-tree { + background-color: transparent !important; + color: $--color-text-regular; + + .el-tree-node { + // &:hover { + // background: rgba($--color-primary, .12); + // } + + &.is-current>.el-tree-node__content { + background: rgba($--color-primary, .2); + color: $--color-primary; + } + } } \ No newline at end of file diff --git a/apps/l2/src/assets/styles/element-variables.scss b/apps/l2/src/assets/styles/element-variables.scss index a3fc9b7..3369236 100644 --- a/apps/l2/src/assets/styles/element-variables.scss +++ b/apps/l2/src/assets/styles/element-variables.scss @@ -4,7 +4,8 @@ **/ /* theme color */ -$--color-primary: #647b98; +$--color-primary: #5F7BA0; +// $--color-primary: #2bf; $--color-success: #13ce66; $--color-warning: #ffba00; $--color-danger: #ff4949; @@ -26,6 +27,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts'; // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass -:export { - theme: $--color-primary; -} +// :export { +// theme: $--color-primary; +// } diff --git a/apps/l2/src/assets/styles/index.scss b/apps/l2/src/assets/styles/index.scss index 93e3aec..2f3b9ef 100644 --- a/apps/l2/src/assets/styles/index.scss +++ b/apps/l2/src/assets/styles/index.scss @@ -10,7 +10,6 @@ body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; - background-color: #a1a6ac; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; } diff --git a/apps/l2/src/assets/styles/klp.scss b/apps/l2/src/assets/styles/klp.scss new file mode 100644 index 0000000..8c70623 --- /dev/null +++ b/apps/l2/src/assets/styles/klp.scss @@ -0,0 +1,291 @@ +/** +* 通用css样式布局处理 +* Copyright (c) 2019 klp +*/ + +/** 基础通用 **/ +.pt5 { + padding-top: 5px; +} + +.pr5 { + padding-right: 5px; +} + +.pb5 { + padding-bottom: 5px; +} + +.mt5 { + margin-top: 5px; +} + +.mr5 { + margin-right: 5px; +} + +.mb5 { + margin-bottom: 5px; +} + +.mb8 { + margin-bottom: 8px; +} + +.ml5 { + margin-left: 5px; +} + +.mt10 { + margin-top: 10px; +} + +.mr10 { + margin-right: 10px; +} + +.mb10 { + margin-bottom: 10px; +} +.ml10 { + margin-left: 10px; +} + +.mt20 { + margin-top: 20px; +} + +.mr20 { + margin-right: 20px; +} + +.mb20 { + margin-bottom: 20px; +} +.ml20 { + margin-left: 20px; +} + +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} + +.el-message-box__status + .el-message-box__message{ + word-break: break-word; +} + +.el-dialog:not(.is-fullscreen) { + margin-top: 6vh !important; +} + +.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body { + overflow: auto; + overflow-x: hidden; + max-height: 70vh; + padding: 10px 20px 0; +} + +// .el-table { +// .el-table__header-wrapper, .el-table__fixed-header-wrapper { +// th { +// word-break: break-word; +// background-color: #f8f8f9; +// color: #515a6e; +// height: 40px; +// font-size: 13px; +// } +// } + +// .el-table__body-wrapper { +// .el-button [class*="el-icon-"] + span { +// margin-left: 1px; +// } +// } +// } + +/** 表单布局 **/ +// .form-header { +// font-size: 15px; +// color: #6379bb; +// border-bottom: 1px solid #ddd; +// margin: 8px 10px 25px 10px; +// padding-bottom: 5px +// } + +// /** 表格布局 **/ +// .pagination-container { +// position: relative; +// height: 25px; +// margin-bottom: 10px; +// margin-top: 15px; +// padding: 10px 20px !important; +// } + +/* tree border */ +// .tree-border { +// margin-top: 5px; +// border: 1px solid #e5e6e7; +// background: #FFFFFF none; +// border-radius: 4px; +// } + +// .pagination-container .el-pagination { +// right: 0; +// position: absolute; +// } + +// @media (max-width: 768px) { +// .pagination-container .el-pagination > .el-pagination__jump { +// display: none !important; +// } +// .pagination-container .el-pagination > .el-pagination__sizes { +// display: none !important; +// } +// } + +// .el-table .fixed-width .el-button--mini { +// padding-left: 0; +// padding-right: 0; +// width: inherit; +// } + +// /** 表格更多操作下拉样式 */ +// .el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine { +// cursor: pointer; +// margin-left: 5px; +// } + +// .el-table .el-dropdown, .el-icon-arrow-down { +// font-size: 12px; +// } + +// .el-tree-node__content > .el-checkbox { +// margin-right: 8px; +// } + +.list-group-striped > .list-group-item { + border-left: 0; + border-right: 0; + border-radius: 0; + padding-left: 0; + padding-right: 0; +} + +.list-group { + padding-left: 0px; + list-style: none; +} + +.list-group-item { + border-bottom: 1px solid #e7eaec; + border-top: 1px solid #e7eaec; + margin-bottom: -1px; + padding: 11px 0px; + font-size: 13px; +} + +.pull-right { + float: right !important; +} + +.el-card__header { + padding: 14px 15px 7px; + min-height: 40px; +} + +.el-card__body { + padding: 15px 20px 20px 20px; +} + +.card-box { + padding-right: 15px; + padding-left: 15px; + margin-bottom: 10px; +} + +/* button color */ +.el-button--cyan.is-active, +.el-button--cyan:active { + background: #20B2AA; + border-color: #20B2AA; + color: #FFFFFF; +} + +.el-button--cyan:focus, +.el-button--cyan:hover { + background: #48D1CC; + border-color: #48D1CC; + color: #FFFFFF; +} + +.el-button--cyan { + background-color: #20B2AA; + border-color: #20B2AA; + color: #FFFFFF; +} + +/* text color */ +.text-navy { + color: #1ab394; +} + +.text-primary { + color: inherit; +} + +.text-success { + color: #1c84c6; +} + +.text-info { + color: #23c6c8; +} + +.text-warning { + color: #f8ac59; +} + +.text-danger { + color: #ed5565; +} + +.text-muted { + color: #888888; +} + +/* image */ +.img-circle { + border-radius: 50%; +} + +.img-lg { + width: 120px; + height: 120px; +} + +.avatar-upload-preview { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 200px; + height: 200px; + border-radius: 50%; + box-shadow: 0 0 4px #ccc; + overflow: hidden; +} + +/* 拖拽列样式 */ +.sortable-ghost { + opacity: .8; + color: #fff !important; + background: #42b983 !important; +} + +.top-right-btn { + position: relative; + float: right; +} diff --git a/apps/l2/src/assets/styles/ruoyi.scss b/apps/l2/src/assets/styles/ruoyi.scss deleted file mode 100644 index 18815c4..0000000 --- a/apps/l2/src/assets/styles/ruoyi.scss +++ /dev/null @@ -1,415 +0,0 @@ -/** -* 通用css样式布局处理 -* Copyright (c) 2019 ruoyi -*/ - -/** 基础通用 **/ -.pt5 { - padding-top: 5px; -} - -.pr5 { - padding-right: 5px; -} - -.pb5 { - padding-bottom: 5px; -} - -.mt5 { - margin-top: 5px; -} - -.mr5 { - margin-right: 5px; -} - -.mb5 { - margin-bottom: 5px; -} - -.mb8 { - margin-bottom: 8px; -} - -.ml5 { - margin-left: 5px; -} - -.mt10 { - margin-top: 10px; -} - -.mr10 { - margin-right: 10px; -} - -.mb10 { - margin-bottom: 10px; -} -.ml10 { - margin-left: 10px; -} - -.mt20 { - margin-top: 20px; -} - -.mr20 { - margin-right: 20px; -} - -.mb20 { - margin-bottom: 20px; -} -.ml20 { - margin-left: 20px; -} - -.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { - font-family: inherit; - font-weight: 500; - line-height: 1.1; - color: inherit; -} - -.el-message-box__status + .el-message-box__message{ - word-break: break-word; -} - -.el-dialog:not(.is-fullscreen) { - margin-top: 6vh !important; -} - -.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body { - overflow: auto; - overflow-x: hidden; - max-height: 70vh; - padding: 10px 20px 0; -} - -.el-table { - /* 固定列表格容器背景与分割线 */ - .el-table__fixed, - .el-table__fixed-left, - .el-table__fixed-right { - background: transparent; /* 让内部单元格背景生效 */ - } - - .el-table__fixed::before, - .el-table__fixed-left::before, - .el-table__fixed-right::before { - /* 顶部那条细线颜色 */ - background-color: #444A52; - } - - /* 固定列表头 */ - .el-table__fixed-header-wrapper th, - .el-table__fixed-left .el-table__fixed-header-wrapper th, - .el-table__fixed-right .el-table__fixed-header-wrapper th { - background: #1F2227 !important; /* 与主表头一致的深灰 */ - color: #FFFFFF !important; /* 白字 */ - border-bottom: 1px solid #444A52 !important; - font-weight: 600; - } - - /* 固定列表体单元格（奇偶行） */ - .el-table__fixed-body-wrapper .el-table__row:nth-child(odd) .el-table__cell, - .el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row:nth-child(odd) .el-table__cell, - .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row:nth-child(odd) .el-table__cell { - background: #2F3339 !important; /* 中深灰 */ - color: #EAEAEA !important; /* 浅灰白字 */ - border-bottom: 1px solid #444A52 !important; - } - - .el-table__fixed-body-wrapper .el-table__row:nth-child(even) .el-table__cell, - .el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row:nth-child(even) .el-table__cell, - .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row:nth-child(even) .el-table__cell { - background: #353A40 !important; /* 稍亮一档 */ - color: #EAEAEA !important; - border-bottom: 1px solid #444A52 !important; - } - - /* 固定列 hover / current-row 同步 */ - .el-table__fixed-body-wrapper .el-table__row:hover .el-table__cell, - .el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row:hover .el-table__cell, - .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row:hover .el-table__cell { - background: rgba(95, 123, 160, 0.25) !important; /* 工业蓝 hover */ - color: #FFFFFF !important; - } - - .el-table__fixed-body-wrapper .el-table__row.current-row .el-table__cell, - .el-table__fixed-left .el-table__fixed-body-wrapper .el-table__row.current-row .el-table__cell, - .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__row.current-row .el-table__cell { - background: rgba(95, 123, 160, 0.35) !important; /* current-row 更明显 */ - color: #FFFFFF !important; - font-weight: 600; - } - - /* 固定列滚动条（可选） */ - .el-table__fixed-body-wrapper::-webkit-scrollbar, - .el-table__fixed-left .el-table__fixed-body-wrapper::-webkit-scrollbar, - .el-table__fixed-right .el-table__fixed-body-wrapper::-webkit-scrollbar { - width: 8px; height: 8px; - } - .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb, - .el-table__fixed-left .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb, - .el-table__fixed-right .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb { - background: #4A525B; border-radius: 6px; - } -} -/* ========================= - Splitpanes 工业风深色主题 - 仍保留 default-theme 类名 - ========================= */ - -/* 根容器：与页面主背景统一，去掉默认白底 */ -.splitpanes.default-theme { - background: #2B2F36; /* 页面主底色 */ - border: none; -} - -/* pane：统一深灰金属风，提供一致的内边距 */ -.splitpanes.default-theme .splitpanes__pane { - background: linear-gradient(145deg, #1F242A, #21262D) !important; /* 深灰渐变 */ - color: #EAEAEA !important; - padding: 12px 12px; /* 两侧内容留白一致 */ - box-sizing: border-box; - overflow: hidden; /* 保持干净 */ -} - -/* 左/右外侧圆角，仅在最外侧边缘展示，避免中缝突兀 */ -.splitpanes.default-theme .splitpanes__pane:first-child { - border-radius: 8px 0 0 8px; -} -.splitpanes.default-theme .splitpanes__pane:last-child { - border-radius: 0 8px 8px 0; -} - -/* 分隔条（splitter）：工业灰，hover 工业蓝，带内嵌“握把” */ -.splitpanes.default-theme .splitpanes__splitter { - position: relative; - background: #39414A !important; /* 静态 */ - transition: background .2s ease; -} -.splitpanes.default-theme .splitpanes__splitter:hover { - background: #46505A !important; /* 悬停稍亮 */ -} -/* 把握把做成中线，水平/垂直两种方向都美观 */ -.splitpanes.default-theme .splitpanes__splitter::before { - content: ""; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%,-50%); - border-radius: 2px; - background: #4A525B; -} -.splitpanes.default-theme.splitpanes--vertical .splitpanes__splitter::before { - width: 2px; height: 60%; -} -.splitpanes.default-theme.splitpanes--horizontal .splitpanes__splitter::before { - height: 2px; width: 60%; -} - -/* pane 内滚动条（如果有）与全站一致 */ -.splitpanes.default-theme .splitpanes__pane::-webkit-scrollbar { width: 8px; height: 8px; } -.splitpanes.default-theme .splitpanes__pane::-webkit-scrollbar-thumb { - background: #4A525B; border-radius: 6px; -} -.splitpanes.default-theme .splitpanes__pane::-webkit-scrollbar-track { background: transparent; } - -/* 可选：让右侧主区域看起来像一张卡片（若你的右 pane 是内容主区） */ -.splitpanes.default-theme .splitpanes__pane:last-child { - box-shadow: 0 12px 24px rgba(0,0,0,.25) inset, - 0 1px 0 rgba(255,255,255,.04) inset; -} - -/* 可选：在窄屏时减小 pane 内边距，避免拥挤 */ -@media (max-width: 992px) { - .splitpanes.default-theme .splitpanes__pane { padding: 8px; } -} - -/** 表单布局 **/ -.form-header { - font-size: 15px; - color: #6379bb; - border-bottom: 1px solid #ddd; - margin: 8px 10px 25px 10px; - padding-bottom: 5px -} - -/** 表格布局 **/ -.pagination-container { - position: relative; - height: 25px; - margin-bottom: 10px; - margin-top: 15px; - padding: 10px 20px !important; -} - -/* tree border */ -.tree-border { - margin-top: 5px; - border: 1px solid #e5e6e7; - background: #FFFFFF none; - border-radius: 4px; -} - -.pagination-container .el-pagination { - right: 0; - position: absolute; -} - -@media (max-width: 768px) { - .pagination-container .el-pagination > .el-pagination__jump { - display: none !important; - } - .pagination-container .el-pagination > .el-pagination__sizes { - display: none !important; - } -} - -.el-table .fixed-width .el-button--mini { - padding-left: 0; - padding-right: 0; - width: inherit; -} - -/** 表格更多操作下拉样式 */ -.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine { - cursor: pointer; - margin-left: 5px; -} - -.el-table .el-dropdown, .el-icon-arrow-down { - font-size: 12px; -} - -.el-tree-node__content > .el-checkbox { - margin-right: 8px; -} - -.list-group-striped > .list-group-item { - border-left: 0; - border-right: 0; - border-radius: 0; - padding-left: 0; - padding-right: 0; -} - -.list-group { - padding-left: 0px; - list-style: none; -} - -.list-group-item { - border-bottom: 1px solid #e7eaec; - border-top: 1px solid #e7eaec; - margin-bottom: -1px; - padding: 11px 0px; - font-size: 13px; -} - -.pull-right { - float: right !important; -} - -.el-card__header { - padding: 14px 15px 7px; - min-height: 40px; -} - -.el-card__body { - padding: 15px 20px 20px 20px; -} - -.card-box { - padding-right: 15px; - padding-left: 15px; - margin-bottom: 10px; -} - -/* button color */ -.el-button--cyan.is-active, -.el-button--cyan:active { - background: #20B2AA; - border-color: #20B2AA; - color: #FFFFFF; -} - -.el-button--cyan:focus, -.el-button--cyan:hover { - background: #48D1CC; - border-color: #48D1CC; - color: #FFFFFF; -} - -.el-button--cyan { - background-color: #20B2AA; - border-color: #20B2AA; - color: #FFFFFF; -} - -/* text color */ -.text-navy { - color: #1ab394; -} - -.text-primary { - color: inherit; -} - -.text-success { - color: #1c84c6; -} - -.text-info { - color: #23c6c8; -} - -.text-warning { - color: #f8ac59; -} - -.text-danger { - color: #ed5565; -} - -.text-muted { - color: #888888; -} - -/* image */ -.img-circle { - border-radius: 50%; -} - -.img-lg { - width: 120px; - height: 120px; -} - -.avatar-upload-preview { - position: relative; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 200px; - height: 200px; - border-radius: 50%; - box-shadow: 0 0 4px #ccc; - overflow: hidden; -} - -/* 拖拽列样式 */ -.sortable-ghost { - opacity: .8; - color: #fff !important; - background: #42b983 !important; -} - -.top-right-btn { - position: relative; - float: right; -} diff --git a/apps/l2/src/assets/styles/sidebar.scss b/apps/l2/src/assets/styles/sidebar.scss index cde39c2..578353f 100644 --- a/apps/l2/src/assets/styles/sidebar.scss +++ b/apps/l2/src/assets/styles/sidebar.scss @@ -4,24 +4,25 @@ --text-regular: #333333; --text-secondary: #555555; --text-placeholder: #777777; + --background-color: #fff; .main-container { height: 100%; transition: margin-left .28s, box-shadow .3s ease; margin-left: $base-sidebar-width; position: relative; - background: #3f4449; // 金属浅色渐变 + // background: #1E2227; // 金属浅色渐变 } .sidebarHide { - margin-left: 0!important; + margin-left: 0 !important; } .sidebar-container { -webkit-transition: width .28s, background .3s ease; transition: width 0.28s, background .3s ease; width: $base-sidebar-width !important; - background: #3f4449; // 金属深色渐变 + background: var(--background-color); // 金属深色渐变 border-right: 1px solid #8d939b; height: 100%; position: fixed; @@ -44,11 +45,12 @@ .el-scrollbar__bar.is-vertical { right: 0px; - background: rgba(0, 0, 0, 0.05); + background: #2Bf; + width: 0; } .el-scrollbar__thumb { - background: #1E2227; + background: var(--background-color); border-radius: 3px; } @@ -86,7 +88,8 @@ background: transparent; } - .el-menu-item, .el-submenu__title { + .el-menu-item, + .el-submenu__title { // 明确默认状态样式（关键修复） background: transparent !important; box-shadow: none !important; @@ -96,7 +99,7 @@ white-space: nowrap !important; color: var(--text-regular); // 菜单项文本偏黑 border-radius: 4px; - margin: 0 6px; + margin: 0; transition: all 0.2s ease; } @@ -107,17 +110,10 @@ background: rgba(255, 255, 255, 0.1) !important; color: var(--text-primary) !important; // hover时文本更深 box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), - inset -1px -1px 2px rgba(255, 255, 255, 0.05); + inset -1px -1px 2px rgba(255, 255, 255, 0.05); } } - // 深色主题下子菜单选中高亮 - & .theme-dark .is-active > .el-submenu__title { - color: #fff !important; // 选中时文字纯白 - // background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮 - // border-left: 3px solid #5F7BA0; // 左边高亮条 - } - // & .nest-menu .el-submenu>.el-submenu__title, & .el-submenu .el-menu-item { // 子菜单默认样式 @@ -145,13 +141,20 @@ &.is-active { background: rgba(95, 123, 160, 0.28) !important; // 激活背景 - color: #fff !important; // 激活文字白色 + color: #000 !important; // 激活文字白色 font-weight: 600; border-left: 3px solid #5F7BA0; // 左边高亮条 } } } + .el-menu-item.is-active.submenu-title-noDropdown { + background: #657b96; // 激活背景 + color: #000; // 激活文字白色 + font-weight: 600; + border-left: 3px solid #657b96; // 左边高亮条 + } + .hideSidebar { .sidebar-container { width: 54px !important; @@ -205,6 +208,10 @@ min-width: $base-sidebar-width !important; } + .el-submenu .el-menu { + padding-left: 10px; + } + // mobile responsive .mobile { .main-container { @@ -227,6 +234,7 @@ } .withoutAnimation { + .main-container, .sidebar-container { transition: none; @@ -234,7 +242,7 @@ } } -// when menu collapsed +// 收起状态下的菜单 .el-menu--vertical { &>.el-menu { .svg-icon { @@ -252,7 +260,7 @@ background: rgba(255, 255, 255, 0.1) !important; color: var(--text-primary) !important; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), - inset -1px -1px 2px rgba(255, 255, 255, 0.05); + inset -1px -1px 2px rgba(255, 255, 255, 0.05); } ::v-deep &.is-active { @@ -261,7 +269,7 @@ font-weight: 600; border-left: 3px solid #5F7BA0; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15), - inset -1px -1px 2px rgba(255, 255, 255, 0.08); + inset -1px -1px 2px rgba(255, 255, 255, 0.08); } ::v-deep .el-menu-item.is-active span, @@ -288,12 +296,11 @@ &::-webkit-scrollbar-thumb { background: #8d939b; - border-radius: 3px; + border-radius: 3px; } } } -#app .sidebar-container .el-menu-item, -#app .sidebar-container .el-submenu__title { - margin: 0; +#app .sidebar-container .nest-menu .el-submenu .el-submenu__title { + margin: 0 4px; } \ No newline at end of file diff --git a/apps/l2/src/assets/styles/variables.scss b/apps/l2/src/assets/styles/variables.scss index fdf34bb..6f7c6a1 100644 --- a/apps/l2/src/assets/styles/variables.scss +++ b/apps/l2/src/assets/styles/variables.scss @@ -1,38 +1,45 @@ -// 基础金属色调 -$metal-dark: #637994; // 主色调1 - 深金属色 -$metal-light: #bec3c9; // 主色调2 - 浅金属色 -$metal-bg: #a1a6ac; // 背景主色调 -$metal-highlight: #d0d5db; // 金属高光色 -$metal-shadow: #8c949d; // 金属阴影色 +// base color +$blue:#324157; +$light-blue:#3A71A8; +$red:#C03639; +$pink: #E65D6E; +$green: #30B08F; +$tiffany: #4AB7BD; +$yellow:#FEC171; +$panGreen: #30B08F; -// 功能色（保持原有，但调整为金属质感） -$blue: mix($metal-dark, #324157, 30%); -$light-blue: mix($metal-light, #3A71A8, 30%); -$red: mix($metal-light, #C03639, 20%); -$pink: mix($metal-light, #E65D6E, 20%); -$green: mix($metal-light, #30B08F, 20%); -$tiffany: mix($metal-light, #4AB7BD, 20%); -$yellow: mix($metal-light, #FEC171, 20%); -$panGreen: mix($metal-light, #30B08F, 20%); +// 默认菜单主题风格 +$base-menu-color:#bfcbd9; +$base-menu-color-active:#f4f4f5; +$base-menu-background:#304156; +$base-logo-title-color: #ffffff; -// 金属风格菜单主题 -$base-menu-color: mix($metal-light, rgba(255, 255, 255, 0.7), 60%); // 菜单文字色 -$base-menu-color-active: #ffffff; // 激活菜单文字色 -$base-menu-background: linear-gradient(145deg, darken($metal-bg, 3%), $metal-bg); // 菜单背景 -$base-logo-title-color: $metal-highlight; // Logo文字色 +$base-menu-light-color:rgba(0,0,0,.70); +$base-menu-light-background:#ffffff; +$base-logo-light-title-color: #001529; -// 浅色金属菜单风格 -$base-menu-light-color: mix($metal-dark, rgba(0, 0, 0, 0.7), 70%); // 浅色菜单文字色 -$base-menu-light-background: linear-gradient(145deg, $metal-bg, lighten($metal-bg, 3%)); // 浅色菜单背景 -$base-logo-light-title-color: $metal-dark; // 浅色Logo文字色 +$base-sub-menu-background:#1f2d3d; +$base-sub-menu-hover:#001528; -// 子菜单样式 -$base-sub-menu-background: darken($metal-bg, 5%); // 子菜单背景 -$base-sub-menu-hover: linear-gradient(145deg, $metal-bg, $metal-dark); // 子菜单悬停背景 +// 自定义暗色菜单风格 +/** +$base-menu-color:hsla(0,0%,100%,.65); +$base-menu-color-active:#fff; +$base-menu-background:#001529; +$base-logo-title-color: #ffffff; -$base-sidebar-width: 200px; // 侧边栏宽度 +$base-menu-light-color:rgba(0,0,0,.70); +$base-menu-light-background:#ffffff; +$base-logo-light-title-color: #001529; -// 导出变量供JS使用 +$base-sub-menu-background:#000c17; +$base-sub-menu-hover:#001528; +*/ + +$base-sidebar-width: 200px; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { menuColor: $base-menu-color; menuLightColor: $base-menu-light-color; @@ -43,9 +50,5 @@ $base-sidebar-width: 200px; // 侧边栏宽度 subMenuHover: $base-sub-menu-hover; sideBarWidth: $base-sidebar-width; logoTitleColor: $base-logo-title-color; - logoLightTitleColor: $base-logo-light-title-color; - // 导出金属主题基础色供全局使用 - metalDark: $metal-dark; - metalLight: $metal-light; - metalBg: $metal-bg; -} \ No newline at end of file + logoLightTitleColor: $base-logo-light-title-color +} diff --git a/apps/l2/src/components/Breadcrumb/index.vue b/apps/l2/src/components/Breadcrumb/index.vue index 6d1d561..a0a0371 100644 --- a/apps/l2/src/components/Breadcrumb/index.vue +++ b/apps/l2/src/components/Breadcrumb/index.vue @@ -93,9 +93,9 @@ export default { .app-breadcrumb.el-breadcrumb { display: inline-block; font-size: 14px; - line-height: 50px; + line-height: 40px; margin-left: 8px; - color: #fff; + color: #111; .no-redirect { color: #ddd; cursor: text; @@ -103,6 +103,6 @@ export default { } .el-breadcrumb__inner.is-link, .el-breadcrumb__inner a { - color: #fff; + color: #111; } diff --git a/apps/l2/src/components/Hamburger/index.vue b/apps/l2/src/components/Hamburger/index.vue index e249032..ed643bd 100644 --- a/apps/l2/src/components/Hamburger/index.vue +++ b/apps/l2/src/components/Hamburger/index.vue @@ -43,6 +43,6 @@ export default { } svg { - fill: #fff; + fill: #111; } diff --git a/apps/l2/src/components/Pagination/index.vue b/apps/l2/src/components/Pagination/index.vue index 0bd39c4..f89fd5a 100644 --- a/apps/l2/src/components/Pagination/index.vue +++ b/apps/l2/src/components/Pagination/index.vue @@ -65,7 +65,7 @@ export default { } - + --> diff --git a/apps/l2/src/layout/components/AppMain.vue b/apps/l2/src/layout/components/AppMain.vue index 85c4836..41b0a9d 100644 --- a/apps/l2/src/layout/components/AppMain.vue +++ b/apps/l2/src/layout/components/AppMain.vue @@ -30,7 +30,7 @@ export default { .app-main { /* 50= navbar 50 */ min-height: calc(100vh - 50px); - background-color: #3f4449; + // background-color: #3f4449; width: 100%; position: relative; overflow: hidden; diff --git a/apps/l2/src/layout/components/Navbar.vue b/apps/l2/src/layout/components/Navbar.vue index 17e9fc0..66d4341 100644 --- a/apps/l2/src/layout/components/Navbar.vue +++ b/apps/l2/src/layout/components/Navbar.vue @@ -104,7 +104,7 @@ export default { overflow: hidden; position: relative; // 金属质感渐变背景 - background: #454c51; + // background: #454c51; border-bottom: 1px solid #8d939b; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.08) inset; @@ -156,7 +156,7 @@ export default { height: 100%; font-size: 18px; // 金属风格文字色 - color: #ddd; + color: #111; vertical-align: text-bottom; transition: all 0.2s ease; diff --git a/apps/l2/src/layout/components/Sidebar/index.vue b/apps/l2/src/layout/components/Sidebar/index.vue index c6dde8f..df92709 100644 --- a/apps/l2/src/layout/components/Sidebar/index.vue +++ b/apps/l2/src/layout/components/Sidebar/index.vue @@ -3,12 +3,12 @@ diff --git a/apps/l2/src/layout/components/TagsView/index.vue b/apps/l2/src/layout/components/TagsView/index.vue index 14a3137..012d1a0 100644 --- a/apps/l2/src/layout/components/TagsView/index.vue +++ b/apps/l2/src/layout/components/TagsView/index.vue @@ -242,7 +242,7 @@ export default { height: 34px; width: 100%; // 金属浅色渐变背景（直接写死渐变值） - background: #454c51; + // background: #454c51; border-bottom: 1px solid #a0a6ad; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.05) inset; @@ -254,9 +254,9 @@ export default { height: 26px; line-height: 26px; border: 1px solid #a0a6ad; - color: #fff; + // color: #fff; // 标签金属渐变背景 - background: #454c51; + // background: #454c51; padding: 0 8px; font-size: 12px; margin-left: 5px; diff --git a/apps/l2/src/layout/index.vue b/apps/l2/src/layout/index.vue index 4b15d86..7386c98 100644 --- a/apps/l2/src/layout/index.vue +++ b/apps/l2/src/layout/index.vue @@ -76,7 +76,6 @@ export default { } .drawer-bg { - background: #000; opacity: 0.3; width: 100%; top: 0; diff --git a/apps/l2/src/main.js b/apps/l2/src/main.js index 1a4ba65..cee09f5 100644 --- a/apps/l2/src/main.js +++ b/apps/l2/src/main.js @@ -7,7 +7,7 @@ import Element from 'element-ui' import './assets/styles/element-variables.scss' import '@/assets/styles/index.scss' // global css -import '@/assets/styles/ruoyi.scss' // ruoyi css +// import '@/assets/styles/ruoyi.scss' // ruoyi css import App from './App' import store from './store' import router from './router' diff --git a/apps/l2/src/settings.js b/apps/l2/src/settings.js index 2479265..d124119 100644 --- a/apps/l2/src/settings.js +++ b/apps/l2/src/settings.js @@ -7,7 +7,7 @@ module.exports = { /** * 侧边栏主题 深色主题theme-dark，浅色主题theme-light */ - sideTheme: 'theme-dark', + sideTheme: 'theme-light', /** * 系统布局配置 diff --git a/apps/l2/src/views/index.vue b/apps/l2/src/views/index.vue index 1a00498..fc696fc 100644 --- a/apps/l2/src/views/index.vue +++ b/apps/l2/src/views/index.vue @@ -60,7 +60,7 @@ - +