/* ThirdReality Nexus · 运行时 token 与组件样式 唯一 token 源：根目录 DESIGN.md（变量名与其 frontmatter 一一对应）。 组件内禁止出现字面色值 —— 见 UX-CONTRACT.md「Token 漂移闸门」。 */ :root { /* 现代科技感（Linear 风）：冷中性灰 + 靛蓝 accent + 柔和层次。 语义/可信色保留（confirmed/estimated/missing/danger），只换视觉寄存器。 */ --ink: #0f1216; /* 正文 18.78:1 */ --ink-2: #3d434e; /* 次级正文 9.95:1 */ --ink-3: #697080; /* 标签/证据 4.96:1 */ --canvas: #f5f6f8; --surface: #ffffff; --surface-sunken: #f8f9fb; --surface-raised: #ffffff; /* 浮起面（配 shadow-1） */ --rail: #0e1014; --rail-ink: #e7e9ee; /* 15.68:1 vs rail */ --rail-ink-dim: #8b92a1; /* 6.1:1 vs rail */ --line: #e7e9ee; --line-strong: #d3d7df; --brand-navy: #202870; /* 13.13:1 vs 白（品牌符号/字标） */ --accent: #5b5ef0; /* 靛蓝非文字标识 4.88:1 vs 白 */ --accent-solid: #4f46e5; /* 实心按钮底（白字 6.29:1） */ --accent-ink: #4a42d6; /* 靛蓝文字 6.9:1 */ --accent-weak: #eef0fe; --confirmed: #0f7a52; /* 5.35:1 */ --estimated: #8a5a00; /* 5.93:1 */ --missing: #697080; /* 4.96:1 */ --danger: #c0392b; /* 5.44:1 */ --danger-weak: #fdeeec; --focus: #4f46e5; /* 焦点环 6.29:1 */ --link: #3d5bd9; /* 链接文字 5.68:1 */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --rail-w: 224px; --inspector-w: 480px; --page-max: 1240px; --row-h: 38px; /* 柔和层次（替代硬边框圈区域）——现代感来自 elevation 而非粗线 */ --shadow-1: 0 1px 2px rgba(15, 18, 22, .04), 0 1px 3px rgba(15, 18, 22, .06); --shadow-2: 0 2px 4px rgba(15, 18, 22, .05), 0 4px 12px rgba(15, 18, 22, .08); --shadow-overlay: 0 12px 32px rgba(15, 18, 22, .16), 0 2px 8px rgba(15, 18, 22, .08); --sans: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Inter", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --z-dropdown: 40; --z-drawer: 50; --z-dialog: 60; --z-toast: 70; --dur: 200ms; --ease: cubic-bezier(.2, .8, .2, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-lg); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; } body { font: 400 13px/20px var(--sans); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } /* ---------- 布局：左导航 + 工作区 + 单例抽屉 ---------- */ .app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; } .rail { background: var(--surface-sunken); color: var(--ink); border-right: 1px solid var(--line); padding: 26px 0 24px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .rail__brand { padding: 0 16px 18px; } .rail__lockup { display: flex; align-items: center; gap: 10px; } .rail__brand b { font-size: 14px; font-weight: 600; letter-spacing: .2px; } .rail__brand span { display: block; font-size: 11px; line-height: 16px; color: var(--ink-3); margin-top: 6px; } /* 品牌符号：深色面上放进白色小牌，保持 navy 原色不失真 */ .brandmark { flex: none; display: grid; place-items: center; background: #fff; border-radius: 6px; } .brandmark svg { display: block; } .brandmark path { fill: var(--brand-navy); } .brandmark--chip-26 { width: 26px; height: 26px; } .brandmark--bare path { fill: var(--brand-navy); } .rail__group { padding: 14px 22px 5px; font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .rail__nav { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .rail__nav li { display: block; } .rail__link { width: calc(100% - 20px); } .rail__link { appearance: none; background: none; border: 0; color: var(--ink-2); font: inherit; text-align: left; margin: 1px 10px; padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: flex-start; flex-direction: column; gap: 2px; transition: background var(--dur) var(--ease); } .rail__link:hover { background: var(--line); } .rail__link[aria-current="page"] { background: var(--accent-weak); color: var(--accent-ink); box-shadow: inset 2px 0 0 var(--accent); } .rail__link small { display: none; color: var(--ink-3); font-size: 11px; } .rail__link[aria-current="page"] small { display: block; } .rail__foot { margin-top: auto; padding: 12px 16px 0; font-size: 11px; line-height: 17px; color: var(--ink-3); border-top: 1px solid var(--line); } .rail__foot b { color: var(--ink-2); font-weight: 500; display: block; font-size: 12px; } .rail__foot button { appearance: none; background: none; border: 0; color: var(--ink-3); font: inherit; text-decoration: underline; cursor: pointer; padding: 6px 0; min-height: 24px; } .rail__foot button:hover { color: var(--ink-2); } .work { min-width: 0; } .work__inner { max-width: var(--page-max); margin: 0 auto; padding: 36px 36px 80px; } .page-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 28px; } .page-head__title { display: flex; align-items: center; gap: 8px; } .page-head h1 { font-size: 26px; line-height: 34px; font-weight: 640; letter-spacing: -.015em; } .crumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; } .crumb .linkbtn { font-size: 12px; } .crumb__sep { color: var(--line-strong, var(--ink-3)); opacity: .6; } .bomhead__status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--ink-2); } .bomhead__status .inline { gap: 6px; } .page-head p { color: var(--ink-3); margin-top: 6px; max-width: 76ch; } .page-head__aside { margin-left: auto; text-align: right; font-size: 11px; line-height: 16px; color: var(--ink-3); } .section { margin-bottom: 28px; } .section__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .section__head h2 { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); } .section__head p { font-size: 11px; line-height: 16px; color: var(--ink-3); } .section__head .spacer { margin-left: auto; } /* ---------- 签名一：证据条 ---------- */ .evidence { font-size: 11px; line-height: 16px; color: var(--ink-3); font-family: var(--sans); } .evidence b { font-weight: 500; color: var(--ink-2); } .evidence__sep { padding: 0 4px; color: var(--ink-3); } /* 分隔符仅装饰，DOM 里 aria-hidden */ /* ---------- 签名二：可信脊 ---------- */ .spine { border-left: 2px solid var(--line-strong); padding-left: 10px; } .spine--confirmed { border-left-color: var(--confirmed); } .spine--estimated { border-left-color: var(--estimated); } .spine--missing { border-left-color: var(--missing); border-left-style: dashed; } .spine--blocked { border-left-color: var(--danger); } .trust { font-size: 11px; line-height: 16px; font-weight: 500; } .trust--confirmed { color: var(--confirmed); } .trust--estimated { color: var(--estimated); } .trust--missing { color: var(--missing); } .trust--blocked { color: var(--danger); } /* ---------- 读数 ---------- */ /* 读数簇：容器底色用 surface（不是 line），分隔线改由每格 inset 发丝阴影画—— 这样 4 格换行成 3+1 时，空出来的格子是干净的白面，不再是"空心灰块"。 */ /* 读数簇：独立卡片带 + 柔和阴影（elevation 而非硬框）。空格换行不再露灰。 */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; } .metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 16px 18px 14px; display: flex; flex-direction: column; min-height: 116px; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .metric:hover { box-shadow: var(--shadow-2); } .metric__label { font-size: 11px; line-height: 16px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; font-weight: 500; } .metric__value { font: 650 32px/38px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 6px 0 2px; } .metric__value small { font: 500 12px/16px var(--sans); color: var(--ink-3); margin-left: 5px; letter-spacing: 0; } .metric__value.is-missing { font-size: 15px; line-height: 38px; color: var(--missing); font-family: var(--sans); letter-spacing: 0; } .metric__hint { font-size: 11px; line-height: 16px; color: var(--ink-2); } .metric > .evidence { margin-top: auto; padding-top: 8px; } /* 时点钉底 */ /* ---------- 表格 ---------- */ .tablewrap { border: 1px solid var(--line); background: var(--surface); overflow-x: auto; border-radius: var(--r-sm); } table.t { width: 100%; border-collapse: collapse; } table.t th, table.t td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } table.t thead th { background: var(--surface-sunken); font: 600 11px/16px var(--sans); letter-spacing: .02em; text-transform: none; color: var(--ink-3); white-space: nowrap; position: sticky; top: 0; } table.t tbody tr:last-child td { border-bottom: 0; } table.t tbody tr:hover td { background: var(--surface-sunken); } table.t tbody tr[aria-selected="true"] td { background: var(--accent-weak); } table.t tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } table.t td { height: var(--row-h); } /* 固定列宽表格(核价单等)：长文本在列内换行，不溢出压到相邻列 */ table[style*="table-layout:fixed"] td, table[style*="table-layout:fixed"] th { overflow-wrap: anywhere; word-break: break-word; white-space: normal; } table[style*="table-layout:fixed"] td.num { white-space: nowrap; } table[style*="table-layout:fixed"] .linkbtn { white-space: normal; overflow-wrap: anywhere; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .code { font-family: var(--mono); font-size: 12px; } .muted { color: var(--ink-3); } .sortbtn { appearance: none; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 3px 0; min-height: 24px; display: inline-flex; gap: 4px; align-items: center; } .sortbtn:hover { color: var(--ink); text-decoration: underline; } .sortbtn i { font-style: normal; color: var(--ink-3); } .tablefoot { padding: 8px 12px; border-top: 1px solid var(--line); background: var(--surface-sunken); } /* 行内展开（证据 / 规格书） */ tr.rowdetail > td { background: var(--surface-sunken); padding: 0 12px; } .disclosure { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 160ms var(--ease); } .disclosure[data-open="true"] { grid-template-rows: 1fr; } .disclosure > div { overflow: hidden; } .disclosure__body { padding: 10px 0 12px; } /* ---------- 按钮 ---------- */ .btn { appearance: none; font: 500 13px/1 var(--sans); cursor: pointer; height: 36px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; } .btn:hover { background: var(--surface-sunken); border-color: var(--ink-3); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.28); } .btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); box-shadow: 0 2px 8px rgba(79,70,229,.32); } .btn--danger { border-color: var(--danger); color: var(--danger); background: var(--surface); } .btn--danger:hover { background: var(--danger-weak); } .btn--danger-final { background: var(--danger); border-color: var(--danger); color: #fff; } .btn--danger-final:hover { background: var(--danger); filter: brightness(.92); } .btn--ghost { border-color: transparent; background: none; } .btn--ghost:hover { background: var(--surface-sunken); border-color: var(--line); } .btn--sm { height: 26px; padding: 0 9px; font-size: 12px; } .btn[disabled] { color: var(--ink-3); border-color: var(--line); background: var(--surface-sunken); cursor: not-allowed; } .btn[aria-busy="true"] { color: transparent; position: relative; } .btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 13px; height: 13px; border: 1.5px solid currentcolor; border-top-color: transparent; border-radius: 50%; color: var(--ink-2); animation: spin .7s linear infinite; } .btn--primary[aria-busy="true"]::after, .btn--danger-final[aria-busy="true"]::after { color: #fff; } .linkbtn { appearance: none; background: none; border: 0; font: inherit; color: var(--link); cursor: pointer; text-align: left; padding: 2px 0; min-height: 24px; /* WCAG 2.2 目标尺寸下限 */ display: inline-flex; align-items: center; } .linkbtn:hover { text-decoration: underline; } .linkbtn.code { color: var(--link); } .iconbtn { appearance: none; width: 28px; height: 28px; border: 1px solid transparent; background: none; border-radius: var(--r-md); cursor: pointer; color: var(--ink-2); font-size: 14px; line-height: 1; } .iconbtn:hover { background: var(--surface-sunken); border-color: var(--line); color: var(--ink); } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .actions--split { justify-content: space-between; } /* ---------- 输入 ---------- */ .field { display: flex; flex-direction: column; gap: 4px; } .field__label { font-size: 11px; line-height: 16px; color: var(--ink-3); } .input, select.input { font: 400 13px/20px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); height: 32px; padding: 0 10px; min-width: 0; } textarea.input { height: auto; min-height: 88px; padding: 7px 10px; resize: none; } .input--sm { height: 28px; font-size: 12px; padding: 0 8px; } .stockfilter { margin-bottom: 12px; } .stockfilter__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-md); } .stockfilter__label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-right: 2px; } /* 领用消耗·时间选择器（页内醒目一行，替代原来藏在页头右上角的做法） */ .rangebar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; margin-bottom: 12px; background: var(--accent-weak); border: 1px solid var(--line); border-radius: var(--r-md); } .rangebar__label { font-size: 12px; font-weight: 600; color: var(--ink-2); } .rangebar__hint { font-size: 12px; } .input:hover { border-color: var(--ink-3); } .input:focus-visible { border-color: var(--focus); } .input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-weak); } .input[disabled] { background: var(--surface-sunken); color: var(--ink-3); } .field__error { font-size: 11px; line-height: 16px; color: var(--danger); } .field__hint { font-size: 11px; line-height: 16px; color: var(--ink-3); } .search { position: relative; display: flex; align-items: center; gap: 8px; } .search__box { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; } .search__box .input { width: 100%; padding-right: 58px; } .search__clear { position: absolute; right: 30px; } .search__spin { position: absolute; right: 10px; width: 13px; height: 13px; border: 1.5px solid var(--ink-3); border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .spinner { display: inline-block; width: 13px; height: 13px; border: 1.5px solid var(--ink-3); border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; } /* ---------- 分段切换（维度/档位） ---------- */ .segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; } .segmented button { appearance: none; background: var(--surface); border: 0; border-right: 1px solid var(--line); font: 500 12px/1 var(--sans); color: var(--ink-2); height: 30px; padding: 0 13px; cursor: pointer; transition: background var(--dur) var(--ease); } .segmented button:last-child { border-right: 0; } .segmented button:hover { background: var(--surface-sunken); } .segmented button[aria-pressed="true"] { background: var(--accent-weak); color: var(--accent-ink); font-weight: 500; } /* ---------- 状态块（五态） ---------- */ .state { border: 1px solid var(--line); background: var(--surface-sunken); padding: 28px 24px; border-radius: var(--r-sm); } .state h3 { font-size: 13px; line-height: 20px; font-weight: 600; margin-bottom: 4px; } .state p { color: var(--ink-2); max-width: 70ch; } .state .actions { margin-top: 12px; } .state--error { border-left: 2px solid var(--danger); } .state--denied { border-left: 2px solid var(--estimated); } /* ---------- 待办 / 列表行 ---------- */ .stack { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; } .stack__row { display: flex; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: flex-start; } .stack__row:last-child { border-bottom: 0; } .stack__row > .body { flex: 1; min-width: 0; } .stack__kind { font-size: 11px; line-height: 16px; color: var(--ink-3); } .stack__title { font-weight: 500; } .stack__detail { color: var(--ink-2); margin-top: 1px; } .stack__amount { font: 600 15px/20px var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .stack__next { margin-top: 5px; font-size: 12px; line-height: 18px; color: var(--ink-2); } .stack__next b { font-weight: 500; color: var(--ink); } /* ---------- 覆盖率表 ---------- */ .cov { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; } .cov__row { background: var(--surface); display: grid; grid-template-columns: 86px minmax(0, 1fr) 54px; gap: 12px; padding: 10px 14px; align-items: baseline; } .cov__state { font-size: 11px; line-height: 16px; font-weight: 500; } .cov__name { font-weight: 500; } .cov__note { color: var(--ink-2); font-size: 12px; line-height: 18px; margin-top: 1px; } .cov__goal { font: 400 11px/16px var(--mono); color: var(--ink-3); text-align: right; } /* ---------- 横向条（占比） ---------- */ .bar { height: 6px; background: var(--line); border-radius: var(--r-sm); overflow: hidden; min-width: 60px; } .bar > i { display: block; height: 100%; background: var(--ink-2); } .bar--accent > i { background: var(--accent); } /* 就绪度：匹配率单元格——百分比 + 细进度条同排 */ .ratecell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .ratecell__pct { font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 34px; text-align: right; } .ratecell .bar { min-width: 64px; max-width: 110px; } /* 就绪度：成品编码单元格——编码 + 改绑入口同排 */ .kdcell { display: inline-flex; align-items: center; gap: 8px; } .kdcell__edit { font-size: 11px; } /* 就绪度下钻：缺料号行清单 */ .umwrap { padding: 6px 2px 4px; } .umblock { margin-bottom: 10px; } .umblock__h { font-size: 12px; margin-bottom: 6px; } .umlist { display: flex; flex-direction: column; gap: 4px; } .umlist--muted { opacity: .75; } .umline { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 3px 8px; background: var(--surface-sunken); border-radius: var(--r-sm); } .umline__seq { font: 500 11px/1 var(--mono); color: var(--ink-3); min-width: 30px; } .umline__label { color: var(--ink); font-weight: 500; } .umline__spec, .umline__qty { font-size: 11px; } /* 预计材料成本：快照工具条 */ .estbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--surface-sunken); border-radius: var(--r-sm); margin-bottom: 10px; } .estbar small { margin-left: 6px; } .snaphist { margin-top: 4px; } /* 快照对比选择器 */ .cmpsel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cmpsel__l { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); } .cmpsel select { min-width: 200px; } .snapdiff { margin-top: 12px; } /* ---------- 图形（Charts）---------- 工业单色：ink-2 打底，accent 只用于"钱/重点"一列与 A 类。禁止新增色值，全部走 token。 */ .dbars { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; } .dbars__head, .dbars__row { display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(120px, 1fr) minmax(120px, 1fr); gap: 12px; padding: 7px 14px; align-items: center; } .dbars__head { border-bottom: 1px solid var(--line); background: var(--surface-sunken); } .dbars__head .dbars__col { font: 500 11px/16px var(--sans); color: var(--ink-3); text-align: right; } .dbars__row { border-bottom: 1px solid var(--line); } .dbars__row:last-child { border-bottom: 0; } .dbars__row:hover { background: var(--surface-sunken); } .dbars__name { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .dbars__warn { font: 400 11px/15px var(--sans); color: var(--estimated); } .dbars__cell { display: flex; align-items: center; gap: 8px; } .dbars__track { flex: 1; height: 8px; min-width: 40px; background: var(--line); border-radius: var(--r-sm); overflow: hidden; } .dbars__track > i { display: block; height: 100%; background: var(--ink-2); } .dbars__track--accent > i { background: var(--accent); } .dbars__val { font: 500 12px/18px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); min-width: 62px; text-align: right; } .stackbar__track { display: flex; height: 14px; border-radius: var(--r-sm); overflow: hidden; background: var(--line); } .stackbar__seg { height: 100%; } .stackbar__seg--ink { background: var(--ink-2); } .stackbar__seg--mid { background: var(--line-strong); } .stackbar__seg--warn { background: var(--estimated); } .stackbar__seg--accent { background: var(--accent); } .stackbar__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; } .stackbar__key { font-size: 12px; line-height: 18px; color: var(--ink-2); display: inline-flex; align-items: baseline; gap: 5px; } .stackbar__key b { font: 500 12px/18px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); } .stackbar__key small { color: var(--ink-3); font-size: 11px; } .stackbar__dot { width: 8px; height: 8px; border-radius: var(--r-sm); flex: none; transform: translateY(-1px); } .stackbar__dot--ink { background: var(--ink-2); } .stackbar__dot--mid { background: var(--line-strong); } .stackbar__dot--warn { background: var(--estimated); } .stackbar__dot--accent { background: var(--accent); } .spark__wrap { display: block; } .spark { display: block; width: 100%; height: auto; } .spark__line { fill: none; stroke: var(--ink-2); stroke-width: 1.5; } .spark__area { fill: var(--surface-sunken); stroke: none; } .spark__dot { fill: var(--accent); } .spark__axis { display: flex; justify-content: space-between; font: 400 11px/16px var(--mono); color: var(--ink-3); } .pareto__plot { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 18px 2px 0; border-bottom: 1px solid var(--line-strong); overflow-x: auto; } .pareto__col { flex: 1 0 64px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; min-width: 0; } /* 11px 是 DESIGN.md 的最小字号（evidence 级），不下探到 10px */ .pareto__cum { font: 400 11px/16px var(--mono); color: var(--ink-3); } .pareto__bar { width: 100%; background: var(--ink-2); border-radius: var(--r-sm) var(--r-sm) 0 0; } .pareto__bar--A { background: var(--accent); } .pareto__bar--B { background: var(--ink-2); } .pareto__bar--C { background: var(--line-strong); } /* 编码 11 位放不下就省略号收尾（完整值在 title 与下方明细表里，符合契约「截断」条款） */ .pareto__lab { max-width: 100%; min-width: 0; padding-top: 3px; } .pareto__lab, .pareto__lab > * { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } table.t--heat th[scope="row"] { font-weight: 400; text-align: left; } .heat { font: 500 12px/18px var(--mono); font-variant-numeric: tabular-nums; } .heat--0 { background: var(--surface); } .heat--1 { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .heat--2 { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); } .heat--3 { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); } .heat--4 { background: color-mix(in srgb, var(--accent) 42%, var(--surface)); } .heat__total { font: 600 12px/18px var(--mono); background: var(--surface-sunken); } /* ---------- 环图（donut）---------- */ .donut__wrap { display: flex; gap: 24px; align-items: center; } .donut { width: 150px; height: 150px; flex: none; } .donut__v { font: 700 5px var(--mono); fill: var(--ink); } .donut__l { font: 400 2.6px var(--sans); fill: var(--ink-3); } .donut__legend { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; } .donut__row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-2); } .donut__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; } .donut__amt { margin-left: auto; font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); } /* ---------- KPI hero 簇（读数簇改版：主数字 + 迷你视觉）---------- */ .kpihero { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 14px; } @media (max-width: 1080px) { .kpihero { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .kpihero { grid-template-columns: 1fr; } } .kcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 16px 18px 14px; display: flex; flex-direction: column; min-height: 150px; transition: box-shadow var(--dur) var(--ease); } .kcard:hover { box-shadow: var(--shadow-2); } .kcard--link { cursor: pointer; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .kcard--link:hover { border-color: var(--brand); } .kcard--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .kcard--hero { background: linear-gradient(180deg, var(--surface), #fbfbff); } .kcard__lab { font: 500 11px/1.4 var(--sans); color: var(--ink-3); display: flex; align-items: center; gap: 6px; } .kcard__val { font: 650 32px/1.1 var(--mono); letter-spacing: -.02em; margin: 8px 0 3px; } .kcard--hero .kcard__val { font-size: 38px; } .kcard__val.is-missing { font: 500 15px/1.2 var(--sans); color: var(--missing); } .kcard__val small { font: 500 13px/1 var(--sans); color: var(--ink-3); margin-left: 5px; letter-spacing: 0; } .kcard__sub { font-size: 11px; line-height: 16px; color: var(--ink-2); } .kpihero--2 { grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .kpihero--2 { grid-template-columns: 1fr; } } .kcard__cnt { margin-left: auto; font: 500 11px/1.4 var(--sans); color: var(--ink-3); } .kcard__sub--money { margin-top: 4px; font-size: 13px; color: var(--ink-2); } .kcard__sub--money b { font: 650 15px/1 var(--mono); color: var(--ink); letter-spacing: -.01em; } .kcard__sub.is-missing { color: var(--missing); } .kcard__cov { margin-left: 6px; font-size: 11px; color: var(--ink-3); white-space: nowrap; } .kcard__cov .help-tip { vertical-align: baseline; } .kcard__as { font-size: 11px; color: var(--ink-3); margin-top: auto; padding-top: 8px; } .kcard__note { font-size: 12px; color: var(--ink-2); background: var(--accent-weak); border-radius: var(--r-sm); padding: 8px 11px; margin-top: auto; } .kcard__note b { color: var(--accent-ink); } /* 迷你构成条（替代伪造趋势线，用真实占比）*/ .kcompose { display: flex; height: 8px; border-radius: 6px; overflow: hidden; margin-top: 12px; background: var(--line); } .kcompose i { height: 100%; } .kbars { display: flex; gap: 3px; align-items: flex-end; height: 34px; margin-top: 12px; } .kbars i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .55; } .kbars i.on { opacity: 1; } /* 洞察卡对：环图 + ABC，两列 */ .insightgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 1080px) { .insightgrid { grid-template-columns: 1fr; } } .insight { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 18px; } .insight__callout { font-size: 12px; color: var(--ink-2); background: var(--accent-weak); border-radius: var(--r-sm); padding: 8px 12px; margin-top: 14px; } .insight__callout b { color: var(--accent-ink); } /* 结构卡：大类头条（占比条）+ 明细表 */ .struct { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; margin-bottom: 14px; } .struct__head { display: flex; align-items: center; gap: 16px; padding: 13px 18px; background: var(--surface-sunken); border-bottom: 1px solid var(--line); } .struct__nm { font-weight: 600; font-size: 14px; min-width: 108px; } .struct__meta { font-size: 11px; color: var(--ink-3); white-space: nowrap; } .struct__bar { flex: 1; height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; max-width: 360px; } .struct__bar > i { display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width .4s var(--ease); } .struct__pct { font: 600 12px/1 var(--mono); color: var(--ink-2); width: 52px; text-align: right; } .struct__amt { font: 650 15px/1 var(--mono); letter-spacing: -.01em; min-width: 120px; text-align: right; } .struct .tablewrap { border: 0; border-radius: 0; box-shadow: none; } /* ABC 柱（洞察卡内）*/ .abcplot { display: flex; gap: 12px; align-items: flex-end; height: 150px; padding: 8px 4px 0; } .abccol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; } .abccol__cap { font: 600 11px/1 var(--sans); color: var(--ink-3); } .abccol__bar { width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: height .4s var(--ease); } .abccol__lab { display: flex; flex-direction: column; align-items: center; gap: 1px; } .abccol__lab b { font: 650 15px/1 var(--mono); } .abccol__lab small { font-size: 11px; color: var(--ink-3); } /* 分析视角容器：sunken 背景块，与上方"库存结构"物理分区（Comment 2）*/ .lenspanel { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; margin-top: 4px; } .lenspanel > .section { margin-bottom: 0; } /* 视角小标题 + 前提清单 */ .lens__title { font: 500 12px/18px var(--sans); color: var(--ink-2); margin-bottom: 8px; } .bullets { margin: 4px 0 0 16px; } .bullets li { font-size: 12px; line-height: 19px; color: var(--ink-2); } /* 视角切换后的图区：标题右侧放口径，图与表上下排布不跳高 */ .viewgrid { display: grid; gap: 16px; } @media (min-width: 1100px) { .viewgrid--2 { grid-template-columns: 1fr 1fr; } } /* ---------- 问答 ---------- */ .ask__bar { display: flex; gap: 8px; align-items: flex-start; } .ask__bar .search { flex: 1; } .ask__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .checkline { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 2px; cursor: pointer; } .checkline input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-solid); } .chip { appearance: none; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-md); font: 400 12px/1 var(--sans); color: var(--ink-2); height: 26px; padding: 0 10px; cursor: pointer; } .chip:hover { border-color: var(--ink-3); color: var(--ink); } .understand { border: 1px solid var(--line); background: var(--surface); padding: 14px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-1); } .understand__line { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; } .tag { font: 400 11px/16px var(--mono); border: 1px solid var(--line); background: var(--surface-sunken); border-radius: var(--r-sm); padding: 1px 6px; color: var(--ink-2); } .tag--accent { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-weak); } .tag--warn { border-color: var(--estimated); color: var(--estimated); } .reveal > * { opacity: 0; animation: reveal 140ms var(--ease) forwards; } @keyframes reveal { to { opacity: 1; } } .steps { margin-top: 8px; } .steps table { width: 100%; border-collapse: collapse; font-size: 12px; } .steps td { padding: 3px 8px 3px 0; color: var(--ink-2); } .answer { margin-top: 16px; display: grid; gap: 16px; } /* ---------- 抽屉（单例 Inspector） ---------- */ .scrim { position: fixed; inset: 0; background: rgba(16, 25, 32, .28); opacity: 0; transition: opacity var(--dur) var(--ease); z-index: var(--z-drawer); } .scrim[data-open="true"] { opacity: 1; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--inspector-w), 100vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-overlay); transform: translateX(100%); transition: transform var(--dur) var(--ease); z-index: var(--z-drawer); display: flex; flex-direction: column; } .drawer[data-open="true"] { transform: none; } .drawer__head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .drawer__head h2 { font-size: 14px; line-height: 20px; font-weight: 600; } .drawer__head p { font-size: 11px; line-height: 16px; color: var(--ink-3); margin-top: 2px; } .drawer__body { overflow-y: auto; padding: 16px; flex: 1; } .drawer__foot { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-sunken); } .kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 12px; } .kv dt { font-size: 11px; line-height: 20px; color: var(--ink-3); } .kv dd { min-width: 0; word-break: break-word; } /* ---------- 对话框 ---------- */ .dialog-scrim { position: fixed; inset: 0; background: rgba(16, 25, 32, .34); z-index: var(--z-dialog); display: grid; place-items: center; padding: 20px; } .dialog { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-overlay); width: min(440px, 100%); max-height: 88vh; overflow-y: auto; padding: 20px; } .dialog h2 { font-size: 15px; line-height: 22px; font-weight: 600; } .dialog p { color: var(--ink-2); margin-top: 6px; } .dialog .actions { margin-top: 18px; justify-content: flex-end; } .dialog .field { margin-top: 14px; } /* ---------- Toast ---------- */ .toasts { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-toast); display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); } .toast { background: var(--surface); border: 1px solid var(--line-strong); border-left-width: 2px; border-radius: var(--r-md); box-shadow: var(--shadow-overlay); padding: 10px 12px; } .toast--success { border-left-color: var(--confirmed); } .toast--warning { border-left-color: var(--estimated); } .toast--danger { border-left-color: var(--danger); } .toast--info { border-left-color: var(--link); } .toast b { font-weight: 500; } .toast p { color: var(--ink-2); font-size: 12px; line-height: 18px; margin-top: 2px; } /* ---------- 说明气泡 helpTip（? toggletip） ---------- */ .help-tip { position: relative; display: inline-flex; } .help-tip__btn { appearance: none; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-3); font: 500 11px/1 var(--sans); cursor: pointer; display: grid; place-items: center; } .help-tip__btn:hover { color: var(--ink); border-color: var(--ink-3); } .help-tip__btn[aria-expanded="true"] { color: #fff; background: var(--ink-2); border-color: var(--ink-2); } .section__head .help-tip__btn { width: 15px; height: 15px; } .help-tip__pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-dropdown, 40); width: max-content; max-width: 340px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-overlay); padding: 9px 12px; font-size: 12px; line-height: 18px; white-space: normal; text-align: left; } /* ---------- 今日经营动态：环节卡（大数字 + 物料明细）---------- */ .flowgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(324px, 1fr)); gap: 14px; } .flowcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--dur) var(--ease); } .flowcard--confirmed:hover { box-shadow: var(--shadow-2); } .flowcard__top { display: flex; align-items: baseline; gap: 10px; padding: 15px 18px 12px; } /* 环节状态用标题前的小圆点表达，替代整条左边线（更现代、更轻） */ .flowcard__label { font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; } .flowcard__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex: none; } .flowcard--confirmed .flowcard__label::before { background: var(--confirmed); } .flowcard__num { font: 650 28px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .flowcard__num small { font: 500 12px/1 var(--sans); color: var(--ink-3); margin-left: 3px; letter-spacing: 0; } .flowcard__meta { margin-left: auto; text-align: right; font-size: 11px; line-height: 15px; color: var(--ink-3); } .flowcard__list { list-style: none; margin: 0; padding: 2px 8px 8px; } .flowline { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-md); } .flowline + .flowline { border-top: 1px solid var(--line); } .flowline:hover { background: var(--surface-sunken); } .flowline--link { cursor: pointer; } .flowline--link:hover { background: var(--accent-weak); } .flowline--link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .flowline__name { min-width: 0; flex: 1; } .flowline__name b { display: block; font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flowline__name span { font: 11px/14px var(--mono); color: var(--ink-3); } .flowline__qty { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; } .flowline__nums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; } .flowline__nums .flowline__qty { font: 500 12px/1 var(--mono); color: var(--ink-2); } .flowline__val { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; } .flowline__name b .matx-tag { margin-left: 4px; vertical-align: middle; } .flowcard__empty { padding: 18px 16px 20px; color: var(--ink-3); font-size: 13px; } .flowcard__trend { padding: 4px 14px 8px; border-bottom: 1px solid var(--line); } .flowcard__trend .spark__wrap { margin: 0; } .flowcard__more { padding: 8px 16px 12px; } /* ---------- 通用：物料/产品缩略图（有图显示，无图统一色牌占位）---------- */ .thumb { flex: none; width: 34px; height: 34px; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; background: var(--surface-sunken); border: 1px solid var(--line); } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb__ph { font: 600 12px/1 var(--mono); color: #fff; width: 100%; height: 100%; display: grid; place-items: center; } .thumb__ph--icon { background: hsl(var(--cat-h) 46% 96%); color: hsl(var(--cat-h) 55% 42%); } .thumb__ph--icon svg { width: 66%; height: 66%; } .thumb--sm { width: 26px; height: 26px; } .thumb--lg { width: 44px; height: 44px; } /* ---------- 物料分析页 头部 ---------- */ .mat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .mat-head__name { font-size: 18px; font-weight: 600; color: var(--ink); } .mat-head__sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; } /* 物料 Hero：缩略图 + 名称 + 关键共性属性（品牌/封装上移，最醒目） */ .mat-hero { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .mat-hero .thumb { flex: 0 0 auto; } .mat-hero__main { min-width: 0; flex: 1; } .mat-hero__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px; } .mat-hero__name { font-size: 22px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; color: var(--ink); } .mat-hero__sub { font-size: 13px; line-height: 19px; color: var(--ink-3); margin-top: 4px; } .mat-hero__attrs { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .heroattr__k { font-size: 11px; color: var(--ink-3); margin-bottom: 3px; } .heroattr__v { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } .heroattr--miss .heroattr__v { color: var(--missing); font-weight: 400; } .heroattr__flag { color: var(--estimated); cursor: help; } /* 可选成本口径（FIFO）：折叠，视觉退到次级 */ .optcost { margin-bottom: 28px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); } .optcost > summary { cursor: pointer; list-style: none; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--ink-2); display: flex; align-items: center; gap: 8px; } .optcost > summary::-webkit-details-marker { display: none; } .optcost > summary::before { content: "▸"; color: var(--ink-3); transition: transform var(--dur) var(--ease); } .optcost[open] > summary::before { transform: rotate(90deg); } .optcost[open] > summary { border-bottom: 1px solid var(--line); } .optcost > *:not(summary) { padding: 16px; } /* ---------- 核价单 头部 ---------- */ /* 核价单头：凭证式渐变(与单据详情同语言) */ .quote-head { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 20px 22px; border-radius: 16px; margin-bottom: 18px; color: #fff; background: linear-gradient(120deg, #1e2a5a 0%, #3448a8 52%, #5b5ef0 100%); box-shadow: var(--mat-shadow-lg); } .quote-head::after { content: ''; position: absolute; right: -50px; top: -50px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%); } .quote-head > * { position: relative; z-index: 1; } .quote-head__title { font: 650 20px/1.25 var(--sans); letter-spacing: -.01em; color: #fff; } .quote-head__sub { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.78); margin-top: 6px; } .quote-head__total { text-align: right; } .quote-head__label { display: block; font-size: 11px; color: rgba(255,255,255,.75); margin-bottom: 4px; } .quote-head__amt { font: 700 28px/1.1 var(--mono); font-variant-numeric: tabular-nums; color: #fff; letter-spacing: -.02em; } @media (max-width: 640px) { .quote-head { flex-direction: column; align-items: flex-start; padding: 16px 18px; } .quote-head__total { text-align: left; } .quote-head__amt { font-size: 24px; } } /* ---------- 高级 BOM 核算成本单：分类分区 + 汇总 ---------- */ .qgroup { margin-bottom: 18px; } .qgroup__bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--rail); color: var(--ink-2); border-radius: var(--r-md) var(--r-md) 0 0; } .qgroup__name { font-size: 13px; font-weight: 600; letter-spacing: .2px; } .qgroup__meta { font-size: 11px; color: var(--ink-3); } .qgroup__share { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 160px; } .qgroup__share .bar { flex: 1; background: rgba(255,255,255,.14); } .qgroup__pct { font: 500 12px/1 var(--mono); color: var(--ink-3); width: 42px; text-align: right; } .qgroup__sub { font: 700 15px/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; } .qgroup .tablewrap { border-radius: 0 0 var(--r-md) var(--r-md); border-top: 0; } .qsummary { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin: 20px 0 8px; } .qsummary__title { padding: 12px 16px; font-size: 13px; font-weight: 600; background: var(--surface-sunken); border-bottom: 1px solid var(--line); } .qsummary__rows { padding: 6px 16px; } .qsummary__row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); } .qsummary__row--sub { padding: 5px 0; } .qsummary__row--sub .qsummary__cat { color: var(--ink-3); font-size: 12px; padding-left: 10px; } .qsummary__row:last-child { border-bottom: 0; } .qsummary__cat { width: 120px; font-size: 13px; } .qsummary__barw { flex: 1; } .qsummary__pct { width: 48px; text-align: right; font: 500 12px/1 var(--mono); color: var(--ink-3); } .qsummary__amt { width: 100px; text-align: right; font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; } .qsummary__total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; background: var(--accent-weak); border-top: 2px solid var(--accent); } .qsummary__total > span:first-child { font-size: 13px; font-weight: 600; color: var(--ink); } .qsummary__grand { font: 700 24px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--accent-ink); } .fifo-eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 12px 0; padding: 12px 16px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 13px; color: var(--ink-2); } .fifo-eq b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; } .fifo-eq small { color: var(--ink-3); margin-left: 2px; } .fifo-eq__op { font-weight: 600; color: var(--ink-3); padding: 0 2px; } /* ---------- 杂项 ---------- */ .note { border: 1px solid var(--line); border-left-width: 2px; background: var(--surface); padding: 11px 14px; border-radius: var(--r-sm); } .note--missing { border-left-color: var(--missing); } .note--estimated { border-left-color: var(--estimated); } .note--blocked { border-left-color: var(--danger); } .note--confirmed { border-left-color: var(--confirmed); } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* ---------- 响应式 ---------- 断点分层： - >1080 三段（竖导航 + 工作区 + 抽屉） - 720–1080 顶栏模式：导航从竖栏变成"品牌/人员一行 + 菜单一行"的横向头 - <720 顶栏更紧凑；表格转"标签+值"行卡 */ @media (max-width: 1080px) { .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; } /* 顶栏：CSS Grid。第一行 品牌|人员，第二行 导航整条独占——次序稳定，不会串行。 */ .rail { position: sticky; top: 0; z-index: 30; height: auto; min-height: 0; /* 覆盖桌面 100vh，按内容高 */ display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand who" "nav nav"; align-items: center; column-gap: 16px; row-gap: 8px; padding: 12px 20px; } .rail__brand { grid-area: brand; padding: 0; align-self: center; } .rail__brand span { margin-top: 3px; } .rail__foot { grid-area: who; margin: 0; border: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; } .rail__foot b { font-size: 12px; } /* 顶栏导航：换行而非横向滚动——功能变多后不藏、不滚，靠分组标签保持可找。 每个分组自成一小块：组名(小标签) + 组内若干胶囊，整条按需折行。 */ .rail__navwrap { grid-area: nav; display: flex; flex-wrap: wrap; min-width: 0; gap: 6px 16px; border-top: 1px solid var(--line); padding-top: 10px; } .rail__section { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; } /* 组名恢复显示：作为组前缀小标签，帮人按"库存/产品与订单/系统"快速定位 */ .rail__group { display: inline-block; padding: 0; margin-right: 2px; font-size: 11px; line-height: 1; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; } .rail__nav, .rail__nav li { display: contents; } .rail__link { width: auto; margin: 0; flex-direction: row; align-items: center; } .rail__link { border-left: 0; white-space: nowrap; flex-shrink: 0; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); } .rail__link:hover { background: var(--surface-sunken); } .rail__link[aria-current="page"] { background: var(--accent-weak); color: var(--accent-ink); border-color: var(--accent); box-shadow: none; } .rail__link small, .rail__link[aria-current="page"] small { display: none; } .work__inner { padding: 20px 24px 56px; } } @media (max-width: 720px) { .rail { padding: 10px 14px; } .rail__brand span { display: none; } /* 窄屏品牌只留符号+名字 */ .work__inner { padding: 16px 14px 48px; } .drawer { width: 100vw; } .page-head { flex-direction: column; } .page-head__aside { margin-left: 0; text-align: left; } table.t thead { display: none; } table.t tbody tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; } table.t tbody td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; border: 0; height: auto; padding: 3px 12px; } table.t tbody td::before { content: attr(data-label); font-size: 11px; color: var(--ink-3); } .num { text-align: left; } /* 热力矩阵例外：行头×列头才构成矩阵语义，转成卡片会丢列头且单元格无 data-label。 保持真表格形态，靠 .tablewrap 横向滚动阅读。 */ table.t--heat thead { display: table-header-group; } table.t--heat tbody tr { display: table-row; } table.t--heat tbody td { display: table-cell; height: var(--row-h); padding: 8px 12px; } table.t--heat tbody td::before { content: none; } table.t--heat .num, table.t--heat th.num { text-align: right; } /* 紧凑窄表（≤4列、内容短：趋势/产品）例外：手机上保持真表格+横向滚动，不堆叠(省竖向空间)。 */ table.t--compact thead { display: table-header-group; } table.t--compact tbody tr { display: table-row; } table.t--compact tbody td { display: table-cell; height: auto; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); } table.t--compact tbody td::before { content: none; } table.t--compact .num, table.t--compact th.num { text-align: right; white-space: nowrap; } table.t--compact th, table.t--compact td { font-size: 12.5px; } /* 双轴条：窄屏堆成两行，条不被挤到 0 宽 */ .dbars__head { display: none; } .dbars__row { grid-template-columns: 1fr; gap: 6px; } .dbars__cell::before { content: attr(data-label); font-size: 11px; color: var(--ink-3); min-width: 56px; } .metrics { grid-template-columns: 1fr; } .help-tip__pop { max-width: min(80vw, 320px); } } @media (prefers-reduced-motion: reduce) { *, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } } @media (forced-colors: active) { .btn, .input, .tablewrap, .stack, .metric, .drawer, .dialog { border-color: CanvasText; } .spine, .toast { border-left-color: CanvasText; } } /* ---------- BOM 草稿编辑器（聚焦工作台） ---------- */ .editor2 { max-width: var(--page-max); margin: 0 auto; } .edhead { position: sticky; top: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0 12px; margin-bottom: 4px; background: var(--canvas); border-bottom: 1px solid var(--line); } .edhead__main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .edhead__title h1 { font: 600 18px/24px var(--sans); color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .edhead__rev { font: 500 12px/18px var(--mono); color: var(--ink-2); } .edhead__meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; color: var(--ink-3); font-size: 12px; } .edhead__count { color: var(--ink-3); } .edhead__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .chip--draft { font-size: 11px; line-height: 18px; padding: 0 8px; border-radius: 9px; background: var(--surface-sunken); border: 1px solid var(--line-strong); color: var(--ink-2); } .chip--review { font-size: 11px; line-height: 18px; padding: 0 8px; border-radius: 9px; background: color-mix(in srgb, var(--estimated) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--estimated) 40%, var(--line)); color: var(--estimated); margin-left: 6px; } .prodcell { display: flex; align-items: center; gap: 10px; min-width: 0; } .prodcell__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .prodcell__name { font-weight: 500; text-align: left; } .verstate { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .product-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .product-toolbar__filters { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .product-toolbar__filters .search { width: min(420px, 100%); } .product-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; color: var(--ink-3); font-size: 12px; } .product-summary b { color: var(--ink); font: 600 12px/1 var(--mono); } .product-status { white-space: nowrap; } .product-bom, .product-cost { display: flex; flex-direction: column; gap: 3px; } .product-cost b { font: 600 13px/18px var(--mono); color: var(--ink); } .product-expanded { padding: 6px 2px 4px; display: grid; gap: 12px; } .product-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); } .product-fact { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--line); } .product-fact:last-child { border-right: 0; } .product-fact > span { display: block; color: var(--ink-3); font-size: 11px; line-height: 16px; margin-bottom: 4px; } .product-fact > div { color: var(--ink); font-size: 13px; line-height: 20px; min-height: 28px; display: flex; align-items: center; } .product-breakdown > b { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; } .product-expanded__actions { padding-top: 2px; } .product-profile { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 28px; } .product-profile .prodimg { margin-bottom: 0; min-height: 84px; } .formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .formgrid__wide { grid-column: 1 / -1; } .editor2__body { margin-top: 12px; } .editor2__foot { margin-top: 12px; color: var(--ink-3); font-size: 12px; line-height: 18px; } .editor__val { margin-top: 12px; } .editor__warns { margin: 6px 0 0 18px; } .editor__warns li { color: var(--estimated); } .edtable2 { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); overflow: visible; } .edtable2__head, .edtable2__row { display: grid; grid-template-columns: minmax(240px, 1.7fr) minmax(150px, 1.3fr) 72px 92px minmax(150px, 1.2fr) 72px 36px; align-items: center; gap: 12px; padding: 9px 14px; } .edtable2__head { background: var(--surface-sunken); border-bottom: 1px solid var(--line); font: 500 11px/16px var(--sans); color: var(--ink-3); } .edtable2__head .num, .edtable2__row .num { text-align: right; } .edtable2__row { border-bottom: 1px solid var(--line); } .edtable2 > div > .edtable2__row:last-child { border-bottom: 0; } .edtable2__row:hover { background: var(--surface-sunken); } .edtable2__row.is-warn { background: var(--danger-weak); } .edtable2__empty { padding: 40px 16px; text-align: center; } .edtable2__empty p { color: var(--ink); font-size: 14px; } .edtable2__empty p.muted { color: var(--ink-3); font-size: 12.5px; margin-top: 6px; } .edcell2 { min-width: 0; } .edcell2__name { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; } .edcell2__sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; font-size: 12px; } .edcell2__name .edcell2__model { margin-left: 8px; font: 400 12px/16px var(--mono); color: var(--ink-2); font-weight: 400; } .edspec { overflow-wrap: anywhere; line-height: 17px; } .pickopt__model { font: 400 12px/16px var(--mono); color: var(--ink-2); } .edqty2, .edprice2 { width: 100%; } .pricehint { font-size: 12px; color: var(--ink-3); } .edrow__del { color: var(--ink-3); } .edrow__del:hover { color: var(--danger); border-color: var(--danger); } .pricetag { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); color: var(--ink-2); white-space: nowrap; } .pricetag--erp { color: var(--confirmed); border-color: color-mix(in srgb, var(--confirmed) 40%, var(--line)); } /* 料号搜索下拉 */ .pickcell { position: relative; } .pickcell .input { width: 100%; } .pickpop { position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--z-dropdown); width: min(560px, 82vw); max-height: 360px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-overlay); } .pickpop__loading, .pickpop__empty { padding: 12px; color: var(--ink-3); font-size: 12.5px; } .pickopt { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 9px 12px; cursor: pointer; } .pickopt:last-child { border-bottom: 0; } .pickopt:hover, .pickopt:focus-visible { background: var(--surface-sunken); outline: none; } .pickopt__main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pickopt__name { font-weight: 500; color: var(--ink); } .pickopt__spec { font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; } .pickopt__meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; } @media (max-width: 900px) { .edhead { flex-direction: column; gap: 10px; } .edtable2__head { display: none; } .edtable2__row { grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; padding: 12px 14px; } .product-facts { grid-template-columns: 1fr 1fr; } .product-fact:nth-child(2) { border-right: 0; } .product-fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } @media (max-width: 720px) { .product-toolbar, .product-toolbar__filters { align-items: stretch; flex-direction: column; } .product-toolbar__filters .search { width: 100%; } .product-facts, .product-profile, .formgrid { grid-template-columns: 1fr; } .product-fact { border-right: 0; border-bottom: 1px solid var(--line); } .product-fact:last-child { border-bottom: 0; } .formgrid__wide { grid-column: auto; } } /* ---------- 产品图片（版本页图条 + 搜图弹窗） ---------- */ .prodimg { margin-bottom: 12px; } .prodimg__empty { display: flex; align-items: center; gap: 10px; } .prodimg__strip { display: flex; gap: 10px; flex-wrap: wrap; } .prodimg__item { position: relative; width: 84px; height: 84px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface-sunken); } .prodimg__item img { width: 100%; height: 100%; object-fit: cover; display: block; } .prodimg__del { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: var(--r-sm); border: 0; background: rgba(16,25,32,.6); color: #fff; cursor: pointer; line-height: 1; font-size: 12px; } .prodimg__del:hover { background: var(--danger); } .dialog--wide { width: min(760px, 92vw); } .imgpick { min-height: 120px; margin: 8px 0; } .imgpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .imgpick__opt { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; text-align: left; } .imgpick__opt:hover, .imgpick__opt:focus-visible { border-color: var(--focus); outline: none; } .imgpick__opt img { width: 100%; height: 130px; object-fit: contain; background: var(--surface-sunken); border-radius: var(--r-sm); } .imgpick__cap { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 常用业务入口与查询区：同一套页面与组件，不引入新的工作流。 */ .quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--line); margin-bottom: 28px; } .quick-action { appearance: none; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 18px 20px; text-align: left; font: inherit; cursor: pointer; transition: background var(--dur) var(--ease); } .quick-action:last-child { border-right: 0; } .quick-action:hover { background: var(--surface-sunken); } .quick-action b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .quick-action span { color: var(--ink-3); font-size: 12px; } .stock-search { max-width: 820px; } .stock-search .search { max-width: none; } .stock-search .input { min-height: 40px; } .stock-search .btn { height: 40px; } .search-help { margin-top: 10px; color: var(--ink-3); font-size: 12px; } .search-examples { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 12px; color: var(--ink-3); } /* 最近查询（按用户本地保存） */ .search-recent { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; } .search-recent__label { color: var(--ink-3); } .chiplink { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--surface); } .chiplink__go { border: none; background: none; cursor: pointer; padding: 3px 4px 3px 11px; font-size: 12px; color: var(--ink-2); } .chiplink:hover { border-color: var(--ink-3); } .chiplink__go:hover { color: var(--accent-ink); } .chiplink__x { border: none; background: none; cursor: pointer; padding: 3px 8px 3px 5px; font-size: 10px; color: var(--ink-3); line-height: 1; } .chiplink__x:hover { color: var(--danger); } .search-recent__clear { margin-left: 4px; font-size: 11.5px; } .skip-link { position: fixed; top: 8px; left: 8px; transform: translateY(-160%); padding: 10px 16px; background: var(--surface); color: var(--accent-ink); z-index: var(--z-toast); border: 1px solid var(--focus); } .skip-link:focus { transform: none; } @media (max-width: 1080px) { .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quick-action:nth-child(2) { border-right: 0; } .quick-action:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } @media (max-width: 720px) { .quick-action { padding: 14px 12px; } .rail__lockup b { font-size: 12px; } .page-head h1 { font-size: 23px; line-height: 30px; } } /* 手机底部导航：桌面与平板保留原导航，详情/弹层覆盖在导航之上。 */ .mobile-nav { display: none; } .mobile-more { border-top: 1px solid var(--line); } .mobile-more__item { width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .mobile-more__item:hover { background: var(--surface-sunken); } .mobile-more__item b { display: block; font-size: 14px; font-weight: 600; } .mobile-more__item small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); } @media (max-width: 720px) { html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .rail { grid-template-areas: "brand who"; padding-top: max(10px, env(safe-area-inset-top, 0px)); border-right: 0; border-bottom: 1px solid var(--line); } .rail__navwrap { display: none; } .rail__foot { max-width: 45vw; overflow-wrap: anywhere; } .work__inner { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .mobile-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px max(4px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px)); background: var(--surface); border-top: 1px solid var(--line-strong); } .mobile-tab { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; min-width: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-3); font: 500 12px/18px var(--sans); cursor: pointer; } .mobile-tab svg { width: 22px; height: 22px; } .mobile-tab[aria-current="page"] { color: var(--accent-ink); background: var(--accent-weak); } .mobile-tab:hover { color: var(--accent-ink); } .toasts { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .search .input, .field .input, select.input, textarea.input { font-size: 16px; } .search .btn, .search__clear { min-height: 44px; } .search__clear { min-width: 36px; } } /* ---------- 同物聚合（等价簇） ---------- */ .equiv-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); margin: 10px 0; background: var(--surface, #fff); } .equiv-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .equiv-card__fp { font-size: 12px; color: var(--ink-2); } .equiv-card__cnt { margin-left: auto; font-size: 12px; } .equiv-card__codes { display: flex; flex-direction: column; gap: 6px; } .equiv-code { padding: 6px 8px; border-radius: var(--r-md, 8px); background: var(--line); } .equiv-code__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .equiv-code__id { cursor: pointer; text-decoration: underline dotted; } .equiv-code__brand { font-size: 12px; } .equiv-code__note { font-size: 11px; color: var(--ink-3); padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 999px; } .equiv-code__desc { font-size: 12px; line-height: 17px; margin-top: 2px; } .equiv-card__act { display: flex; gap: 8px; margin-top: 10px; } /* ---------- 核价：缺货替代候选 ---------- */ .qsub__trigger { display: inline-flex; align-items: center; gap: 6px; } .qsub__badge { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--line); color: var(--ink-2); } .qsub__pop { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md, 8px); background: var(--surface, #fff); text-align: left; } .qsub__head { font-size: 11px; color: var(--ink-3); margin-bottom: 6px; } .qsub__row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; flex-wrap: wrap; } .qsub__code { cursor: pointer; text-decoration: underline dotted; } .qsub__stock { font-size: 12px; color: var(--ink-2); } .qsub__desc { font-size: 12px; } /* ---------- 物料本地维护编辑器 ---------- */ .matedit { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; margin: 0 0 14px; background: var(--surface, #fff); } .matedit__head { display: flex; align-items: center; gap: 10px; } .matedit__title { font-size: 13px; font-weight: 600; color: var(--ink); } .matedit__head .linkbtn { margin-left: auto; } .matedit__form { display: none; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .matedit--open .matedit__form { display: grid; } .matedit__form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); } .matedit__act { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } @media (max-width: 640px) { .matedit__form { grid-template-columns: 1fr; } } /* ---------- 价格走势图（priceChart） ---------- */ :root { --price-up: #c0392b; --price-down: #0f7a52; } /* 涨=红(成本上升警示) 跌=绿 */ .pchart { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; } .matx-block.pchart { border-radius: 16px; box-shadow: var(--mat-shadow); } /* 用 matx-block 外壳时统一圆角阴影 */ .matx-block.pchart .pchart__head { padding: 0 0 12px; } .pchart__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px 10px; } .pchart__nowlab { font-size: 11px; color: var(--ink-3); font-weight: 500; display: flex; align-items: center; gap: 6px; } .pchart__kind { display: inline-block; font: 600 11px/1 var(--sans); color: var(--accent-ink); background: var(--accent-weak); padding: 3px 7px; border-radius: 999px; } .pchart__mo { color: var(--ink-2); font-family: var(--mono); } .pchart__price { font: 650 30px/34px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); margin-top: 6px; display: flex; align-items: baseline; gap: 8px; } .pchart__unit { font: 500 13px/1 var(--sans); color: var(--ink-3); letter-spacing: 0; margin-left: -4px; } .pchart__dir { font: 600 13px/1 var(--sans); padding: 4px 9px; border-radius: 999px; letter-spacing: 0; } .pchart__dir--up { color: var(--price-up); background: var(--danger-weak); } .pchart__dir--down { color: var(--price-down); background: #e8f5ee; } .pchart__sub { font-size: 12px; color: var(--ink-3); margin-top: 6px; } .pchart__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .pchart__vol { font: 700 13px/1 var(--sans); padding: 6px 11px; border-radius: 999px; } .pchart__vol--high { color: #fff; background: var(--price-up); } .pchart__vol--mid { color: var(--estimated); background: #fdf1dc; } .pchart__vol--low { color: var(--ink-2); background: var(--surface-sunken); } .pchart__range { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 600 13px/1.3 var(--mono); color: var(--ink-2); text-align: right; } .pchart__range small { font: 400 11px/1.3 var(--sans); color: var(--ink-3); } .pchart__plot { position: relative; padding: 4px 4px 0; } .pchart__svg { display: block; width: 100%; height: auto; } .pchart__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; } .pchart__ytick { font: 400 10px/1 var(--mono); fill: var(--ink-3); } .pchart__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.06)); } .pchart__dot { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.5; transition: r .12s ease; } .pchart__dot--last { fill: var(--ink); stroke: var(--surface); stroke-width: 2; } .pchart__dot.is-hot { r: 5; stroke: var(--accent); } .pchart__x { position: relative; height: 20px; margin: 0 4px 8px; } .pchart__x span { position: absolute; transform: translateX(-50%); font: 400 11px/20px var(--mono); color: var(--ink-3); white-space: nowrap; } .pchart__x span:first-child { transform: none; } .pchart__x span:last-child { transform: translateX(-100%); } .pchart__tip { position: absolute; top: 2px; transform: translateX(-50%); pointer-events: none; background: var(--ink); color: #fff; font: 500 11px/1 var(--mono); padding: 5px 8px; border-radius: var(--r-sm); white-space: nowrap; box-shadow: var(--shadow-2); z-index: 2; } .pchart__detail { border-top: 1px solid var(--line); } .pchart__detail > summary { cursor: pointer; padding: 10px 18px; font-size: 12px; color: var(--ink-2); font-weight: 500; user-select: none; list-style: none; } .pchart__detail > summary::-webkit-details-marker { display: none; } .pchart__detail > summary::before { content: '▸ '; color: var(--ink-3); } .pchart__detail[open] > summary::before { content: '▾ '; } .pchart__detail .tablewrap { border: 0; border-radius: 0; } @media (max-width: 640px) { .pchart__price { font-size: 24px; } .pchart__badges { align-items: flex-start; } } /* 出库单价 FIFO 推算标记 */ .est-price { color: var(--estimated); cursor: help; } .est-price__mark { color: var(--estimated); font-weight: 700; margin-left: 1px; } /* ============================================================ 物料档 · 现代视觉系统（mat-detail） 用户要求：不要克制，分块/阴影/颜色/丰富。仅作用于单料页，不影响全局。 ============================================================ */ :root { --mat-blue: #2f6bff; --mat-blue-weak: #eef3ff; --mat-violet: #7c5cff; --mat-violet-weak: #f1edff; --mat-amber: #d97706; --mat-amber-weak: #fef3e2; --mat-red: #e5484d; --mat-red-weak: #fdecec; --mat-green: #12805c; --mat-green-weak: #e6f6ef; --mat-shadow: 0 1px 2px rgba(16,20,30,.04), 0 4px 16px rgba(16,20,30,.06); --mat-shadow-lg: 0 2px 6px rgba(16,20,30,.06), 0 12px 32px rgba(16,20,30,.10); } /* ---- 渐变 Hero ---- */ .matx-hero { position: relative; overflow: hidden; border-radius: 20px; margin-bottom: 20px; padding: 22px 24px; color: #fff; background: linear-gradient(120deg, #1e2a5a 0%, #3448a8 46%, #5b5ef0 100%); box-shadow: var(--mat-shadow-lg); } .matx-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); pointer-events: none; } .matx-hero__top { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; } .matx-hero__thumb { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.14); display: grid; place-items: center; backdrop-filter: blur(2px); } .matx-hero__thumb img { width: 100%; height: 100%; object-fit: cover; } .matx-hero__thumb .mat-ph { font: 700 22px/1 var(--mono); color: rgba(255,255,255,.9); } .matx-hero__id { min-width: 0; flex: 1; } .matx-hero__cat { display: inline-block; font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.18); padding: 4px 9px; border-radius: 999px; margin-bottom: 8px; } .matx-hero__name { font: 650 22px/1.25 var(--sans); letter-spacing: -.02em; } .matx-hero__code { font: 500 12px/1 var(--mono); color: rgba(255,255,255,.72); margin-top: 6px; } .matx-hero__sub { font: 400 13px/1.5 var(--sans); color: rgba(255,255,255,.82); margin-top: 10px; position: relative; z-index: 1; } .matx-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 1; } .matx-chip { display: inline-flex; align-items: baseline; gap: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 7px 11px; } .matx-chip__k { font: 500 10px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.7); } .matx-chip__v { font: 600 13px/1 var(--sans); color: #fff; } .matx-chip--miss .matx-chip__v { color: rgba(255,255,255,.55); font-weight: 400; } /* ---- 彩色强调统计卡（三列，移动端单列，不堆叠）---- */ .matx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 20px; } .matx-card { position: relative; background: var(--surface); border-radius: 16px; padding: 18px 18px 16px; box-shadow: var(--mat-shadow); border: 1px solid var(--line); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; } .matx-card:hover { box-shadow: var(--mat-shadow-lg); transform: translateY(-2px); } .matx-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--mat-blue)); } .matx-card--blue { --c: var(--mat-blue); } .matx-card--violet { --c: var(--mat-violet); } .matx-card--amber { --c: var(--mat-amber); } .matx-card--green { --c: var(--mat-green); } .matx-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .matx-card__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--cw, var(--mat-blue-weak)); color: var(--c); font-size: 16px; flex: 0 0 auto; } .matx-card--blue .matx-card__ico { --cw: var(--mat-blue-weak); } .matx-card--violet .matx-card__ico { --cw: var(--mat-violet-weak); } .matx-card--amber .matx-card__ico { --cw: var(--mat-amber-weak); } .matx-card--green .matx-card__ico { --cw: var(--mat-green-weak); } .matx-card__title { font: 600 13px/1.2 var(--sans); color: var(--ink); } .matx-card__title small { display: block; font: 400 11px/1.3 var(--sans); color: var(--ink-3); margin-top: 2px; } .matx-card__val { font: 650 30px/1.05 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); } .matx-card__val small { font: 500 13px/1 var(--sans); color: var(--ink-3); margin-left: 4px; letter-spacing: 0; } .matx-card__val.is-missing { font: 500 14px/1.4 var(--sans); color: var(--ink-3); } .matx-card__foot { margin-top: 10px; font: 400 12px/1.5 var(--sans); color: var(--ink-2); } .matx-card__pill { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 var(--sans); padding: 4px 8px; border-radius: 999px; margin-top: 8px; } .matx-card__pill--up { color: var(--mat-red); background: var(--mat-red-weak); } .matx-card__pill--down { color: var(--mat-green); background: var(--mat-green-weak); } .matx-card__pill--flat { color: var(--ink-2); background: var(--surface-sunken); } /* ---- 现代分块 section 外壳（给价格走势/流水等用）---- */ .matx-block { background: var(--surface); border-radius: 16px; box-shadow: var(--mat-shadow); border: 1px solid var(--line); overflow: hidden; margin-bottom: 20px; } .matx-block__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; } .matx-block__head h3 { font: 650 15px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); } .matx-block__head .spacer { margin-left: auto; } .matx-block__body { padding: 0 18px 18px; } .matx-block__accent { height: 3px; background: linear-gradient(90deg, var(--mat-blue), var(--mat-violet)); } .matx-block__accent--price { background: linear-gradient(90deg, var(--mat-amber), var(--mat-red)); } @media (max-width: 640px) { .matx-hero { padding: 18px; border-radius: 16px; } .matx-hero__name { font-size: 19px; } .matx-stats { grid-template-columns: 1fr; gap: 12px; } .matx-card__val { font-size: 26px; } } /* matx-block 内的标签与表格适配 */ .matx-tag { font: 600 12px/1 var(--sans); padding: 5px 10px; border-radius: 999px; } .matx-tag--in { color: var(--mat-green); background: var(--mat-green-weak); } .matx-tag--out { color: var(--mat-amber); background: var(--mat-amber-weak); } .matx-block__accent--flow { background: linear-gradient(90deg, var(--mat-green), var(--mat-blue)); } .matx-block__body .tablewrap { border: 0; border-radius: 0; margin: 0 -18px -18px; width: calc(100% + 36px); } .matx-block__body > .pchart__head { padding-bottom: 12px; } /* ---------- 全局搜索（桌面在侧栏品牌下，移动在顶栏搜索位） ---------- */ .rail__search { padding: 0 16px 16px; } .topsearch { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; transition: border-color .15s ease, box-shadow .15s ease; } .topsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); } .topsearch__ico { font-size: 13px; opacity: .5; flex: none; } .topsearch__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 13px/1 var(--sans); color: var(--ink); height: 38px; padding: 0; } .topsearch__input::placeholder { color: var(--ink-3); } .topsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; } @media (max-width: 1080px) { /* 手机/平板：身份(退出登录)移到「更多」页，顶栏右侧给搜索。 rail 顶行 = 品牌 | 搜索；导航独占第二行——搜索占显眼主位。 */ .rail { grid-template-areas: "brand search" "nav nav"; } .rail__foot { display: none; } /* 冗长身份收进「更多」页 */ .rail__search { grid-area: search; padding: 0; align-self: center; } } /* 「更多」页账号卡 */ .more-me { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--mat-shadow); } .more-me b { font: 600 15px/1.2 var(--sans); color: var(--ink); } .more-me__role { display: inline-block; margin-left: 8px; font: 500 11px/1 var(--sans); color: var(--accent-ink); background: var(--accent-weak); padding: 4px 8px; border-radius: 999px; } /* ============================================================ 单据详情（凭证式）——抽屉内：凭证头 + 信息网格 + 明细表 + 合计 ============================================================ */ .bill-view { display: flex; flex-direction: column; gap: 18px; } /* 凭证头：类型色带 + 单号 + 金额大字 */ .bill-hero { position: relative; overflow: hidden; border-radius: 14px; padding: 16px 18px; color: #fff; box-shadow: var(--mat-shadow); } .bill-hero--in { background: linear-gradient(120deg, #0f5c43 0%, #12805c 60%, #1ba172 100%); } .bill-hero--out { background: linear-gradient(120deg, #8a4a06 0%, #c2700d 60%, #d98b19 100%); } .bill-hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); } .bill-hero__top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; flex-wrap: wrap; } .bill-hero__kind { font: 600 11px/1 var(--sans); letter-spacing: .06em; background: rgba(255,255,255,.2); padding: 5px 9px; border-radius: 999px; } .bill-hero__no { font: 600 14px/1 var(--mono); color: rgba(255,255,255,.95); } .bill-hero__amt { margin-top: 12px; font: 650 28px/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; position: relative; z-index: 1; } .bill-hero__amt small { display: block; font: 400 11px/1.4 var(--sans); color: rgba(255,255,255,.75); letter-spacing: 0; margin-top: 4px; } .bill-hero__noamt { margin-top: 10px; font: 400 12px/1.5 var(--sans); color: rgba(255,255,255,.85); position: relative; z-index: 1; } /* 信息网格：标签在上、值在下，两列对齐（窄屏单列） */ .bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; } .bill-field { min-width: 0; } .bill-field dt { font: 500 11px/1.3 var(--sans); color: var(--ink-3); margin-bottom: 4px; } .bill-field dd { margin: 0; font: 500 13px/1.45 var(--sans); color: var(--ink); overflow-wrap: anywhere; } @media (max-width: 520px) { .bill-grid { grid-template-columns: 1fr; gap: 12px; } } /* 明细区 */ .bill-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .bill-sec__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; } .bill-sec__head h4 { font: 650 13px/1.2 var(--sans); color: var(--ink); } .bill-sec__cnt { margin-left: auto; font: 500 11px/1 var(--sans); color: var(--ink-3); background: var(--surface-sunken); padding: 4px 8px; border-radius: 999px; } .bill-sec .tablewrap { border: 0; border-radius: 0; border-top: 1px solid var(--line); } .billline__mat { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; } .billline__name { font: 500 13px/1.3 var(--sans); color: var(--link); } .billline__code { font-size: 11px; color: var(--ink-3); } .billline__qty { font-variant-numeric: tabular-nums; } .bill-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-strong); background: var(--surface-sunken); } .bill-total span { font: 500 12px/1 var(--sans); color: var(--ink-3); } .bill-total b { font: 650 17px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); } .bill-src { margin: 0; } /* 抽屉外壳提升：标题更清晰、内容区浅灰底让卡片浮起 */ .drawer__head { padding: 16px 20px; } .drawer__head h2 { font-size: 16px; line-height: 22px; font-weight: 650; letter-spacing: -.01em; } .drawer__head p { font-size: 12px; margin-top: 4px; } .drawer__body { padding: 18px 20px 28px; background: var(--canvas); } .ds-title { font: 600 14px/1.4 var(--sans); color: var(--ink); margin-bottom: 12px; } /* 核价分组/汇总 —— 提升为卡片质感（与 matx/单据同语言） */ .qgroup { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--mat-shadow); overflow: hidden; margin-bottom: 16px; } .qgroup__bar { padding: 12px 16px; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-sunken) 100%); border-bottom: 1px solid var(--line); } .qgroup__name { font-size: 13.5px; font-weight: 650; color: var(--ink); } .qgroup__sub { color: var(--ink); } .qgroup .tablewrap { border: 0; border-radius: 0; } .qsummary { border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--mat-shadow); background: var(--surface); margin: 22px 0 10px; } .qsummary__title { font-size: 13.5px; font-weight: 650; background: transparent; border-bottom: 1px solid var(--line); padding: 14px 18px; } .qsummary__rows { padding: 8px 18px; } .qsummary__total { padding: 16px 18px; border-top: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--surface-sunken) 0%, #eef0fe 100%); border-radius: 0 0 16px 16px; } .qsummary__grand { font-size: 26px; } /* 库存分析 KPI 卡 —— 提升到 matx 级质感（大圆角/柔和阴影/hover抬升/顶部色条） */ .kcard { border-radius: 16px; box-shadow: var(--mat-shadow); position: relative; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .kcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--mat-blue), var(--mat-violet)); opacity: .9; } .kcard:hover { box-shadow: var(--mat-shadow-lg); transform: translateY(-2px); } .kcard--hero { background: linear-gradient(160deg, #fff 0%, #f6f7ff 100%); } .kcard--hero::before { background: linear-gradient(90deg, var(--mat-violet), var(--mat-blue)); height: 4px; } .kcard--link:hover { border-color: var(--accent); } .kcard__val { font-variant-numeric: tabular-nums; } /* 分析视角/结构卡也统一圆角与阴影 */ .insight { border-radius: 16px; box-shadow: var(--mat-shadow); } .lenspanel { border-radius: 16px; box-shadow: var(--mat-shadow); }