84 lines
3.2 KiB
SCSS
84 lines
3.2 KiB
SCSS
|
/* ═══════════════════════════════════════════
|
|||
|
|
京东风格主题 — CSS 变量定义
|
|||
|
|
主色：红色 #E2231A
|
|||
|
|
辅色：白色 + 银灰色
|
|||
|
|
用途：替换页面中所有硬编码的颜色值
|
|||
|
|
═══════════════════════════════════════════ */
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
/* ═══ 品牌色（京东红） ═══ */
|
|||
|
|
--brand-primary: #E2231A; /* 京东红 —— 主按钮、链接、选中态 */
|
|||
|
|
--brand-primary-hover: #C01623; /* 深红 —— hover、激活 */
|
|||
|
|
--brand-primary-light: #FFF0F0; /* 浅红背景 —— 选中行、标签浅色背景 */
|
|||
|
|
|
|||
|
|
/* ═══ 银灰色（边框、背景、禁用） ═══ */
|
|||
|
|
--silver-border: #E0E0E0; /* 表格边框、卡片边框 */
|
|||
|
|
--silver-border-light: #F0F0F0; /* 更浅的边框 */
|
|||
|
|
--silver-bg: #F5F5F5; /* 页面背景、表头背景、卡片背景 */
|
|||
|
|
--silver-bg-light: #FAFAFA; /* 交替行背景、悬浮背景 */
|
|||
|
|
--silver-text: #9E9E9E; /* 禁用文字、placeholder、辅助信息 */
|
|||
|
|
|
|||
|
|
/* ═══ 背景色 ═══ */
|
|||
|
|
--bg-white: #FFFFFF; /* 纯白 — 内容区、卡片、弹窗 */
|
|||
|
|
--bg-page: #F5F5F5; /* 页面底色 */
|
|||
|
|
|
|||
|
|
/* ═══ 文字色 ═══ */
|
|||
|
|
--text-primary: #333333; /* 主文字 —— 标题、表格数据 */
|
|||
|
|
--text-secondary: #666666; /* 次要文字 —— 说明、次要信息 */
|
|||
|
|
--text-muted: #999999; /* 弱化文字 —— 辅助信息 */
|
|||
|
|
|
|||
|
|
/* ═══ 金额色 ═══ */
|
|||
|
|
--color-amount: #E2231A; /* 金额 —— 京东红色 */
|
|||
|
|
|
|||
|
|
/* ═══ 状态色 ═══ */
|
|||
|
|
--color-success: #67C23A; /* 成功绿 */
|
|||
|
|
--color-warning: #E6A23C; /* 警告橙 */
|
|||
|
|
--color-danger: #F56C6C; /* 危险红 */
|
|||
|
|
|
|||
|
|
/* ═══ 圆角 ═══ */
|
|||
|
|
--radius-base: 4px; /* 常规圆角 */
|
|||
|
|
--radius-small: 2px; /* 小圆角 */
|
|||
|
|
|
|||
|
|
/* ═══ 阴影 ═══ */
|
|||
|
|
--shadow-card: 0 1px 4px rgba(0,0,0,0.06);
|
|||
|
|
--shadow-dialog: 0 4px 12px rgba(0,0,0,0.12);
|
|||
|
|
|
|||
|
|
/* ═══ 间距 ═══ */
|
|||
|
|
--space-xs: 4px;
|
|||
|
|
--space-sm: 8px;
|
|||
|
|
--space-md: 12px;
|
|||
|
|
--space-lg: 16px;
|
|||
|
|
--space-xl: 20px;
|
|||
|
|
|
|||
|
|
/* ═══ 表格 ═══ */
|
|||
|
|
--table-header-bg: #F5F5F5;
|
|||
|
|
--table-header-text: #333333;
|
|||
|
|
--table-row-hover: #FFF0F0; /* 浅红悬浮 */
|
|||
|
|
--table-stripe: #FAFAFA;
|
|||
|
|
--table-border: #E0E0E0;
|
|||
|
|
|
|||
|
|
/* ═══ 搜索栏 / 卡片 ═══ */
|
|||
|
|
--card-bg: #FFFFFF;
|
|||
|
|
--card-border: #E0E0E0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ═══ 部分 Element UI 覆盖 ═══ */
|
|||
|
|
.el-button--primary {
|
|||
|
|
background-color: var(--brand-primary) !important;
|
|||
|
|
border-color: var(--brand-primary) !important;
|
|||
|
|
}
|
|||
|
|
.el-button--primary:hover,
|
|||
|
|
.el-button--primary:focus {
|
|||
|
|
background-color: var(--brand-primary-hover) !important;
|
|||
|
|
border-color: var(--brand-primary-hover) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-table thead th {
|
|||
|
|
background-color: var(--table-header-bg) !important;
|
|||
|
|
color: var(--table-header-text) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-table__body .el-table__row:hover td {
|
|||
|
|
background-color: var(--table-row-hover) !important;
|
|||
|
|
}
|