/* ============================================================ 网联卓越 CRM Design System — Global Entry Consumers link THIS file only. Imports reach all tokens + fonts. ============================================================ */ /* ============================================================ 网联卓越 CRM — Webfonts 2026-07-26 起不再加载任何网络字体:界面统一用系统无衬线栈 (macOS 苹方 / Windows 微软雅黑,见 tokens/typography.css 的 --font-sans)。 原来这里 @import 了 Google Fonts 的 Inter —— 中文界面里它只影响拉丁字形, 与苹方混排字重不齐(客户原话「花里胡哨」),还多一次外链阻塞渲染。 ============================================================ */ /* ============================================================ 网联卓越 CRM — Color Tokens 飞书 (Lark) 设计语言：明亮品牌蓝 · 通透浅灰 · 柔和弥散投影 ============================================================ */ :root { /* ---- 中性 (界面骨架 · Lark 文本/填充体系) ---- */ --bg-app: #F5F6F7; /* 页面底 (浅灰) */ --bg-base: #FFFFFF; /* 卡片 / 面板底 (白) */ --bg-subtle: #F7F8FA; /* 表头 / 分区底 */ --bg-hover: #F2F3F5; /* 行 hover / 次级按钮 hover */ --border: #E5E6EB; /* 卡片 / 区块边框 (极淡) */ --border-strong: #D0D3D9; /* 输入框 / 强调分割 */ --text-primary: #1F2329; /* 标题 / 主文 */ --text-secondary: #4E5969; /* 次要文字 / 标签 */ --text-tertiary: #6B7280; /* 占位符 / 弱信息 */ --text-on-accent: #FFFFFF; /* 强调底上的文字 */ --text-link: #3370FF; /* 链接文字 (蓝) */ /* ---- 强调色 (唯一主色 · 飞书蓝) ---- */ --accent: #3370FF; --accent-hover: #245BDB; --accent-active: #1D46B8; --accent-grad: linear-gradient(135deg, #3D7BFF 0%, #2A5FE0 100%); /* @kind other */ --sidebar-grad: linear-gradient(180deg, #FCFCFD 0%, #F7F8FA 100%); /* @kind other */ --accent-subtle: #EBF1FF; /* 选中行底 / 标签底 / 选中导航块 */ --accent-text: #3370FF; /* ---- 语义色 (Lark 状态色 · 低饱和) ---- */ --success: #2EA121; --success-bg: #E8F5E6; --warning: #D9820B; --warning-bg: #FDF4E6; --danger: #D83931; --danger-bg: #FCECEB; --info: #3370FF; --info-bg: #EBF1FF; /* ---- 对象图标块色 (彩色圆角块 + 白色线性图标) ---- */ --entity-account: #1CA4A4; /* 客户 */ --entity-opportunity: #E68A00; /* 商机 */ --entity-contract: #2EA121; /* 合同 */ --entity-follow: #6E58E3; /* 跟进 */ --entity-dispatch: #F2533A; /* 派单 */ --entity-engineer: #8A5CF6; /* 工程师绩效 */ --entity-dashboard: #3370FF; /* 驾驶舱 */ /* ---- 业务语义 · 商机阶段 (漏斗顺序) ---- */ --stage-propose: #646A73; --stage-propose-bg: #F0F1F3; /* 初步提议 */ --stage-test: #3370FF; --stage-test-bg: #EBF1FF; /* 测试阶段 */ --stage-quote: #D9820B; --stage-quote-bg: #FDF4E6; /* 方案报价 */ --stage-negotiate: #F2533A; --stage-negotiate-bg:#FDECE8; /* 协商议价 */ --stage-won: #2EA121; --stage-won-bg: #E8F5E6; /* 赢单 */ --stage-lost: #D83931; --stage-lost-bg: #FCECEB; /* 丢单客户（与 danger 一致） */ /* ---- 业务语义 · 派单阶段 ---- */ --dispatch-comm: #646A73; --dispatch-comm-bg: #F0F1F3; /* 沟通 */ --dispatch-test: #3370FF; --dispatch-test-bg: #EBF1FF; /* 测试 */ --dispatch-deploy: #8A5CF6; --dispatch-deploy-bg: #F1ECFE; /* 部署 */ --dispatch-accept: #1CA4A4; --dispatch-accept-bg: #E5F6F6; /* 验收 */ --dispatch-support: #D9820B; --dispatch-support-bg: #FDF4E6; /* 售后答疑 */ /* ---- 业务语义 · 产品标签 ---- */ --product-feilian: #3370FF; --product-feilian-bg: #EBF1FF; /* 飞连 · 蓝 */ --product-flinco: #D9820B; --product-flinco-bg: #FBF0DD; /* Flinco NaaS · 黄 */ --product-sysint: #1F8A5B; --product-sysint-bg: #E6F4EC; /* 系统集成 · 绿 */ /* ---- 焦点环 ---- */ --focus-ring: 0 0 0 3px rgba(51, 112, 255, 0.18); /* ---- 阴影 (柔和弥散 · 多层 · 高级通透) ---- */ --shadow-card: 0 1px 2px rgba(31, 35, 41, 0.04), 0 4px 14px rgba(31, 35, 41, 0.05); --shadow-raised: 0 2px 6px rgba(31, 35, 41, 0.06), 0 10px 28px rgba(31, 35, 41, 0.09); --shadow-overlay: 0 8px 30px rgba(31, 35, 41, 0.13); --shadow-modal: 0 16px 48px rgba(31, 35, 41, 0.18); } /* ============================================================ 网联卓越 CRM — Typography Tokens 中性无衬线系统字体(飞连/Keep 控制台同路数)· 金额用 tabular-nums 2026-07-26:客户在会上明确说字体「花里胡哨、太丑」。两处改动: ① 字体族去掉 Inter 网络字体 —— 中文界面里 Inter 的拉丁字形和苹方混排字重不齐、 还多一次 Google Fonts 外链请求;统一回系统栈(macOS 苹方 / Windows 微软雅黑), 跟飞连控制台一致。数字栈不再用等宽 mono(SF Mono 的窄字形在中文里很跳), 改成同一套 sans + font-variant-numeric: tabular-nums —— 依然等宽对齐,但视觉是一套字。 ② 字号阶梯收敛:原来 20/15/30/14/13/12 六档跨度大(KPI 30px 尤其突兀), 收成 18/14/24/13/12/12,行高同步收紧。 ============================================================ */ :root { /* ---- 字体族(中性系统栈,零网络字体) ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: var(--font-sans); /* 数字靠 font-variant-numeric: tabular-nums 对齐,不换字族 */ /* ---- 字号 / 行高 ---- */ --text-h1: 18px; --leading-h1: 26px; /* 页面标题 */ --text-h2: 14px; --leading-h2: 22px; /* 区块标题 / 卡头 */ --text-kpi: 24px; --leading-kpi: 32px; /* KPI 大数字 */ --text-body: 13px; --leading-body: 20px; /* 正文 */ --text-label: 12px; --leading-label: 18px; /* 次要 / 标签 */ --text-caption: 12px; --leading-caption: 16px; /* 微标签 */ /* ---- 字重(收敛到三档:常规 / 中 / 半粗;不再用 700 一档打粗) ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 600; /* ---- 字间距 ---- */ --tracking-caption: 0.01em; } /* ---- 排印工具类 (可选直接用) ---- */ .t-h1 { font: var(--weight-semibold) var(--text-h1)/var(--leading-h1) var(--font-sans); color: var(--text-primary); } .t-h2 { font: var(--weight-semibold) var(--text-h2)/var(--leading-h2) var(--font-sans); color: var(--text-primary); } .t-kpi { font: var(--weight-semibold) var(--text-kpi)/var(--leading-kpi) var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-primary); } .t-body { font: var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans); color: var(--text-primary); } .t-label { font: var(--weight-regular) var(--text-label)/var(--leading-label) var(--font-sans); color: var(--text-secondary); } .t-caption { font: var(--weight-medium) var(--text-caption)/var(--leading-caption) var(--font-sans); letter-spacing: var(--tracking-caption); color: var(--text-tertiary); } /* 金额: 等宽数字 + 右对齐 */ .t-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; } /* ============================================================ 网联卓越 CRM — Spacing / Radius / Border / Layout Tokens 8pt 网格 ============================================================ */ :root { /* ---- 间距 (8pt 网格) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* ---- 圆角 (飞书 · 圆润现代) ---- */ --radius-sm: 4px; /* 标签 / 小元素 */ --radius-md: 6px; /* 按钮 / 输入 */ --radius-lg: 10px; /* 卡片 / 看板列 / 对象图标块 */ --radius-xl: 14px; /* 模态 / 大浮层 */ --radius-full: 999px; /* ---- 边框 ---- */ --border-width: 1px; --border-line: 1px solid var(--border); --border-line-strong: 1px solid var(--border-strong); /* ---- 布局尺寸 ---- */ --sidebar-w: 240px; /* 侧边栏导航行高。留白版对比只需改这两个值:--sidebar-w: 280px; --nav-row-h: 48px; */ --nav-row-h: 36px; --topbar-h: 56px; --drawer-w: 480px; --modal-max: 560px; --content-max: 1280px; /* ---- 控件高度 (飞书 · 更松更通透) ---- */ --control-h: 36px; --row-h: 48px; --kanban-col-w: 288px; --globalheader-h: 56px; --navbar-h: 48px; } /* R3-P2-12: 看板横向溢出的可见滚动提示(1280×720 下商机/派单列超宽) */ /* 注意:不能同时写 scrollbar-width/scrollbar-color 标准属性 — Chrome 会因此禁用 ::-webkit-scrollbar 自定义绘制,退回 overlay 隐藏滚动条 */ .crm-board::-webkit-scrollbar { height: 10px; } .crm-board::-webkit-scrollbar-thumb { background: #9aa1ac; border-radius: 6px; } .crm-board::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary, #6b7280); } .crm-board::-webkit-scrollbar-track { background: #eceef1; border-radius: 6px; } /* 原生