优化后台仪表盘界面
This commit is contained in:
yml2213
File diff suppressed because it is too large
Load Diff
+274
-14
@@ -347,30 +347,290 @@
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
/* ========== Button Enhancements ========== */
|
||||
/* 仅实体主按钮强制白字；浅色、虚线和文字按钮沿用 Element Plus 的主题色。 */
|
||||
/* ========== Enterprise Button Design System ========== */
|
||||
.el-button {
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
letter-spacing: 0.2px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.el-button .el-icon {
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
/* 默认 / 次级按钮 (White / Slate) */
|
||||
.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--danger):not(
|
||||
.el-button--warning
|
||||
):not(.el-button--info):not(.is-text):not(.is-link) {
|
||||
background: #ffffff;
|
||||
color: #334155;
|
||||
border: 1px solid #cbd5e1;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--danger):not(
|
||||
.el-button--warning
|
||||
):not(.el-button--info):not(.is-text):not(.is-link):hover:not(.is-disabled) {
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
border-color: #94a3b8;
|
||||
box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--danger):not(
|
||||
.el-button--warning
|
||||
):not(.el-button--info):not(.is-text):not(.is-link):active:not(.is-disabled) {
|
||||
background: #f1f5f9;
|
||||
transform: translateY(0);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 主按钮 (Primary - Modern Vibrant Blue/Indigo) */
|
||||
.el-button--primary:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link) {
|
||||
font-weight: 700 !important;
|
||||
--el-button-text-color: #ffffff;
|
||||
--el-button-hover-text-color: #ffffff;
|
||||
--el-button-active-text-color: #ffffff;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
|
||||
border: 1px solid #2563eb !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(37, 99, 235, 0.12),
|
||||
0 3px 8px rgba(37, 99, 235, 0.22);
|
||||
}
|
||||
|
||||
.el-button--primary:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):hover:not(
|
||||
.is-disabled
|
||||
) {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
|
||||
border-color: #3b82f6 !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.el-button--primary:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):active:not(
|
||||
.is-disabled
|
||||
) {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
|
||||
border-color: #1d4ed8 !important;
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.el-button--primary:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link) span {
|
||||
color: #ffffff !important;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 成功按钮 (Success - Emerald) */
|
||||
.el-button--success:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link) {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
|
||||
border: 1px solid #059669 !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(16, 185, 129, 0.12),
|
||||
0 3px 8px rgba(16, 185, 129, 0.22);
|
||||
}
|
||||
|
||||
.el-button--success:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):hover:not(
|
||||
.is-disabled
|
||||
) {
|
||||
background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
|
||||
border-color: #10b981 !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.el-button--success:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):active:not(
|
||||
.is-disabled
|
||||
) {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
/* 危险按钮 (Danger - Rose/Ruby) */
|
||||
.el-button--danger:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link) {
|
||||
background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
|
||||
border: 1px solid #e11d48 !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(244, 63, 94, 0.12),
|
||||
0 3px 8px rgba(244, 63, 94, 0.22);
|
||||
}
|
||||
|
||||
.el-button--danger:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):hover:not(
|
||||
.is-disabled
|
||||
) {
|
||||
background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%) !important;
|
||||
border-color: #f43f5e !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.el-button--danger:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):active:not(
|
||||
.is-disabled
|
||||
) {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 1px 3px rgba(244, 63, 94, 0.2);
|
||||
}
|
||||
|
||||
/* 警告按钮 (Warning - Amber) */
|
||||
.el-button--warning:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link) {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
|
||||
border: 1px solid #d97706 !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(245, 158, 11, 0.12),
|
||||
0 3px 8px rgba(245, 158, 11, 0.22);
|
||||
}
|
||||
|
||||
.el-button--warning:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):hover:not(
|
||||
.is-disabled
|
||||
) {
|
||||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
|
||||
border-color: #f59e0b !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Plain 朴素按钮升级 */
|
||||
.el-button--primary.is-plain {
|
||||
background: #eff6ff !important;
|
||||
color: #2563eb !important;
|
||||
border: 1px solid #bfdbfe !important;
|
||||
}
|
||||
.el-button--primary.is-plain:hover:not(.is-disabled) {
|
||||
background: #2563eb !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #2563eb !important;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.el-button--success.is-plain {
|
||||
background: #ecfdf5 !important;
|
||||
color: #059669 !important;
|
||||
border: 1px solid #a7f3d0 !important;
|
||||
}
|
||||
.el-button--success.is-plain:hover:not(.is-disabled) {
|
||||
background: #059669 !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #059669 !important;
|
||||
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.el-button--danger.is-plain {
|
||||
background: #fff1f2 !important;
|
||||
color: #e11d48 !important;
|
||||
border: 1px solid #fecdd3 !important;
|
||||
}
|
||||
.el-button--danger.is-plain:hover:not(.is-disabled) {
|
||||
background: #e11d48 !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #e11d48 !important;
|
||||
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 链接/文字按钮 */
|
||||
.el-button.is-link {
|
||||
padding: 4px 8px;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-button.is-link:hover:not(.is-disabled) {
|
||||
background: rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.el-button.is-link.el-button--primary {
|
||||
--el-button-text-color: var(--el-color-primary);
|
||||
--el-button-hover-text-color: var(--el-color-primary-light-3);
|
||||
--el-button-active-text-color: var(--el-color-primary-dark-2);
|
||||
color: #2563eb !important;
|
||||
}
|
||||
.el-button.is-link.el-button--primary:hover:not(.is-disabled) {
|
||||
color: #1d4ed8 !important;
|
||||
background: #eff6ff !important;
|
||||
}
|
||||
|
||||
.el-button.is-link.el-button--primary span {
|
||||
color: inherit !important;
|
||||
text-shadow: none;
|
||||
.el-button.is-link.el-button--success {
|
||||
color: #059669 !important;
|
||||
}
|
||||
.el-button.is-link.el-button--success:hover:not(.is-disabled) {
|
||||
color: #047857 !important;
|
||||
background: #ecfdf5 !important;
|
||||
}
|
||||
|
||||
.el-button.is-link.el-button--danger {
|
||||
color: #e11d48 !important;
|
||||
}
|
||||
.el-button.is-link.el-button--danger:hover:not(.is-disabled) {
|
||||
color: #be123c !important;
|
||||
background: #fff1f2 !important;
|
||||
}
|
||||
|
||||
/* 尺寸规格规范 */
|
||||
.el-button--small {
|
||||
height: 28px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.el-button--large {
|
||||
height: 42px;
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-button.is-disabled,
|
||||
.el-button.is-disabled:hover {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ========== Enterprise Form Controls Enhancement ========== */
|
||||
.el-input__wrapper,
|
||||
.el-select__wrapper,
|
||||
.el-textarea__wrapper {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 0 0 1px #cbd5e1 inset !important;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover,
|
||||
.el-select__wrapper:hover,
|
||||
.el-textarea__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px #94a3b8 inset !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper.is-focus,
|
||||
.el-select__wrapper.is-focused,
|
||||
.el-textarea__wrapper.is-focus {
|
||||
box-shadow:
|
||||
0 0 0 1.5px #2563eb inset,
|
||||
0 0 0 3.5px rgba(37, 99, 235, 0.12) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.is-selected {
|
||||
color: #2563eb !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
|
||||
Reference in New Issue
Block a user