|
|
|
@@ -1,11 +1,3 @@
|
|
|
|
|
// 主题色变量(SCSS变量 - 默认为亮色主题)
|
|
|
|
|
$primary-color: #3498db;
|
|
|
|
|
$secondary-color: #2ecc71;
|
|
|
|
|
$accent-color: #ffcc00;
|
|
|
|
|
$background-color: #f8f9fa;
|
|
|
|
|
$text-color: #333;
|
|
|
|
|
$border-radius: 4px;
|
|
|
|
|
|
|
|
|
|
// 通用字体
|
|
|
|
|
$font-family-base: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
|
|
|
|
|
|
|
@@ -20,165 +12,6 @@ $box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
|
|
// 过渡
|
|
|
|
|
$transition-base: all 0.3s cubic-bezier(.25,.8,.25,1);
|
|
|
|
|
|
|
|
|
|
// ==========================================
|
|
|
|
|
// 主题系统 - 亮色和暗色主题
|
|
|
|
|
// 使用 data-theme="light" 或 data-theme="dark" 来切换主题
|
|
|
|
|
// ==========================================
|
|
|
|
|
|
|
|
|
|
// 默认亮色主题
|
|
|
|
|
:root[data-theme="light"],
|
|
|
|
|
:root:not([data-theme]) {
|
|
|
|
|
// 主题标识
|
|
|
|
|
--theme-mode: light;
|
|
|
|
|
|
|
|
|
|
// 主要颜色
|
|
|
|
|
--primary-color: #1890ff;
|
|
|
|
|
--primary-hover: #40a9ff;
|
|
|
|
|
--primary-active: #096dd9;
|
|
|
|
|
--secondary-color: #2ecc71;
|
|
|
|
|
--secondary-hover: #27ae60;
|
|
|
|
|
--secondary-active: #229954;
|
|
|
|
|
--accent-color: #ffcc00;
|
|
|
|
|
--accent-hover: #e6b800;
|
|
|
|
|
|
|
|
|
|
// 背景颜色
|
|
|
|
|
--background-color: #ffffff;
|
|
|
|
|
--background-secondary: #f8f9fa;
|
|
|
|
|
--background-tertiary: #f0f2f5;
|
|
|
|
|
--background-hover: #e9ecef;
|
|
|
|
|
|
|
|
|
|
// 文本颜色
|
|
|
|
|
--text-color: #212529;
|
|
|
|
|
--text-secondary: #6c757d;
|
|
|
|
|
--text-tertiary: #adb5bd;
|
|
|
|
|
--text-inverse: #ffffff;
|
|
|
|
|
|
|
|
|
|
// 边框颜色
|
|
|
|
|
--border-color: #dee2e6;
|
|
|
|
|
--border-color-hover: #ced4da;
|
|
|
|
|
--border-color-active: #adb5bd;
|
|
|
|
|
|
|
|
|
|
// 状态颜色
|
|
|
|
|
--success-color: #28a745;
|
|
|
|
|
--success-bg: #d4edda;
|
|
|
|
|
--warning-color: #ffc107;
|
|
|
|
|
--warning-bg: #fff3cd;
|
|
|
|
|
--error-color: #dc3545;
|
|
|
|
|
--error-bg: #f8d7da;
|
|
|
|
|
--info-color: #17a2b8;
|
|
|
|
|
--info-bg: #d1ecf1;
|
|
|
|
|
|
|
|
|
|
// 组件颜色
|
|
|
|
|
--card-bg: #ffffff;
|
|
|
|
|
--card-bg1: #1890ff;
|
|
|
|
|
--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
|
|
--sidebar-bg: #f8f9fa;
|
|
|
|
|
--sidebar-hover: #e9ecef;
|
|
|
|
|
--header-bg: #ffffff;
|
|
|
|
|
|
|
|
|
|
// Hero 渐变(亮色主题 - 现代蓝色渐变)
|
|
|
|
|
--hero-gradient-start: #667eea;
|
|
|
|
|
--hero-gradient-end: #764ba2;
|
|
|
|
|
|
|
|
|
|
// 阴影
|
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
|
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
|
|
|
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
|
|
|
|
|
|
|
|
// 圆角
|
|
|
|
|
--border-radius: 4px;
|
|
|
|
|
--border-radius-sm: 2px;
|
|
|
|
|
--border-radius-lg: 8px;
|
|
|
|
|
--border-radius-xl: 12px;
|
|
|
|
|
--border-radius-full: 9999px;
|
|
|
|
|
|
|
|
|
|
// 过渡
|
|
|
|
|
--transition-base: all 0.3s cubic-bezier(.25,.8,.25,1);
|
|
|
|
|
--transition-fast: all 0.15s ease-in-out;
|
|
|
|
|
--transition-slow: all 0.5s ease-in-out;
|
|
|
|
|
|
|
|
|
|
// 字体
|
|
|
|
|
--font-family-base: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 暗色主题
|
|
|
|
|
:root[data-theme="dark"] {
|
|
|
|
|
// 主题标识
|
|
|
|
|
--theme-mode: dark;
|
|
|
|
|
|
|
|
|
|
// 主要颜色
|
|
|
|
|
--primary-color: #409EFF;
|
|
|
|
|
--primary-hover: #66b1ff;
|
|
|
|
|
--primary-active: #337ecc;
|
|
|
|
|
--secondary-color: #58d68d;
|
|
|
|
|
--secondary-hover: #2ecc71;
|
|
|
|
|
--secondary-active: #27ae60;
|
|
|
|
|
--accent-color: #f7dc6f;
|
|
|
|
|
--accent-hover: #f4d03f;
|
|
|
|
|
|
|
|
|
|
// 背景颜色
|
|
|
|
|
--background-color: #1a1a1a;
|
|
|
|
|
--background-secondary: #2d2d2d;
|
|
|
|
|
--background-tertiary: #3d3d3d;
|
|
|
|
|
--background-hover: #4a4a4a;
|
|
|
|
|
|
|
|
|
|
// 文本颜色
|
|
|
|
|
--text-color: #e9ecef;
|
|
|
|
|
--text-secondary: #adb5bd;
|
|
|
|
|
--text-tertiary: #6c757d;
|
|
|
|
|
--text-inverse: #212529;
|
|
|
|
|
|
|
|
|
|
// 边框颜色
|
|
|
|
|
--border-color: #404040;
|
|
|
|
|
--border-color-hover: #4d4d4d;
|
|
|
|
|
--border-color-active: #5a5a5a;
|
|
|
|
|
|
|
|
|
|
// 状态颜色
|
|
|
|
|
--success-color: #58d68d;
|
|
|
|
|
--success-bg: #1e3c24;
|
|
|
|
|
--warning-color: #f7dc6f;
|
|
|
|
|
--warning-bg: #4d3e1a;
|
|
|
|
|
--error-color: #ec7063;
|
|
|
|
|
--error-bg: #3c2626;
|
|
|
|
|
--info-color: #5dade2;
|
|
|
|
|
--info-bg: #1e2a33;
|
|
|
|
|
|
|
|
|
|
// 组件颜色
|
|
|
|
|
--card-bg: #2d2d2d;
|
|
|
|
|
--card-bg1: #2d2d2d;
|
|
|
|
|
--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
|
|
|
--sidebar-bg: #1f1f1f;
|
|
|
|
|
--sidebar-hover: #3d3d3d;
|
|
|
|
|
--header-bg: #2d2d2d;
|
|
|
|
|
|
|
|
|
|
// Hero 渐变(暗色主题 - 深紫色渐变)
|
|
|
|
|
--hero-gradient-start: #4a5568;
|
|
|
|
|
--hero-gradient-end: #2d3748;
|
|
|
|
|
|
|
|
|
|
// 阴影
|
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
|
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
|
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
|
|
|
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.6);
|
|
|
|
|
|
|
|
|
|
// 圆角
|
|
|
|
|
--border-radius: 4px;
|
|
|
|
|
--border-radius-sm: 2px;
|
|
|
|
|
--border-radius-lg: 8px;
|
|
|
|
|
--border-radius-xl: 12px;
|
|
|
|
|
--border-radius-full: 9999px;
|
|
|
|
|
|
|
|
|
|
// 过渡
|
|
|
|
|
--transition-base: all 0.3s cubic-bezier(.25,.8,.25,1);
|
|
|
|
|
--transition-fast: all 0.15s ease-in-out;
|
|
|
|
|
--transition-slow: all 0.5s ease-in-out;
|
|
|
|
|
|
|
|
|
|
// 字体
|
|
|
|
|
--font-family-base: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
font-family: var(--font-family-base);
|
|
|
|
|
color: var(--text-color);
|
|
|
|
@@ -291,251 +124,3 @@ a {
|
|
|
|
|
html {
|
|
|
|
|
scroll-behavior: smooth;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ==========================================
|
|
|
|
|
// Element Plus 主题覆盖 - 支持主题切换
|
|
|
|
|
// ==========================================
|
|
|
|
|
|
|
|
|
|
// 亮色主题下的 Element Plus 组件
|
|
|
|
|
:root[data-theme="light"],
|
|
|
|
|
:root:not([data-theme]) {
|
|
|
|
|
--el-bg-color: #ffffff;
|
|
|
|
|
--el-bg-color-page: #f2f3f5;
|
|
|
|
|
--el-text-color-primary: #303133;
|
|
|
|
|
--el-text-color-regular: #606266;
|
|
|
|
|
--el-text-color-secondary: #909399;
|
|
|
|
|
--el-text-color-placeholder: #c0c4cc;
|
|
|
|
|
--el-text-color-disabled: #c0c4cc;
|
|
|
|
|
--el-border-color: #dcdfe6;
|
|
|
|
|
--el-border-color-light: #e4e7ed;
|
|
|
|
|
--el-border-color-lighter: #ebeef5;
|
|
|
|
|
--el-border-color-extra-light: #f2f6fc;
|
|
|
|
|
--el-border-color-dark: #d4d7de;
|
|
|
|
|
--el-border-color-darker: #cdd0d6;
|
|
|
|
|
|
|
|
|
|
// 组件背景
|
|
|
|
|
--el-fill-color: #f0f2f5;
|
|
|
|
|
--el-fill-color-light: #f5f7fa;
|
|
|
|
|
--el-fill-color-lighter: #fafafa;
|
|
|
|
|
--el-fill-color-extra-light: #fafcff;
|
|
|
|
|
--el-fill-color-dark: #ebedf0;
|
|
|
|
|
--el-fill-color-darker: #e6e8eb;
|
|
|
|
|
--el-fill-color-blank: #ffffff;
|
|
|
|
|
|
|
|
|
|
// 组件颜色
|
|
|
|
|
--el-color-primary: #1890ff;
|
|
|
|
|
--el-color-success: #2ecc71;
|
|
|
|
|
--el-color-warning: #ffcc00;
|
|
|
|
|
--el-color-danger: #dc3545;
|
|
|
|
|
--el-color-error: #dc3545;
|
|
|
|
|
--el-color-info: #909399;
|
|
|
|
|
|
|
|
|
|
// 阴影
|
|
|
|
|
--el-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
|
--el-box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
|
|
|
|
--el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
|
|
|
|
--el-box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
|
|
|
|
|
|
|
|
|
|
// 覆盖 Element Plus 表格样式(亮色主题)
|
|
|
|
|
--el-table-bg-color: #ffffff;
|
|
|
|
|
--el-table-header-bg-color: #fafafa;
|
|
|
|
|
--el-table-header-text-color: #909399;
|
|
|
|
|
--el-table-row-hover-bg-color: #f5f7fa;
|
|
|
|
|
--el-table-border-color: #ebeef5;
|
|
|
|
|
--el-table-border: 1px solid #ebeef5;
|
|
|
|
|
|
|
|
|
|
// 对话框
|
|
|
|
|
--el-overlay-color-light: rgba(0, 0, 0, 0.5);
|
|
|
|
|
--el-overlay-color-lighter: rgba(0, 0, 0, 0.3);
|
|
|
|
|
--el-mask-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
--el-mask-color-extra-light: rgba(0, 0, 0, 0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 暗色主题下的 Element Plus 组件
|
|
|
|
|
:root[data-theme="dark"] {
|
|
|
|
|
--el-bg-color: #2d2d2d;
|
|
|
|
|
--el-bg-color-page: #1a1a1a;
|
|
|
|
|
--el-text-color-primary: #e9ecef;
|
|
|
|
|
--el-text-color-regular: #adb5bd;
|
|
|
|
|
--el-text-color-secondary: #6c757d;
|
|
|
|
|
--el-text-color-placeholder: #495057;
|
|
|
|
|
--el-text-color-disabled: #495057;
|
|
|
|
|
--el-border-color: #404040;
|
|
|
|
|
--el-border-color-light: #404040;
|
|
|
|
|
--el-border-color-lighter: #3d3d3d;
|
|
|
|
|
--el-border-color-extra-light: #3d3d3d;
|
|
|
|
|
--el-border-color-dark: #4a4a4a;
|
|
|
|
|
--el-border-color-darker: #4a4a4a;
|
|
|
|
|
|
|
|
|
|
// 组件背景
|
|
|
|
|
--el-fill-color: #3d3d3d;
|
|
|
|
|
--el-fill-color-light: #3d3d3d;
|
|
|
|
|
--el-fill-color-lighter: #3d3d3d;
|
|
|
|
|
--el-fill-color-extra-light: #3d3d3d;
|
|
|
|
|
--el-fill-color-dark: #4a4a4a;
|
|
|
|
|
--el-fill-color-darker: #4a4a4a;
|
|
|
|
|
--el-fill-color-blank: #2d2d2d;
|
|
|
|
|
|
|
|
|
|
// 组件颜色
|
|
|
|
|
--el-color-primary: #409EFF;
|
|
|
|
|
--el-color-success: #58d68d;
|
|
|
|
|
--el-color-warning: #f7dc6f;
|
|
|
|
|
--el-color-danger: #ec7063;
|
|
|
|
|
--el-color-error: #ec7063;
|
|
|
|
|
--el-color-info: #adb5bd;
|
|
|
|
|
|
|
|
|
|
// 阴影(暗色主题使用更深的阴影)
|
|
|
|
|
--el-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
|
|
|
|
|
--el-box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
|
|
--el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.4);
|
|
|
|
|
--el-box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.6);
|
|
|
|
|
|
|
|
|
|
// 覆盖 Element Plus 表格样式
|
|
|
|
|
--el-table-bg-color: var(--card-bg);
|
|
|
|
|
--el-table-header-bg-color: var(--header-bg);
|
|
|
|
|
--el-table-header-text-color: var(--text-color);
|
|
|
|
|
--el-table-row-hover-bg-color: var(--background-hover);
|
|
|
|
|
--el-table-border-color: var(--border-color);
|
|
|
|
|
--el-table-border: 1px solid var(--border-color);
|
|
|
|
|
|
|
|
|
|
// 对话框
|
|
|
|
|
--el-overlay-color-light: rgba(0, 0, 0, 0.7);
|
|
|
|
|
--el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
|
|
|
|
|
--el-mask-color: rgba(0, 0, 0, 0.8);
|
|
|
|
|
--el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ==========================================
|
|
|
|
|
// Element Plus 组件强制样式覆盖
|
|
|
|
|
// ==========================================
|
|
|
|
|
|
|
|
|
|
// 亮色和暗色主题统一样式
|
|
|
|
|
.el-table {
|
|
|
|
|
background-color: var(--card-bg);
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
transition: var(--transition-base);
|
|
|
|
|
|
|
|
|
|
th.el-table__cell {
|
|
|
|
|
background-color: var(--header-bg);
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
border-bottom-color: var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
td.el-table__cell {
|
|
|
|
|
background-color: var(--card-bg);
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
border-bottom-color: var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-table__row:hover {
|
|
|
|
|
background-color: var(--background-hover) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-table__row.current-row {
|
|
|
|
|
background-color: var(--background-hover) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-table__border {
|
|
|
|
|
border-color: var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-dialog {
|
|
|
|
|
background-color: var(--card-bg);
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
transition: var(--transition-base);
|
|
|
|
|
|
|
|
|
|
.el-dialog__header {
|
|
|
|
|
border-bottom: 1px solid var(--border-color);
|
|
|
|
|
|
|
|
|
|
.el-dialog__title {
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-dialog__body {
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-dialog__footer {
|
|
|
|
|
border-top: 1px solid var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-descriptions {
|
|
|
|
|
.el-descriptions__label {
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-descriptions__content {
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-descriptions__border {
|
|
|
|
|
border-color: var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 表单
|
|
|
|
|
.el-form {
|
|
|
|
|
.el-form-item__label {
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-input__inner,
|
|
|
|
|
.el-textarea__inner {
|
|
|
|
|
background-color: var(--background-secondary);
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
border-color: var(--border-color);
|
|
|
|
|
|
|
|
|
|
&::placeholder {
|
|
|
|
|
color: var(--text-tertiary);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 按钮
|
|
|
|
|
.el-button {
|
|
|
|
|
background-color: var(--background-secondary);
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
border-color: var(--border-color);
|
|
|
|
|
transition: var(--transition-fast);
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
border-color: var(--primary-color);
|
|
|
|
|
color: var(--primary-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.el-button--primary {
|
|
|
|
|
background-color: var(--primary-color);
|
|
|
|
|
color: var(--text-inverse);
|
|
|
|
|
border-color: var(--primary-color);
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: var(--primary-hover);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 标签页
|
|
|
|
|
.el-tabs {
|
|
|
|
|
.el-tabs__header {
|
|
|
|
|
background-color: var(--card-bg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tabs__item {
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
|
|
|
|
|
&.is-active {
|
|
|
|
|
color: var(--primary-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: var(--primary-color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tabs__nav-wrap::after {
|
|
|
|
|
background-color: var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|