/* ========================================================================== medradar 亮色主题 -------------------------------------------------------------------------- 分层靠「浅灰画布 + 纯白卡片 + 阴影阶梯」，不靠深色块、也**不靠描边** （2026-09-23 边框饮食：容器一律不描边，边框只留输入框、表行分隔线、聚焦环）。 表格是这套系统的主体，所以表头吸顶、行悬停、数值列等宽数字这些细节 比配色更影响观感，都单独处理过。 ========================================================================== */ :root { /* ====================================================================== 设计变量：**与 Arco Design 同构**（2026-09-18） ---------------------------------------------------------------------- 分两层，各有各的用途： ① 第一层用 **Arco 的名字与刻度**（色阶是 RGB 三元组、语义别名、 圆角 0/2/4/8、字号 12/14/16/20/24）——这样两条产品线（geohub 用 Arco） 在视觉上是一个系统；将来这一页真要换成 Arco 组件时，这层能 1:1 喂给 Arco 的 `ConfigProvider` token，不用重新调色。 ② 第二层是 **medradar 既有的变量名，全部保留为别名**——app.js 与 theme.css 里几千处引用的是它们，改名等于全站重写一遍，收益为零。 取值来源：Arco 编译产物（`@arco-design/web-react@2 dist/css/arco.css`） **实测抄录**，不是凭印象写的。两处**有意偏离**都写在下面各自的注释里。 ====================================================================== */ /* ── Arco 中性色阶（RGB 三元组：可拼 rgba(var(--gray-6), .5) 叠透明度）── */ --gray-1: 247, 248, 250; --gray-2: 242, 243, 245; --gray-3: 229, 230, 235; --gray-4: 201, 205, 212; --gray-5: 169, 174, 184; --gray-6: 134, 144, 156; --gray-7: 107, 119, 133; --gray-8: 78, 89, 105; --gray-9: 39, 46, 59; --gray-10: 29, 33, 41; /* ── 品牌主色：医知雷达绿 #0f9d78 的 Arco 式色阶 ────────────────────── 不是 Arco 默认蓝（--arcoblue-6 = 22,93,255 / #165DFF）——主色是品牌资产， 改成蓝等于换品牌。1..10 按 Arco 的明度阶梯生成（1-5 向白、7-10 向黑）， 这样它和 Arco 的其它色阶放在一起是同族的。 */ --primary-1: 231, 245, 242; --primary-2: 178, 224, 212; --primary-3: 130, 204, 185; --primary-4: 87, 186, 161; --primary-5: 51, 172, 140; --primary-6: 15, 157, 120; --primary-7: 13, 133, 102; --primary-8: 11, 110, 84; --primary-9: 8, 86, 66; --primary-10: 6, 63, 48; /* ── 语义色（Arco 的 danger/warning/success 就是 red/orange/green 色阶）── */ --danger-1: 255, 236, 232; --danger-6: 245, 63, 63; --warning-1: 255, 247, 232; --warning-6: 255, 125, 0; --success-1: 232, 255, 234; --success-6: 0, 180, 42; /* ── 语义别名（映射关系同样抄自 Arco：text-1..4 = gray-10/8/6/4 等）── */ --color-text-1: rgb(var(--gray-10)); --color-text-2: rgb(var(--gray-8)); --color-text-3: rgb(var(--gray-6)); --color-text-4: rgb(var(--gray-4)); --color-bg-1: #ffffff; --color-bg-2: rgb(var(--gray-1)); --color-bg-3: rgb(var(--gray-2)); --color-bg-4: rgb(var(--gray-3)); --color-border-1: rgb(var(--gray-2)); --color-border-2: rgb(var(--gray-3)); --color-border-3: rgb(var(--gray-4)); --color-border-4: rgb(var(--gray-6)); --color-fill-1: rgb(var(--gray-1)); --color-fill-2: rgb(var(--gray-2)); --color-fill-3: rgb(var(--gray-3)); --color-fill-4: rgb(var(--gray-4)); /* ── 圆角：Arco 的刻度名，取值从 0/2/4/8 抬到 0/4/6/12（2026-09-23）───── 改的是**取值**不是名字——名字本来就是 Arco 的，将来喂 ConfigProvider 是同一次改动。 为什么抬：2~4px 的控件圆角是"老一辈后台"的第一眼来源；面板用 8px 又配 1px 边框时， 看着像表格的分格线，不像一张卡片。全站引用 --radius-sm / --radius 的地方一起生效。 */ --border-radius-none: 0; --border-radius-small: 4px; --border-radius-medium: 6px; --border-radius-large: 12px; --border-radius-circle: 50%; /* ── 字号与间距：按 Arco 的刻度定义 ─────────────────────────────────── Arco 没把字号/间距导出成 CSS 变量（编译产物里是字面 px，实测），所以这两个刻度 用的是它的规范值、名字是我们自己的。 */ --font-size-sm: 12px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --font-size-2xl: 24px; /** * **第二处有意偏离：全站正文 13px**（Arco 的正文是 14px）。 * 本项目表格密集，13px 是刻意的密度选择——登记成变量而不是散落的字面量： * 偏离是有意的，而且要能一处改。 */ --font-size-table: 13px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* ══ 以下为 medradar 既有变量名（别名，保持不变）══════════════════════ 旧名 → Arco 层。颜色都走 rgb(var(--…))，与 Arco 的合成方式一致。 */ /** * `--bg` 的角色是**浅填充**：悬停底、chip 底、进度槽、代码底，全站 27 处引用它。 * 页面画布另走 `--color-bg-3`（见 body 一条）——原先两者共用一个值，于是卡片与背景 * 几乎同色，只能靠 1px 边框分开。拆开之后边框才能退场（2026-09-23）。 */ --bg: var(--color-bg-2); --card: var(--color-bg-1); /* 原 #fbfcfd（几乎纯白）→ Arco 的 fill-1：表头/斑马纹的底，略微加深一档 */ --card-2: var(--color-fill-1); --border: var(--color-border-2); --border-strong: var(--color-border-3); --text: var(--color-text-1); --dim: var(--color-text-2); --dim-2: var(--color-text-3); /** * 品牌绿**分两个角色**（2026-09-18 按实测对比度定的，见各值后面的数字）： * · `--accent` = -6 #0f9d78：**填充与图形**（图标、进度条、选中底、logo 信号点、 * 边框、焦点环）。3.43:1 —— 图形/大字够（门槛 3.0），**当正文不行** * · `--accent-text` = -8 #0b6e54：**浅底上的绿字**（链接、当前导航、hover、 * 绿底徽标上的字）。6.23:1 —— 过 AA（门槛 4.5） * · `--accent-strong` = -7 #0d8566：**绿底白字的填充**（主按钮）。白字在其上 4.60:1 ✓ * 原先三者是同一个绿：绿字只有 3.43、白字在绿底上也只有 3.43，**都没过 AA**。 * 所以这不是调色偏好，是把「色块」和「文字」拆开——同一个色相，不同的明度职责。 */ --accent: rgb(var(--primary-6)); --accent-text: rgb(var(--primary-8)); --accent-strong: rgb(var(--primary-7)); /** * Arco 的 hover 取 -5（更亮）；我们取 -7（更深）。 * 有意偏离：主色按钮是「绿底白字」，浅底上悬停变亮会压低对比度，加深更稳。 */ --accent-hover: rgb(var(--primary-7)); --accent-weak: rgb(var(--primary-1)); /* 分数档位（高/中/低）借用 Arco 的语义色，不再是各自拍的颜色 */ --high: rgb(var(--danger-6)); --high-weak: rgb(var(--danger-1)); --mid: rgb(var(--warning-6)); --mid-weak: rgb(var(--warning-1)); --low: var(--color-text-3); --low-weak: var(--color-fill-2); /** 小计行底色：要明显区别于白底，否则小计会被当成明细读 */ --row-sum: var(--color-fill-2); /** * 阴影阶梯（2026-09-23）：原来只有一档 `0 1px 2px rgba(29,33,41,.04)`—— * 4% 透明度的一像素阴影在浅底上等于不可见，卡片于是只能靠边框立起来， * "边框密集"的观感就是这么来的。三层各管一件事，别互相顶替： * -1 静置卡片 / -2 悬浮与下拉 / -3 弹层与抽屉。 * 旧名 `--shadow`、`--shadow-lg` 保留为别名，全站上千处引用不用动。 */ --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1); --shadow-2: 0 4px 16px -4px rgba(16, 24, 40, 0.12); --shadow-3: 0 12px 32px -8px rgba(16, 24, 40, 0.18); --shadow: var(--shadow-1); --shadow-lg: var(--shadow-3); --radius: var(--border-radius-large); --radius-sm: var(--border-radius-medium); /** * 动效：原来 12 处各写各的（.12s / .15s / .22s / ease / linear）。 * 统一到两档时长 + 一条缓出曲线——"手感"就来自这两件事， * 不统一时同一屏会出现快慢不一的三种节奏。文件末尾有 prefers-reduced-motion 兜底。 */ --motion-fast: 120ms; --motion-base: 180ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); /** 顶栏高度。侧栏的 sticky/height 都要减掉它，改这里一处即可 */ --topbar-h: 52px; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; /* 画布比浅填充（--bg）再深一档：白卡片靠明度差自己浮起来，不必再描边 */ background: var(--color-bg-3); color: var(--text); font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } /* ------------------------------- 布局 ------------------------------- */ /* 整屏顶栏 + 下方「侧栏 | 内容」两栏。 顶栏横跨整个宽度（含侧栏上方），品牌在左、账号在右——对齐 Beisen 那类 后台的骨架：顶栏是全局条（我是谁、跨模块入口），侧栏是模块内导航。 历史：账号身份原先浮在内容区右上角，为了不和页头按钮撞车，页头得留 216px 右内边距，窄屏还会把主操作挤到第二行。上顶栏后这些避让全部不需要了。 */ .shell { display: flex; flex-direction: column; min-height: 100vh; } .topbar { position: sticky; top: 0; z-index: 30; flex: none; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 18px; background: var(--card); border-bottom: 1px solid var(--color-border-1); } .topbar .spacer { flex: 1; } /* .brand 的基础布局必须挂在通用选择器上：登录页也用 .brand，而它自己的 `.brand { justify-content: center; gap: 11px }` 是**假设**这里已经是 flex 才写的。 历史上 display:flex 只挂在 .side 下，所以登录页那两条声明一直是失效的—— 品牌块实际是行内布局、左对齐，只是行内基线 + .names 的间距碰巧看着不别扭，才没被发现。 把它收窄回 .topbar 会让登录页退回那个状态（品牌块不再居中）。 */ .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; } .topbar .brand { gap: 9px; } .topbar .brand .cn { font-size: var(--font-size-lg); } .topbar .brand .en { font-size: var(--font-size-sm); } .layout { flex: 1; display: flex; min-height: 0; } .side { width: 208px; flex: 0 0 208px; background: var(--card); border-right: 1px solid var(--color-border-1); display: flex; flex-direction: column; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); } /* 品牌名排版：中文名为主、英文名为辅。 英文名跟着 .names 自己的 4px 间距走，不吃 .brand 的 gap—— 之前英文名跟着 flex gap 走，和中文名之间隔了 17px，看着像两个不相干的词。 */ /* 品牌标记：雷达量程圈 + 医疗十字（见 docs/logo.md） 缺口环缓慢旋转，读作「波束在扫」；再慢也必须有 prefers-reduced-motion 开关—— 主题动效缺失这一条在 web-design-guidelines 里是明确要修的。 */ .brand .names { display: inline-flex; align-items: baseline; gap: 4px; } .brand .cn { font-weight: 700; letter-spacing: .2px; white-space: nowrap; } .brand .en { font-weight: 400; letter-spacing: .2px; white-space: nowrap; color: var(--dim-2); } .login-page .brand .cn, .p-brand .cn { font-size: var(--font-size-lg); } /* 标记配色：结构（同心环 + 虚线外环）走 --mark-structure，中心点走 currentColor。 深色底上把 --mark-structure 换成浅色即可，点色不用动。 */ .brand .mark { color: var(--accent); --mark-structure: #101a2e; flex: none; } /* 转的是虚线外环（.ring-scan）——自转读作「正在扫描」，而且虚线没有明确的前缘， 天生不会像「圆心射出的实线」那样被看成钟表指针。 transform-box 必须是 view-box：fill-box 会拿虚线环自己的包围盒当原点， 而它的包围盒中心不在圆心（虚线有缺口），一转就歪出画面。 */ .brand .mark .ring-scan { transform-box: view-box; transform-origin: 32px 32px; animation: sweep 6s linear infinite; } @keyframes sweep { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .brand .mark .ring-scan { animation: none; } } /* hidden 属性必须真的能藏东西。 浏览器对 [hidden] 的默认 display:none 来自 UA 样式表，**任何作者样式里的 display 都会盖掉它**—— 于是 nav.hidden = true 这种写法"属性生效了、视觉没生效"（.nav a 有 display:flex）。 实测踩到：团队入口本该只对主管可见，销售登录后照样看得见、点进去被弹回机构线索。 这条兜底一劳永逸，别再逐个元素去猜它有没有 display 规则。 */ [hidden] { display: none !important; } /* 顶部留白原来由品牌块撑开（品牌块已上顶栏），所以这 14px 得自己给 */ .nav { padding: 14px 10px 4px; display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--dim); font-weight: 500; } .nav a:hover { background: var(--bg); color: var(--text); text-decoration: none; } .nav a.active { background: var(--accent-weak); color: var(--accent-text); font-weight: 600; } .nav .ico { width: 16px; text-align: center; font-size: var(--font-size-base); } /* 顶栏右侧：账号入口 -------------------------------------------------------------------------- 位置：侧栏底部 → 内容区右上角浮层 → 顶栏。 形态：带框的账号 chip → 素圆头像（对齐 geohub 的做法）。 右上角不该出现一个"单独的框"：那是把「设置面板」的语汇放进了全局条， 而且 260px 的带框块和左侧品牌块各占一头，看着像两个平级的模块。 一个圆头像就够了——它读起来是「操作者」，点开才是「账号与操作」。 账号名和角色移进下拉（头部），头像 title 上也带着。 这个取舍是有代价的：多账号下「我现在是哪个账号」不再一眼可见—— 如果后面觉得销售容易拿错账号，就在头像左边补一行不带框的小字（.idwho）， 不要退回带边框的块。 */ .idbar { position: relative; flex: none; } .idav { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; /* 实心饱和圆（对齐 geohub）：淡底 + 同色字太轻，会被读成"在线状态点"而不是账号入口 */ background: var(--accent); color: #fff; cursor: pointer; } .idav .av { font-size: var(--font-size-sm); font-weight: 700; line-height: 1; } /* hover 用加深而不是加边框：边框一出现就又变回"框"了 */ .idav:hover { background: var(--accent-hover); } .idav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .idmenu { position: absolute; top: calc(100% + 8px); right: 0; width: 208px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--border-radius-large); padding: 5px; box-shadow: 0 10px 28px rgba(16, 24, 40, .14); } .idmenu .hd { padding: 8px 10px 7px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .idmenu .hd .n { font-size: var(--font-size-table); font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .idmenu .hd .r { font-size: var(--font-size-sm); color: var(--dim-2); margin-top: 1px; } .idmenu button { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: var(--font-size-table); padding: 8px 10px; border-radius: var(--border-radius-medium); cursor: pointer; color: var(--text); } .idmenu button:hover { background: var(--accent-weak); color: var(--accent-text); } .idmenu button.danger:hover { background: var(--low-weak); color: var(--low); } .side .links button:hover { color: var(--accent-text); } .side .links button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .main { flex: 1; min-width: 0; padding: 24px 28px 64px; } /* 折叠区：低频的东西（渠道覆盖、名单导入）收在这里，默认收起，不占导航层级 */ details.fold { background: var(--card); border: 1px solid transparent; border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow-1); overflow: hidden; } details.fold > summary { padding: 13px 16px; cursor: pointer; font-size: var(--font-size-base); font-weight: 600; display: flex; align-items: center; gap: 9px; list-style: none; user-select: none; } details.fold > summary::-webkit-details-marker { display: none; } details.fold > summary::before { content: '▸'; color: var(--dim-2); font-size: var(--font-size-sm); transition: transform var(--motion-fast) var(--ease); } details.fold[open] > summary::before { transform: rotate(90deg); } details.fold > summary:hover { background: var(--card-2); } details.fold > summary .sub { font-weight: 400; color: var(--dim-2); font-size: var(--font-size-sm); } details.fold[open] > summary { border-bottom: 1px solid var(--color-border-1); } /* 折叠体自己带内距：`.body` 的 16/18 是挂在 `.panel` 下的，折叠区里得单独给一次， 否则内容贴着边（2026-09-23 把折叠区收进原语时补的） */ details.fold > .body { padding: 14px 18px; } details.fold .table-wrap { max-height: 460px; } /* 页头右侧不再需要给身份块留白：身份已上顶栏，页头整行都归它自己 */ .page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .page-head h1 { margin: 0; font-size: var(--font-size-xl); font-weight: 650; letter-spacing: -.2px; } .page-head .sub { color: var(--dim-2); font-size: var(--font-size-sm); } .page-head .spacer { flex: 1; } /** * 胶囊选择组（记一笔的「这次是什么接触」与「拨打结果」）。 * * 为什么用胶囊而不是下拉：这两个选择**都要一眼看全**——下拉只显示当前项， * 而"记电话时能选什么结果"本身就是在教销售该记什么（接通/没人接/空号/转错人/一听就挂）。 * 单选、可再点一次取消（允许"先记内容，结果待补"）。 */ .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; } .chip { font: inherit; font-size: var(--font-size-sm); line-height: 1.5; padding: 3px 10px; border-radius: 14px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--card); color: var(--dim); } .chip:hover { border-color: var(--accent); color: var(--accent-text); } .chip.active { background: var(--accent-weak); border-color: var(--accent-weak); color: var(--accent-text); font-weight: 600; } .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /** * 侧栏：5 个一级菜单（2026-09-20 三改，按用户给的参照形态）。 * * 走过的三个版本，记着别再绕回去： * 一版：13 项平铺 → 靠小灰字分组。问题：**层次倒挂**（组标题 13px 最浅灰，条目 14px 带图标）， * 一级像装饰、二级像主体。 * 二版：组标题变可折叠的父级、子项缩进。层次对了，但组标题**没有图标**、 * 子项一直摊开——还是"一列文字"，不是"可扫的功能入口"。 * 三版（本版）：一级项统一成「图标 + 标题」（带子项的右边一个 ›），子项默认折起。 * 与同类产品的侧栏形态一致：一级是可扫的入口，点开才看到子项。 * * 两条护栏保留（改了这块别拆）： * ① **当前页所在组自动展开**（app.js 的 setActiveTab）——折起后看不到自己在哪 * 是折叠唯一的真代价，用自动展开消掉； * ② 空组自动隐藏（app.js 按角色算）——销售不该看到空的「管理」。 * 折叠状态按组名存 localStorage：个人偏好，不进 URL、不跟账号走。 */ .nav-group { margin-top: 2px; } .nav-group[hidden] { display: none; } /* 一级项：图标 + 标题 + 右侧 ›，与叶子节点（a）同一套尺寸，读起来是同一层级 */ .nav-t { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; margin: 0; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font: inherit; font-weight: 500; color: var(--dim); } .nav-t:hover { background: var(--bg); color: var(--text); } .nav-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .nav-t-label { flex: 1; min-width: 0; } /* › 朝右=折起，展开时转 90° 朝下 */ .nav-caret { color: var(--dim-2); font-size: 12px; transition: transform var(--motion-fast) var(--ease); } .nav-group.open .nav-caret { transform: rotate(90deg); } /* 组内有当前页时，一级项也标出"这组里有你所在的位置"——否则折起时完全看不出来 */ .nav-group.has-active > .nav-t { color: var(--text); font-weight: 600; } .nav-group-b { display: none; flex-direction: column; gap: 2px; } .nav-group.open .nav-group-b { display: flex; } /** * 子项：**带图标**，且图标与一级标题的**文字**对齐（缩进 36px）。 * * 上一版我把子项图标藏了（`.nav-group-b a .ico { display: none }`），想做成"子项只留文字"—— * 用户一眼看出不对：**子项是功能入口，光有四个字认起来慢**；而且那版还藏漏了一个 * （医院名册用的是 ``，不受 `.ico` 规则管），于是"有的有图标有的没有"， * 看起来像 bug。现在统一：一级、子项都有图标，子项缩进到一级标题文字下方， * 形成"父带图标 → 子在文字列下再带图标"的两级网格。 * 字号保持 sm：层级靠缩进与字号，不靠"把子项做小到看不清"。 */ .nav-group-b a { padding-left: 36px; font-size: var(--font-size-sm); } .nav-group-b a .ico { width: 15px; height: 15px; } /* ------------------------------ 控件 ------------------------------ */ button { font: inherit; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--card); color: var(--text); padding: 7px 13px; transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } button:hover { background: var(--bg); } /* 底色用 -7 而不是 -6：白字在 -6 上只有 3.43:1（不过 AA），在 -7 上是 4.60:1 ✓ */ button.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; font-weight: 600; } button.primary:hover { background: var(--accent-hover); } /* 破坏性确认（停用账号、降级权限…）：描边+文字用高危色，**不做实心填充**—— 实心红底配白字对比度只有 3.4:1 左右，不过 AA；而描边形态与全站 button.mini.danger 一致 */ button.danger { border-color: var(--high); color: var(--high); } button.danger:hover { background: var(--high-weak); } button.ghost { border-color: transparent; background: transparent; color: var(--dim); } button.ghost:hover { background: var(--bg); color: var(--text); } button:disabled { opacity: .55; cursor: not-allowed; } /* 跳转类动作（打开报告）用 ：它是导航不是提交，浏览器该给的右键/新标签/复制链接 都只有链接形态才有。造型与 button 对齐，免得同一条按钮行里两种样子。 primary 用 -7 同 button.primary：白字在 -6 上不过 AA（见上） */ a.btn { display: inline-flex; align-items: center; gap: 4px; font: inherit; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--card); color: var(--text); padding: 7px 13px; text-decoration: none; transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } a.btn:hover { background: var(--bg); } a.btn.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; font-weight: 600; } a.btn.primary:hover { background: var(--accent-hover); } input, select, textarea { font: inherit; background: var(--card); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 10px; outline: none; transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); } input:focus, select:focus, textarea:focus { /* 边框走 -8、光晕用同档的淡色：焦点环的边框与光晕必须同一档，否则看起来是两套绿 */ border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(11, 110, 84, .12); } textarea { width: 100%; min-height: 110px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; } .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .filters input[type=search] { min-width: 210px; } .note { color: var(--dim-2); font-size: var(--font-size-sm); } /* 分段切换（监测页内部） */ .seg { display: inline-flex; gap: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 3px; } .seg a { padding: 6px 13px; border-radius: var(--border-radius-medium); color: var(--dim); font-size: var(--font-size-table); font-weight: 500; } .seg a:hover { color: var(--text); text-decoration: none; } .seg a.active { background: var(--card); color: var(--text); font-weight: 600; box-shadow: var(--shadow); } /* ------------------------------ 卡片 ------------------------------ */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 12px; margin-bottom: 16px; } .card { background: var(--card); border: 1px solid transparent; border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-1); } .card .k { font-size: var(--font-size-sm); color: var(--dim); margin-bottom: 4px; } .card .v { font-size: var(--font-size-2xl); font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .card .v.hot { color: var(--high); } .card .v.good { color: var(--accent-text); } .card .v.dim { color: var(--dim-2); } /* 缺口/逾期这类「要盯」的值。介于 hot（红，出事了）与 dim（灰，没数）之间一档 */ .card .v.warn { color: var(--mid); } .card .hint { font-size: var(--font-size-sm); color: var(--dim-2); margin-top: 2px; } /* 卡片里的动作入口（业绩卡的「设定目标」）：贴着 hint 往下排，不跟数值抢行 */ .card-act { margin-top: 8px; } /** * 统计条：把三张大卡压成一条。 * * 为什么压：投放分布页的主体是矩阵，而「侧栏 + 页头 + 3 张卡 + 筛选栏 + 两行表头」 * 之后首屏只剩十行左右数据。KPI 是陪衬，不该吃掉矩阵的纵向空间。 * 所以卡片变矮（数字与说明同一行）、间距收紧，但**保留"每个数都带基准"这个原则**—— * 单独一个「2814」没有决策价值，要有分母或一句判断。 */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; } .stat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; background: var(--card); border: 1px solid transparent; border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-1); color: inherit; text-decoration: none; } a.stat:hover { border-color: transparent; box-shadow: var(--shadow-2); } .stat .k { font-size: var(--font-size-sm); color: var(--dim); } /* 只有一个数用强调色（"先看这个"），其余中性——三张卡各用一个色系会变成红绿灯，读者无法判断优先级 */ /* 数就是主角：20px 时和页头 h1 一样大，"先看这个"的层级出不来，抬到 24px */ .stat .v { font-size: var(--font-size-2xl); font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; } .stat.accent .v { color: var(--accent-text); } .stat .hint { font-size: var(--font-size-sm); color: var(--dim-2); width: 100%; } /** * 概览「本月业绩」压成的单行摘要。 * * 那四个数（本月已成交 / 未结 / 预计合计 / 距目标）是 `/api/crm/report/forecast` 的 * 同一批字段，「经营分析 → 业绩」已经用四张卡画过一遍；在概览上再来四张等于把那边重印， * 而且没数据时四张卡全是 0、各自还拖一句解释。一行就够，细节点进经营分析。 * 分隔符用独立的 `` 而不是文本里的 ` · `：窄屏折行时分隔号不会孤零零留在行尾。 */ .sum-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: var(--font-size-table); } .sum-line > span { color: var(--dim); } .sum-line b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .sum-line > i { color: var(--color-text-4); font-style: normal; } .sum-line .mini { margin-left: auto; } /* 只给读屏用的文本（空值、图标含义等） */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /** * 列分组表头：把平台列分成「付费投放证据」与「仅收录」两组。 * * 这是全系统最核心的一条区分（付费位 = 已经花过钱、是要打的理由；弱信号 = 只是被收录）， * 但原来两类列长得一模一样，一屏扫下去分不出哪几列有付费证据。 * 分组行给出边界，弱信号那组再整体降饱和 + 浅底，形成"主/次"的视觉层级。 */ table.matrix thead tr.group-row th { position: sticky; top: 0; z-index: 3; font-size: var(--font-size-sm); font-weight: 600; color: var(--dim); background: var(--card-2); border-bottom: 1px solid var(--border); text-align: center; padding: 4px 8px; } table.matrix thead tr.group-row th.g-paid { color: var(--accent-text); } table.matrix thead tr.group-row th.g-weak { color: var(--dim-2); } /* 第二行表头（平台名）跟着往下挪一格 sticky 位置 */ table.matrix thead tr.col-row th { position: sticky; top: var(--matrix-group-h, 26px); z-index: 2; } /** * 覆盖矩阵**不吃通用行内距**（2026-09-23 从实测反推的例外）。 * * 通用规则把 `tbody td` 的内距从 6px 抬到 10px，那是给"阅读型表格"的（一行是一条记录）。 * 但矩阵是**热力格子**：10 行 × N 列要落在一屏内，行高每加 8px 就多出 80px， * 而它的第二行表头还有 `top: 26px` 这个按第一行表头实高算出来的 sticky 偏移—— * 行高一变，那套吸顶位置就得跟着重算。所以这里把它按原值钉住，改通用规则时不受影响。 */ table.matrix tbody td { padding: 6px 11px; } table.matrix thead tr.col-row th { padding: 9px 11px; } /* 弱信号列的整列降饱和：数字仍可读，但视觉上退到第二层 */ table.matrix td.col-weak, table.matrix th.col-weak { background: var(--card-2); } table.matrix tr.region-row > td.col-weak { background: #e6ebf0; } table.matrix td.col-weak .cell-btn { color: var(--dim); } /** * 热力：按当前视图的最大值分四档，给非零格加底色。 * * 为什么这个比"把数字调大"有用：2814 家 × 11 平台的稀疏矩阵里绝大多数格是空的， * 原来满屏的「·」和真数据反差很小，想找"哪里有数"得逐格扫。加底色之后 * 一屏就能看出"江苏 × 家庭医生在线 最深"，不用读数字。 * 单色深浅（accent 的透明度阶梯）而不是彩虹色——彩虹会把"大"和"类别"混起来。 */ .cell-btn.heat-1 { background: rgba(15, 157, 120, 0.06); } .cell-btn.heat-2 { background: rgba(15, 157, 120, 0.13); } .cell-btn.heat-3 { background: rgba(15, 157, 120, 0.22); } .cell-btn.heat-4 { background: rgba(15, 157, 120, 0.34); } /* 弱信号列的热力减半，避免它和付费证据抢注意力 */ table.matrix td.col-weak .cell-btn.heat-1 { background: rgba(15, 157, 120, 0.04); } table.matrix td.col-weak .cell-btn.heat-2 { background: rgba(15, 157, 120, 0.08); } table.matrix td.col-weak .cell-btn.heat-3 { background: rgba(15, 157, 120, 0.13); } table.matrix td.col-weak .cell-btn.heat-4 { background: rgba(15, 157, 120, 0.2); } /** * 「未知地区」行：**它不是地区，是数据缺口**——矩阵把地区信息缺失的记录都归到这一行， * 而实测（2026-09-20）市级视图下它是最大的一行（441 家，对比江苏 188 家）。 * * 所以它要有别于真实地区的行：标签走虚线下划线（表示"这不是个名字"）、 * 加一个「数据缺口」小标、再给个 ⓘ 说明是什么、该补哪里。 * 用虚线边框而不是把整行涂灰：涂灰会被读成"次要"，而它其实是**要看的那一行**。 */ table.matrix tr.row-gap > td { border-top-style: dashed; } table.matrix tr.row-gap .row-link { border-bottom-style: dashed; } .gap-tag { margin-left: 6px; font-size: var(--font-size-sm); font-weight: 400; color: var(--mid); border: 1px dashed var(--mid); border-radius: 10px; padding: 0 6px; } .gap-i { color: var(--mid); } /** * 列头排序按钮（④）：列头整格可点，箭头指示当前排序列与方向。 * 做成 button 而不是「th + 点击回调」——规范里"非交互元素挂点击处理器"是明确的反模式， * 且 th 不可聚焦，键盘用户根本排不了。 */ table.matrix .col-sort { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 2px 4px; font: inherit; color: inherit; border-radius: 4px; cursor: pointer; } table.matrix .col-sort:hover { background: var(--bg); color: var(--accent-text); } table.matrix .col-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } table.matrix th.sorted .col-sort { color: var(--accent-text); font-weight: 600; } table.matrix .sort-arrow { font-size: 10px; line-height: 1; } table.matrix tbody .row-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } table.matrix tbody .row-link:hover { color: var(--accent-text); border-bottom-color: var(--accent); } /** 覆盖平台数：行的覆盖广度，比成交/输单标记更轻，不抢注意力 */ .cover-tag { margin-left: 6px; font-size: var(--font-size-sm); color: var(--dim-2); font-weight: 400; border: 1px solid var(--border); border-radius: 10px; padding: 0 6px; } /** 表脚：左边是"读表须知"（口径 + 空格含义），右边是列数说明与操作 */ .table-foot { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .table-foot .foot-main { display: flex; flex-direction: column; gap: 2px; min-width: 260px; } .table-foot .foot-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .table-foot .foot-acts { display: flex; gap: 8px; } /* 平台名后的小信息符号：把"弱信号/权重"收成一个可聚焦的小标记，说明放 title */ .plat-i { display: inline-block; margin-left: 3px; color: var(--dim-2); font-weight: 400; font-size: var(--font-size-sm); cursor: help; } /* 筛选栏的分组与「更多筛选」：8 个控件等权平铺时找不到主次 */ .filters .fgroup { display: inline-flex; align-items: center; gap: 8px; } .filters .fgroup + .fgroup { padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--border); } .filters button.link { background: none; border: 0; color: var(--dim); font: inherit; padding: 4px 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .filters button.link:hover { color: var(--accent-text); } .filters details.more { display: inline-block; } .filters details.more > summary { cursor: pointer; color: var(--dim); font-size: var(--font-size-sm); padding: 6px 4px; list-style: none; } .filters details.more > summary::-webkit-details-marker { display: none; } .filters details.more > summary::after { content: " ▾"; } .filters details.more[open] > summary::after { content: " ▴"; } .filters details.more > .more-body { display: flex; align-items: center; gap: 8px; padding: 8px 0 2px; flex-wrap: wrap; } /** * 「机构范围」chip：页头里唯一一个"决定你能看到什么"的元素，所以它不能是最弱的那个。 * * 形态取「字段名小字 + 值加粗」而不是一个灰 tag：销售打开页面第一件该确认的事 * 就是"我这个范围对不对"，而灰 tag 会被当成装饰跳过。未分配时走警示色—— * 那种情况下「机构线索」是空的，是要处理的事，不是背景信息。 */ .scope-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 20px; background: var(--accent-weak); border: 1px solid transparent; } .scope-chip .k { font-size: var(--font-size-sm); color: var(--dim); } .scope-chip .v { font-weight: 600; color: var(--accent-text); } .scope-chip.unset { background: var(--mid-weak); } .scope-chip.unset .v { color: var(--mid); } /** * 筛选栏的分组标签（范围 / 口径）。 * * 光有竖线分隔不够：控件一换行，竖线就落在行尾、看不出分界（实测 7 个下拉排一行、 * 「更多筛选 / 重置」折到第二行时，两组的分隔完全失效）。**文字标签在换行后依然成立**， * 所以这里以标签为主、竖线为辅。 */ .filters .flabel { font-size: var(--font-size-sm); color: var(--dim-2); font-weight: 600; margin-right: -2px; white-space: nowrap; } .filters .fgroup { display: inline-flex; align-items: center; gap: 8px; } /* 可点的卡片：商机页的四块 KPI 用 —— 点进去就是筛选后的行。 数字不能点，就只是装饰；这几行只是把链接"长得跟卡片一样"，并给一个明确的悬停反馈。 */ a.card { display: block; color: inherit; text-decoration: none; transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); } a.card:hover { border-color: transparent; box-shadow: var(--shadow-2); } a.card .k { cursor: pointer; } /* 容器：**不描边**，靠画布底色差 + 阴影阶梯立起来（2026-09-23 边框饮食）。 用 border-color 而不是 border: 0——保留那 1px 的布局占位，免得去掉边框后整页元素位移。 */ .panel { background: var(--card); border: 1px solid transparent; border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow var(--motion-base) var(--ease); } .panel > h2 { margin: 0; padding: 14px 18px; font-size: var(--font-size-base); font-weight: 600; border-bottom: 1px solid var(--color-border-1); display: flex; align-items: center; gap: 9px; } .panel > h2 .sub { font-weight: 400; color: var(--dim-2); font-size: var(--font-size-sm); } .panel .body { padding: 16px 18px; } .panel .body.flush { padding: 0; } /* ══════════════════════ 组件原语（2026-09-23）══════════════════════════════ 说好的"8 个原语"里，**6 个早就有主了**，所以不新造名字： 容器 = .panel · 页头 = .page-head · 指标 = .stats / .stat 工具条 = .filters · 徽标 = .tag / .badge · 空态 = .empty 再立一套 .surface / .toolbar 只会让全站出现两种词汇，下一个人不知道该用哪个。 这一节做两件事：① 把上面 6 个的"表面处理"收进同一条规则（观感一致才是原语的意义， 不然改一次要改六处）；② 补上真正缺的两个：.section（分组标题）、.list-row（窄屏行卡片）。 .section / .list-row 目前**尚未被页面使用**——留给"逐页构图"那一步，先定义不接线。 */ .panel, .stat, .card, details.fold { border-color: transparent; box-shadow: var(--shadow-1); } a.panel:hover, a.stat:hover, a.card:hover, details.fold:hover { box-shadow: var(--shadow-2); } /* 分组标题：层级靠字重与留白，不靠描一条线（要线的地方才用线） */ .section { margin: var(--space-6) 0 var(--space-3); font-size: var(--font-size-base); font-weight: 600; letter-spacing: .1px; color: var(--text); } .section .sub, .section > .sub { font-weight: 400; color: var(--dim-2); font-size: var(--font-size-sm); } .section:first-child { margin-top: 0; } /* 窄屏用行卡片代替横向表格：一条记录一块，字段竖向排 */ .list-row { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border-bottom: 1px solid var(--color-border-1); transition: background var(--motion-fast) var(--ease); } .list-row:last-child { border-bottom: 0; } .list-row:hover { background: var(--color-fill-1); } .list-row .grow { flex: 1; min-width: 0; } .list-row .k { font-weight: 600; } .list-row .meta { font-size: var(--font-size-sm); color: var(--dim-2); } @media (max-width: 900px) { .list-row { flex-wrap: wrap; align-items: flex-start; } } /* 纵向堆叠 + 统一间距。代替遍地 `style="margin-bottom:8px"` 这类内联留白—— 留白要成阶（--space-2/3/4），散在标记里的字面量没法一处调。 */ .stack { display: flex; flex-direction: column; gap: var(--space-2); } /* 提示块：左侧一道色条，其余是普通表面。 原先这种块在 app.js 里写成 `
`， 三处各写一遍内联样式——同一形态写三遍必然有三处不一样，而且容器内联描边正是 这一轮要去掉的东西。语义只分两档：`.warn` 需要你去处理，`.tip` 知道一下就行。 */ .callout { border-left: 3px solid var(--color-border-3); border-radius: var(--border-radius-medium); background: var(--card); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-1); margin-bottom: 16px; } .callout.warn { border-left-color: var(--high); } .callout.tip { border-left-color: var(--mid); } /* 提示块里要横排（标签 + 一句话 + 说明）时套一层，别在标记里写内联 display:flex */ .callout .callout-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .callout h2 { margin: 0 0 6px; font-size: var(--font-size-base); font-weight: 600; } .callout p { margin: 0; } /* ------------------------------ 表格 ------------------------------ */ /* 表头吸顶：长列表滚动时列名不丢，是本系统最常用的表 */ /* max-height 要减掉顶栏：不减的话表格底部会伸到视口外，多出一截要额外滚动 */ .table-wrap { overflow: auto; max-height: calc(100vh - var(--topbar-h) - 250px); } /** * 名册表专用：让「表格 + 它自己的滚动条 + 翻页器」整体落在**一屏之内**。 * * 为什么需要（2026-09-20）：名册一页 100 行，沿用上面那个 250px 时框底会伸到首屏之外—— * 于是同一屏里同时存在两条滚动条（先滚页面把框底挪上来、再滚框看行），手感和方向感都乱。 * 250px 是按"页头 + 筛选条"估的，名册页在表格上面还压着 6 张卡片，所以不够用。 * * 关键在 `--fit-above`：把表格**上方**那些东西（页头、卡片、筛选面板、表头说明） * 加上下方的翻页器一起算进去，让框底和翻页器始终留在首屏内——任何时刻只面对一条滚动条。 * * 下界 360px 不是凑数：窗口矮的时候（笔记本分屏、投影）算出来只剩 100 多像素、 * 只能显示 2~3 行，那比"框超出首屏"更没法用。宁可那时让框伸出去，也不能压到读不了。 */ .table-wrap.fit-screen { --fit-above: 452px; max-height: max(360px, calc(100vh - var(--topbar-h) - var(--fit-above))); } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--font-size-table); line-height: 1.5; } thead th { position: sticky; top: 0; z-index: 2; text-align: left; font-weight: 500; font-size: var(--font-size-sm); color: var(--dim); padding: 11px 14px; background: var(--card-2); border-bottom: 1px solid var(--color-border-1); white-space: nowrap; } /* 行内距 6px → 10px、垂直居中（2026-09-23）：13px 字号是刻意的密度选择（保留）， 但上下只有 6px 时行与行会糊在一起——密度不等于拥挤，用行高换呼吸感，字号不动。 名册表自带 `#orgRows td` 的钉死行高，ID 选择器优先级更高，不受这条影响。 */ tbody td { padding: 10px 14px; border-bottom: 1px solid var(--color-border-1); vertical-align: middle; } /* 机构线索：行高钉死、内容不换行 -------------------------------------------------------------------------- 光压内距和徽标数压不平：实测 79% 的行到了 42px，但仍有 21% 是 54~63px， 而量下来没有任何单一元素超过 29px —— 是机构名 + 徽标这类行内元素的基线对齐 把行盒撑高了，换行与否则取决于名字长度。 与其继续猜，不如钉死：单元格不换行、机构名超出用省略号（title 里是全名）。 表格每行齐平，扫读时视线不用重新找行——这本身就是"专业感"的一部分。 */ #orgRows td { height: 42px; white-space: nowrap; overflow: hidden; } /* 上限 244：加了「改名」按钮后机构列变宽，268 会把表格撑出 21px 横向滚动。 名字本来就有省略号 + title 兜底，收窄不丢信息。 */ #orgRows td:first-child { max-width: 244px; } #orgRows td:first-child .org-link { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } #orgRows .badge { vertical-align: bottom; } #orgRows .plat { vertical-align: bottom; } tbody tr:hover td { background: var(--color-fill-1); } tbody tr:last-child td { border-bottom: 0; } .num { text-align: right; font-variant-numeric: tabular-nums; } .org-name { font-weight: 600; } /** * 0 值降一档。经营分析那几张表里 0 是多数，和真实数字同字号同颜色时， * 一屏的 0 会把注意力从「哪格有数」上引开——投放分布主表用 `.z` 处理的是同一件事 * （那边空格子用淡点，这里是明确的 0）。 */ .zero { color: var(--dim-2); } /* 机构名链接：颜色区分出「这里能点」，悬停才加下划线，长列表里不会一片花 */ a.org-link { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; } a.org-link:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); } a.org-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--border-radius-small); } .truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; } .nowrap { white-space: nowrap; } /** * 可点排序的表头（2026-09-18）。它必须是「表头」而不是「按钮」：第一版直接用 `