` 变两列 grid（[左栏 rail-w | 内容 page-w]），左栏列本页章节、sticky 吸住。 ⚠️ 与 10-02「核心信息居中」的取舍：内容列仍 = --page-w（不缩），整块随左栏略右移 rail-w/2 ≈ 120px；换来"从进入到达成少滚一半"。窄屏（无左侧空间）收起左栏回单列。 */ #app.shell > main.pagemain{ display:grid; grid-template-columns: var(--rail-w) minmax(0,1fr); gap: var(--sp-3); align-items:start; max-width: calc(var(--page-w) + var(--rail-w) + var(--sp-3) + 2 * var(--sp-5)); } #app.shell > main.pagemain > .pagenav{ grid-column:1; grid-row:1; align-self:start; position:sticky; top:76px; z-index:20; display:flex; flex-direction:column; gap:0; padding:0; border:0; border-left:2px solid var(--line); border-radius:0; background:transparent; } #app.shell > main.pagemain > :not(.pagenav){ grid-column:2; min-width:0; } #app.shell .pagenav button{ text-align:left; width:100%; justify-content:flex-start; font-size: var(--fs-small); color: var(--dim); padding: var(--sp-2) var(--sp-3); border-radius:0; background: transparent; border:0; border-left:2px solid transparent; margin-left:-2px; min-height: var(--ctl-md); } #app.shell .pagenav button:hover{ color: var(--fg); } #app.shell .pagenav button.cur{ color: var(--accent); border-left-color: var(--accent); background: var(--accent-bg); } #app.shell main.pagemain [data-sec], #app.shell main.pagemain h3{ scroll-margin-top: 76px; } @media (max-width: 1440px){ #app.shell > main.pagemain{ grid-template-columns: minmax(0,1fr); } #app.shell > main.pagemain > .pagenav{ display:none; } } /* 流水页（2026-10-09 真机实测）：表格里的"值按钮"与短词**不许折行**—— 客户 id / 成员·容器 / 划入·划出都被挤成了两行，看着像坏了。展开行的附注（colspan 那一格）反过来：长句要能折，不给 nowrap。 */ #app.shell main.pagemain #tab-ledger td, #app.shell main.pagemain #tab-ledger th{ white-space: nowrap; } #app.shell main.pagemain #tab-ledger td[colspan]{ white-space: normal; } #app.shell main.pagemain #tab-ledger table table{ width: auto; min-width: 460px; } /* ══════════════════════════════════════════════════════════════════════════ ★ 2026-10-09 **三栏**：对象面 │ 对象列表 │ 对象页依据：`design/preview-ops-drilldown.html`（业主认可的原型）。一层是"面"（生意/客户/模型/供应商/平台），二层是"该面的对象"，三层是"这个对象/这段时间的页"。**只加列，不动既有两列的规则**。 ══════════════════════════════════════════════════════════════════════════ */ #app.shell { grid-template-columns: var(--rail-w) 232px minmax(0, 1fr); } #app.shell > .nav { grid-column: 1; grid-row: 1 / -1; } #app.shell > .objlist { grid-column: 2; grid-row: 1 / -1; align-content: start; border-right: 1px solid var(--line); padding: 0 14px 0 0; } /* ⚠️ 必须同时钉行：`.objlist` 是 `grid-row: 1 / -1`（撑满所有行），主区若只给列不给行，auto 摆放会把它挤到**第二行**（实测 top=994、视口外）。 */ #app.shell > :not(.nav):not(.objlist) { grid-column: 3; grid-row: 1; } .objlist .ol-item { display: block; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; color: var(--fg); border-radius: 8px; padding: var(--sp-2) var(--sp-3); cursor: pointer; font: inherit; } .objlist .ol-item:hover { background: var(--raise-2); } .objlist .ol-item.cur { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); } @media (max-width: 1080px) { #app.shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); } #app.shell > .objlist { display: none; } } /* 选中对象时，旧的那些页让位给对象页（一处规则，不逐个改 12 个 pane） */ #app.shell .pagemain.picking > div[id^="tab-"] { display: none; } #app.shell .pagemain.picking > .pagenav { display: none; } #app.shell .objpage { display: grid; gap: 14px; } /* ══════════════════════════════════════════════════════════════════════════ ★ 2026-10-09（业主真机截图）两处**结构级**修正 —— 放在文件末尾，确保不被断点或先前的规则压回去： ① **一级导航永远是「栏」**。此前 `flex-direction:column` 与三栏网格都被关在媒体查询里，窄一点的窗口（Retina 截图 1920 实为约 960 CSS px）会让一级导航退化成 **横排 + 换行**（真机量到：nav direction=row、wrap=wrap），看着像坏了。导航是"栏"这件事**不属于断点行为**：窄了让内容滚、让栏变窄，不许把栏变成横条。 ② **藏掉 `main.pagemain > .pagenav`（「本页章节」栏）**。三栏成型后，一级管"面"、二级管"该面的对象/账期/视图"，页面里再立一栏章节导航就是**第三栏导航**。原型（design/preview-ops-drilldown.html 的 renderBiz）里没有它：生意面就是**一页读数**（指标 + 账），章节跟着页面往下滚即可。 ══════════════════════════════════════════════════════════════════════════ */ #app.shell > .nav { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch; } #app.shell { grid-template-columns: var(--rail-w) 232px minmax(0, 1fr); } #app.shell > main.pagemain { grid-template-columns: minmax(0, 1fr) !important; } #app.shell > main.pagemain > .pagenav { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════ ★ 2026-10-09（业主：三栏的宽度比例 / 分割线 / 边距也要对齐）基准 = 原型 `design/preview-ops-drilldown.html` 的： .app{grid-template-columns:196px 300px 1fr} .rail{border-right:1px solid var(--line);padding:16px 10px;gap:2px} .rail a{padding:8px 10px} .list{border-right:1px solid var(--line)} .list h2{padding:18px 18px 10px} .rows{padding:0 8px 16px} .ritem{padding:9px 10px} .head{padding:20px 26px 14px;border-bottom:1px solid var(--line)} .wrap{padding:18px 26px 40px} 三栏是**通栏 + 1px 分割线**，不是三张卡片 —— 此前我这一台把导航做成了带边框/圆角/底色的卡片，与原型（以及另两台的骨架）不是同一个形状。 ══════════════════════════════════════════════════════════════════════════ */ #app.shell { grid-template-columns: 196px 300px minmax(0, 1fr); } /* 一级：通栏，只有一条右边线 */ #app.shell > .nav { grid-column: 1; grid-row: 1 / -1; background: var(--bg); border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 16px 10px; gap: 2px; align-content: start; } #app.shell .nav button { padding: 8px 10px; border-radius: 8px; } /* 二级：同样通栏 + 右边线；标题与行距照原型 */ #app.shell > .objlist { grid-column: 2; grid-row: 1 / -1; border-right: 1px solid var(--line); border-left: 0; padding: 0 8px 16px; display: flex; flex-direction: column; align-content: start; } .objlist .ol-item { padding: 9px 10px; border-radius: 8px; } /* 内容：顶部一条下边线，正文 26px 左右边距 */ #app.shell > main.pagemain { padding: 0; } #app.shell .objhead { padding: 20px 26px 14px; margin: 0; border-bottom: 1px solid var(--line); } #app.shell .objpage { padding: 0 26px 40px; } /* ══════════════════════════════════════════════════════════════════════════ ★ 2026-10-09 **窄窗口下收窄两条栏**（业主：三栏比例要对齐；但原型是 100vh 定宽应用，吃满屏幕，1920 下两条栏只占 26%。本台要在笔记本窗口（约 960–1280 CSS px）里也能用，所以**原型那组是宽屏基准值，窄了按比例让位给正文**）。只改**尺寸**，不动结构、不加交互（原型没画折叠/抽屉）。正文列是 minmax(0,1fr)，两条栏收窄多少，正文就多出多少。 ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1440px) { #app.shell { grid-template-columns: 180px 268px minmax(0, 1fr); } } @media (max-width: 1180px) { #app.shell { grid-template-columns: 168px 240px minmax(0, 1fr); } #app.shell .objhead { padding: 18px 20px 12px; } #app.shell .objpage { padding: 0 20px 32px; } } @media (max-width: 960px) { #app.shell { grid-template-columns: 152px 216px minmax(0, 1fr); } } /* ══════════════════════════════════════════════════════════════════════════ ★ 2026-10-09（业主两条）： ① **第二栏再收窄**（原型 300px 是 1920 宽屏的值；本台在笔记本窗口里 300 太占）。 ② **第二栏要固定，不跟第三栏滚**。—— 这条是我漏的：原型是**每列各自滚** （`.app{height:100vh;overflow:hidden}` + `.rows{overflow:auto}` + `.main{overflow:auto}`），而我只给一级栏加了 sticky，二级栏是普通流 ⇒ 正文一滚，二级栏跟着滚没了。现在一级、二级都 sticky 在视口顶，各自内部滚；正文仍随页面滚。 ⚠️ 顺序要紧：基准写在媒体查询**之前**，否则基准会把媒体查询压回去。 ══════════════════════════════════════════════════════════════════════════ */ #app.shell > .nav, #app.shell > .objlist { position: sticky; top: 0; align-self: start; max-height: calc(100vh - var(--shell-main-top, 87px)); overflow-y: auto; overscroll-behavior: contain; } #app.shell { grid-template-columns: 196px 240px minmax(0, 1fr); } @media (max-width: 1440px) { #app.shell { grid-template-columns: 180px 224px minmax(0, 1fr); } } @media (max-width: 1180px) { #app.shell { grid-template-columns: 168px 208px minmax(0, 1fr); } } @media (max-width: 960px) { #app.shell { grid-template-columns: 152px 192px minmax(0, 1fr); } } /* ══════════════════════════════════════════════════════════════════════════ ★ 2026-10-09（业主验收：这不对，很多问题）—— 真机量出来的两处硬伤： ① **一级导航文字是居中的**（computed: text-align:center / justify-content:center）。原型 `.rail a` 是左对齐的栏目项。center 不来自本文件（来自共享样式表），所以这里用 !important 钉死 —— 导航是"栏"，项必须左对齐。 ② **主区内容被推到右边、左边一大片空白**（computed: main 仍是 display:grid，网格 `62px 382px`）。根因：`--rail-w` 这个变量在本仓**根本没定义**，于是 `grid-template-columns: var(--rail-w) minmax(0,1fr)` 成了"失效变量"的残迹，而「本页章节」那一列（.pagenav）已经废掉、不再需要占位。 ⇒ **主区不该再是 grid**，改普通块，子元素自然通栏堆叠。 ══════════════════════════════════════════════════════════════════════════ */ #app.shell .nav button { text-align: left !important; justify-content: flex-start !important; } #app.shell > main.pagemain { display: block !important; grid-template-columns: none !important; padding: 0; } /* ══════════════════════════════════════════════════════════════════════════ ★ 2026-10-09（业主验收截图 · 第二轮） ① **一级导航的选中态是"整栏下划线"** —— 看着像页签，不像"栏里的项"。原型 `.rail a` 的选中态是**圆角底色块**（accent 底 + accent 字），不是下划线。下划线来自本台早期的顶部页签样式（共享样式表），这里按"栏内项"改回来。 ② **顶栏窄窗口下「退出」掉到第二行、甩到最左**：原因是一行里东西太多（品牌 + 两个标签 + 账号 + 三个外观段 + 退出）， `#who` 又带 `margin-left:auto` ⇒ 一换行，最后那个就孤零零落在左边。改法：顶栏**不换行**，把中间的账号串**截断**（个人信息可省，操作按钮不能掉行）。 ══════════════════════════════════════════════════════════════════════════ */ #app.shell .nav button.cur { background: var(--accent-bg) !important; color: var(--accent) !important; border: 1px solid var(--accent-line) !important; border-radius: 8px !important; } .brand { flex-wrap: nowrap !important; } .brand > #who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════════ ★ 2026-10-09（逐页验收第 3 棒 · 修） ① 列表页的标题此前是 `div.objtitle` ⇒ **不是标题元素**（该页没有标题层级，屏幕阅读器读不到页标题，视觉层级也与对象页不一致 —— 对象页是 h2）。改成 h2 并显式给字号/字重/边距（本台没有 .objtitle 的既有样式）。 ② 「功能开关」页那组统计（开关 8 项 / 开 3 / 关 5）此前散在一行两端，三个数之间没有关系感。收成**左对齐的一簇**，只作用于该页（不碰别处的读数）。 ══════════════════════════════════════════════════════════════════════════ */ #app.shell .objtitle { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: .3px; } #tab-flags .ov { display: flex; gap: 28px; align-items: baseline; justify-content: flex-start; } /* ★ 2026-10-09：「视图」组吸底常显（业主：回弹会导致看不到「客户管理」） —— 当时视图组排在 30 行对象**之后**，被压到栏底只露半行 ⇒ `sticky` 钉底 + `margin-top:auto` 顶下去。 ★ 2026-10-10（业主：「占用的空间没干掉」）：二级栏**上半截已删**（对象清单 / 时间范围都移走），视图组成栏里**唯一**的内容 ⇒ 那两条只留下一大块空白（`margin-top:auto` 把唯一子项顶到栏底，上面全空）。 ⇒ 去掉 `position/bottom/margin-top`：让它从栏顶正常流下来，栏有多高就用多高。 `border-top` 也去掉：它原本是与上方**对象区**的分界；现在上方是带 `border-bottom` 的栏目标题条，会成双线。 */ .objlist .ol-views { background: var(--bg); padding: 6px 0 2px; } /* ★ 2026-10-09（业主：数据量超过 10 条就应该有筛选功能）—— 账（LedgerCut）的筛选框 */ .lc-filter { width: 150px; background: var(--panel); border: 1px solid var(--line); color: var(--fg); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: var(--fs-small); outline: none; } .lc-filter::placeholder { color: var(--muted); } .lc-filter:focus { border-color: var(--accent-line); } /* ★ 2026-10-09（业主：顶栏要固定，不要跟着回弹或者滚动）把「面包屑 + 品牌行」合成一条**固定顶栏**：页面滚它不动、也不会被橡皮筋回弹带走。两条栏（一级/二级）则钉在它下面：top: var(--shell-top)（运行时量出的顶栏下沿）。 */ .wrap > .topbar { position: sticky; top: 0; z-index: 30; background: var(--bg); } #app.shell > .nav, #app.shell > .objlist { top: var(--shell-top, 132px); } /* ── 左侧两栏收起（业主：两栏要能收起）────────────────────────── 外壳 `#app.shell` 是三列网格（面 196 · 对象 240 · 内容 1fr）；收起 = 两列归零 + 两个栏隐藏，内容拿回整宽。类由顶栏的 RailToggle 切换并记在 localStorage。 */ /* 两个左栏**各自**能收（业主：「两个左栏都能够自行收起」）—— 三条组合态都要写。面导航 = .nav（第 1 列）· 对象/账期 = .objlist（第 2 列）。 */ /* 收起 = **缩成窄条**（不是整栏消失）—— 按钮就住在栏里，缩没了就没法再展开。窄条里只留 `.rail-head`（那一枚按钮），其余内容 hide。 */ #app.shell.rail1hide { grid-template-columns: 34px 240px minmax(0, 1fr); } #app.shell.rail2hide { grid-template-columns: 196px 34px minmax(0, 1fr); } #app.shell.rail1hide.rail2hide { grid-template-columns: 34px 34px minmax(0, 1fr); } #app.shell.rail1hide > .nav { padding: 8px 4px; overflow: hidden; } #app.shell.rail2hide > .objlist { padding: 8px 4px; overflow: hidden; } #app.shell.rail1hide > .nav > *:not(.rail-head) { display: none; } #app.shell.rail2hide > .objlist > *:not(.rail-head) { display: none; } .rail-head { display: flex; justify-content: flex-end; } .rail-head .rail-toggle { margin: 0 0 6px; } .rail-toggle { margin-left: 6px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; cursor: pointer; color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); } .rail-toggle:hover { color: var(--fg); background: var(--raise-2); } /* ── 内容顶部 TAB（业主：用 TAB 组织，别让人纵向翻滚）────────────── */ .vtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 12px; } .vtabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--dim); padding: 6px 12px; cursor: pointer; font-size: var(--fs-body); } .vtabs button:hover { color: var(--fg); } .vtabs button.cur { color: var(--accent); border-bottom-color: var(--accent); } /* 页内章节 TAB：只对「标题是内容区直接子元素」的扁平页生效（见 PageNav 的护栏）。 */ .pgtabs { position: sticky; top: var(--shell-top, 132px); z-index: 12; background: var(--bg); flex-wrap: wrap; } .pgtabs button { font-size: var(--fs-micro); padding: 4px 10px; } /* ★ 2026-10-09 像素级复核（截图实证）：第二栏那枚按钮出来了、**第一栏那枚没有**。原因：`.nav` 内部有一整套按钮级规则（ `.nav button { border-color:transparent; background:transparent; … }` 以及 `padding` 等），把 `.rail-toggle` 的外观抹平/挤掉。这里给 `rail-head` 与其按钮一条**显式高优先级**规则，保证两栏的按钮都以同一副样子出现在**各自栏内的第一行、右对齐**。 */ #app.shell > .nav > .rail-head, #app.shell > .objlist > .rail-head { display: flex !important; justify-content: flex-end; align-items: center; min-height: 28px; margin: 0 0 8px; flex: 0 0 auto; } #app.shell > .nav > .rail-head > .rail-toggle, #app.shell > .objlist > .rail-head > .rail-toggle { width: 28px !important; height: 28px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border: 1px solid var(--line) !important; background: transparent !important; color: var(--dim) !important; border-radius: var(--r-md) !important; } #app.shell > .nav > .rail-head > .rail-toggle:hover, #app.shell > .objlist > .rail-head > .rail-toggle:hover { color: var(--fg) !important; background: var(--raise-2) !important; } /* ══════════════════════════════════════════════════════════════════════════ ★ 2026-10-09 运营台整理（经营数据 · 列表页 · 账） ① 一个时间窗管整页：读数头 = 标题 + 当前窗 + 筛选；KPI 做成一排卡片。 ② 列表页：每个属性一列、可按列排序；0 一律 `—`。 ③ 成本列的细条：只表示占比，读数仍是右边的数。 ══════════════════════════════════════════════════════════════════════════ */ .ov-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; } .ov-head h2 { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: .3px; } .ov-win { font-size: var(--fs-small); color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-line); border-radius: var(--r-pill); padding: 1px 10px; white-space: nowrap; } .ov-win small { color: var(--dim); margin-left: 6px; font-size: var(--fs-micro); } .ov-q, .ol-q { margin-left: auto; width: 220px; max-width: 40%; font-size: var(--fs-small); padding: 4px 10px; border-radius: 8px; } .ov-alert { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 14px; border: 1px solid var(--warn-line); background: var(--warn-bg); border-radius: 10px; font-size: var(--fs-body); } .ov-alert b { color: var(--warn); font-weight: 600; white-space: nowrap; } .ov-alert span { flex: 1; min-width: 0; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin: 0 0 14px; } .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; } .kpi .k { font-size: var(--fs-micro); color: var(--dim); letter-spacing: .4px; } .kpi .v { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; } .kpi .s { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; } .kpi.wide { grid-column: 1 / -1; } /* ★ 2026-10-12（「一眼看懂」）：一屏同权重的东西太多，就没有主次。经营数据页 —— 主行三个数（收入/成本/毛利）是判断，其余经营事实**降一档**。 */ .kpis.sec .kpi { padding: 9px 12px; } .kpis.sec .kpi .v { font-size: var(--fs-md); } .kpi .v.u { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-md); } .kpi .v.u b { font-weight: 600; font-size: var(--fs-xl); } .kpi .v.u span { color: var(--dim); font-size: var(--fs-small); } .ov-pair { align-items: start; margin-bottom: 14px; } .ov-pair > .card { margin-bottom: 0; } .ov-params { margin: 6px 2px 0; font-size: var(--fs-micro); color: var(--muted); } /* 账：能点的行才有手形与悬停；吸顶表头 */ #app.shell tr.lc-drill { cursor: pointer; } .lc-unattr { font-size: var(--fs-micro); color: var(--muted); margin: 8px 0 0; } /* 列表页 */ .winseg { display: inline-flex; gap: 4px; margin-left: 8px; } /* 列表页（ObjListPage）：版式走 .ov-head + .ptable，这里只补它没有的交互态（表头排序钮、整行可点）。 */ .listpage .ptable th .thsort { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; color: var(--dim); font-weight: 600; } .listpage .ptable th .thsort:hover, .listpage .ptable th .thsort:focus-visible { color: var(--fg); } .listpage .ptable th .thsort .ar { display: inline-block; width: 10px; margin: 0 2px; color: var(--accent); text-align: center; } .listpage .ptable .sub { font-size: var(--fs-micro); color: var(--muted); font-weight: 400; } .listpage .ptable tr.rowlink { cursor: pointer; } .listpage .ptable tr.rowlink:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; } .listpage .ptable tr.rowlink:hover td { background: var(--raise-2); } .listpage .ptable td.t-dim { color: var(--muted); } .listpage .ptable td.t-bad:not(:has(.pill)) { color: var(--bad); } /* 对象页头：事实一行排开（名-值成对），不再是一段话 */ .facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 10px 0 0; } .facts > div { min-width: 0; } .facts dt { font-size: var(--fs-micro); color: var(--muted); letter-spacing: .4px; } .facts dd { margin: 0; font-size: var(--fs-body); font-variant-numeric: tabular-nums; } .facts > div.wide { flex-basis: 100%; } /* ══════════════════════════════════════════════════════════════════════════ ★ 2026-10-09 像素级整理 ① 正文留白：各 tab 页此前顶着分栏线、顶着窗口右缘，没有天头与边距 ⇒ 统一 20/26。 ② 工具条：所有控件同高 28；分段控件 = 一个圆角框 + 内部竖线，不再是一排各自带框的按钮。 ③ 占比条：有轨道（满额参照）、与数字同一内边距，从左长起。 ④ 排序箭头：右对齐的列把箭头放标签左边，标签右缘与数字右缘对齐。 ⑤ 列表页头：与表格左缘对齐（此前被 objpage + objhead 两层 26px 推到 52px）。 ══════════════════════════════════════════════════════════════════════════ */ #app.shell > main.pagemain > div[id^="tab-"] { padding: 20px 26px 48px; } @media (max-width: 1180px) { #app.shell > main.pagemain > div[id^="tab-"] { padding: 16px 20px 40px; } } #app.shell .lc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; } #app.shell .lc-head h3 { margin: 0; } #app.shell .lc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; } #app.shell .lc-bar > .lc-filter, #app.shell .lc-bar > select { height: 28px; min-height: 28px; box-sizing: border-box; border-radius: 8px; font-size: var(--fs-small); padding-block: 0; } #app.shell .lc-bar > .lc-filter { padding-inline: 10px; } #app.shell .lc-bar > select { padding-inline: 10px 6px; } #app.shell .lc-busy { font-size: var(--fs-micro); color: var(--muted); } #app.shell .lc-seg { display: inline-flex; align-items: stretch; height: 28px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); } #app.shell .lc-seg > button.mini { min-height: 0; height: 100%; border: 0; border-radius: 0; background: transparent; color: var(--dim); padding: 0 11px; font-size: var(--fs-small); box-shadow: none; } #app.shell .lc-seg > button.mini + button.mini { border-left: 1px solid var(--line); } #app.shell .lc-seg > button.mini:hover { color: var(--fg); } #app.shell .lc-seg > button.mini.cur { background: var(--accent-bg); color: var(--accent); } #app.shell .listpage .ol-q { height: 28px; box-sizing: border-box; padding: 0 10px; } #app.shell .lc-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 22px; margin: 0 0 10px; font-size: var(--fs-small); } #app.shell .lc-crumb .sep { color: var(--dim); } #app.shell .lc-crumb .cur { color: var(--muted); } #app.shell .lc-step { display: inline-flex; align-items: center; gap: 6px; } #app.shell .lc-crumb .pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; font-size: var(--fs-small); background: transparent; color: var(--fg); cursor: pointer; } #app.shell .lc-crumb .pill:hover { border-color: var(--accent-line); color: var(--accent); } td.barcell { position: relative; } td.barcell::after { content: ''; position: absolute; right: 12px; bottom: 4px; width: 72px; height: 2px; border-radius: 1px; background: var(--line); opacity: .7; } td.barcell .bar { position: absolute; z-index: 1; right: calc(12px + 72px - 72px * var(--w, 0) / 100); bottom: 4px; height: 2px; border-radius: 1px; width: calc(72px * var(--w, 0) / 100); background: var(--accent); opacity: .85; } td.barcell > span { position: relative; } #app.shell .ov-pair { align-items: stretch; } #app.shell table { font-variant-numeric: tabular-nums; } .kpi .v.u b { color: var(--fg); } #app.shell > .nav, #app.shell > .objlist { min-height: calc(100vh - var(--shell-main-top, 87px)); } #app.shell > .objlist { padding-bottom: 0; } .objlist .ol-views { padding: 6px 0 14px; } #app.shell .objpage { padding-top: 20px; } @media (max-width: 1180px) { #app.shell .objpage { padding-top: 16px; } } /* 两栏收起钮：同一行、同一右缘 —— 两栏上内边距、右内边距取同一值（此前 16/10 对 0/8，差 16px 高、2px 宽） */ #app.shell > .nav, #app.shell > .objlist { padding: 12px 10px 0; } #app.shell > .nav > .rail-head, #app.shell > .objlist > .rail-head { margin-bottom: 8px; } #app.shell > .nav > .rail-head > .rail-toggle, #app.shell > .objlist > .rail-head > .rail-toggle { min-height: 0 !important; width: 28px !important; height: 28px !important; box-sizing: border-box; } .brand > *, .scheme-seg button, #logout { white-space: nowrap; flex-shrink: 0; } .brand > #who { flex-shrink: 1; } .ov-head h2, .ov-win { white-space: nowrap; } /* ★ 2026-10-09 栏目标题条（业主：收起钮「不整齐」）：两左栏顶部统一为一条 34px 的标题条—— 左侧栏名（板块 / 账期 / 客户 (n) …），右侧收起钮；与主区天头同高、同一基线。 */ #app.shell > .nav > .rail-head, #app.shell > .objlist > .rail-head { justify-content: space-between; height: 34px; min-height: 34px; margin: 0 0 8px; padding: 0 2px 0 4px; border-bottom: 1px solid var(--line); } #app.shell .rail-title { font-size: var(--fs-small); font-weight: 600; letter-spacing: .4px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #app.shell > .nav > .rail-head > .rail-toggle, #app.shell > .objlist > .rail-head > .rail-toggle { margin: 0 !important; } #app.shell.rail1hide > .nav > .rail-head, #app.shell.rail2hide > .objlist > .rail-head { justify-content: center; padding: 0; border-bottom: 0; } #app.shell.rail1hide > .nav > .rail-head > .rail-title, #app.shell.rail2hide > .objlist > .rail-head > .rail-title { display: none; } /* 主区标题统一（各面 pane 的 h2 同一字号、同一节奏；ov-head 内的 h2 归零边距由其自己对齐） */ #app.shell main.pagemain h2 { font-size: var(--fs-title); font-weight: 600; letter-spacing: .3px; margin: 0 0 12px; } #app.shell main.pagemain .ov-head h2 { margin: 0; } /* 占比条（对账页 · 四栏） */ .sharebar { height: 6px; border-radius: 3px; background: var(--raise-2); overflow: hidden; min-width: 80px; } .sharebar > i { display: block; height: 100%; background: var(--accent); } /* ★ 2026-10-09 并行合流后的像素修正（截图实证）： - 「板块」栏名被 `.nav span` 的虚线胶囊样式套住 ⇒ 栏名去掉边框与底色； - 「全部展开」「N / M 个模型」在窄列里被压成竖排 ⇒ 按钮与计数不换行； - 非价目表的 `.ptable` 改回自动列宽，不再套 7 列的钉死宽度。 */ #app.shell .rail-title { border: 0; padding: 0; border-radius: 0; background: none; } button.mini { white-space: nowrap; flex-shrink: 0; } #hits, #msHits { white-space: nowrap; } /* 表头不逐字换行（自动列宽下，中文表头会被挤成竖排） */ .ptable th { white-space: nowrap; } /* ★ 2026-10-09 ledgercut */ /* 账的页头标题用 h3 时，与其它页头 h2 同字号、同字重，且去掉 h3 全局的下边距（否则与按钮不齐） */ .ov-head > h3 { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: .3px; color: var(--fg); } /* 待补价表：是「要动手补」的清单，补价按钮常显（不走 ptable 的悬停才现） */ .ptable.pend tbody tr .mini { opacity: 1; } /* 窄窗口：表格宽度不足时整表在卡片内横向滚动，不再把列挤成竖排（供应商的模型/密钥列曾逐字换行） */ .ptable { min-width: 640px; } /* ══════════════════════════════════════════════════════════════════ 费用面 · 汇总带与页面骨架（2026-10-13 业主：「全面优化，用户极其苛刻」）三条原则： ① **结论在上、过程在下** —— 汇总带只放"判断"用的数，过程量降为一小行 ② **一个数一个位置、同类一律同形** —— 金额统一 ¥x,xxx.00，整数统一千分位 ③ **能自己解释的地方不要人猜** —— 空值明确写「—」 ★ 2026-10-14：原先用它的两页（`CostBoard` 收支 · `Consumption` 消费）已废 —— 四页（收支/账单/消费/日报）收成一张「收支」（`IncomeExpense.tsx`）。汇总带（`cb-sum*`）与下面那套页面骨架（`dr-*`）继续由**新收支页与价目页**共用。 ══════════════════════════════════════════════════════════════════ */ /* 汇总带（「总」那一格）：三格等宽、左对齐成列；格与格之间用竖线分隔（比堆间距更"整"） */ #app.shell .cb-sum{display:flex;flex-wrap:wrap;gap:0;margin:0 0 8px; background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden} #app.shell .cb-sumitem{flex:1 1 130px;min-width:110px;padding:var(--sp-3) var(--sp-4); border-right:1px solid var(--line)} #app.shell .cb-sumitem:last-child{border-right:0} #app.shell .cb-sumitem-key{background:color-mix(in srgb, var(--accent) 5%, transparent)} /* 标签行：主名与注解**各自不折断**（中文被从中间拆开＝看着像坏了），放不下时**整块换行**（注解掉到下一行），不把「积分消耗」拆成「积分消/耗」。 */ #app.shell .cb-sumlab{font-size:var(--fs-small);display:flex;align-items:baseline;gap:2px 6px; flex-wrap:wrap;white-space:nowrap} #app.shell .cb-sumq{font-size:var(--fs-micro);opacity:.62} #app.shell .cb-sumnum{font-size:22px;font-weight:600;margin-top:2px; font-variant-numeric:tabular-nums;white-space:nowrap} /* 汇总带的附加小字（「N/M 项未出账」）—— 主数值保持 22px 不折行；这一截独立成行、降字号、允许折行，避免长串把整格顶出卡片边界（2026-10-17 业主截图的溢出）。信息不删：业主明确要求「已知与未知分开说」，这里只是换个排布。 */ #app.shell .cb-sumnum .cb-sumaux{display:block;font-size:var(--fs-micro);font-weight:400; opacity:.66;white-space:normal;line-height:1.3;margin-top:1px} #app.shell .cb-sumnum.cb-neg{color:var(--danger)} /* 过程量：一行小字，紧贴汇总带下方 —— 看得见但不抢位置 */ #app.shell .cb-meta{font-size:var(--fs-small);margin:0 0 12px 2px} /* 收支页：客户行的展开箭头；展开出来的团队行（比父行退一格、淡一档） */ #app.shell .ie-chev{display:inline-block;width:14px;margin-right:2px;color:var(--muted);font-size:11px} /* 团队子行要比父行的**文字**再深一格（父行文字前有 16px 的展开箭头，30px 只够打平） */ #app.shell .ie-sub td{padding-left:44px;color:var(--muted); border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)} /* ★ 2026-10-18：表格里的**副值**（积分 ≈ 元 · 已剔除额）—— 与主数值同一格、小一号、淡一档。它给的是换算与拆分，不是又一个独立指标，所以不进表头、不占列。 */ #app.shell .ie-yen{display:block;font-size:var(--fs-micro);color:var(--muted); font-weight:400;line-height:1.35;white-space:nowrap} /* ★ 2026-10-17（业主）：维度表改成「父行 + 供应商子行 + 合计行」三段。父行加粗（一眼看到谁），子行缩进淡一档（谁在上面花钱），合计行加顶线 + 略深底（分段结束，不是又一个数据行）。 */ #app.shell .ie-parent td{font-weight:600} #app.shell tr.ie-chase-cur td{background:color-mix(in srgb, var(--accent) 8%, transparent)} #app.shell .ie-total td{border-top:2px solid var(--line);font-variant-numeric:tabular-nums; background:color-mix(in srgb,var(--fg) 3%,transparent)} /* ★ 2026-10-19（业主）：**一张表只有一个主语** —— 分类不再做子行，改成 chips。一个 chip = 一个分类值 + 它自己的数；点它 = 把下面那张表收窄到它。合计跟着选中项走（口径写在上方那行小字里），表里只有一层，仍按积分降序。 */ #app.shell .ie-scope{font-size:var(--fs-small);margin:2px 0 8px 2px} #app.shell .ie-sum{margin:0 0 12px} #app.shell .ie-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px} #app.shell .ie-chip{display:inline-flex;align-items:baseline;gap:7px;padding:5px 13px; border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--fg); font:inherit;font-size:var(--fs-small);cursor:pointer;white-space:nowrap} #app.shell .ie-chip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))} #app.shell .ie-chip .n{color:var(--muted);font-size:var(--fs-micro);font-variant-numeric:tabular-nums} #app.shell .ie-chip.on{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:600} #app.shell .ie-chip.on .n{color:var(--accent);opacity:.75} /* 「未归类」不是一种业务，是主数据没挂上的缺口 —— 虚线淡色，与业务类型区分开 */ #app.shell .ie-chip.dirty{border-style:dashed;color:var(--muted)} #app.shell .ie-chip.more{color:var(--muted)} /* ── 费用面页面骨架（`PriceSheet` 价目 / `IncomeExpense` 收支共用）────────── 日期条 + 卡片（标题 + 截断前的总数 + 表格 + 点行展开"详情"）。颜色全部走既有变量（--fg / --line / --muted…），跟随主题，不写死色值。 */ #app.shell .dr-wrap{display:flex;flex-direction:column;gap:14px;padding:4px 0 24px} #app.shell .dr-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap} #app.shell .dr-bar label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap} /* 页头右侧的时间/导出控件：**每个控件内部不折字**（「日期/月份」被拆开像坏了），但**控件之间可以换行** —— 内容区窄时整行往下挪，绝不能把「导出」挤出屏外。实测（800px 视口 + 两条侧栏展开）：不许换行 ⇒ 「今天」「导出」直接看不见。 */ #app.shell .ie-ctl{flex-wrap:wrap;margin-left:auto} #app.shell .ie-when.ie-ctl{margin-left:0} #app.shell .dr-table th[rowspan]{vertical-align:bottom} #app.shell .cb-sumitem.ie-accrual{flex:1 1 200px} #app.shell .cb-sumitem.ie-bill{flex:2 1 320px} #app.shell .ie-bill-parts{display:flex;gap:28px;margin-top:6px} #app.shell .ie-bill-parts .cb-sumnum{font-size:18px} #app.shell .dr-bar input[type=date]{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--fg);font:inherit} #app.shell .dr-note{font-size:12px;color:var(--muted);line-height:1.6} #app.shell .dr-hint{padding:18px;color:var(--muted);font-size:13px} #app.shell .dr-card{border:1px solid var(--line);border-radius:10px;overflow:hidden} #app.shell .dr-card>header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--line)} #app.shell .dr-card>header b{font-size:14px} #app.shell .dr-sub{font-size:12px;color:var(--muted)} #app.shell .dr-total{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} /* 卡片级导出：按钮长在它导出的那张表上 —— 位置本身就是「导什么」的说明 */ #app.shell .dr-card-export{margin-left:auto} #app.shell .dr-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums} #app.shell .dr-table th{padding:7px 12px;font-weight:500;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)} #app.shell .dr-table td{padding:7px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)} #app.shell .dr-table tr:last-child td{border-bottom:0} #app.shell .dr-row{cursor:pointer;transition:background .12s ease} #app.shell .dr-row:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)} #app.shell .dr-idx{display:inline-block;min-width:18px;margin-right:6px;color:var(--muted);font-size:11px} #app.shell .dr-raw{display:inline-block;margin-left:8px;font-size:11px;color:var(--muted);font-family:ui-monospace,monospace} #app.shell .dr-detail{padding:10px 12px 12px 36px;background:color-mix(in srgb,var(--fg) 3%,transparent);font-size:12.5px;line-height:1.9} #app.shell .dr-d1{font-weight:600;margin-bottom:2px} #app.shell .dr-d2{color:var(--muted);font-size:12px;line-height:1.7} #app.shell .dr-detail code{font-size:11.5px;background:color-mix(in srgb,var(--fg) 6%,transparent);padding:1px 5px;border-radius:4px} #app.shell .dr-empty{padding:16px 12px;color:var(--muted);font-size:13px} #app.shell .dr-foot{border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px} /* ⚠️ 新栈挂载点样式 —— **唯一一条被复制到各面的 CSS**。 * * 旧页面是「手写静态 HTML」：HTML 里直接就是

…。 * 新栈（React）需要一个挂载点 ⇒ HTML 里多一层

。 * `display: contents` 让这层**不参与布局**（盒子被"拆掉"，子元素直接落在 body 的布局里）—— * 于是 body 的 flex 与 .wrap 的定位与升级前**逐像素一致**。 * * 不用它会发生什么：多出来的那层成为 body 布局的子项 ⇒ 整页位置偏移。 * （这个坑在创作台与运营台**都**踩过：多一层 #root 让整页竖着堆成一列。） * * ★ 2026-09-27（施工项 #19）：本文件是**权威副本**，正本在 `frontend/shared/root.css`， * 各面下的副本由 `scripts/sync_shared.sh` 派生。**不要在各面下直接改**——改了会被 --check 判漂移。 * （此前两个副本的注释已经各说各的 ⇒ 那正是"下一次漂移就在规则本身"的前兆。） */ #root { display: contents }