:root { /* ---- 配色：藍（あい）と罫線（2026-10-27 改版）---- 世界：日系企业系统的「帳票」质感 —— 生成纸白的底、发丝罫线分格、 藍（靛）当墨色，颜色只做状态、不做装饰。 为什么不沿用 #1565c0 科技蓝：它在白底上是"通用后台"的默认色， 而 #1F3E63 是日式靛蓝（藍染/紺），压得住大表格，也不与状态红抢注意力。 所有配对已用 WCAG 公式核过（正文 ≥4.5:1，见 tests/contrast.node.test.js）： #1A1D21/白 16.9 · #5A6270/白 6.2 · #5A6270/#F4F4F1 5.6 白/#1F3E63 10.9 · 白/#2C6B57 6.3 · 白/#A93226 6.6 */ --c-primary: #1F3E63; --c-primary-dark: #162F4C; --c-accent: #2C6B57; --c-accent-dark: #245846; --c-danger: #A93226; --c-text: #1A1D21; /* 次要文字：旧 #5b6472 在 #f5f7fa 上 5.4:1，可读但偏冷灰； #5A6270 在新纸白底（#F4F4F1）上 5.58:1、白底 6.15:1，且带一点暖。 */ --c-muted: #5A6270; --c-border: #E2E0D9; /* 发丝罫线：比 #e0e0e0 暖、比纯灰细 */ --c-bg: #F4F4F1; /* 生成纸白：不是纯灰，也不是奶油色 */ /* 全站数据表格统一尺寸：正文数据列最小宽 120、数据行高 64。 历史：2026-09-28 拍板 95px；2026-10-27 用户要求"UI 密度一起修"后降到 64px。 95px 的问题：一屏 1080p 只放得下 8 行，翻台账要滚很久；对"看数"又缺层级。 64px 下 1080p 约 12 行，且缩略图按 calc(--row-h - 14) 自动缩到 50px 仍可辨。 含缩略图的三张表（商品/销售明细/客户定制）单独保留 95px，见下方覆盖。 窄列（checkbox/图/单号/日期等 .nw 与操作列 .act）豁免，保持紧凑。 */ --col-w: 120px; --row-h: 64px; /* td 的列宽**硬底线**。与 --col-w 分开是有原因的（2026-10-07）： --col-w 还兼着「行内缩略图 max-width」的职责，改它会连带把图缩小； 而真正需要按列数分档的只有这一条底线。两者语义不同，别再合并。 */ --td-min: var(--col-w); --c-surface: #ffffff; /* ---- 语义色阶（2026-10-27 变量化）---- 为什么把原本写死的色提成变量：深色模式用 @media (prefers-color-scheme) 覆盖时， 写死的浅色值会和深色块的背景**交叉配对**，静态检测（impeccable detect）会把 "深色文字配浅色底"当成不达标的组合报出来，噪音盖住真问题。 提成变量后，浅色/深色各给一套值，静态与运行时看到的是同一组配对。 */ --c-on-primary: #fff; /* 主按钮上的字 */ --c-on-accent: #fff; /* 强调按钮上的字 */ --c-sunken: #EFEEE9; /* 分组底（.subtabs / .seg / 下拉页脚） */ --c-raised: #ffffff; /* 分组里被选中项的底 */ --c-thead-bg: #FAFAF7; --c-thead-text: #4A5260; --c-row-hover: #F8F8F4; --c-danger-soft: #F7E9E6; --c-danger-soft-text: #8F2B20; --c-ok-bg: #E8F0EA; --c-ok-text: #276352; --c-hint-blue-bg: #E9EEF4; --c-hint-blue-line: #C3CEDC; --c-hint-blue-text: #22405E; --c-hint-amber-bg: #F7F0DF; --c-hint-amber-line: #DFCBA5; --c-hint-amber-text: #6B4E18; --c-combo-hover: #F5F5F1; --c-combo-on: #E9EEF4; --c-sampbar-bg: #F8F2E4; --c-sampbar-line: #E3D2B0; --c-sampbar-text: #6B4E18; --c-readonly-bg: #F1F1ED; --c-readonly-text: #565D68; /* 罫线三档（2026-10-27）： --c-line 是浮层/卡片内部的分隔（比 --c-border 再淡一档）； --c-rule 是表头下那条「見出し罫」，带靛蓝、不抢但要能被看见； --c-rule-strong 给合计区的二重罫線（帳票里合计上方那道双线）。 */ --c-line: #E7E5DE; --c-rule: #B7C2D2; --c-rule-strong: #2B3A4D; --c-focus: rgba(31, 62, 99, .18); /* 下拉箭头：内联 SVG（不引图标库），颜色做成变量，深色主题给另一份 */ --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235A6270' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --radius: 8px; --radius-sm: 6px; /* 高度只在两处出现：浮层与模态。卡片一律用罫线分格、不用投影 —— 1px 边 + 大范围柔影是"幽灵卡片"，两个高度系统会互相打架。 */ --shadow-pop: 0 6px 18px rgba(20, 23, 28, .10), 0 1px 2px rgba(20, 23, 28, .06); --shadow-modal: 0 24px 64px rgba(18, 21, 26, .18), 0 2px 8px rgba(18, 21, 26, .08); --ease: cubic-bezier(.2, .7, .2, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { /* 字体：**中文族优先**。日文字族（Hiragino Sans / Yu Gothic）会让漢字走日文字形 （直/骨/写 这些字的中日字形差异肉眼可见），这是中文经营系统，字形正确比"日式味道"重要； 日式的克制靠字距、字号阶与罫线表达，不靠换字族。 */ font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Yu Gothic UI", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.6; letter-spacing: .01em; /* 中文默认偏挤，一点字距就透气 */ font-variant-numeric: tabular-nums; /* 全站数字等宽：金额列才对得齐 */ color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 标题兜底（2026-10-27 一致性巡检）：只有 .card > h2 被写成 13.5px， 其它位置的

（例如 .toolbar 里的「可约时段」）会掉回浏览器默认 1.5em/700 = 21px， 于是同一套界面里出现两种"卡片标题"。这里给 h1/h2 一条与系统同源的兜底。 */ h1 { font-size: 16px; font-weight: 600; letter-spacing: .02em; color: var(--c-text); margin: 0; } h2 { font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--c-text); margin: 0; } /* ---- 浏览器自带的那几处表面（2026-10-27）---- 选区、光标、滚动条、焦点环都是设计系统之外的地盘，默认值会把新配色衬得廉价。 这几条是"被认真做过"最便宜的证据，也是模型最容易漏的一格。 */ ::selection { background: rgba(31, 62, 99, .16); } ::-moz-selection { background: rgba(31, 62, 99, .16); } input, textarea, select, [contenteditable] { caret-color: var(--c-primary); } html { scrollbar-color: #C9C8C1 transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #C9C8C1; border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #ABA9A2; background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ---- 动效（2026-10-28）---- JS 那边只有 motion.js 一处（GSAP，本地 vendor）：页签切换、弹窗打开、 可搜索下拉、指标/合计数字滚动。这里只做两件 CSS 该做的事： 给会被动画的元素一个合成层提示，以及"系统要求减少动效"时的总开关。 */ .modal { will-change: transform, opacity; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* 键盘焦点规则在下方 input 段之后统一给（全站一条，包含 a/button/input/select/textarea）。 */ header.topbar { background: var(--c-surface); /* 见出し罫（signature）：顶栏不靠阴影分段，靠一条带靛蓝的 1px 罫线 —— 整页的"分段语法"从这一条开始，往下每一道都同源。 */ border-bottom: 1px solid var(--c-rule); padding: 0 24px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; } header.topbar h1 { font-size: 16px; font-weight: 600; color: var(--c-text); letter-spacing: .02em; } header.topbar .sub { font-size: 12px; color: var(--c-muted); letter-spacing: .02em; } /* 健康状态（2026-10-27 顶栏收敛）：正常时只留一个 8px 绿点。 它 99% 的时间都是绿的，占一整块「数据库已连接」的空间不值当；异常时才展开成 胶囊把话说清楚。文字仍保留在元素里（font-size:0 只是不显示），悬停 title 与 读屏都拿得到。 */ #health { font-size: 0; width: 8px; height: 8px; padding: 0; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--c-ok-text); box-shadow: 0 0 0 3px rgba(39, 99, 82, .10); } #health.bad { font-size: 12px; width: auto; height: auto; padding: 3px 10px; border-radius: 999px; background: var(--c-danger-soft); color: var(--c-danger-soft-text); } /* 顶栏「⋯」菜单（2026-10-27）：所有次要动作（返回主页 / 关于 / 退出登录）都收在这里。 改之前每页顶栏挂 3 个可见动作，其中"返回"与导航重复、"关于"一年点不了几次。 */ .topbar-menu { position: relative; display: inline-flex; } .menu-btn { font-size: 16px; line-height: 20px; padding: 6px 12px; letter-spacing: 1px; } .menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 148px; padding: 4px; display: none; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; box-shadow: var(--shadow-pop); } .topbar-menu.open .menu-pop { display: block; } .menu-pop > * { display: block; width: 100%; text-align: left; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--c-text); text-decoration: none; background: none; border: 0; border-radius: 6px; cursor: pointer; white-space: nowrap; } .menu-pop > *:hover { background: var(--c-sunken); } /* 页面标题兼作「回开单主页」的入口（只在独立页，见 nav.js 的 renderHead） */ .page-home { color: inherit; text-decoration: none; } .page-home:hover { color: var(--c-primary); } nav.tabs { display: flex; gap: 0; padding: 0 16px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); min-height: 44px; } /* 导航项：字距 .03em、行高撑满 44px，active 用 2px 藍罫而不是色块 —— 下划线是"页签"这一控件本来就有的语言，不需要发明新形态。 */ nav.tabs button { border: none; background: none; cursor: pointer; padding: 0 16px; font-size: 13.5px; color: var(--c-muted); letter-spacing: .03em; border-bottom: 2px solid transparent; font-family: inherit; transition: color .15s var(--ease), border-color .15s var(--ease); } nav.tabs button:hover { color: var(--c-text); } nav.tabs button.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; } /* 导航链接（2026-10-27 收敛）：原 7 个独立页各自复制了一份 nav.tabs a 规则（每页 5 行）， 现统一到此处。观感必须与上面的 nav.tabs button 完全一致；改这里就是改 8 个页面。 white-space: nowrap 是为了中等宽度下不把两行字挤成两行（见文件末尾 1180 断点）。 */ nav.tabs a.tab-link { display: flex; align-items: center; text-decoration: none; font-family: inherit; padding: 0 16px; font-size: 13.5px; color: var(--c-muted); letter-spacing: .03em; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s var(--ease), border-color .15s var(--ease); } nav.tabs a.tab-link:hover { color: var(--c-text); } nav.tabs a.tab-link.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; } nav.tabs a.tab-link.active:hover { color: var(--c-primary); } nav.tabs button { white-space: nowrap; } /* 顶栏右侧动作容器：健康徽标 / 返回首页 / 退出登录，由 /static/nav.js 注入 */ .topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* 顶栏左侧：业务域切换 + 页面标题（2026-10-27 用户拍板 C 方案） */ .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .topbar-titles { min-width: 0; } /* 业务域切换「批发 | 门店」：用它代替原来 13 项平铺的一级导航。 13 项在 1440 宽下正好占满（navW=1440 = clientW）、1280 就得横滚；而且批发和门店 是两条独立流程，混在一排里谁也扫不快。现在导航条只显示当前域的 6~7 项。 当前域渲染成 （不可点），另一个域是 （点它才离开本域）。 */ .domain-switch { display: inline-flex; gap: 0; flex: 0 0 auto; background: transparent; padding: 0; border-radius: 6px; border: 1px solid var(--c-border); } .domain-switch > * { padding: 3px 11px; border-radius: 0; font-size: 12.5px; line-height: 18px; color: var(--c-muted); text-decoration: none; white-space: nowrap; letter-spacing: .04em; transition: background .15s var(--ease), color .15s var(--ease); } .domain-switch > *:first-child { border-radius: 5px 0 0 5px; } .domain-switch > *:last-child { border-radius: 0 5px 5px 0; } .domain-switch > a:hover { color: var(--c-primary); background: var(--c-sunken); } .domain-switch > .active { background: var(--c-primary); color: var(--c-on-primary); font-weight: 600; box-shadow: none; } /* 门店切换器（S7，2026-10-27）：**多店模式才存在**，由 nav.js 的 renderStoreSwitch() 动态插在 [data-domains] 的父容器（顶栏左侧）。单店时一个节点都不创建 —— 顶栏 「可见元素=2 / 可点=1」的断言（tests/nav_breakpoints）不能被它影响。 配色只用变量：theme-dark.css 换一套变量就自动适配深色，不用重复组件规则。 */ .store-switch { position: relative; display: inline-flex; flex: 0 0 auto; min-width: 0; } .store-switch-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; min-width: 0; padding: 4px 11px; font: inherit; font-size: 13px; line-height: 18px; color: var(--c-text); background: var(--c-sunken); border: 1px solid var(--c-border); border-radius: 8px; cursor: pointer; white-space: nowrap; font-family: inherit; } .store-switch-btn:hover { color: var(--c-primary); border-color: var(--c-primary); } .store-switch-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; } .store-switch-btn .store-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .store-switch-btn .store-caret { color: var(--c-muted); font-size: 12px; line-height: 1; } .store-switch.open .store-switch-btn { color: var(--c-primary); border-color: var(--c-primary); } .store-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; min-width: 180px; max-width: 260px; padding: 4px; display: none; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); } .store-switch.open .store-menu { display: block; } .store-menu > button { display: block; width: 100%; text-align: left; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--c-text); background: none; border: 0; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .store-menu > button:hover { background: var(--c-sunken); } .store-menu > .store-menu-cur { display: block; padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .store-switch-err { display: none; padding: 6px 10px; font-size: 12px; line-height: 1.6; color: var(--c-danger); white-space: normal; word-break: break-all; } .store-switch-err.show { display: block; } /* 1024/768 这类窄视口：店名先截断，别把顶栏挤到换行（页面不允许横向溢出） */ @media (max-width: 1180px) { .store-switch-btn { max-width: 132px; } } /* 主区：宽度跟着屏幕走，只在超宽屏留一点边距。 历史是固定 max-width（1400/1560/1840/2100px），4K 上表格只占屏幕 52%， 右边整片空白 —— 实测 3840px 时 table=2100 / viewport=3840。 */ main { padding: 20px 24px 64px; max-width: 100%; margin: 0 auto; } .panel { display: none; } .panel.active { display: block; } .subtabs-wrap { display: block; margin-bottom: 16px; } .subtabs { display: inline-flex; gap: 2px; background: transparent; padding: 4px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; } .subtabs button { border: none; background: none; cursor: pointer; padding: 0 13px; height: 26px; border-radius: 4px; font-size: 12.5px; color: var(--c-muted); font-family: inherit; letter-spacing: .03em; transition: background .15s var(--ease), color .15s var(--ease); } .subtabs button:hover { color: var(--c-text); background: var(--c-sunken); } .subtabs button.active { background: var(--c-sunken); color: var(--c-primary); font-weight: 600; box-shadow: none; } .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 18px 20px 20px; margin-bottom: 16px; } /* 卡片标题下压一道发丝罫：帳票里「見出し」与内容本来就分开， 也用这条线替掉原来靠"蓝色标题"区分层级的做法（颜色留给状态）。 */ .card > h2 { font-size: 13.5px; font-weight: 600; color: var(--c-text); letter-spacing: .04em; margin: -2px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line); } /* 有些卡片的标题写在 .toolbar 里（预约页「营业时间 / 员工排班」、员工页「员工档案」）。 那种卡片的标题拿不到上面那条罫线，于是同一套界面里出现"有罫线的卡"和"没罫线的卡"。 这里给「首行是含标题的工具条」的卡片补同一条罫线，观感与 .card > h2 一致。 */ .card > .toolbar:has(h2) { padding-bottom: 12px; border-bottom: 1px solid var(--c-line); margin-bottom: 14px; } .card > .toolbar:has(h2) > h2 { margin: 0; padding: 0; border: 0; } .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .toolbar .spacer { flex: 1; } input, select, textarea { font-family: inherit; font-size: 13px; color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 0 10px; background: var(--c-surface); outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } input, select { height: 32px; } textarea { padding: 7px 10px; min-height: 64px; line-height: 1.6; } input:hover, select:hover, textarea:hover { border-color: #CFCDC5; } input:focus, select:focus, textarea:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-focus); } input::placeholder, textarea::placeholder { color: var(--c-muted); opacity: .82; } /* 键盘焦点（2026-10-27）：鼠标点击不触发，只有键盘 Tab 才画。 之前全站只有 stock/members 的表格行有 :focus-visible，按钮/输入框/链接一个都没有 —— 用键盘操作时完全看不出焦点在哪。outline 不占布局空间，不会引发任何尺寸回归。 */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* 文本框/下拉/多行文本的焦点：边框转墨 + 3px 柔光环已经足够醒目， 再叠一圈 2px outline 会变成"双线框"（截图里像两个框套在一起）。 按钮与链接仍保留 outline —— 它们没有别的焦点表达。 */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } input[type="date"] { min-width: 140px; } /* 按钮：与输入框同高（32px）才排得齐 —— 原来 7px 内边距把按钮撑到 37px， 和输入框差 5px，工具条一排控件上下错位，是"没做过"最明显的痕迹。 */ button.btn { font-family: inherit; font-size: 13px; cursor: pointer; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); border-radius: var(--radius-sm); height: 32px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; letter-spacing: .02em; white-space: nowrap; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } button.btn:hover { border-color: #BDBAB0; color: var(--c-text); background: #FBFAF7; } button.btn:active { background: var(--c-sunken); } button.btn.primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); font-weight: 500; } button.btn.primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: var(--c-on-primary); } button.btn.danger { color: var(--c-danger); border-color: #E0C6BF; } button.btn.danger:hover { background: var(--c-danger-soft); border-color: #D3AFA6; color: var(--c-danger-soft-text); } button.btn.mini { height: 26px; padding: 0 8px; font-size: 12px; letter-spacing: .01em; } /* 次要按钮：视觉上退后一步（同一工具条里若有主操作按钮时用） */ button.btn.quiet { color: var(--c-muted); } button.btn.quiet:hover { color: var(--c-text); } /* 主操作按钮：开单页最高频的「添加明细行」。用松葉绿而不是主藍， 好和藍色「保存销售单」区分开——同屏两个主色= 不知道该点哪个，等于没突出。 */ button.btn.accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); font-size: 13.5px; font-weight: 600; height: 32px; padding: 0 16px; } button.btn.accent:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: var(--c-on-accent); } /* ---- 表格：只画横罫，不画竖格（2026-10-27）---- 竖格线是 Excel 的语法；网页上的密集数据靠行距 + 横罫就够分栏， 去掉竖线后同一屏能读到的列反而更多。开单明细表（输入型）例外，见 #ord-items-table。 */ table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.grid th, table.grid td { border: 0; border-bottom: 1px solid var(--c-border); padding: 7px 10px; text-align: left; vertical-align: middle; } /* 表头吸顶（2026-10-27）：数据行高 64px 后一屏能放 12 行，翻到第 10 行就看不到列名， 吸顶把表头钉在滚动容器顶部。 ⚠️ 之所以以前注入 position:sticky 无效，是因为 .table-wrap 只有 overflow-x， 它自己成了滚动上下文却不滚动（见下方 .table-wrap 的 max-height）。 border-collapse: collapse 下 sticky 单元格的 border 会跟随滚动消失，用 inset 阴影补底边。 */ table.grid thead th { background: var(--c-thead-bg); font-weight: 600; color: var(--c-thead-text); white-space: nowrap; position: sticky; top: 0; z-index: 3; font-size: 12px; letter-spacing: .05em; /* 見出し罫：表头下这条带靛蓝的罫线是全站签名的起点 */ box-shadow: inset 0 -1px 0 var(--c-rule); } table.grid tbody tr:hover { background: var(--c-row-hover); } table.grid tbody tr:last-child td { border-bottom: 0; } table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; } table.grid td.act { white-space: nowrap; } /* 应收台账（弹窗内的宽表，2026-10-29）：加「对账单」按钮后 max-content 涨到 1187， 在 1440 宽弹窗里溢出 32px（modal_overflow 回归会红）。 弹窗内的表默认 min-width:max-content，列宽形同建议；这里改成 fixed + 100%， 让 th 上写的宽度真正生效，长文本用省略号（title 里仍有全文）。 */ #rv-box table.grid { table-layout: fixed; width: 100%; min-width: 0 !important; } #rv-box table.grid th, #rv-box table.grid td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rv-box table.grid td.act { padding-left: 6px; padding-right: 6px; } #rv-box table.grid td.act .btn { margin-left: 2px; } /* 看板 KPI 可点（O1，2026-10-29）：点数字跳销售明细并带当前区间。 用 cursor + hover 提升可点性，键盘用 Enter/Space（role="button" tabindex="0"）。 */ .metric.kpi-link { cursor: pointer; } .metric.kpi-link:hover { border-color: var(--c-primary); } .metric.kpi-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .metric.kpi-link:hover .v { color: var(--c-primary); } /* 手机专用元素（≤640 才显示）：批量「全选本页」按钮、明细「更多参数」按钮。 桌面端表头复选框/整行展开已经够用，多出来只是噪音。 */ .mobile-only { display: none !important; } .it-more { display: none; } /* 行操作「⋯」菜单（2026-10-29，B7 D4/S2）：常用 3 个留行内，其余（复制/作废/删除/变更历史、 打码版/利润版/版本）收进
。用原生 details 而不是自己写 open/close： 点外面自动收起、键盘可达、不额外占 app.js 的事件委托。 */ /* 可排序表头（2026-10-29，B8 X1）：点击按该列**服务端**排序，再点切方向。 箭头用 aria-sort 驱动，屏幕阅读器也能读到「升序/降序」，不是纯视觉装饰。 */ table.grid th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } table.grid th.sortable:hover { color: var(--c-primary); } table.grid th.sortable:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; } table.grid th.sortable[aria-sort] { color: var(--c-primary); } table.grid th.sortable[aria-sort="ascending"]::after { content: " ▲"; font-size: 9px; } table.grid th.sortable[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; } details.more { display: inline-block; position: relative; vertical-align: middle; } details.more > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; letter-spacing: 1px; } details.more > summary::-webkit-details-marker { display: none; } details.more[open] > summary { background: var(--c-row-hover); border-color: var(--c-border-strong, #b8c0cc); } details.more .more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--c-card, #fff); border: 1px solid var(--c-border, #dfe3e8); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .16); min-width: 120px; } details.more .more-menu .btn { width: 100%; justify-content: flex-start; } /* 表格容器是 overflow:auto —— 菜单会被裁掉，所以 .act 单元格必须允许溢出 （已有规则 table.grid tbody td.act { overflow: visible }）；给弹窗/窄屏兜底： 菜单贴近右缘时不允许撑破视口。 */ details.more .more-menu { max-width: 220px; } .table-wrap { overflow-x: auto; } .empty { text-align: center; color: var(--c-muted); padding: 32px 0; font-size: 12.5px; letter-spacing: .04em; } /* 指标带（2026-10-27 改造）：原来每项各挂一张 3px 彩条卡片，是"图标+数字"的通用模板； 现在收成一条由罫线分格的 KPI 带 —— 一个容器、一条上罫、一条下罫，四段并排， 读起来是一张表的表头，而不是四张卡。彩色只在有语义时落在数字上。 */ .metrics { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; } .metric { /* flex-basis 0 + 等分：不按内容宽度分配，否则「累计销售金额」这种长数字会把 自己那一段撑得比别人宽一倍，整条带子的节奏就散了。 */ flex: 1 1 0; min-width: 140px; background: transparent; border: 0; border-left: 1px solid var(--c-line); border-radius: 0; padding: 13px 18px 14px; } .metric:first-child { border-left: 0; } .metric .k { font-size: 12px; color: var(--c-muted); margin-bottom: 6px; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .metric .v { font-size: 21px; font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: .01em; } .metric.green .v { color: var(--c-accent); } .modal-mask { position: fixed; inset: 0; background: rgba(24, 27, 31, .38); display: flex; align-items: flex-start; justify-content: center; padding: 50px 16px; overflow: auto; z-index: 50; } .modal-mask.hidden { display: none; } .modal { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; width: 100%; max-width: 620px; padding: 22px 24px; box-shadow: var(--shadow-modal); /* 🔴 弹窗里的宽表（应收台账 / 版本历史）列宽合计 ~1090px， 原来 .wide 只有 1000px、扣掉 22×2 内边距只剩 956px → 表格硬溢出 113px， 最右侧「回款」按钮被白底切一半（2026-10-06 用户报"超出背景层"）。 .wide 现在按「列宽合计 + 内边距 + 余量」给足，并且大屏继续放宽。 */ min-width: 0; } .modal.wide { max-width: 1180px; } /* 弹窗内的表格统一给一层横向滚动兜底：列宽是硬性下限，压不动时 应该出现滚动条，而不是把内容顶出白底。（用 :has 避免影响普通弹窗） */ .modal:has(table) table.grid { min-width: max-content; } .modal .table-wrap { margin-top: 10px; } @media (min-width: 1700px) { .modal.wide { max-width: 1400px; } } @media (min-width: 2200px) { .modal.wide { max-width: 1700px; } } .modal h3 { font-size: 15px; font-weight: 600; color: var(--c-text); letter-spacing: .03em; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); } .form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .form-item { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; } .form-item label { font-size: 12px; color: var(--c-muted); } /* 修改单据时的提示条 */ .edit-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.6; background: var(--c-hint-amber-bg); border: 1px solid var(--c-hint-amber-line); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 12px; color: var(--c-hint-amber-text); } .edit-banner b { color: var(--c-hint-amber-text); font-weight: 600; } /* 收货信息智能识别框（新建/编辑客户表单顶部） */ .smart-fill { border: 1px dashed var(--c-border); border-radius: var(--radius); background: var(--c-sunken); padding: 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; } .smart-fill > label { font-size: 12px; color: var(--c-muted); } .smart-fill textarea { width: 100%; resize: vertical; line-height: 1.5; } .smart-fill-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .smart-fill-foot span { font-size: 12px; color: var(--c-muted); } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .order-foot { display: flex; gap: 26px; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; margin-top: 18px; padding-top: 12px; font-size: 12.5px; color: var(--c-muted); /* 二重罫線：帳票里「合計」上方那道双线。1px 双线比任何色块都更像账本， 也比加粗一行字更能把"这一段是合计"说清楚。 */ border-top: 3px double var(--c-rule); } .order-foot b { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; } /* 金额合计：用主色而不是朱 —— 朱在这套系统里只表示欠款/退货/失败， 把全单金额标成朱色，等于告诉老板"这单出问题了"。 */ .order-foot .big { font-size: 19px; font-weight: 600; color: var(--c-primary); font-variant-numeric: tabular-nums; letter-spacing: .01em; } .order-foot .words { color: var(--c-muted); font-size: 12px; } /* 利润/利润率：正=绿、负=红（与单据页 setStatus 的语义色一致） */ .order-foot b.num-pos { color: var(--c-ok-text); } .order-foot b.num-neg { color: var(--c-danger); } /* 应收净额（= 金额合计 − 整单优惠）：这是客户真正要付的钱，给它主色 + 稍重的字重， 与「金额合计(毛)」那个大号数形成"毛 / 净"的层级；0 优惠时两数相同、视觉不动。 */ .order-foot b.net { color: var(--c-primary); font-weight: 700; } /* ---- 整单优惠（B3，2026-10-28）三向联动输入区 ---- 放在明细表与合计条之间：优惠是"整单级"的调整，先于合计条读； 样式沿用卡片的发丝罫线（不做色块），一排放下 率 / 金额 / 只读净额 + 口径小字。 */ .ord-discount { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; margin-top: 14px; padding: 9px 12px; font-size: 12.5px; color: var(--c-muted); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-thead-bg); } .ord-discount .od-title { font-size: 13px; font-weight: 600; color: var(--c-text); letter-spacing: .02em; } .ord-discount label { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; } .ord-discount input { width: 88px; padding: 4px 7px; font-size: 13px; font-variant-numeric: tabular-nums; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text); } .ord-discount input:focus { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-primary); } /* 「优惠后金额」只读：视觉上不能像输入框（用户会试着在只读格里改，以为坏了） */ .ord-discount .od-readonly { white-space: nowrap; } .ord-discount .od-readonly b { color: var(--c-primary); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; } /* 优惠金额超过行金额合计：整块转朱（保存会被拦），提示文字说明为什么 */ .ord-discount.err { border-color: var(--c-danger); background: var(--c-danger-soft); } .ord-discount.err #ord-disc-hint { color: var(--c-danger-soft-text); } .toast { position: fixed; right: 24px; bottom: 24px; z-index: 99; background: #1E2226; color: #F4F4F1; font-size: 12.5px; letter-spacing: .02em; padding: 11px 16px; border-radius: var(--radius-sm); opacity: 0; transition: opacity .18s var(--ease), transform .18s var(--ease); transform: translateY(4px); box-shadow: var(--shadow-pop); max-width: 420px; line-height: 1.5; } .toast.show { opacity: 1; transform: translateY(0); } .toast.err { background: var(--c-danger); } /* ⚠️ 选择器不能只写 span.lbl：勾选框行用的是