// ============================================================
|
// 设计令牌（Design Tokens）· SCSS 变量
|
// 品牌色取自 src/assets/logo/OPO_Logo.png 圆环青 #0E768F
|
// 说明见：方案-前端界面视觉优化方案.md
|
// 约定：业务样式一律引用这里的变量，禁止再写裸色值
|
// ============================================================
|
|
// ---------- 品牌色（青） ----------
|
$opo-primary: #0E768F;
|
$opo-primary-hover: #0D6A81;
|
$opo-primary-active: #0B5E72;
|
$opo-primary-light-3: #569FB1;
|
$opo-primary-light-5: #87BBC7;
|
$opo-primary-light-7: #B7D6DD;
|
$opo-primary-light-8: #CFE4E9;
|
$opo-primary-light-9: #E7F1F4;
|
$opo-primary-light-95: #F3F8F9;
|
$opo-primary-dark-2: #0B5E72;
|
|
// ---------- 语义色 ----------
|
$opo-success: #67C23A;
|
$opo-success-light: #F0F9EB;
|
$opo-warning: #E6A23C;
|
$opo-warning-light: #FDF6EC;
|
$opo-danger: #CD1D4E;
|
$opo-danger-light: #FBEBEF;
|
$opo-info: #909399;
|
$opo-info-light: #F4F4F5;
|
|
// ---------- 中性色 ----------
|
$opo-text-primary: #1F2937;
|
$opo-text-regular: #4B5563;
|
$opo-text-secondary: #6B7280;
|
$opo-text-placeholder: #9CA3AF;
|
$opo-border-base: #E5E7EB;
|
$opo-border-light: #F0F2F5;
|
$opo-border-lighter: #F5F7FA;
|
$opo-bg-page: #F5F7FA;
|
$opo-bg-card: #FFFFFF;
|
$opo-bg-hover: #F5F9FD;
|
$opo-bg-stripe: #FAFBFC;
|
$opo-bg-thead: #F5F7FA;
|
|
// ---------- 表格框线（比通用边框更深，便于看清分列/分行） ----------
|
$opo-table-border: #C8CFD8;
|
$opo-table-border-strong: #B7C0CC;
|
|
// ---------- 侧边栏（与品牌青同族） ----------
|
$opo-sidebar-bg: #0A4655;
|
$opo-sidebar-sub-bg: #083B47;
|
$opo-sidebar-hover: rgba(14, 118, 143, 0.28);
|
$opo-sidebar-text: rgba(255, 255, 255, 0.72);
|
$opo-sidebar-text-active: #FFFFFF;
|
|
// ---------- 字号（2026-10-22 整体上调一号：正文 14→16） ----------
|
$opo-font-size-display: 34px;
|
$opo-font-size-h1: 26px;
|
$opo-font-size-h2: 20px;
|
$opo-font-size-lg: 18px;
|
$opo-font-size-base: 16px;
|
$opo-font-size-sm: 14px;
|
$opo-font-size-xs: 13px;
|
$opo-font-size-menu: 16px; // 侧边栏菜单（2026-10-22 由 18px 回调一号）
|
|
// ---------- 行高 ----------
|
$opo-line-height-base: 22px;
|
$opo-line-height-heading: 1.3;
|
|
// ---------- 字体 ----------
|
// 注意：不要用 -apple-system / BlinkMacSystemFont 打头——Windows 上 Chrome 会解析成 Segoe UI，
|
// 导致数字/英文走 Segoe UI（比中文细、显小），中文回退微软雅黑，同一行里字号观感不一致。
|
// 这里按"平台有则用、没有则退到微软雅黑"的顺序，保证中英文同族。
|
$opo-font-family-base: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
|
"Helvetica Neue", Arial, sans-serif;
|
$opo-font-family-number: "DIN Alternate", "SF Mono", "Roboto Mono", Consolas, "Courier New", monospace;
|
|
// ---------- 间距（8 点栅格） ----------
|
$opo-space-1: 4px;
|
$opo-space-2: 8px;
|
$opo-space-3: 12px;
|
$opo-space-4: 16px;
|
$opo-space-5: 24px;
|
$opo-space-6: 32px;
|
|
// ---------- 圆角 ----------
|
$opo-radius-sm: 2px;
|
$opo-radius-base: 4px;
|
$opo-radius-lg: 8px;
|
$opo-radius-pill: 999px;
|
|
// ---------- 阴影 ----------
|
$opo-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
|
$opo-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
|
$opo-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
|
|
// ---------- 控件高度 ----------
|
$opo-control-height-small: 32px;
|
$opo-control-height-base: 36px;
|
