王文昊
f5b91c3bd0
1. 调整token有效期从30分钟改为60分钟 2. 重构订单履约菜单结构，拆分出供应商履约子目录 3. 修复发货单状态校验逻辑，允许confirmed状态发货 4. 调整页面表格样式与列宽适配 5. 新增供应商履约相关路由与菜单权限 6. 替换首页仪表盘为福安德平台首页 7. 新增批量客户初始化SQL与重复菜单清理脚本 8. 移除顶部导航栏的源码和文档地址入口
1070 lines
30 KiB
SCSS
1070 lines
30 KiB
SCSS
/* ═══════════════════════════════════════════════════════════════
|
||
京东风格 — 全局主题（CSS 变量 + Element UI 覆盖）
|
||
主色：#e4393c 深红：#c81623 背景灰：#ffffff
|
||
═══════════════════════════════════════════════════════════════ */
|
||
|
||
:root {
|
||
/* ═══ 品牌色（京东红） ═══ */
|
||
--jd-red: #e4393c;
|
||
--jd-red-dark: #c81623;
|
||
--jd-red-hover: #e55a5d;
|
||
--jd-red-light: #fafafa;
|
||
--jd-red-bg: #ffffff;
|
||
|
||
/* ═══ 灰色系 ═══ */
|
||
--bg-gray: #ffffff;
|
||
--bg-white: #ffffff;
|
||
--border-gray: #e5e5e5;
|
||
--border-light: #f0f0f0;
|
||
|
||
/* ═══ 文字色 ═══ */
|
||
--text-dark: #333333;
|
||
--text-medium: #666666;
|
||
--text-light: #999999;
|
||
|
||
/* ═══ 功能色 ═══ */
|
||
--link-blue: #e4393c;
|
||
--color-success: #67c23a;
|
||
--color-warning: #e6a23c;
|
||
--color-danger: #f56c6c;
|
||
--color-info: #909399;
|
||
|
||
/* ═══ 兼容旧变量名（逐步迁移） ═══ */
|
||
--brand-primary: var(--jd-red);
|
||
--brand-primary-hover: var(--jd-red-dark);
|
||
--brand-primary-light: var(--jd-red-light);
|
||
--bg-page: var(--bg-gray);
|
||
--text-primary: var(--text-dark);
|
||
--text-secondary: var(--text-medium);
|
||
--text-muted: var(--text-light);
|
||
--silver-border: var(--border-gray);
|
||
--silver-bg: var(--bg-gray);
|
||
--silver-text: var(--text-light);
|
||
|
||
/* ═══ 金额色 ═══ */
|
||
--color-amount: var(--jd-red);
|
||
|
||
/* ═══ 圆角 ═══ */
|
||
--radius-base: 2px;
|
||
--radius-small: 2px;
|
||
|
||
/* ═══ 阴影 ═══ */
|
||
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||
--shadow-dialog: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||
--shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
|
||
/* ═══ 间距 ═══ */
|
||
--space-xs: 4px;
|
||
--space-sm: 8px;
|
||
--space-md: 12px;
|
||
--space-lg: 16px;
|
||
--space-xl: 20px;
|
||
|
||
/* ═══ 表格 ═══ */
|
||
--table-header-bg: #ffffff;
|
||
--table-header-text: #666666;
|
||
--table-row-hover: #f5f7fa;
|
||
--table-stripe: #fafafa;
|
||
--table-border: #e5e5e5;
|
||
|
||
/* ═══ 导航 ═══ */
|
||
--nav-height: 50px;
|
||
--nav-bg: #ffffff;
|
||
--nav-text: #333333;
|
||
--nav-hover: rgba(0, 0, 0, 0.04);
|
||
|
||
/* ═══ 侧栏 ═══ */
|
||
--sidebar-width: 192px;
|
||
--sidebar-bg: #ffffff;
|
||
--sidebar-text: #666666;
|
||
--sidebar-text-active: #e4393c;
|
||
--sidebar-hover-bg: rgba(0, 0, 0, 0.04);
|
||
--sidebar-active-border: #e4393c;
|
||
--sidebar-sub-bg: #fafafa;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
页面基础
|
||
═══════════════════════════════════════════ */
|
||
body {
|
||
background: var(--bg-gray) !important;
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
/* 主内容区背景 */
|
||
.app-main,
|
||
.app-container,
|
||
.main-container {
|
||
background: var(--bg-gray);
|
||
}
|
||
|
||
/* 面包屑背景匹配 */
|
||
.el-breadcrumb {
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
顶部导航栏
|
||
═══════════════════════════════════════════ */
|
||
.navbar {
|
||
background: #ffffff !important;
|
||
border-bottom: 1px solid #ececec !important;
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
|
||
height: var(--nav-height) !important;
|
||
color: #333 !important;
|
||
position: relative;
|
||
|
||
/* 顶部红色品牌细条 */
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0; right: 0; top: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, #e4393c 0%, #c81623 60%, #e4393c 100%);
|
||
}
|
||
|
||
.hamburger-container svg {
|
||
color: #666 !important;
|
||
fill: #666 !important;
|
||
}
|
||
|
||
.hamburger-container:hover {
|
||
background: rgba(228, 57, 60, 0.06) !important;
|
||
svg { fill: #e4393c !important; color: #e4393c !important; }
|
||
}
|
||
|
||
.breadcrumb-container {
|
||
.el-breadcrumb__inner,
|
||
.el-breadcrumb__inner a,
|
||
.el-breadcrumb__separator {
|
||
color: #999 !important;
|
||
font-weight: 400 !important;
|
||
}
|
||
.el-breadcrumb__inner.is-link {
|
||
font-weight: 400 !important;
|
||
&:hover { color: #e4393c !important; }
|
||
}
|
||
.el-breadcrumb__item:last-child .el-breadcrumb__inner {
|
||
color: #333 !important;
|
||
font-weight: 500 !important;
|
||
}
|
||
}
|
||
|
||
.right-menu {
|
||
.right-menu-item {
|
||
color: #666 !important;
|
||
font-size: 16px !important;
|
||
|
||
&.hover-effect:hover {
|
||
color: #e4393c !important;
|
||
background: rgba(228, 57, 60, 0.06) !important;
|
||
}
|
||
|
||
svg, i { color: #666 !important; }
|
||
&:hover svg, &:hover i { color: #e4393c !important; }
|
||
}
|
||
|
||
.avatar-container {
|
||
.user-nickname { color: #333 !important; font-weight: 500 !important; }
|
||
.avatar-wrapper { margin-top: 6px !important; }
|
||
}
|
||
|
||
.el-dropdown { color: #333 !important; }
|
||
|
||
.el-badge__content {
|
||
border-color: #fff !important;
|
||
background: #e4393c !important;
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
|
||
/* TopBar nav3 模式 */
|
||
.topbar-container {
|
||
.el-menu--horizontal {
|
||
background: transparent !important;
|
||
border-bottom: none !important;
|
||
|
||
.el-menu-item,
|
||
.el-submenu__title {
|
||
color: #555 !important;
|
||
background: transparent !important;
|
||
border-bottom: none !important;
|
||
height: var(--nav-height) !important;
|
||
line-height: var(--nav-height) !important;
|
||
|
||
&:hover {
|
||
color: #e4393c !important;
|
||
background: rgba(228, 57, 60, 0.04) !important;
|
||
}
|
||
|
||
&.is-active {
|
||
color: #e4393c !important;
|
||
background: transparent !important;
|
||
border-bottom: 2px solid #e4393c !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 返回顶部按钮 */
|
||
.top-btn {
|
||
background: var(--jd-red) !important;
|
||
border-color: var(--jd-red) !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
左侧菜单
|
||
═══════════════════════════════════════════ */
|
||
.sidebar-container {
|
||
&.theme-light {
|
||
background: var(--sidebar-bg) !important;
|
||
border-right: 1px solid var(--border-gray) !important;
|
||
box-shadow: none !important;
|
||
width: var(--sidebar-width) !important;
|
||
}
|
||
|
||
.el-menu {
|
||
background: var(--sidebar-bg) !important;
|
||
border-right: none !important;
|
||
}
|
||
|
||
.el-menu-item,
|
||
.el-submenu__title {
|
||
color: var(--sidebar-text) !important;
|
||
height: 40px !important;
|
||
line-height: 40px !important;
|
||
font-size: 13px !important;
|
||
|
||
&:hover {
|
||
color: var(--sidebar-text) !important;
|
||
background: var(--sidebar-hover-bg) !important;
|
||
}
|
||
|
||
i, svg {
|
||
color: var(--sidebar-text) !important;
|
||
}
|
||
&:hover i,
|
||
&:hover svg {
|
||
color: var(--sidebar-text) !important;
|
||
}
|
||
}
|
||
|
||
.el-menu-item.is-active {
|
||
color: var(--sidebar-text-active) !important;
|
||
background: var(--sidebar-hover-bg) !important;
|
||
position: relative;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 3px;
|
||
background: var(--sidebar-active-border) !important;
|
||
z-index: 2;
|
||
}
|
||
|
||
i, svg {
|
||
color: var(--sidebar-text-active) !important;
|
||
}
|
||
}
|
||
|
||
.el-submenu.is-active > .el-submenu__title {
|
||
color: var(--sidebar-text-active) !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
/* 强制清除 element-ui 默认 hover 黄色背景 */
|
||
.el-submenu__title:hover,
|
||
.el-submenu__title:focus,
|
||
.el-menu-item:focus {
|
||
background: var(--sidebar-hover-bg) !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
/* 子菜单展开时 inline-style 的浅色背景一并覆盖 */
|
||
.el-menu .el-menu-item,
|
||
.el-menu .el-submenu__title {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/* 子菜单 */
|
||
.el-submenu .el-menu {
|
||
background: var(--sidebar-sub-bg) !important;
|
||
}
|
||
|
||
.el-submenu .el-menu-item {
|
||
padding-left: 32px !important;
|
||
height: 34px !important;
|
||
line-height: 34px !important;
|
||
font-size: 12px !important;
|
||
color: var(--text-medium) !important;
|
||
|
||
/* 二级菜单图标隐藏 */
|
||
.svg-icon,
|
||
> i,
|
||
> .el-icon-,
|
||
[class^="el-icon-"],
|
||
[class*=" el-icon-"] {
|
||
display: none !important;
|
||
width: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
&:hover {
|
||
color: var(--text-medium) !important;
|
||
background: var(--sidebar-hover-bg) !important;
|
||
}
|
||
|
||
&.is-active {
|
||
color: var(--sidebar-text-active) !important;
|
||
background: var(--sidebar-hover-bg) !important;
|
||
|
||
&::before {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Logo */
|
||
.sidebar-logo {
|
||
background: var(--sidebar-bg) !important;
|
||
border-bottom: 1px solid var(--border-gray) !important;
|
||
|
||
.sidebar-logo-title {
|
||
color: var(--text-dark) !important;
|
||
font-size: 15px !important;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
/* 折叠状态 */
|
||
.el-menu--collapse {
|
||
.el-menu-item,
|
||
.el-submenu__title {
|
||
padding-left: 16px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
按钮样式 — 银灰风格
|
||
═══════════════════════════════════════════ */
|
||
/* 主按钮 — 京东红 */
|
||
.el-button--primary {
|
||
background: var(--jd-red) !important;
|
||
border: 1px solid var(--jd-red) !important;
|
||
color: #fff !important;
|
||
border-radius: var(--radius-base) !important;
|
||
transition: all 0.2s;
|
||
|
||
&:hover,
|
||
&:focus {
|
||
background: var(--jd-red-dark) !important;
|
||
border-color: var(--jd-red-dark) !important;
|
||
}
|
||
|
||
&:active {
|
||
background: #a30f1c !important;
|
||
border-color: #a30f1c !important;
|
||
}
|
||
|
||
&.is-disabled,
|
||
&.is-disabled:hover {
|
||
background: #fbcecf !important;
|
||
border-color: #fbcecf !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
&.is-plain {
|
||
background: #fff !important;
|
||
border-color: var(--jd-red) !important;
|
||
color: var(--jd-red) !important;
|
||
|
||
&:hover {
|
||
background: var(--jd-red) !important;
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 次要按钮 */
|
||
.el-button--default {
|
||
background: var(--bg-white) !important;
|
||
border: 1px solid var(--border-gray) !important;
|
||
color: var(--text-medium) !important;
|
||
border-radius: var(--radius-base) !important;
|
||
transition: all 0.2s;
|
||
|
||
&:hover,
|
||
&:focus {
|
||
border-color: var(--jd-red) !important;
|
||
color: var(--jd-red) !important;
|
||
}
|
||
|
||
&:active {
|
||
border-color: var(--jd-red-dark) !important;
|
||
color: var(--jd-red-dark) !important;
|
||
}
|
||
}
|
||
|
||
/* 文字按钮（表格操作列链接） */
|
||
.el-button--text {
|
||
color: var(--text-dark) !important;
|
||
border: none !important;
|
||
background: transparent !important;
|
||
padding: 0 !important;
|
||
height: auto !important;
|
||
line-height: normal !important;
|
||
|
||
&:hover {
|
||
color: var(--jd-red) !important;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
/* 成功/危险/警告按钮统一圆角 */
|
||
.el-button--success,
|
||
.el-button--danger,
|
||
.el-button--warning,
|
||
.el-button--info {
|
||
border-radius: var(--radius-base) !important;
|
||
}
|
||
|
||
/* 小按钮紧凑 */
|
||
.el-button--mini {
|
||
padding: 4px 7px !important;
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
.el-button--small {
|
||
padding: 6px 10px !important;
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
表格样式 — 京东订单风格（紧凑单行）
|
||
═══════════════════════════════════════════ */
|
||
.el-table {
|
||
border: 1px solid var(--border-gray) !important;
|
||
border-bottom: none !important;
|
||
font-size: 12px !important;
|
||
|
||
/* 表头 */
|
||
thead th {
|
||
background: var(--table-header-bg) !important;
|
||
color: var(--table-header-text) !important;
|
||
font-weight: 500 !important;
|
||
font-size: 11px !important;
|
||
border-bottom: 1px solid var(--border-gray) !important;
|
||
padding: 4px 6px !important;
|
||
white-space: nowrap !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
}
|
||
|
||
/* 表体 */
|
||
td {
|
||
color: var(--text-dark) !important;
|
||
font-size: 12px !important;
|
||
padding: 3px 4px !important;
|
||
border-bottom: 1px solid var(--border-light) !important;
|
||
white-space: nowrap !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
}
|
||
|
||
/* cell 内部（操作列允许换行） */
|
||
.cell {
|
||
white-space: nowrap !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
line-height: 1.3 !important;
|
||
padding-left: 1px !important;
|
||
padding-right: 1px !important;
|
||
}
|
||
|
||
/* 行悬停 */
|
||
.el-table__body .el-table__row:hover td {
|
||
background: var(--table-row-hover) !important;
|
||
}
|
||
|
||
/* 斑马纹 */
|
||
&.el-table--striped {
|
||
.el-table__body tr.el-table__row--striped td {
|
||
background: var(--table-stripe) !important;
|
||
}
|
||
.el-table__body tr.el-table__row--striped:hover td {
|
||
background: var(--table-row-hover) !important;
|
||
}
|
||
}
|
||
|
||
/* 取消边框表格内部双线 */
|
||
&.el-table--border {
|
||
th,
|
||
td {
|
||
border-right: 1px solid var(--border-gray) !important;
|
||
}
|
||
}
|
||
|
||
/* 空状态 */
|
||
.el-table__empty-text {
|
||
color: var(--text-light) !important;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 筛选列样式 */
|
||
.el-table__column-filter-trigger i {
|
||
color: var(--text-light) !important;
|
||
}
|
||
|
||
/* 表格内部按钮/标签紧凑 */
|
||
.el-tag,
|
||
.el-button--mini,
|
||
.el-button--small {
|
||
white-space: nowrap !important;
|
||
}
|
||
|
||
/* el-switch 紧凑 */
|
||
.el-switch {
|
||
height: 18px !important;
|
||
line-height: 18px !important;
|
||
}
|
||
.el-switch__core {
|
||
height: 14px !important;
|
||
width: 36px !important;
|
||
}
|
||
.el-switch__core::after {
|
||
width: 10px !important;
|
||
height: 10px !important;
|
||
}
|
||
|
||
/* el-avatar 紧凑 */
|
||
.el-avatar--small {
|
||
width: 22px !important;
|
||
height: 22px !important;
|
||
line-height: 22px !important;
|
||
}
|
||
}
|
||
|
||
/* 金额列红字加粗 */
|
||
.amount,
|
||
.amount-cell,
|
||
.el-table td .amount {
|
||
color: var(--jd-red) !important;
|
||
font-weight: 700 !important;
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
/* 标签内部按钮文本不折行 */
|
||
.el-table .el-button--text {
|
||
white-space: nowrap !important;
|
||
overflow: visible !important;
|
||
}
|
||
|
||
/* 表格所在容器禁止横向滚动 */
|
||
.app-container,
|
||
.jd-table-wrap,
|
||
.jd-order-page,
|
||
.cq-page,
|
||
.cd-page,
|
||
.client-manage {
|
||
overflow-x: hidden !important;
|
||
}
|
||
|
||
/* 金额列红字加粗 */
|
||
.amount,
|
||
.amount-cell,
|
||
.el-table td .amount {
|
||
color: var(--jd-red) !important;
|
||
font-weight: 700 !important;
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
/* 蓝色链接样式 */
|
||
.link-type,
|
||
.order-link {
|
||
color: var(--link-blue) !important;
|
||
cursor: pointer;
|
||
transition: color 0.2s;
|
||
|
||
&:hover {
|
||
color: var(--jd-red) !important;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
分页器样式
|
||
═══════════════════════════════════════════ */
|
||
.el-pagination {
|
||
padding: 14px 5px !important;
|
||
font-weight: 400 !important;
|
||
color: var(--text-medium) !important;
|
||
|
||
.el-pager {
|
||
li {
|
||
border: 1px solid var(--border-gray) !important;
|
||
border-radius: var(--radius-base) !important;
|
||
margin: 0 2px !important;
|
||
min-width: 28px !important;
|
||
height: 28px !important;
|
||
line-height: 28px !important;
|
||
font-size: 12px !important;
|
||
color: var(--text-medium) !important;
|
||
background: var(--bg-white) !important;
|
||
|
||
&:hover {
|
||
border-color: var(--jd-red) !important;
|
||
color: var(--jd-red) !important;
|
||
}
|
||
|
||
&.active {
|
||
background: var(--jd-red) !important;
|
||
border-color: var(--jd-red) !important;
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-pagination__btn {
|
||
border: 1px solid var(--border-gray) !important;
|
||
border-radius: var(--radius-base) !important;
|
||
min-width: 28px !important;
|
||
height: 28px !important;
|
||
line-height: 28px !important;
|
||
font-size: 12px !important;
|
||
color: var(--text-medium) !important;
|
||
background: var(--bg-white) !important;
|
||
|
||
&:hover {
|
||
border-color: var(--jd-red) !important;
|
||
color: var(--jd-red) !important;
|
||
}
|
||
|
||
&.is-disabled {
|
||
color: var(--text-light) !important;
|
||
border-color: var(--border-gray) !important;
|
||
}
|
||
}
|
||
|
||
.el-pagination__sizes {
|
||
.el-input__inner {
|
||
border-color: var(--border-gray) !important;
|
||
border-radius: var(--radius-base) !important;
|
||
height: 28px !important;
|
||
line-height: 28px !important;
|
||
font-size: 12px !important;
|
||
}
|
||
}
|
||
|
||
.el-pagination__total,
|
||
.el-pagination__jump {
|
||
font-size: 12px !important;
|
||
color: var(--text-medium) !important;
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
输入框/选择器样式
|
||
═══════════════════════════════════════════ */
|
||
.el-input__inner,
|
||
.el-select .el-input__inner,
|
||
.el-textarea__inner {
|
||
border: 1px solid var(--border-gray) !important;
|
||
border-radius: var(--radius-base) !important;
|
||
transition: all 0.2s;
|
||
color: var(--text-dark) !important;
|
||
|
||
&:focus {
|
||
border-color: var(--jd-red) !important;
|
||
}
|
||
|
||
&:hover {
|
||
border-color: var(--jd-red) !important;
|
||
}
|
||
}
|
||
|
||
.el-input.is-disabled .el-input__inner {
|
||
background: var(--bg-gray) !important;
|
||
border-color: var(--border-light) !important;
|
||
color: var(--text-light) !important;
|
||
}
|
||
|
||
.el-input__prefix,
|
||
.el-input__suffix {
|
||
color: var(--text-light) !important;
|
||
}
|
||
|
||
/* 下拉框选项选中 */
|
||
.el-select-dropdown__item.selected {
|
||
color: var(--sidebar-text-active) !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
日期选择器
|
||
═══════════════════════════════════════════ */
|
||
.el-date-editor {
|
||
.el-input__inner {
|
||
border-radius: var(--radius-base) !important;
|
||
}
|
||
|
||
&:hover .el-input__inner {
|
||
border-color: var(--jd-red) !important;
|
||
}
|
||
}
|
||
|
||
.el-date-table td.today {
|
||
color: var(--jd-red) !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
.el-date-table td.current:not(.disabled) span {
|
||
background: var(--jd-red) !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
Tabs 样式
|
||
═══════════════════════════════════════════ */
|
||
.el-tabs__item {
|
||
color: var(--text-medium) !important;
|
||
font-size: 13px !important;
|
||
font-weight: 400 !important;
|
||
padding: 0 14px !important;
|
||
height: 38px !important;
|
||
line-height: 38px !important;
|
||
|
||
&:hover {
|
||
color: var(--jd-red) !important;
|
||
}
|
||
|
||
&.is-active {
|
||
color: var(--jd-red) !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
}
|
||
|
||
.el-tabs__active-bar {
|
||
background: var(--jd-red) !important;
|
||
height: 2px !important;
|
||
}
|
||
|
||
.el-tabs__nav-wrap::after {
|
||
height: 1px !important;
|
||
background: var(--border-gray) !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
Tag 标签
|
||
═══════════════════════════════════════════ */
|
||
.el-tag {
|
||
border-radius: var(--radius-small) !important;
|
||
border: none !important;
|
||
font-size: 12px !important;
|
||
padding: 0 6px !important;
|
||
height: 22px !important;
|
||
line-height: 22px !important;
|
||
}
|
||
|
||
.el-tag--warning {
|
||
background: #fdf6ec !important;
|
||
color: #e6a23c !important;
|
||
}
|
||
.el-tag--primary {
|
||
background: var(--jd-red-light) !important;
|
||
color: var(--jd-red) !important;
|
||
}
|
||
.el-tag--success {
|
||
background: #f0f9eb !important;
|
||
color: #67c23a !important;
|
||
}
|
||
.el-tag--danger {
|
||
background: #fef0f0 !important;
|
||
color: #f56c6c !important;
|
||
}
|
||
.el-tag--info {
|
||
background: #f4f4f5 !important;
|
||
color: #909399 !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
卡片/面板
|
||
═══════════════════════════════════════════ */
|
||
.el-card {
|
||
border: 1px solid var(--border-gray) !important;
|
||
border-radius: var(--radius-base) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.el-card__body {
|
||
padding: 14px 16px !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
Dialog 弹窗
|
||
═══════════════════════════════════════════ */
|
||
.el-dialog {
|
||
border-radius: var(--radius-base) !important;
|
||
box-shadow: var(--shadow-dialog);
|
||
}
|
||
|
||
.el-dialog__header {
|
||
padding: 14px 20px !important;
|
||
border-bottom: 1px solid var(--border-gray) !important;
|
||
|
||
.el-dialog__title {
|
||
font-size: 15px !important;
|
||
font-weight: 700 !important;
|
||
color: var(--text-dark) !important;
|
||
}
|
||
|
||
.el-dialog__headerbtn {
|
||
font-size: 16px !important;
|
||
top: 14px !important;
|
||
right: 16px !important;
|
||
|
||
.el-dialog__close {
|
||
color: var(--text-light) !important;
|
||
&:hover {
|
||
color: var(--jd-red) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-dialog__body {
|
||
padding: 16px 20px !important;
|
||
}
|
||
|
||
.el-dialog__footer {
|
||
padding: 10px 20px 14px !important;
|
||
border-top: 1px solid var(--border-light) !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
下拉菜单 Dropdown
|
||
═══════════════════════════════════════════ */
|
||
.el-dropdown-menu {
|
||
border: 1px solid var(--border-gray) !important;
|
||
border-radius: var(--radius-base) !important;
|
||
box-shadow: var(--shadow-dialog) !important;
|
||
padding: 4px 0 !important;
|
||
|
||
.el-dropdown-menu__item {
|
||
font-size: 13px !important;
|
||
color: var(--text-medium) !important;
|
||
padding: 6px 18px !important;
|
||
|
||
&:hover {
|
||
background: var(--jd-red-light) !important;
|
||
color: var(--jd-red) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
表单样式
|
||
═══════════════════════════════════════════ */
|
||
.el-form-item__label {
|
||
color: var(--text-medium) !important;
|
||
font-weight: 500 !important;
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
.el-form-item {
|
||
margin-bottom: 16px !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
消息/通知
|
||
═══════════════════════════════════════════ */
|
||
.el-message {
|
||
border-radius: var(--radius-base) !important;
|
||
border-color: var(--border-gray) !important;
|
||
box-shadow: var(--shadow-dialog) !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
Loading 加载
|
||
═══════════════════════════════════════════ */
|
||
.el-loading-spinner .path {
|
||
stroke: var(--jd-red) !important;
|
||
}
|
||
|
||
.el-loading-spinner .el-loading-text {
|
||
color: var(--jd-red) !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
步骤条
|
||
═══════════════════════════════════════════ */
|
||
.el-steps--simple {
|
||
border-radius: var(--radius-base) !important;
|
||
border: 1px solid var(--border-gray) !important;
|
||
padding: 10px 16px !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
Switch 开关
|
||
═══════════════════════════════════════════ */
|
||
.el-switch.is-checked .el-switch__core {
|
||
background: var(--jd-red) !important;
|
||
border-color: var(--jd-red) !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
Radio 单选
|
||
═══════════════════════════════════════════ */
|
||
.el-radio__input.is-checked .el-radio__inner {
|
||
background: var(--jd-red) !important;
|
||
border-color: var(--jd-red) !important;
|
||
}
|
||
|
||
.el-radio__input.is-checked + .el-radio__label {
|
||
color: var(--jd-red) !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
Checkbox 复选
|
||
═══════════════════════════════════════════ */
|
||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||
background: var(--jd-red) !important;
|
||
border-color: var(--jd-red) !important;
|
||
}
|
||
|
||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||
color: var(--jd-red) !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
Tooltip 提示
|
||
═══════════════════════════════════════════ */
|
||
.el-tooltip__popper {
|
||
border-radius: var(--radius-base) !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
空状态
|
||
═══════════════════════════════════════════ */
|
||
.el-empty__description p {
|
||
color: var(--text-light) !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
Badge 徽标
|
||
═══════════════════════════════════════════ */
|
||
.el-badge__content {
|
||
border-radius: 8px !important;
|
||
font-size: 11px !important;
|
||
padding: 0 5px !important;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
横向滚动条
|
||
═══════════════════════════════════════════ */
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #d0d0d0;
|
||
border-radius: 3px;
|
||
|
||
&:hover {
|
||
background: #b0b0b0;
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
淡入动画
|
||
═══════════════════════════════════════════ */
|
||
.fade-in {
|
||
animation: fadeIn 0.2s ease-in;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(4px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
统计卡片统一样式
|
||
═══════════════════════════════════════════ */
|
||
.el-row.stat-row {
|
||
margin-bottom: 12px !important;
|
||
}
|
||
|
||
.stat-card {
|
||
background: var(--bg-white) !important;
|
||
border: 1px solid var(--border-gray) !important;
|
||
border-top: none !important;
|
||
border-radius: var(--radius-base) !important;
|
||
padding: 12px 16px !important;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
&:hover {
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.stat-num {
|
||
font-size: 22px !important;
|
||
font-weight: 400 !important;
|
||
color: var(--text-dark) !important;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.stat-lbl {
|
||
font-size: 12px !important;
|
||
font-weight: 400 !important;
|
||
color: var(--text-light) !important;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.stat-icon {
|
||
font-size: 22px !important;
|
||
opacity: 0.35;
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
旧品牌色迁移 — 将所有 #409EFF（Element 默认蓝）
|
||
自动转为京东红，覆盖 inline style 和 class
|
||
═══════════════════════════════════════════ */
|
||
.amount,
|
||
[style*="color:#409EFF"],
|
||
[style*="color: #409EFF"],
|
||
[style*="color:#409eff"],
|
||
[style*="background:#409EFF"],
|
||
[style*="background: #409EFF"] {
|
||
color: var(--jd-red) !important;
|
||
}
|
||
|
||
/* 迁移蓝色背景 */
|
||
[style*="background: linear-gradient(180deg, #409eff"] {
|
||
background: var(--jd-red) !important;
|
||
}
|
||
|
||
/* 迁移蓝色边框 */
|
||
[style*="border-color: #409eff"],
|
||
[style*="border-color:#409eff"],
|
||
[style*="border-left: 4px solid #409EFF"],
|
||
[style*="border-bottom:2px solid #409EFF"] {
|
||
border-color: var(--jd-red) !important;
|
||
}
|
||
|
||
/* 迁移蓝色 border-left 变体 */
|
||
[style*="border-left: 3px solid #409eff"],
|
||
[style*="border-left: 4px solid #409eff"] {
|
||
border-left-color: var(--jd-red) !important;
|
||
}
|