完善全局样式
This commit is contained in:
@@ -101,25 +101,9 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:global(.el-button) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:global(.el-button > span),
|
||||
:global(.el-button > span *) ,
|
||||
:global(.el-button .svg-icon),
|
||||
:global(.el-button i) {
|
||||
color: inherit !important;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
:global(.el-button--default) {
|
||||
color: var(--app-primary) !important;
|
||||
}
|
||||
|
||||
:global(.el-button--default > span),
|
||||
:global(.el-button--default > span *),
|
||||
:global(.el-button--default .svg-icon),
|
||||
:global(.el-button--default i) {
|
||||
color: inherit !important;
|
||||
/* 按钮结构样式（颜色逻辑统一在 index.scss 管理） */
|
||||
.el-button {
|
||||
border-radius: 4px !important;
|
||||
font-weight: 600 !important;
|
||||
letter-spacing: 0.4px !important;
|
||||
}
|
||||
|
||||
@@ -53,63 +53,45 @@ body {
|
||||
// ====================== 5. 组件尺寸样式（按优先级合并）======================
|
||||
// ---------------------- 5.1 按钮（紧凑尺寸）----------------------
|
||||
@mixin button-variant() {
|
||||
border-radius: 6px;
|
||||
transition: all .25s ease;
|
||||
border-radius: 4px;
|
||||
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
|
||||
height: $--btn-height;
|
||||
padding: 0 var(--spacing-lg);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
filter: brightness(0.88);
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
|
||||
// 主按钮（尺寸相关）
|
||||
.el-button--primary {
|
||||
@include button-variant();
|
||||
background: $industrial-primary;
|
||||
border-color: $industrial-primary;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $industrial-secondary;
|
||||
border-color: $industrial-secondary;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 功能按钮（尺寸相关）
|
||||
// 各类型按钮统一套 mixin（颜色由 index.scss CSS变量控制）
|
||||
.el-button--primary,
|
||||
.el-button--success,
|
||||
.el-button--danger,
|
||||
.el-button--info {
|
||||
@include button-variant();
|
||||
}
|
||||
|
||||
.el-button--info,
|
||||
.el-button--warning {
|
||||
@include button-variant();
|
||||
color: #1c2b3a !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #1c2b3a !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 文本按钮（尺寸相关）
|
||||
.el-button--text {
|
||||
// 文本/Link按钮
|
||||
.el-button--text,
|
||||
.el-button.is-text {
|
||||
height: auto;
|
||||
padding: 4px 8px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
// 图标按钮（圆形紧凑尺寸）
|
||||
|
||||
@@ -219,49 +219,89 @@ aside {
|
||||
}
|
||||
|
||||
.el-button {
|
||||
--el-button-disabled-text-color: rgba(255, 255, 255, 0.72);
|
||||
color: #ffffff;
|
||||
/* 不在此设全局 color，由各类型规则单独控制 */
|
||||
}
|
||||
|
||||
.el-button__text,
|
||||
.el-button span,
|
||||
.el-button > span,
|
||||
.el-button .svg-icon,
|
||||
.el-button i {
|
||||
color: inherit;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.el-button--default {
|
||||
--el-button-text-color: var(--app-primary);
|
||||
color: var(--app-primary);
|
||||
/* ════════════════════════════════════════════
|
||||
按钮色彩系统
|
||||
实心按钮 → 白字
|
||||
Plain变体 → 浅底色 + 比边框更深的文字
|
||||
Link/Text变体 → 透明底 + 各类型色文字
|
||||
════════════════════════════════════════════ */
|
||||
|
||||
/* 子元素颜色继承 */
|
||||
.el-button > span,
|
||||
.el-button .svg-icon,
|
||||
.el-button i {
|
||||
color: inherit !important;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.el-button--default .el-button__text,
|
||||
.el-button--default span,
|
||||
.el-button--default .svg-icon,
|
||||
.el-button--default i {
|
||||
color: inherit;
|
||||
/* ── Default（白底工业蓝描边） ── */
|
||||
.el-button--default:not(.is-link):not(.is-text) {
|
||||
color: #1d4e89 !important;
|
||||
}
|
||||
|
||||
.el-button--default.is-link,
|
||||
.el-button--default.is-text,
|
||||
.el-button--text {
|
||||
--el-button-text-color: var(--app-primary);
|
||||
color: var(--app-primary);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
padding: 0 4px;
|
||||
color: #1d4e89 !important;
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-button--text:hover,
|
||||
.el-button--text:focus {
|
||||
color: var(--app-secondary);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
/* ── Primary ── */
|
||||
.el-button.el-button--primary:not(.is-plain):not(.is-link):not(.is-text) { color: #ffffff !important; }
|
||||
.el-button.el-button--primary.is-plain { color: #122f55 !important; }
|
||||
.el-button.el-button--primary.is-link,
|
||||
.el-button.el-button--primary.is-text { color: #1d4e89 !important; background: transparent !important; border-color: transparent !important; }
|
||||
.el-button.el-button--primary.is-link:hover,
|
||||
.el-button.el-button--primary.is-text:hover { color: #2471a3 !important; }
|
||||
|
||||
.el-button--text .el-button__text,
|
||||
.el-button--text span,
|
||||
.el-button--text .svg-icon,
|
||||
.el-button--text i {
|
||||
color: inherit;
|
||||
/* ── Success ── */
|
||||
.el-button.el-button--success:not(.is-plain):not(.is-link):not(.is-text) { color: #ffffff !important; }
|
||||
.el-button.el-button--success.is-plain { color: #1b5e20 !important; }
|
||||
.el-button.el-button--success.is-link,
|
||||
.el-button.el-button--success.is-text { color: #388e3c !important; background: transparent !important; border-color: transparent !important; }
|
||||
.el-button.el-button--success.is-link:hover,
|
||||
.el-button.el-button--success.is-text:hover { color: #2e7d32 !important; }
|
||||
|
||||
/* ── Warning ── */
|
||||
.el-button.el-button--warning:not(.is-plain):not(.is-link):not(.is-text) { color: #ffffff !important; }
|
||||
.el-button.el-button--warning.is-plain { color: #7f3300 !important; }
|
||||
.el-button.el-button--warning.is-link,
|
||||
.el-button.el-button--warning.is-text { color: #e65100 !important; background: transparent !important; border-color: transparent !important; }
|
||||
.el-button.el-button--warning.is-link:hover,
|
||||
.el-button.el-button--warning.is-text:hover { color: #f57c00 !important; }
|
||||
|
||||
/* ── Danger ── */
|
||||
.el-button.el-button--danger:not(.is-plain):not(.is-link):not(.is-text) { color: #ffffff !important; }
|
||||
.el-button.el-button--danger.is-plain { color: #7f0000 !important; }
|
||||
.el-button.el-button--danger.is-link,
|
||||
.el-button.el-button--danger.is-text { color: #c62828 !important; background: transparent !important; border-color: transparent !important; }
|
||||
.el-button.el-button--danger.is-link:hover,
|
||||
.el-button.el-button--danger.is-text:hover { color: #e53935 !important; }
|
||||
|
||||
/* ── Info ── */
|
||||
.el-button.el-button--info:not(.is-plain):not(.is-link):not(.is-text) { color: #ffffff !important; }
|
||||
.el-button.el-button--info.is-plain { color: #263238 !important; }
|
||||
.el-button.el-button--info.is-link,
|
||||
.el-button.el-button--info.is-text { color: #455a64 !important; background: transparent !important; border-color: transparent !important; }
|
||||
.el-button.el-button--info.is-link:hover,
|
||||
.el-button.el-button--info.is-text:hover { color: #37474f !important; }
|
||||
|
||||
/* ── Link / Text hover 通用背景 ── */
|
||||
.el-button.is-link:hover,
|
||||
.el-button.is-text:hover,
|
||||
.el-button--text:hover {
|
||||
background: rgba(0, 0, 0, 0.04) !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
@@ -278,65 +318,97 @@ aside {
|
||||
--el-table-row-hover-bg-color: #f7fbff;
|
||||
}
|
||||
|
||||
.el-button--primary,
|
||||
.el-button--success,
|
||||
.el-button--danger,
|
||||
.el-button--info {
|
||||
--el-button-text-color: #fff;
|
||||
--el-button-disabled-text-color: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.el-button--warning {
|
||||
--el-button-text-color: #ffffff;
|
||||
--el-button-disabled-text-color: rgba(255, 255, 255, 0.72);
|
||||
--el-button-bg-color: var(--app-warning);
|
||||
--el-button-border-color: var(--app-warning);
|
||||
--el-button-hover-bg-color: #e09a1b;
|
||||
--el-button-hover-border-color: #e09a1b;
|
||||
--el-button-active-bg-color: #c97f0f;
|
||||
--el-button-active-border-color: #c97f0f;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button--warning.is-plain {
|
||||
--el-button-text-color: #d68910;
|
||||
--el-button-border-color: #f0c674;
|
||||
--el-button-bg-color: #fff6e5;
|
||||
--el-button-hover-text-color: #d68910;
|
||||
--el-button-hover-bg-color: #fff0d6;
|
||||
--el-button-hover-border-color: #d68910;
|
||||
--el-button-active-text-color: #c97f0f;
|
||||
--el-button-active-border-color: #c97f0f;
|
||||
color: #d68910;
|
||||
}
|
||||
|
||||
/* ── Element Plus CSS变量 → 各类型独立色彩系统 ── */
|
||||
.el-button--primary {
|
||||
--el-button-bg-color: #1d4e89;
|
||||
--el-button-border-color: #1d4e89;
|
||||
--el-button-hover-bg-color: #2471a3;
|
||||
--el-button-hover-border-color: #2471a3;
|
||||
--el-button-active-bg-color: #1c2b3a;
|
||||
--el-button-active-border-color: #1c2b3a;
|
||||
--el-button-active-bg-color: #163a68;
|
||||
--el-button-active-border-color: #163a68;
|
||||
--el-button-disabled-bg-color: #6b96c4;
|
||||
--el-button-disabled-border-color: #6b96c4;
|
||||
--el-button-text-color: #fff;
|
||||
--el-button-disabled-text-color: rgba(255,255,255,.6);
|
||||
}
|
||||
.el-button--primary.is-plain {
|
||||
--el-button-bg-color: #e8f0fb;
|
||||
--el-button-border-color: #1d4e89;
|
||||
--el-button-hover-bg-color: #d4e4f7;
|
||||
--el-button-hover-border-color: #2471a3;
|
||||
--el-button-text-color: #122f55;
|
||||
}
|
||||
|
||||
.el-button--success {
|
||||
--el-button-bg-color: #4b8b3b;
|
||||
--el-button-border-color: #4b8b3b;
|
||||
--el-button-bg-color: #388e3c;
|
||||
--el-button-border-color: #388e3c;
|
||||
--el-button-hover-bg-color: #2e7d32;
|
||||
--el-button-hover-border-color: #2e7d32;
|
||||
--el-button-active-bg-color: #1b5e20;
|
||||
--el-button-active-border-color: #1b5e20;
|
||||
--el-button-text-color: #fff;
|
||||
--el-button-disabled-text-color: rgba(255,255,255,.6);
|
||||
}
|
||||
.el-button--success.is-plain {
|
||||
--el-button-bg-color: #e8f5e9;
|
||||
--el-button-border-color: #388e3c;
|
||||
--el-button-hover-bg-color: #d4edda;
|
||||
--el-button-hover-border-color: #2e7d32;
|
||||
--el-button-text-color: #1b5e20;
|
||||
}
|
||||
|
||||
.el-button--warning {
|
||||
--el-button-bg-color: #d68910;
|
||||
--el-button-border-color: #d68910;
|
||||
--el-button-bg-color: #f57c00;
|
||||
--el-button-border-color: #f57c00;
|
||||
--el-button-hover-bg-color: #e65100;
|
||||
--el-button-hover-border-color: #e65100;
|
||||
--el-button-active-bg-color: #bf360c;
|
||||
--el-button-active-border-color: #bf360c;
|
||||
--el-button-text-color: #fff;
|
||||
--el-button-disabled-text-color: rgba(255,255,255,.6);
|
||||
}
|
||||
.el-button--warning.is-plain {
|
||||
--el-button-bg-color: #fff3e0;
|
||||
--el-button-border-color: #f57c00;
|
||||
--el-button-hover-bg-color: #ffe0b2;
|
||||
--el-button-hover-border-color: #e65100;
|
||||
--el-button-text-color: #bf360c;
|
||||
}
|
||||
|
||||
.el-button--danger {
|
||||
--el-button-bg-color: #c0392b;
|
||||
--el-button-border-color: #c0392b;
|
||||
--el-button-bg-color: #c62828;
|
||||
--el-button-border-color: #c62828;
|
||||
--el-button-hover-bg-color: #b71c1c;
|
||||
--el-button-hover-border-color: #b71c1c;
|
||||
--el-button-active-bg-color: #8b0000;
|
||||
--el-button-active-border-color: #8b0000;
|
||||
--el-button-text-color: #fff;
|
||||
--el-button-disabled-text-color: rgba(255,255,255,.6);
|
||||
}
|
||||
.el-button--danger.is-plain {
|
||||
--el-button-bg-color: #ffebee;
|
||||
--el-button-border-color: #c62828;
|
||||
--el-button-hover-bg-color: #ffcdd2;
|
||||
--el-button-hover-border-color: #b71c1c;
|
||||
--el-button-text-color: #8b0000;
|
||||
}
|
||||
|
||||
.el-button--info {
|
||||
--el-button-bg-color: #1c2b3a;
|
||||
--el-button-border-color: #1c2b3a;
|
||||
--el-button-bg-color: #455a64;
|
||||
--el-button-border-color: #455a64;
|
||||
--el-button-hover-bg-color: #37474f;
|
||||
--el-button-hover-border-color: #37474f;
|
||||
--el-button-active-bg-color: #263238;
|
||||
--el-button-active-border-color: #263238;
|
||||
--el-button-text-color: #fff;
|
||||
--el-button-disabled-text-color: rgba(255,255,255,.6);
|
||||
}
|
||||
.el-button--info.is-plain {
|
||||
--el-button-bg-color: #eceff1;
|
||||
--el-button-border-color: #455a64;
|
||||
--el-button-hover-bg-color: #cfd8dc;
|
||||
--el-button-hover-border-color: #37474f;
|
||||
--el-button-text-color: #263238;
|
||||
}
|
||||
|
||||
.el-tag--success {
|
||||
|
||||
Reference in New Issue
Block a user