/* ============================================================================ 基理设计规范 v2.1 · CSS 变量（Web 端全量） ---------------------------------------------------------------------------- 纪律：业务代码只用语义 Token（--brand-figure / --brand-solid / --brand-text）， 禁止硬编码色值、间距、字号 —— 否则换肤失效，四条产品线一起塌。 用法： 可切换 genee | dayi | labmai | giot ============================================================================ */ :root, [data-brand="genee"] { /* ===== 品牌色 · 基理（10 级） ===== */ --brand-50: #edfaf5; --brand-100: #d0f4e7; --brand-200: #a3e8d0; --brand-300: #6dd5b5; --brand-400: #3dbc98; --brand-500: #2ba07f; --brand-600: #228568; --brand-700: #1a6a53; --brand-800: #145040; --brand-900: #0e3830; /* 三态主色 —— 业务只许用这三个 */ --brand-figure: var(--brand-500); /* 图形元素：图标/图表/边框/选中底 ≥3:1 */ --brand-solid: var(--brand-600); /* 实心填充 + 白字：主按钮等 ≥4.5:1 */ --brand-text: var(--brand-700); /* 白底上的品牌文字 / 链接 ≥4.5:1 */ --brand-hover: var(--brand-700); --brand-active: var(--brand-800); } /* ===== 产品线切换：只改语义 Token，业务代码零改动 ===== */ [data-brand="dayi"] { --brand-50: #eef4fe; --brand-100: #d6e7fd; --brand-200: #aecefb; --brand-300: #80b0f8; --brand-400: #5c9bf6; --brand-500: #448EF6; --brand-600: #2f74d8; --brand-700: #1f5ab5; --brand-800: #154391; --brand-900: #0d2f6e; --brand-figure: var(--brand-500); --brand-solid: var(--brand-600); --brand-text: var(--brand-700); --brand-hover: var(--brand-700); --brand-active: var(--brand-800); } [data-brand="labmai"] { --brand-50: #fef1f1; --brand-100: #fde0df; --brand-200: #fabfbe; --brand-300: #f49593; --brand-400: #ec6f6c; --brand-500: #E45F59; --brand-600: #c94540; --brand-700: #a53330; --brand-800: #802523; --brand-900: #5c1917; --brand-figure: var(--brand-500); --brand-solid: var(--brand-600); --brand-text: var(--brand-700); --brand-hover: var(--brand-700); --brand-active: var(--brand-800); } [data-brand="giot"] { --brand-50: #edfafc; --brand-100: #d0f3f7; --brand-200: #a3e7ef; --brand-300: #6dd5e3; --brand-400: #64C3D1; --brand-500: #44aab9; --brand-600: #2f8fa0; --brand-700: #1f7282; --brand-800: #145662; --brand-900: #0c3d46; /* giot 500 白字仅 2.73:1 —— 整条线交互色上移一级 */ --brand-figure: var(--brand-600); --brand-solid: var(--brand-700); --brand-text: var(--brand-800); --brand-hover: var(--brand-800); --brand-active: var(--brand-900); } /* ===== 站点主题：西南大学官网风格（校徽蓝 + 金 + 青蓝，参考 swu.edu.cn/xxgk/xxbs.htm） ===== 西大蓝 #084080 为校徽标准蓝（取样自官网校徽，白字对比度 10.2:1）， 金色 #dcac7e 为官网高频装饰色（深蓝底上 5.2:1，仅作装饰/点缀，禁作白底功能色）， 青蓝 #0099c6 为官网辅助色。 */ [data-brand="swu"] { --brand-50: #eef4fb; --brand-100: #d5e4f5; --brand-200: #aac9eb; --brand-300: #7fabe0; --brand-400: #3d7cc4; --brand-500: #1a5aa6; --brand-600: #084080; --brand-700: #063368; --brand-800: #052650; --brand-900: #031a38; --brand-figure: var(--brand-500); /* 图形/图标/边框 白底 6.9:1 */ --brand-solid: var(--brand-600); /* 实心填充 + 白字 10.2:1 */ --brand-text: var(--brand-600); /* 白底品牌文字/链接 10.2:1 */ --brand-hover: var(--brand-700); --brand-active: var(--brand-800); /* SWU 官网特色强调色 */ --brand-accent: #dcac7e; /* 金色：装饰线条/角饰/深蓝底强调文字 */ --brand-accent-strong: #c6945f; /* 金色深色（交互态） */ --brand-accent-light: #f0d9bc; /* 金色浅色（深蓝底文字/下划线） */ --brand-cyan: #0099c6; /* 青蓝：辅助点缀 */ } :root { /* ===== 中性色（全产品线统一，禁止修改） ===== */ --gray-0: #ffffff; --gray-1: #fafafa; --gray-2: #f5f5f5; --gray-3: #f0f0f0; --gray-4: #d9d9d9; --gray-5: #bfbfbf; --gray-6: #999999; --gray-7: #8c8c8c; --gray-8: #666666; --gray-9: #4d4d4d; --gray-10: #404040; --gray-11: #333333; --gray-12: #1a1a1a; /* ===== 语义色：x = 图形 / x-bg = 浅底 / x-text = 文字 ===== */ --color-success: #52c41a; --color-success-bg: #f6ffed; --color-success-text: #237804; --color-warning: #faad14; --color-warning-bg: #fff7e6; --color-warning-text: #ad4e00; --color-error: #f5222d; --color-error-bg: #fff1f0; --color-error-text: #a8071a; --color-info: #1677ff; --color-info-bg: #e6f4ff; --color-info-text: #0958d9; /* ===== 文字三级 ===== */ --text-1: #333333; /* 12.63:1 标题 / 重要内容 */ --text-2: #666666; /* 5.74:1 正文 / 描述 */ --text-3: #8c8c8c; /* 3.36:1 占位符 / 禁用 / 图标 —— 禁止用于说明性正文 */ /* ===== 面与线 ===== */ --bg-page: #f5f5f5; --bg-card: #ffffff; --bg-sunken: #fafafa; --line-1: #f0f0f0; /* 分割线 */ --line-2: #d9d9d9; /* 边框 */ /* ===== 字体 ===== */ --font-sans: 'PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Helvetica Neue',Arial,sans-serif; --font-mono: 'SF Mono','Fira Code',Consolas,monospace; /* ===== 字阶：Web 5 档（小程序 7 档，见下方 WXSS） ===== */ --text-3xl: 1.875rem; /* 30px 700 页面主标题 */ --text-xl: 1.25rem; /* 20px 600 模块标题 */ --text-base: 1rem; /* 16px 500 小标题 */ --text-sm: 0.875rem; /* 14px 400 正文 ★ */ --text-xs: 0.75rem; /* 12px 400 辅助 */ /* ===== 行高：一律无单位 ===== */ --lh-title: 1.3; --lh-data: 1.5; --lh-text: 1.6; /* ===== 间距：4px 步进 ===== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ===== 圆角：4 档 ===== */ --r-sm: 4px; /* 标签、小元素 */ --r-md: 8px; /* 按钮、输入框 */ --r-lg: 12px; /* 卡片、面板 */ --r-xl: 16px; /* 模态框、Hero */ --r-full: 9999px; /* ===== 阴影：3 档 + 弹窗 ===== */ --sh-1: 0 1px 2px 0 rgb(0 0 0 / .05); --sh-2: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06); --sh-3: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .05); --sh-modal: 0 20px 25px -5px rgb(0 0 0 / .15); /* ===== 断点（仅供 JS 参考，CSS 用 media query 字面值） ===== */ --bp-xs: 640px; --bp-sm: 768px; --bp-md: 1024px; --bp-lg: 1280px; /* ===== 层级与尺寸 ===== */ --z-modal: 400; --sidebar-w: 264px; --topbar-h: 60px; } /* ============================================================================ 全局工具类 ============================================================================ */ /* 统一数字等宽 —— 表格、图表、金额、编号必须加 */ .font-number-stable { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* 行高无单位绑定 —— 严禁写 line-height:22px */ .lh-title { line-height: 1.3; } /* 页面主标题、大弹窗标题 */ .lh-data { line-height: 1.5; } /* 表格、列表、表单等密集数据 */ .lh-paragraph { line-height: 1.6; } /* 常规段落、正文内容 */ /* 焦点可见 —— 键盘可达性的最低要求 */ :focus-visible { outline: 2px solid var(--brand-figure); outline-offset: 2px; } /* 尊重系统的减弱动效设置 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* 小程序（WXSS）变量见同目录 genee-tokens.wxss */