diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css index 6bb84be..7091743 100644 --- a/frontend/src/assets/styles/index.css +++ b/frontend/src/assets/styles/index.css @@ -2,32 +2,46 @@ :root { /* - * 品牌色:与登录页视觉体系同一套(原为登录页 scoped 局部变量,布局框架 - * 与系统管理页面共用后提升为全局 token)。 - * 金色分两档:亮金只用于深色底、深金只用于浅色底,保证两处对比度都达标。 + * 品牌色(2026-10-12 视觉方向:企业级扁平 · 轻质感 · 靛蓝点缀)。 + * 靛蓝只作重点点缀(主按钮/链接/焦点/当前菜单),大面积用中性灰白。 + * 设计预览与规范:docs/design/视觉方向预览.html */ - --ys-ink-900: #061a22; - --ys-ink-800: #0a2833; - --ys-ink-700: #0f3646; - --ys-ink-600: #1a4f63; - --ys-gold-bright: #c9a227; - --ys-gold-deep: #8f6520; - --ys-paper: #fafaf7; - --ys-text: #16262d; - --ys-muted: #6b7b84; + --ys-indigo: #2e4ba8; + --ys-indigo-deep: #223a85; + --ys-indigo-wash: #edf1fa; + --ys-paper: #ffffff; + --ys-mist: #f4f5f8; + --ys-line: rgba(28, 35, 51, 0.09); + --ys-ink: #1c2333; + --ys-ink-2: #5b6577; + --ys-ink-3: #9aa3b2; /* - * Element Plus 主色 = 赭金(浅色底配白字约 6.2:1)。 + * 旧 token 名保留映射(BasicLayout / 登录页存量引用,值迁移到新体系: + * 深水青 → 冷墨系、金色 → 靛蓝系),存量页面迁移完成后移除。 + */ + --ys-ink-900: #16203a; + --ys-ink-800: #1c2333; + --ys-ink-700: #242e4a; + --ys-ink-600: #3a4a6e; + --ys-gold-bright: #6d81c2; + --ys-gold-deep: #2e4ba8; + + --ys-text: #1c2333; + --ys-muted: #5b6577; + + /* + * Element Plus 主色 = 靛蓝(白字对比约 7.5:1)。 * 色阶为按 Element Plus 公式「主色与白色混合」预先算好的静态值 —— * 不用 color-mix(),避免依赖较新的浏览器特性。 */ - --el-color-primary: #8f6520; - --el-color-primary-light-3: #b19363; - --el-color-primary-light-5: #c7b290; - --el-color-primary-light-7: #ddd1bc; - --el-color-primary-light-8: #e9e0d2; - --el-color-primary-light-9: #f4f0e9; - --el-color-primary-dark-2: #72511a; + --el-color-primary: #2e4ba8; + --el-color-primary-light-3: #6d81c2; + --el-color-primary-light-5: #97a5d4; + --el-color-primary-light-7: #c0c9e5; + --el-color-primary-light-8: #d5dbee; + --el-color-primary-light-9: #eaedf6; + --el-color-primary-dark-2: #253c86; } * { @@ -46,8 +60,8 @@ body { font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; font-size: 14px; - color: #303133; - background-color: #f5f7fa; + color: var(--ys-ink); + background-color: var(--ys-mist); -webkit-font-smoothing: antialiased; }