/* ═══════════════════════════════════════════════════════════════════════ 法之道业务生态系统 · 极简派设计系统 v1.0（C 方案） ─────────────────────────────────────────────────────────────────────── 设计依据：桌面/网页设计/极简版参考-minimal.html 三条主张：① 侧栏与页面同色，只卡片纯白；② 阴影只留极弱一档； ③ 彩色只给状态，主色收敛到近黑 #111827 【硬约束】只改视觉，不改结构 · 不改任何 HTML 结构、不改 id/class 名 · 不改 display / grid-template-columns / width / height / position · 不改 script.js 任何逻辑 · 删除本文件引用即可 100% 回滚 分层：1 token → 2 骨架 → 3 顶栏/标签 → 4 指标条 → 5 卡片 → 6 图表 → 7 表格 → 8 表单按钮 → 9 状态语义 → 10 动效 ═══════════════════════════════════════════════════════════════════════ */ /* ═══ 1. TOKEN：重定义 styles.css 的变量 → 全站换色系 ═══ styles.css 里有 75 处 var(--primary-*) / var(--sidebar-*) 引用， 改这里等于一次换掉 75 个位置，不用碰原文件。 */ :root { /* ── 主色：近黑（原 #4f46e5 靛紫） ── */ --primary-color: #111827; --primary-dark: #000000; --primary-light: #374151; --primary-bg: #f2f3f6; /* ── 侧栏：与页面底同色，靠卡片浮起分层 ── */ --sidebar-bg: #fafafb; --sidebar-item-hover: #f2f3f6; --sidebar-item-active: #f2f3f6; --sidebar-text-primary: #111827; --sidebar-text-secondary: #4b5563; --sidebar-border-color: #eeeff2; /* ── 主内容区 ── */ --main-bg: #fafafb; --main-card-bg: #ffffff; --main-text-primary: #111827; --main-text-secondary: #6b7280; /* 原 customer-detail.css 引用了此变量却全站未定义 → 激活胶囊是白字透明底，字看不见。 这里补上定义，顺带让悬停态有底色。 */ --secondary-color: #4b5563; --main-border-color: #eeeff2; /* ── 阴影：只留极弱一档 ── */ --shadow: 0 1px 2px rgba(17,24,39,.04); --shadow-md: 0 1px 3px rgba(17,24,39,.06); /* ── 中性阶梯（本文件内部使用） ── 取值受可读性约束：凡是用于「文字」的档位，白底对比度须 ≥4.5:1。 v1.1 修正：原 #8b91a0(2.87) / #aab0bd(1.98) 太浅，做文字看不清，已压深。 */ --ink: #111827; /* 18.9:1 主文字 */ --ink-2: #4b5563; /* 8.3:1 次文字 */ --ink-3: #5b6270; /* 6.4:1 三级文字（原 #8b91a0） */ --ink-4: #6f7684; /* 4.6:1 辅助文字/坐标轴（原 #aab0bd） */ --line: #eeeff2; --line-2: #e5e7eb; --fill: #f2f3f6; --canvas: #fafafb; --card: #ffffff; /* ── 状态色：低饱和，只给标签与趋势 ── */ --ok: #15803d; --ok-bg: #e9f5ed; --warn: #a45c07; --warn-bg: #fbf1e3; --danger: #b42318; --danger-bg: #fceceb; --info: #1e40af; --info-bg: #e9eefb; /* ── 圆角四档 + 缓动 ── */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --ease: cubic-bezier(.16,1,.3,1); /* ── 侧栏节奏（2026-11-03 统一）── 一级文字起点 = 行内边距 12 + 图标 14 + 图文间距 10 = 36；每下一级 +16。 改这里即可整栏联动，不要再在别处写死像素。 */ --sb-pad: 12px; /* 侧栏两侧留白：品牌区/菜单区/用户坞 左右一致 */ --sb-inner: 12px; /* 行内左右内边距（所有层级同一值） */ --sb-icon: 14px; /* 图标：略小于一级字号 13.5px */ --sb-gap: 10px; /* 图标↔文字（二级/三级的小圆点也沿用同一节奏） */ --sb-indent: 16px; /* 层级缩进步进 */ --sb-radius: 8px; /* 一级圆角 */ --sb-radius-2: 6px; /* 二级/三级圆角（同级一致） */ --sb-row-1: 40px; /* 一级行高＝点击区 */ --sb-row-2: 36px; --sb-row-3: 34px; --sb-item-gap: 4px; /* 组内行间距 */ --sb-group-gap: 18px; /* 组间距（组标题上方）—— 必须明显大于组内 */ --sb-group-b: 8px; /* 组标题↔下方首项 */ /* 由上面推导，别手改 */ --sb-text-1: calc(var(--sb-inner) + var(--sb-icon) + var(--sb-gap)); /* 36px 一级文字起点 */ --sb-text-2: calc(var(--sb-text-1) + var(--sb-indent)); /* 52px */ --sb-text-3: calc(var(--sb-text-2) + var(--sb-indent)); /* 68px */ } /* ═══ 2. 骨架：侧栏不再是「一根白柱子」 ═══ */ body { background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sidebar { background: var(--canvas); border-right: 1px solid var(--line); transition: background-color .3s var(--ease), border-color .3s var(--ease); } .main-wrapper { background: var(--canvas); } /* 品牌区：Logo + 单一词品牌名（两侧留白与菜单区、用户坞保持同一值） */ .menu-header { padding: 0 var(--sb-pad); border-bottom: 1px solid var(--line); } .menu-header .logo-icon { width: 26px; height: 26px; margin-right: var(--sb-gap); } .menu-header .title { font-size: 14px; font-weight: 640; line-height: 20px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 菜单：四周留白同一值；组内行间距 4px，组间距由 ui-menu.js 的组标题撑到 18px */ .menu { padding: var(--sb-pad); } .menu-item { margin-bottom: var(--sb-item-gap); } .menu-link { min-height: var(--sb-row-1); padding: 10px var(--sb-inner); border-radius: var(--sb-radius); font-size: 13.5px; line-height: 20px; font-weight: 500; color: var(--ink-2); transition: background-color .15s var(--ease), color .15s var(--ease); } .menu-link:hover { background-color: var(--fill); color: var(--ink); } .menu-item.active > .menu-link { background-color: #e9ebef; color: var(--ink); font-weight: 600; } /* 二级 / 三级：字号递减一档，圆角同为 6px，缩进按 16px 步进。 改成 flex 是为了让「圆点 / 文字 / 徽标」在同一条基线上，圆点仍用绝对定位不参与布局。 */ .submenu a { display: flex; align-items: center; gap: 8px; min-height: var(--sb-row-2); padding: 9px var(--sb-inner) 9px var(--sb-text-2); font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--ink-3); border-radius: var(--sb-radius-2); transition: color .15s var(--ease), background-color .15s var(--ease); } .sub-submenu a { display: flex; align-items: center; gap: 8px; min-height: var(--sb-row-3); padding: 8px var(--sb-inner) 8px var(--sb-text-3); font-size: 12px; line-height: 18px; font-weight: 400; color: var(--ink-3); border-radius: var(--sb-radius-2); transition: color .15s var(--ease), background-color .15s var(--ease); } .submenu a:hover, .sub-submenu a:hover { color: var(--ink-2); background-color: var(--fill); } .submenu a.active, .sub-submenu a.active { color: var(--ink) !important; font-weight: 600; } /* 原有的「发光圆点」→ 收敛成实心小点，去掉光环。 圆点右缘与文字左缘的间距统一 8px（与一级图标↔文字的 10px 同节奏，视觉略紧一档）。 */ .submenu a::before, .sub-submenu a::before { background-color: #d8dbe2 !important; box-shadow: none !important; } .submenu a::before { left: calc(var(--sb-text-2) - 8px - 5px) !important; /* 39px */ width: 5px; height: 5px; } .sub-submenu a::before { left: calc(var(--sb-text-3) - 8px - 4px) !important; /* 56px */ width: 4px; height: 4px; } .submenu a:hover::before, .submenu a.active::before, .sub-submenu a:hover::before, .sub-submenu a.active::before { background-color: var(--ink) !important; box-shadow: none !important; transform: translateY(-50%) scale(1) !important; } /* 展开箭头：统一缓动 */ .arrow, .sub-arrow { transition: transform .26s var(--ease); } /* ═══ 3. 顶栏 / 多标签 / 视图切换 ═══ */ .top-header { background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(1.6) blur(8px); backdrop-filter: saturate(1.6) blur(8px); border-bottom: 1px solid var(--line); } /* 顶栏图标按钮：白底 + 细边 + 小圆角 */ .icon-btn { border-radius: 7px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-3); transition: color .15s var(--ease), border-color .15s var(--ease); } .icon-btn:hover { color: var(--ink); border-color: #d3d7de; } /* 红点保留红色（提示语义不能变黑） */ .icon-btn .badge { background: var(--danger) !important; color: #fff !important; box-shadow: 0 0 0 2px #fff; } .user-profile { border-radius: 7px; transition: background-color .15s var(--ease); } .user-profile:hover { background: var(--fill); } .user-profile .username { font-size: 12.5px; font-weight: 560; color: var(--ink-2); } .user-dropdown { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 8px 24px -12px rgba(17,24,39,.18); } .dropdown-item { font-size: 13px; color: var(--ink-2); } .dropdown-item:hover { background: var(--fill); color: var(--ink); } /* 多标签页：白底标签浮在灰底上 */ .page-tabs-container { background: var(--canvas); border-bottom: 1px solid var(--line); } .tab-nav-item-page { border-radius: 7px; font-size: 12.5px; color: var(--ink-3); border: 1px solid transparent; transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .tab-nav-item-page:hover { background: var(--fill); color: var(--ink-2); } .tab-nav-item-page.active { background: #fff; border-color: var(--line-2); color: var(--ink); font-weight: 600; } .tab-close-btn { color: var(--ink-4); border-radius: 4px; } .tab-close-btn:hover { background: var(--fill); color: var(--ink-2); } /* 视图切换器：分段控件（参考稿 .seg） */ .view-toggle-container { background: var(--canvas); } .view-toggle-btn-group { border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; background: #fff; } .view-toggle-btn { font-size: 12.5px; font-weight: 500; background: #fff; color: var(--ink-3); border: 0; transition: background-color .15s var(--ease), color .15s var(--ease); } /* 原页面把分隔线写成 1px solid #3b82f6（蓝），这里改成分隔线走中性色 */ .view-toggle-btn:first-child { border-right: 0; } .view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--line-2); } .view-toggle-btn:hover:not(.active) { background: #f7f8fa; color: var(--ink); } .view-toggle-btn.active { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; } /* ═══ 4. 指标条：5 张色块 → 一条竖线分隔的指标带 ═══ DOM 不动，只把卡片之间的 gap 收成 0、给容器加外框， 卡片之间用 1px 竖线分隔 —— 这是参考稿最核心的一处结构语言。 */ .dashboard-top-stats { gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); } .top-stat-card, .top-stat-card.highlight { background: transparent !important; background-image: none !important; color: var(--ink) !important; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 15px 18px 14px; text-align: left; transition: background-color .16s var(--ease); } .top-stat-card:hover { background-color: #fbfbfc !important; } /* 行首去竖线（每 5 个一行，兼容 7 卡的分区） */ .dashboard-top-stats > .top-stat-card:nth-child(5n+1) { border-left: 0; } /* 换行后的卡片补一条横线 */ .dashboard-top-stats > .top-stat-card:nth-child(n+6) { border-top: 1px solid var(--line); } /* 首格＝主指标：浅灰底 + 更大数字（不靠颜色抢，靠尺寸和底色） */ .dashboard-top-stats > .top-stat-card:first-child { background: #f7f8fa !important; } .dashboard-top-stats > .top-stat-card:first-child .top-stat-value { font-size: 27px; } .top-stat-label { font-size: 12px !important; font-weight: 500; color: #6f7684 !important; opacity: 1; margin-bottom: 5px; letter-spacing: .01em; } .top-stat-value { font-size: 22px !important; font-weight: 660; letter-spacing: -.03em; line-height: 1.15; color: var(--ink) !important; font-variant-numeric: tabular-nums; } /* ═══ 5. 卡片：白底 + 1px 细线，取消中重阴影 ═══ */ .chart-card, .stat-card, .card, .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); } .chart-card { padding: 20px; } .chart-header { margin-bottom: 14px; } .chart-title { font-size: 13.5px !important; font-weight: 620; letter-spacing: -.01em; color: var(--ink); } .chart-action-btn { font-size: 12px; border-radius: var(--r-sm); color: var(--ink-3); border: 1px solid var(--line-2); background: #fff; transition: color .15s var(--ease), background-color .15s var(--ease); } .chart-action-btn:hover { color: var(--ink); background: #f7f8fa; } .chart-action-btn.active, .chart-action-btn.on { background: var(--ink); border-color: var(--ink); color: #fff; } /* 底部数字小卡（首页 bottom-data-card） */ .bottom-data-card { background: #f7f8fa; border-radius: var(--r-sm); } .bottom-data-card .bdv { color: var(--ink); font-weight: 660; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .bottom-data-card .bdl { color: var(--ink-3); } /* ═══ 6. 图表：柱体从蓝紫渐变 → 中性深灰 ═══ */ .chart-bars, .chart-bars-wrapper { border-color: var(--line); } .chart-bars { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); } .chart-y-axis { font-size: 12px; color: var(--ink-3); } .bar-vertical { max-width: 68px; } /* 特异性必须压过 index.html 内联的「#serviceView .bar-vertical{transition:filter .12s}」， 否则 height 过渡被整条覆盖 → 服务视图柱体只会瞬间跳变，看起来“没有动效”。 */ #serviceView .bar-col .bar-vertical, #serviceView .bar-col .bar-item, .chart-bars .bar-vertical, .chart-bars .bar-item, .bar-vertical, .bar-item { background: var(--ink-2); border-radius: 4px 4px 2px 2px; transition: height .66s cubic-bezier(.65,0,.35,1), filter .12s ease, background-color .15s var(--ease), opacity .15s var(--ease); } .bar-col:hover .bar-vertical, .bar-col:hover .bar-item, .bar-vertical:hover { background: var(--ink); opacity: 1; } /* 案件阶段占比：4 段亮色渐变（蓝/绿/紫/橙）→ 灰度阶梯，越往后阶段越深 */ .case-stage-bar.bar-nonlit { background: #cfd4dd; } .case-stage-bar.bar-trial { background: #9aa1ae; } .case-stage-bar.bar-evidence { background: #6b7280; } .case-stage-bar.bar-execution { background: #111827; } .case-stage-bar.bar-collection { background: #4b5563; } .bar-item:hover { opacity: .86; } .bar-count-label { font-size: 13px; font-weight: 600; color: var(--ink); } .bar-percent-label, .bar-pct-label, .bar-label-top { color: var(--ink-3); } .bar-percent-label, .bar-pct-label { font-size: 12px; } .bar-x-label { font-size: 11.5px; color: var(--ink-4); } /* ═══ 7. 表格：弱化网格，靠留白分行 ═══ 注意：不强制 padding，避免把各页面自己的列宽挤变形。 */ table { border-collapse: separate; border-spacing: 0; } th { font-size: 12px !important; font-weight: 600; color: #6b7280 !important; letter-spacing: .02em; background: #fbfbfc; border-bottom: 1px solid var(--line) !important; white-space: nowrap; } td { font-size: 12.5px; color: var(--ink-2); border-bottom: 1px solid var(--line) !important; } tbody tr { transition: background-color .14s var(--ease); } tbody tr:hover { background: #fbfbfc; } /* ═══ 8. 表单与按钮 ═══ */ .btn-primary, .btn-primary:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; border-radius: 7px; font-weight: 560; font-size: 12.5px; transition: background-color .15s var(--ease), transform .15s var(--ease); } .btn-primary:hover { background: #000; transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-secondary, .btn-default { background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); border-radius: 7px; font-size: 12.5px; transition: background-color .15s var(--ease), border-color .15s var(--ease); } .btn-secondary:hover, .btn-default:hover { background: var(--fill); border-color: #d3d7de; } input, select, textarea { border-color: var(--line-2) !important; border-radius: 7px; font-size: 13px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } input:focus, select:focus, textarea:focus { border-color: var(--ink-4) !important; box-shadow: 0 0 0 3px rgba(17,24,39,.05) !important; outline: none; } /* ═══ 9. 状态语义：彩色只在这里出现 ═══ */ .pill, .status-tag, .tag { font-size: 11px; font-weight: 560; border-radius: var(--r-pill); } /* 首页待办的类型标签 / 优先级 */ .todo-type-tag { font-size: 11px; font-weight: 560; border-radius: var(--r-pill); } /* 关键数字统一等宽，避免跳动 */ .top-stat-value, .bdv, .fs-num, .tb-num, .ld-num, .cs-num, .case-stage-count, .side-stat-value, .reach-stat-value, .pv, .pl { font-variant-numeric: tabular-nums; } /* ═══ 10. 滚动条 ═══ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #d8dbe2; border-radius: var(--r-pill); border: 2px solid var(--canvas); } ::-webkit-scrollbar-thumb:hover { background: #b9bec9; } /* ═══ 11. 动效：克制，只做「进入」和「悬停反馈」 ═══ */ .main-content { animation: uiFadeIn .3s var(--ease); } @keyframes uiFadeIn { from { opacity: 0; } to { opacity: 1; } } .chart-card, .stat-card, .top-stat-card { animation: uiRise .34s var(--ease) backwards; } @keyframes uiRise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .main-content, .chart-card, .stat-card, .top-stat-card { animation: none; } } /* ═══ 12. 页面专属组件归位（各自建的主题拉回同一套） ═══ 这些页面原有自己的调色（学习中心蓝、商机浅蓝、权限淡紫…）， 上面已把变量与硬编码色值统一，这里处理需要改结构表现的少数组件。 */ /* 12.1 客户详情头部：深色渐变大卡 → 白卡 原为 100px 高的近黑横条，在淡灰页里像压了一块黑板；改成白卡后与其它卡片同一平面。 */ .customer-header-card { background: #fff !important; border: 1px solid var(--line); box-shadow: none; color: var(--ink); border-radius: 10px; } .customer-header-card .customer-name-large { color: var(--ink) !important; } .customer-header-card .customer-avatar-large { background: #e9ebef !important; border: 1px solid #d3d7de !important; color: var(--ink-2) !important; backdrop-filter: none !important; } .customer-header-card .icon-action-btn { border-color: var(--line-2); background: #fff; color: var(--ink-2); } .customer-header-card .icon-action-btn:hover { background: var(--fill); border-color: #d3d7de; color: var(--ink); } .customer-header-card .rating-star-btn.is-empty { background: #fff; color: var(--ink-4); } .customer-header-card .btn-default { background: #fff; } /* 12.2 空标签收口：数据为空时不再渲染成孤立小色块 */ .tag:empty, .badge:empty, .status-tag:empty { display: none !important; } /* 12.3 统计卡左侧彩条：保留三段层次，去掉色相（橙→浅灰，紫→中灰，绿→深灰） */ .lead-stat-card--orange, .opp-stat-card--orange { border-left-color: #cfd4dd !important; } .lead-stat-card--purple, .opp-stat-card--purple { border-left-color: #9aa1ae !important; } .lead-stat-card--green, .opp-stat-card--green { border-left-color: #6b7280 !important; } /* 12.4 各页专属的标签页 / 分段控件：激活态一律近黑 */ .toolbox-tab.active, .ca-tab.active, .finance-tab.active, .ap-tab.active, .permission-tab.active, .num.blue, .ph-pool-dial, .opp-industry-toggle-btn, .lead-industry-toggle-btn { color: var(--ink) !important; } /* 当前页码用浅灰承托，不用黑底：页码是用户最不需要关注的元素，不必抢焦点 */ .pagination-btn.active, .pc-pg.active { background: #e9ebef !important; border-color: #d3d7de !important; color: var(--ink) !important; font-weight: 600; } /* 12.5 商机/线索页操作按钮：浅蓝实心 → 近黑 */ .lead-topbar-search-btn, .opp-topbar-search-btn, .lead-add-btn, .opp-add-btn, .lead-btn-claim, .opp-btn-claim, .opp-action-claim { background: var(--ink) !important; border-color: var(--ink) !important; } .lead-topbar-search-btn:hover, .opp-topbar-search-btn:hover, .lead-add-btn:hover, .opp-add-btn:hover { background: #000 !important; } /* 12.6 文档模板目录：深蓝文字 → 中性 */ .doc-tpl-folder-item, .doc-tpl-folder-name { color: var(--ink-2) !important; } /* 12.7 业务标记「尾 / 退 / 评级」：语义色 曾被统一刷成中性灰（当时的目的是压掉列表里的彩色噪点），但同一排圆点 连姓名首字一起灰掉后整行像"遗像"。田总 2026-10-31 定：这三个标记各归各的语义。 统一收紧到「中低明度 + 白字对比度 ≥4.5」，不再出现原始 #f59e0b / #ef4444 那种荧光色。 */ .tail-mark, .refund-mark, .rating-badge { color: #fff !important; } /* 应收尾款 = 琥珀橙（提醒应收，色相刻意与 S 级金色拉开约 15°） */ .tail-mark { background: linear-gradient(135deg, #A85308, #B85C0A) !important; } /* 已退费 = 正红 */ .refund-mark { background: linear-gradient(135deg, #B91C1C, #C22626) !important; } /* 评级 S / A / B / C：金 / 绿 / 蓝 / 灰 注：customer-list.css 里 B 级的注释写的是"蓝色"，色值却给成了 #111827 纯黑， 属历史笔误，这里按注释原意补上蓝色。 */ .rating-s { background: linear-gradient(135deg, #85690D, #8F720F) !important; } .rating-a { background: linear-gradient(135deg, #0B7449, #117F52) !important; } .rating-b { background: linear-gradient(135deg, #1D4ED8, #2563EB) !important; } .rating-c { background: linear-gradient(135deg, #4B5563, #6B7280) !important; } /* 12.8 姓名首字头像：客户统一身份色（田总 2026-10-31 定「客户简称固定一种色， 不和标记撞色就行」，废掉多色轮转） 版本沿革（留着防止有人想改回去）： ① 原始六色 —— 蓝那档是纯黑、紫是"灰→黑"渐变，深浅完全不齐，遗像感的源头； ② 六档中性灰 —— 去噪的同时把身份色一起去掉了； ③ 六色身份色 + 全名哈希重分配 —— 色是齐了，但客户简称会和同行标记撞色 （比如某个客户简称正好也是琥珀橙，和左边的「尾」一毛一样，看着别扭）。 现取终版：**所有客户简称统一为紫色**，与语义标记全部拉开： 尾=琥珀橙、退=正红、S=金、A=绿、B=蓝、C=灰 —— 紫是这六个之外唯一不打架的。 名字本身就在旁边写着，不需要靠颜色区分客户；颜色只承担"这是客户简称"这一件事。 渐变两档白字对比度实测 6.74 / 5.79，远超 4.5 标准。 */ .name-blue, .client-blue, .name-green, .client-green, .name-orange, .client-orange, .name-purple, .client-purple, .name-cyan, .client-cyan, .name-pink, .client-pink { background: linear-gradient(135deg, #5B46B4, #6A51C8) !important; } /* 圆点质感：顶部一道 22% 白高光 + 极淡投影（不用 transform / filter，避免蹭 degrade） 玻璃卡上的 fixed 浮层不受影响，这里只作用到 32px 首字圆点本身 */ .name-avatar, .client-avatar, .refund-mark, .tail-mark, .rating-badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(17,24,39,.10); } /* ═══ 13. 可读性与遗漏补齐（v1.2） ═══ */ /* 13.1 管理后台顶部导航：4 个 原样式只写在 customer-detail.css 里，本页没加载 → 落回浏览器默认链接蓝 rgb(0,0,238)。 这里按页面作用域补上，不影响客户详情页自己的胶囊。 */ .admin-console-page .filter-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; margin-right: 8px; border-radius: 7px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-size: 12.5px; text-decoration: none; transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .admin-console-page .filter-chip:hover { background: var(--fill); border-color: #d7dae0; color: var(--ink); } /* ═══ 14. 页面标题行统一（v1.3） 32 页原本共用 .page-header/.page-title 骨架，但字号被各页覆盖成 20/22/24px 三种， 且右侧操作区偶有换行。这里统一为「18px 标题 + 右侧按钮同行」，只调视觉不动结构。 */ .page-header, .pc-head-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: nowrap; } .page-title, .page-header .page-title, .pc-head-row .page-title { font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -.01em; color: var(--ink) !important; margin: 0 !important; /* 管理后台/权限页曾用渐变字裁切，这里还原为纯色，避免被 background-clip 吃掉 */ background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--ink) !important; } .page-header .page-actions, .pc-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } /* 窄屏时允许操作区换行，但标题始终单行 */ @media (max-width: 1180px) { .page-header, .pc-head-row { flex-wrap: wrap; } .page-header .page-actions, .pc-head-actions { margin-left: auto; } } /* ═══════════════════════════════════════════════════════════════════════ 15. 首页配色 —— 田总 2026-10-30 拍板：丰富档（C）· 主色墨蓝 #185FA5 ─────────────────────────────────────────────────────────────────────── 层级分工 中性层 ≈75% 背景/边框/正文/图标/侧栏 —— 沿用第 1～14 节，本节不动 品牌层 ≈20% ①视图选中 ②侧栏当前项 ③指标卡色标 ④柱状图 —— 本节 语义层 ≈5% 成功/警告/超期 —— 第 9 节 --ok/--warn/--danger 已有 用色规则 · 6 色统一低饱和、明度接近，按「第 n 个位置」循环，不随机、不重复分配 · -t 后缀＝加深版，专供文字与小面积，保证白底对比度 ≥4.5:1 · 红 #b42318 不进这套循环，继续只做待办/超期提醒，避免被稀释 为什么按位置而不是按类名 index.html 静态骨架上虽有 bar-blue / bar-green / bar-rating 等类， 但 script.js 用真实数据重渲染柱体时并不写这些类 —— 按类上色会在 有数据的时候全部失效。按 nth-child 循环则任何情况下都稳定出彩。 ⚠️ 本节选择器依赖 .chart-bars / .dashboard-top-stats，实测仅 index.html 使用，因此天然不影响其余 31 页。 ═══════════════════════════════════════════════════════════════════════ */ :root { --cat-1: #185FA5; --cat-1-t: #0C447C; /* 墨蓝 · 主色 */ --cat-2: #0F6E56; --cat-2-t: #085041; /* 墨绿 */ --cat-3: #BA7517; --cat-3-t: #854F0B; /* 琥珀 */ --cat-4: #534AB7; --cat-4-t: #3C3489; /* 靛紫 */ --cat-5: #0B7285; --cat-5-t: #075F6E; /* 青 */ --cat-6: #993C1D; --cat-6-t: #712B13; /* 陶土 */ } /* ① 视图切换器：选中态由近黑改为品牌墨蓝 */ .view-toggle-btn.active { background: var(--cat-1) !important; color: #fff !important; border-color: var(--cat-1) !important; } .view-toggle-btn:hover:not(.active) { background: #E6F1FB; color: var(--cat-1-t); } /* ② 侧栏当前菜单项：左侧 2.5px 品牌竖条 用 inset 阴影实现，不占布局、不影响原有底色，删本节即消失 */ .sidebar .menu-item.active > .menu-link { box-shadow: inset 2.5px 0 0 var(--cat-1); } /* ③ 指标带：每卡左侧竖直色标 + 数字取同色系加深版（标签保持中性灰） */ .dashboard-top-stats > .top-stat-card { position: relative; } .dashboard-top-stats > .top-stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px; background: var(--sc, var(--cat-1)); } .dashboard-top-stats > .top-stat-card:nth-child(6n+1) { --sc: var(--cat-1); --st: var(--cat-1-t); } .dashboard-top-stats > .top-stat-card:nth-child(6n+2) { --sc: var(--cat-2); --st: var(--cat-2-t); } .dashboard-top-stats > .top-stat-card:nth-child(6n+3) { --sc: var(--cat-3); --st: var(--cat-3-t); } .dashboard-top-stats > .top-stat-card:nth-child(6n+4) { --sc: var(--cat-4); --st: var(--cat-4-t); } .dashboard-top-stats > .top-stat-card:nth-child(6n+5) { --sc: var(--cat-5); --st: var(--cat-5-t); } .dashboard-top-stats > .top-stat-card:nth-child(6n+6) { --sc: var(--cat-6); --st: var(--cat-6-t); } /* 数字用色。第 4 节已用 !important 把颜色钉为 --ink，这里必须用同等武器 */ .dashboard-top-stats > .top-stat-card .top-stat-value { color: var(--st, var(--ink)) !important; } /* ④ 柱状图：按柱位循环 6 色（特异性高于第 6 节的中性灰 rules） */ #serviceView .bar-col:nth-child(6n+1) .bar-vertical, #serviceView .bar-col:nth-child(6n+1) .bar-item, .chart-bars .bar-col:nth-child(6n+1) .bar-vertical, .chart-bars .bar-col:nth-child(6n+1) .bar-item { background: var(--cat-1); } #serviceView .bar-col:nth-child(6n+2) .bar-vertical, #serviceView .bar-col:nth-child(6n+2) .bar-item, .chart-bars .bar-col:nth-child(6n+2) .bar-vertical, .chart-bars .bar-col:nth-child(6n+2) .bar-item { background: var(--cat-2); } #serviceView .bar-col:nth-child(6n+3) .bar-vertical, #serviceView .bar-col:nth-child(6n+3) .bar-item, .chart-bars .bar-col:nth-child(6n+3) .bar-vertical, .chart-bars .bar-col:nth-child(6n+3) .bar-item { background: var(--cat-3); } #serviceView .bar-col:nth-child(6n+4) .bar-vertical, #serviceView .bar-col:nth-child(6n+4) .bar-item, .chart-bars .bar-col:nth-child(6n+4) .bar-vertical, .chart-bars .bar-col:nth-child(6n+4) .bar-item { background: var(--cat-4); } #serviceView .bar-col:nth-child(6n+5) .bar-vertical, #serviceView .bar-col:nth-child(6n+5) .bar-item, .chart-bars .bar-col:nth-child(6n+5) .bar-vertical, .chart-bars .bar-col:nth-child(6n+5) .bar-item { background: var(--cat-5); } #serviceView .bar-col:nth-child(6n+6) .bar-vertical, #serviceView .bar-col:nth-child(6n+6) .bar-item, .chart-bars .bar-col:nth-child(6n+6) .bar-vertical, .chart-bars .bar-col:nth-child(6n+6) .bar-item { background: var(--cat-6); } /* hover 保持本柱颜色、只加深，而不是第 6 节那样一律变黑 */ #serviceView .bar-col:nth-child(6n+1):hover .bar-vertical, .chart-bars .bar-col:nth-child(6n+1):hover .bar-vertical { background: var(--cat-1-t); } #serviceView .bar-col:nth-child(6n+2):hover .bar-vertical, .chart-bars .bar-col:nth-child(6n+2):hover .bar-vertical { background: var(--cat-2-t); } #serviceView .bar-col:nth-child(6n+3):hover .bar-vertical, .chart-bars .bar-col:nth-child(6n+3):hover .bar-vertical { background: var(--cat-3-t); } #serviceView .bar-col:nth-child(6n+4):hover .bar-vertical, .chart-bars .bar-col:nth-child(6n+4):hover .bar-vertical { background: var(--cat-4-t); } #serviceView .bar-col:nth-child(6n+5):hover .bar-vertical, .chart-bars .bar-col:nth-child(6n+5):hover .bar-vertical { background: var(--cat-5-t); } #serviceView .bar-col:nth-child(6n+6):hover .bar-vertical, .chart-bars .bar-col:nth-child(6n+6):hover .bar-vertical { background: var(--cat-6-t); } /* 柱顶数值与百分比维持中性 —— 颜色只给色块本身，文字不再抢戏 */ .bar-count-label, .bar-percent-label, .bar-pct-label, .bar-label-top, .bar-x-label { color: var(--ink-3) !important; } /* ⑤ 今日记录表：首列（客户/业务主体）用主色表示「这是关键字段」 第 3 列是 r.source / r.stage 自由文本，无法做语义判断，保持中性 */ #inviteTodayBody td:first-child, #salesTodayBody td:first-child { color: var(--cat-1-t); font-weight: 500; } /* ⑥ 指标带：去掉首格灰底 + 分隔线改用「gap 透色法」 ───────────────────────────────────────────────────────────────────── (a) 灰底：第 4 节把首格刷成 #f7f8fa 当"主指标"强调。色标+彩色数字加上去之后， 这层灰不再是层次，而是发脏的一块印子（田总反馈像阴影）。现在主指标改由 三重标识承担：墨蓝色标 + 墨蓝数字 + 27px 字号，底色回归干净的白。 (b) 分隔线：第 4 节用 nth-child(5n+1) 去线、nth-child(n+6) 补横线，是按 「每行 5 个」写死的。而营销视图是 inline 的 repeat(7,1fr)，于是第 6 格 少一条竖线、第 6/7 格顶部还多出一条横线。 → 改成 gap:1px + 容器铺线色：卡片白底、缝隙透出线色，天然成网格线， 任意列数、任意换行都正确，不再需要猜"第几个"。 */ .dashboard-top-stats { gap: 1px !important; background: var(--line) !important; } .dashboard-top-stats > .top-stat-card, .dashboard-top-stats > .top-stat-card:first-child, .dashboard-top-stats > .top-stat-card.highlight { background: var(--card) !important; background-image: none !important; border: 0 !important; } .dashboard-top-stats > .top-stat-card:hover { background: #fbfbfc !important; } /* ═══════════════════════════════════════════════════════════════════════ 第 16 节 · 玻璃质感 glassmorphism（田总 2026-10-31 定稿） ─────────────────────────────────────────────────────────────────────── ① 环境层：body::before 铺 4 团低透明度大色斑，position:fixed 钉在页面底层， 滚动时卡片从上面飘过 —— 纯 `#fafafb` 底是不可能有玻璃感的，这是成败关键。 色取第 15 节阶段色带同源：墨蓝 / 靛紫 / 墨绿 / 琥珀。 不需要额外 JS，也不需要改任何 HTML，删本节即消失。 ② 强度＝标准档：白 55% + blur(20px) saturate(180%) ③ 3D 感的三件事：1px 白描边 + 顶部 inset 高光 + 底部柔和投影。 模糊只负责「透」，立体感全靠这三者。 ④ 降级：整节包在 @supports 里，不支持 backdrop-filter 的环境（老浏览器、 部分打印引擎）自动退回第 15 节的不透明卡片 —— 最坏结果＝现状。 ⑤ 作用域：实心内容卡限 body.home-page；浮层全站（本来就在内容之上， 效果最自然）。表格内部一律不上玻璃（几千行会掉帧）。 ═══════════════════════════════════════════════════════════════════════ */ /* ⚠️ 环境光只铺首页（body.home-page）—— 田总拍板的范围是「首页全套＋全站浮层」， 其余 31 页连色晕都不出现，做到真正意义上的「除了浮层完全不动」 */ body.home-page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 880px at 8% 12%, rgba(24, 95, 165, .34), transparent 64%), radial-gradient(950px 800px at 88% 18%, rgba(83, 74, 183, .30), transparent 62%), radial-gradient(1050px 900px at 72% 96%, rgba(15, 110, 86, .26), transparent 64%), radial-gradient(850px 750px at 18% 98%, rgba(186, 117, 23, .22), transparent 62%), radial-gradient(700px 620px at 45% 45%, rgba(11, 114, 133, .12), transparent 65%); } @media print { body.home-page::before, body::before { display: none; } } @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { :root { /* 玻璃底不是一块死白：上面压一层左上到右下衰减的镜面反光， 再叠一层自上而下的浓度差 —— 光源在左上，这是厚度感的来源 */ --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .30) 38%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .50) 55%, rgba(255, 255, 255, .58) 100%); --glass-brd: rgba(255, 255, 255, .9); /* 底边压一道极淡的冷色 —— 玻璃下沿的厚度。没有它卡片像一张贴纸 */ --glass-brd-b: rgba(24, 40, 72, .10); /* 悬浮感＝四层影，单层柔影只能表达「贴在纸面上」 ────────────────────────────────────────────────── ① 接触影 0 1px 极淡，勾出边缘，让卡片不和背景糊在一起 ② 主影 0 8px 短距离，定义「离地高度」 ③ 环境影 0 22px 大范围扩散，表达「悬在空中」 ④ 远景晕 0 46px 超远处慢慢融进背景，避免影子出现硬边 影子一律用冷调深蓝灰 rgba(24,40,72) 而非纯黑： 在有彩色环境光的页面上，黑色影会「发脏」，冷调影才是真的影子 */ /* ── 静止态：贴着桌面 ────────────────────────────────────────── 影子「小、深、收得住」，像物体平放在桌面上 */ --glass-sh: 0 1px 2px rgba(24, 40, 72, .06), 0 4px 10px rgba(24, 40, 72, .05), 0 12px 26px rgba(24, 40, 72, .05), inset 0 1px 0 rgba(255, 255, 255, .88), inset 0 -1px 0 rgba(255, 255, 255, .5); /* ── 悬停态：拉开距离 ────────────────────────────────────────── 田总 10-31 定稿：要的是「正面拉起来」而不是「被往上推」。 几何位置与尺寸一概不动（动了就会重采样发虚），全部靠光学线索： ① 影子变大、变淡、边缘更柔 —— 物体远离桌面时影子就是这个样子 （和上一版「hover 把影子加深」正好相反：加深＝压向读者） ② 表面提亮 —— 离光源更近，反射更多 ③ 边缘 rim 光加一圈，底边暗线加深 —— 厚度更明确 ④ 外围一圈极淡的品牌冷光晕 —— 被举起来时边缘的空气感 物理直觉一句话：**接触影变淡（脱离桌面）+ 远影摊开（距离变远）** */ --glass-sh-hi: 0 0 0 1px rgba(255, 255, 255, .6), 0 2px 3px rgba(24, 40, 72, .035), 0 10px 22px rgba(24, 40, 72, .05), 0 30px 60px rgba(24, 40, 72, .07), 0 64px 120px rgba(24, 40, 72, .06), 0 14px 44px rgba(24, 95, 165, .09), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(24, 40, 72, .07); /* 悬停时的表面：整体提亮约 6 个点的白 —— 靠近光源则更亮。 ⚠️ background-image 不支持过渡，所以这一档是瞬时切换， 幅度刻意压到很小以免突兀；渐进感由影子的 .28s 承担 */ --glass-bg-hi: linear-gradient(135deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .36) 38%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .56) 55%, rgba(255, 255, 255, .64) 100%); /* 浮层专用：最高一档 —— 层级直觉来自「影子差」， 所有元素都用同一档影子，页面就摊平了 */ --glass-sh-float: 0 2px 4px rgba(24, 40, 72, .06), 0 16px 32px rgba(24, 40, 72, .10), 0 40px 80px rgba(24, 40, 72, .13), 0 80px 150px rgba(24, 40, 72, .09), inset 0 1px 0 rgba(255, 255, 255, .95); } /* 内容卡：指标带 / 图表卡 / 侧栏小指标 ⚠️ 指标卡必须带上 .dashboard-top-stats 前缀 —— 第 15 节⑥ 的 `> .top-stat-card { background: var(--card) !important }` 是 (0,3,0)， 纯 .top-stat-card 只有 (0,2,1)，important 打架时它赢，玻璃底会被压回白 */ body.home-page .dashboard-top-stats > .top-stat-card, body.home-page .bottom-chart-card, body.home-page .chart-card, body.home-page .calendar-card, body.home-page .todo-card, body.home-page .side-stat-item, body.home-page .reach-stat-item { background: var(--glass-bg) !important; background-image: var(--glass-bg) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); /* 圆角抬到 12px：玻璃的圆角越大，边缘折射感越强，看着越像实体 */ border-radius: 12px !important; border: 1px solid var(--glass-brd) !important; border-bottom-color: var(--glass-brd-b) !important; box-shadow: var(--glass-sh) !important; transition: box-shadow .28s var(--ease), opacity .22s var(--ease); } /* 左侧彩色标识：跟着圆角收口，否则会在左上/左下露出两个直角 */ body.home-page .dashboard-top-stats > .top-stat-card::before { border-radius: 12px 0 0 12px; } /* 环境光透出的前提：正文容器不能再垫实色底 （body 的 #fafafb 已提升为画布背景，透明后观感不变， 但 body::before 的色晕就能从卡片底下透上来了） ⚠️ .dashboard-view 是四个视图的包裹层，不清透明的话环境光 只能从卡片缝隙里漏出来，玻璃感出不来 */ body.home-page .main-wrapper, body.home-page .main-content, body.home-page .dashboard-view, body.home-page .bottom-section { background: transparent !important; background-image: none !important; } /* 卡片内部的次级白底改透明，否则玻璃卡里会嵌着一块块不透明的白补丁 */ body.home-page .chart-card .chart-header, body.home-page .calendar-panel, body.home-page .todo-panel, body.home-page .todo-table-wrap { background: transparent !important; } /* 指标带：第 15 节⑥ 的 gap:1px 透色网格线会让半透明卡片底下压出一条灰线， 改回卡片阵列 —— 缝隙露出环境光，本身就是玻璃感的来源之一 */ body.home-page .dashboard-top-stats { background: transparent !important; gap: 10px !important; } /* 悬停＝正面拉起来（田总 10-31 定稿） ───────────────────────────────────────────────────────── 🚫 不要位移、不要缩放置的原则已经踩过两次坑： ① scale(1.008) → 重采样发虚（别人电脑 hover 就糊，已修复） ② translateY 位移 → 读作「被往上推」，不是「浮起来」（本次反馈） 现在的做法：几何完全静止，只改光与影 —— 接触影变淡（脱离桌面）、 远影摊开变柔（距离变远）、表面提亮（靠近光源）、边缘 rim 加亮。 ⚠️ transform: none 必须带 !important —— index.html 内联的 `#serviceView .bottom-section .top-stat-card:hover` 是 (1,3,0)， 它会写 translateY(-2px)；这里的选择器补了 .bottom-section 到 (1,4,1)， 同 !important 情况下比 specificity，我们赢。 */ body.home-page #serviceView .bottom-section .top-stat-card:hover, body.home-page #serviceView .top-stat-card:hover, body.home-page .top-stat-card:hover, body.home-page .bottom-chart-card:hover, body.home-page .chart-card:hover, body.home-page .calendar-card:hover, body.home-page .todo-card:hover, body.home-page .side-stat-item:hover, body.home-page .reach-stat-item:hover { transform: none !important; background: var(--glass-bg-hi) !important; background-image: var(--glass-bg-hi) !important; border-color: #fff !important; box-shadow: var(--glass-sh-hi) !important; } /* ⑤ 周围轻微后退 —— 深度感最强的其实是「对比」， 同伴一退，被指到的那张自然就浮出来了（田总 10-31 拍板，幅度要轻）。 ⚠️ 只敢用 opacity，绝不用 filter/saturate： filter 会在带 backdrop-filter 的元素上触发层合成问题，正是「模糊」那类事故 ⚠️ 依赖 :has()（Edge/Chrome 105+）。老旧内核不支持时整条规则静默失效， 表现为「没有烘托」，不会坏样式 —— 可接受的安全降级 */ body.home-page .dashboard-top-stats:has(> .top-stat-card:hover) > .top-stat-card:not(:hover), body.home-page .bottom-section:has(> .bottom-chart-card:hover) > .bottom-chart-card:not(:hover), body.home-page .bottom-section:has(> .chart-card:hover) > .chart-card:not(:hover) { opacity: .92; } /* 分段控件外壳 + 未选中项：轻一档玻璃，选中项保持实色墨蓝 */ body.home-page .view-toggle-btn-group { background: rgba(255, 255, 255, .45) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border-color: rgba(255, 255, 255, .75) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85); } body.home-page .view-toggle-btn { background: transparent !important; } /* ⚠️ 上一行会连选中态一起刷成透明（(0,2,1) 压过第 15 节的 (0,2,0)）， 必须把墨蓝补回来，否则选中项变成白字透明白底直接隐身 */ body.home-page .view-toggle-btn.active { background: var(--cat-1) !important; border-color: var(--cat-1) !important; box-shadow: 0 4px 12px rgba(24, 95, 165, .28), inset 0 1px 0 rgba(255, 255, 255, .3); } /* 次级按钮：顶栏图标按钮 / 图表区动作按钮 / 筛选按钮 —— 淡玻璃 */ body.home-page .icon-btn, body.home-page .chart-action-btn, body.home-page .mk-filter-btn { background: rgba(255, 255, 255, .5) !important; -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border-color: rgba(255, 255, 255, .8) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); } /* 浮层全站：重玻璃（悬浮在内容之上，最出效果）+ 最高一档影子 */ .dropdown-menu, .notification-drawer-panel, .drill-drawer-panel, .modal-content, .case-modal-content { -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: var(--glass-sh-float) !important; } /* 打印：一律退回不透明，避免灰块 */ @media print { body.home-page .top-stat-card, body.home-page .bottom-chart-card, body.home-page .side-stat-item, body.home-page .reach-stat-item { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; transform: none !important; } } } /* ⑦ 案件阶段占比柱状图：20 个阶段铺一条「生命周期色带」 ───────────────────────────────────────────────────────────────────── 设计口径（三句话看懂）： · 阶段分组决定「色相」：立案前准备(石板) / 非诉(墨蓝) / 审判(靛紫) / 上诉·再审(浅紫，分支) / 执行(青绿) / 回款(金) / 结案(墨绿)； · 组内推进决定「深浅」：越往后走颜色越深越实，一条流程读下来有方向感； · 每根柱子再叠一次 180° 微渐变（顶浅底深），避免大色块发死。 技术要点： · 选择器按 [data-step] 而非 nth-child —— 阶段以后要挪顺序、插占位列， 颜色也不会串位；data-step 是作用在 .case-stage-col 上的既有属性。 · 用 CSS 变量 --bar-a/--bar-b 单点注入，改色只需动下面那张色卡。 · 特异性必须高于 styles.css 的 .case-stage-bar.bar-xxx(0,2,0) 与 index.html 内联