/* ============================================================ V02 · 组件样式 ------------------------------------------------------------ 设计令牌全部来自 tokens.css（L1 原始 / L2 语义 / L3 组件三层）。 ★ 本文件只写「组件怎么长」，不写「颜色是什么」—— 颜色一律 var(--token)，换肤因此只改 tokens.css 一处。 ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background:var(--bg); color:var(--ink); font:var(--fs-md)/var(--lh-base) var(--font); -webkit-font-smoothing:antialiased; } .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.2px} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} /* ★ 2026-11-04 用户第 1 条：「批量安排」为什么还常驻。 根因不在 JS —— JS 早就写了 `pickBtn.hidden = PICK.size < 2`， 但 `[hidden]` 的 `display:none` 来自**浏览器默认样式表**， 而 `.btn{display:inline-flex}` 是作者样式：作者样式一律压过 UA 默认样式， 与选择器权重无关。于是 hidden 属性设了、属性检查器里也看得到， 元素照旧显示 —— 「置灰但不消失」正是这个现象。 本文件里已经零散打过几次补丁（.site-foot[hidden] / .lg-wrap[hidden] / .adm-entry[hidden] / .segpane[hidden] …），但每遇到一个新元素就漏一个。 这里一次性兜住：!important 才能压住 `.btn{display:inline-flex}` 这类 带 display 的组件规则，否则这条规则本身也会被压掉。 */ [hidden]{display:none !important} /* ============ 布局 ============ */ .app{display:flex;height:100vh;overflow:hidden} /* 侧栏 */ /* 侧栏配色全部走令牌 —— 换肤时侧栏跟着变（用户 2026-10-30 第 4 项： 之前侧栏是硬编码深绿，切皮肤只有内容区变了） */ .rail{ width:var(--rail-w);flex:0 0 var(--rail-w);background:var(--rail-bg);color:var(--rail-ink); /* ★ 侧栏与画布之间必须有一条边界（用户 2026-10-31：「前端切换皮肤，会丢失左侧导航」）。 病根：极简皮肤把侧栏做成白底，而画布也是白的 —— 两者同色、中间又没有任何分隔， 缩放窗口后整条侧栏与内容区糊成一片，看着就像导航不见了。 border 用 --rail-line：极简下是 #D8D8D8 的实线，深色皮肤下是侧栏同色系的暗线（几乎不显眼，无害）。 box-sizing 是 border-box，扣的是内宽，侧栏总宽不变，台账表宽不受影响。 */ border-right:1px solid var(--rail-line); display:flex;flex-direction:column;position:relative;z-index:30; } .rail.collapsed{width:var(--rail-w-narrow);flex:0 0 var(--rail-w-narrow)} .brand{display:flex;align-items:center;gap:10px;padding:16px 16px 12px} .brand .mark{ width:26px;height:26px;flex:0 0 26px;border-radius:var(--radius-sm); background:linear-gradient(145deg,var(--rail-1),var(--rail-2)); display:grid;place-items:center;color:var(--rail-ink);font-weight:700;font-size:var(--fs-base); } .brand b{font-size:var(--fs-md);letter-spacing:.3px;white-space:nowrap} .rail.collapsed .brand b,.rail.collapsed .nav i,.rail.collapsed .proj-meta,.rail.collapsed .me-meta{display:none} /* 项目切换器：常驻，防看错项目 */ .proj{ margin:4px 12px 12px;padding:9px 10px;border-radius:var(--r-s); background:var(--rail-chip);border:1px solid var(--rail-line);cursor:pointer; display:flex;align-items:center;gap:9px; } .proj:hover{background:var(--rail-chip2)} .proj .dot{width:7px;height:7px;border-radius:var(--radius-full);background:var(--rail-mark);flex:0 0 7px;box-shadow:0 0 0 3px var(--rail-mark-soft)} .proj-meta{flex:1;min-width:0} .proj-meta .t{font-size:var(--fs-base);font-weight:600;color:var(--rail-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .proj-meta .s{font-size:var(--fs-xs);color:var(--rail-dim);font-family:var(--mono)} .proj .car{color:var(--rail-dim);font-size:var(--fs-xs)} .nav{padding:2px 10px;flex:1;overflow-y:auto} .nav .grp{font-size:var(--fs-xs);color:var(--rail-dim);letter-spacing:1.2px;padding:12px 8px 6px;font-weight:600} .nav a{ display:flex;align-items:center;gap:10px;padding:8px 9px;margin:1px 0;border-radius:var(--r-s); color:var(--rail-ink2);text-decoration:none;font-size:var(--fs-base);position:relative; } /* ★ 用户 2026-10-30 第 9 轮第 1 项：「左侧导航…不使用斜体字」。 菜单文字用的是 标签（renderRail 里 h("i",null,label)），浏览器默认 italic； 之前没有对应的 font-style 复位 ⇒ 整条侧栏都是斜体。侧栏字号/字体族本就走 --fs-* / --font（受「后台 → 界面外观」管控），这里只把斜体正过来。 */ .nav a i,.setnav a i{font-style:normal} .nav a:hover{background:var(--rail-hover);color:var(--rail-ink)} .nav a.on{background:var(--rail-on);color:var(--rail-on-ink);box-shadow:inset 2px 0 0 var(--rail-mark)} .nav a .ic{width:16px;text-align:center;opacity:.85;flex:0 0 16px} .nav a .badge{margin-left:auto;font-size:var(--fs-xs);background:var(--warn);color:var(--surface);border-radius:var(--radius-md);padding:1px 6px;font-family:var(--mono)} .nav a .badge.gray{background:var(--rail-chip);color:var(--rail-dim)} .me{padding:10px 12px;border-top:1px solid var(--rail-line);display:flex;align-items:center;gap:9px} .me .av{width:26px;height:26px;border-radius:var(--radius-full);background:var(--rail-2);color:var(--rail-ink);display:grid;place-items:center;font-size:var(--fs-sm);font-weight:600;flex:0 0 26px} .me-meta .t{font-size:var(--fs-base);color:var(--rail-ink);font-weight:600} .me-meta .s{font-size:var(--fs-xs);color:var(--rail-dim)} .collapse-btn{ position:absolute;right:-11px;top:50%;width:22px;height:22px;border-radius:var(--radius-full); background:var(--surface);border:1px solid var(--line);color:var(--ink2);cursor:pointer; display:grid;place-items:center;font-size:var(--fs-xs);box-shadow:var(--sh);z-index:40; } /* 主区 */ .main{flex:1;display:flex;flex-direction:column;min-width:0} .cmdbar{ height:54px;flex:0 0 54px;background:var(--panel);border-bottom:1px solid var(--line); display:flex;align-items:center;gap:14px;padding:0 20px; } .crumb{display:flex;align-items:center;gap:7px;font-size:var(--fs-base);color:var(--ink3)} .crumb b{color:var(--ink);font-weight:600;font-size:var(--fs-md)} .crumb .sep{color:var(--border-strong)} .search{ margin-left:auto;width:280px;display:flex;align-items:center;gap:8px; background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:6px 10px;color:var(--ink3);font-size:var(--fs-base); } .search kbd{margin-left:auto;font-family:var(--mono);font-size:var(--fs-xs);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 4px;color:var(--ink3)} .iconbtn{width:32px;height:32px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer;display:grid;place-items:center} .iconbtn:hover{background:var(--panel-2)} /* 皮肤入口 —— 用户 2026-10-30：「连入口都迷你」⇒ 改成带文字的显眼按钮。 32px 的裸图标在顶栏一排小圆钮里根本认不出来哪个是换肤。 */ .skbtn{ height:32px;padding:0 13px;border-radius:var(--radius-md); border:1px solid var(--border);background:var(--surface);color:var(--text-2); cursor:pointer;display:inline-flex;align-items:center;gap:6px; font:inherit;font-size:var(--fs-sm);font-weight:600;white-space:nowrap; } .skbtn:hover{background:var(--surface-3);color:var(--text-1);border-color:var(--border-strong)} .skbtn::first-letter{font-size:calc(14px * var(--font-scale))} .bell{position:relative} .bell::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:var(--radius-full);background:var(--danger);border:1.5px solid var(--surface)} .canvas{flex:1;overflow-y:auto;padding:20px 22px 40px} /* 页脚（用户 2026-10-31 第 19 轮第 2 项，第 21 轮扩成多段） ------------------------------------------------------------ 第 21 轮用户原话：「底部除了备案号，还有其他信息组成，参照网上经验，提前预留位置」。 所以这里不是"一条备案行"，而是**三段预留槽**： ① 版权行 © 年份 主体 版权所有 + ICP 备案 + 公安网备 ② 联系行 电话 / 邮箱 / 地址 + 自定义链接（隐私政策、服务条款、技术支持…） ③ 附注行 版本号 / 免责声明之类 ★ 单行 26px 是默认态（只填备案号时和以前一模一样）；每多一段长 18px 左右。 用 min-height 而不是 height —— 写死高度会让第二段直接溢出被裁掉。 ★ 段内 flex-wrap：窗口窄了自动折行，不横向溢出（页脚出现横向滚动条很难看）。 */ .site-foot{ flex:0 0 auto;min-height:26px;padding:3px 14px;box-sizing:border-box; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; border-top:1px solid var(--line);background:var(--panel); font-size:calc(11px * var(--font-scale));color:var(--ink3);line-height:1.55;letter-spacing:.01em;user-select:none; } .site-foot[hidden]{display:none} .site-foot .sf-row{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:0 6px;max-width:100%;text-align:center; } /* 单个词条不拆行（电话号码/备案号被拆成两半最难读），太长时退回允许折行 */ .site-foot .sf-i{white-space:nowrap;max-width:100%} .site-foot a{color:var(--ink3);text-decoration:none} .site-foot a:hover{color:var(--brand);text-decoration:underline} .site-foot .sf-sep{opacity:.5} /* 附注行（版本/免责）再淡一档：它是"说明"，不该和备案号抢注意力。 ★ 只降到 10.5px + 0.85 透明度：再淡（0.7 以下）在 1080p 上就基本看不清了， 而这一行恰恰是"有问题该找谁"的信息，不能当装饰。 */ .site-foot .sf-l3{opacity:.85;font-size:calc(10.5px * var(--font-scale))} /* 后台「界面外观」里的页脚预览：借用同一套 .site-foot 类保证所见即所得， 只去掉固定定位语义、加虚线框，让它老实躺在卡片里 */ .site-foot.sf-preview{ flex:none;border:1px dashed var(--line);border-top:1px dashed var(--line); border-radius:var(--radius-md);background:var(--surface);padding:8px 12px;margin-top:2px; } @media (max-width:640px){ .site-foot{padding:4px 10px} .site-foot .sf-i{white-space:normal;overflow-wrap:anywhere} } .site-foot .sf-sep{opacity:.55} .screen{display:none} .screen.on{display:block;animation:fade .18s ease} @keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} /* ============ 通用组件 ============ */ .btn{ height:32px;padding:0 13px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--surface);color:var(--ink); font-size:var(--fs-base);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap; } .btn:hover{background:var(--panel-2)} .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--surface)} .btn.primary:hover{background:var(--brand-ink)} .btn.ghost{background:transparent;border-color:transparent;color:var(--brand)} .btn.sm{height:27px;padding:0 10px;font-size:var(--fs-base)} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)} .pad{padding:16px 18px} .hd{display:flex;align-items:center;gap:10px;margin-bottom:14px} .hd h2{font-size:var(--fs-md);font-weight:650;letter-spacing:.2px} .hd .sub{font-size:var(--fs-sm);color:var(--ink3)} .hd .right{margin-left:auto;display:flex;gap:8px;align-items:center} .grid{display:grid;gap:14px} .tag{ display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 7px;border-radius:var(--radius-sm); font-size:var(--fs-sm);font-weight:500;white-space:nowrap; } .tag.gray{background:var(--slate-soft);color:var(--slate)} .tag.amber{background:var(--warn-soft);color:var(--warn)} .tag.blue{background:var(--info-soft);color:var(--info)} .tag.green{background:var(--ok-soft);color:var(--ok)} .tag.red{background:var(--danger-soft);color:var(--danger)} .tag.brand{background:var(--brand-soft);color:var(--brand)} .tag .pt{width:5px;height:5px;border-radius:var(--radius-full);background:currentColor} /* 阶段进度：6 小格 */ .flow{display:inline-flex;gap:2px;align-items:center} .flow i{width:13px;height:5px;border-radius:var(--radius-sm);background:var(--border-soft);display:block} .flow i.on{background:var(--brand-2)} .flow i.cur{background:var(--warn)} .flow i.late{background:var(--danger)} /* KPI */ /* KPI 卡 —— 对齐 V01 v460-kpi（P0 样式基线）：auto-fit 栅格 / 12px 圆角 / 24px 数值 / 无左色条无阴影 */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:14px} .kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:13px 16px;position:relative;overflow:hidden} .kpi::before{display:none} .kpi.k1::before{background:var(--brand)} .kpi.k2::before{background:var(--warn)} .kpi.k3::before{background:var(--info)} .kpi.k4::before{background:var(--slate)} .kpi .l{font-size:var(--fs-sm);color:var(--ink3);display:flex;align-items:center;gap:6px} .kpi .v{font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;letter-spacing:-.4px;margin:3px 0 2px;line-height:1.15} .kpi .f{font-size:var(--fs-sm);color:var(--ink3)} .kpi .f em{font-style:normal;color:var(--ok)} .kpi .f em.bad{color:var(--danger)} /* 待办列表 */ .todo{display:flex;flex-direction:column} .todo .it{ display:grid;grid-template-columns:56px 1fr 96px 132px 74px;gap:12px;align-items:center; padding:11px 18px;border-bottom:1px solid var(--line-2); } .todo .it:last-child{border-bottom:0} .todo .it:hover{background:var(--panel-2)} .days{ text-align:center;border-radius:var(--radius-sm);padding:3px 0;font-family:var(--mono);font-size:var(--fs-sm);font-weight:600;line-height:1.25; } .days small{display:block;font-size:var(--fs-xs);font-weight:400;opacity:.75;font-family:var(--font)} .days.late{background:var(--danger-soft);color:var(--danger)} .days.warn{background:var(--warn-soft);color:var(--warn)} .days.norm{background:var(--slate-soft);color:var(--slate)} .ti .a{font-size:var(--fs-md);font-weight:550} .ti .b{font-size:var(--fs-sm);color:var(--ink3);margin-top:1px} .ti .b .mono{color:var(--ink2)} /* 表格 */ .tbl-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden} .tbl{width:100%;border-collapse:collapse;font-size:var(--fs-base)} .tbl th{ text-align:left;font-weight:600;font-size:var(--fs-sm);color:var(--ink2);letter-spacing:.4px; background:var(--panel-2);border-bottom:1px solid var(--line);padding:9px 12px;white-space:nowrap;position:sticky;top:0; } .tbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle} .tbl tbody tr:hover{background:var(--panel-2);cursor:pointer} .tbl tbody tr.sel{background:var(--brand-soft)} .tbl .cb{width:34px;text-align:center;padding-right:0} .tbl .r{text-align:right} .tbl td .mono{font-size:var(--fs-base);color:var(--ink)} .tbl td .sub{font-size:var(--fs-xs);color:var(--ink3)} /* V01 台账列 1:1 还原所需的三个类（V01 v460/v465 系列同名） */ .tbl td.mut{color:var(--ink4)} .tbl th.idx,.tbl td.idx{width:54px;text-align:right;color:var(--ink3);font-family:var(--mono);font-size:var(--fs-sm)} .tbl td.wrap{white-space:normal} .v2-temp{display:inline-block;padding:1px 6px;border-radius:var(--radius-md);font-size:var(--fs-xs);white-space:nowrap;font-family:var(--mono)} .v2-temp.ok{background:var(--ok-soft);color:var(--ok-ink)} .v2-temp.near{background:var(--warn-soft);color:var(--warn-ink)} .v2-temp.low{background:var(--panel-2);color:var(--ink3)} .bar{height:4px;border-radius:var(--radius-sm);background:var(--surface-3);overflow:hidden;width:64px} .bar b{display:block;height:100%;background:var(--brand-2);border-radius:var(--radius-sm)} .bar b.warn{background:var(--warn)} .bar b.bad{background:var(--danger)} /* 工具条 */ .toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap} .chips{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:3px} .chip{padding:5px 11px;border-radius:var(--radius-sm);font-size:var(--fs-base);color:var(--ink2);cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap} .chip:hover{background:var(--panel-2)} .chip.on{background:var(--brand);color:var(--surface)} .chip .c{font-family:var(--mono);font-size:var(--fs-xs);opacity:.7} .chip.on .c{opacity:.85} .spacer{flex:1} /* 台账左栏 */ .split{display:grid;grid-template-columns:196px 1fr;gap:14px;align-items:start} .domains{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:8px;position:sticky;top:0} .domains .t{font-size:var(--fs-xs);color:var(--ink3);letter-spacing:1px;padding:6px 8px 4px;font-weight:600} .domains a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--radius-sm);color:var(--ink2);text-decoration:none;font-size:var(--fs-base)} .domains a:hover{background:var(--panel-2)} .domains a.on{background:var(--brand-soft);color:var(--brand);font-weight:600} .domains a .n{margin-left:auto;font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink3)} .domains a.on .n{color:var(--brand-2)} /* 分页 */ .pager{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:var(--fs-base);color:var(--ink3)} .pager .pages{display:flex;gap:3px;margin-left:auto} .pager .pg{min-width:27px;height:27px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:var(--fs-base);cursor:pointer;color:var(--ink2);padding:0 6px} .pager .pg.on{background:var(--brand);border-color:var(--brand);color:var(--surface)} /* 抽屉 */ .scrim{position:fixed;inset:0;background:rgba(18,36,31,.28);opacity:0;pointer-events:none;transition:.2s;z-index:50} .scrim.on{opacity:1;pointer-events:auto} .drawer{ position:fixed;top:0;right:0;bottom:0;width:var(--drawer-w);max-width:92vw;background:var(--panel); border-left:1px solid var(--line);transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1); z-index:60;display:flex;flex-direction:column;box-shadow:-16px 0 40px -20px rgba(22,33,29,.3); } .drawer.on{transform:none} /* 表格型抽屉（安排送检 / 待办清单）：列多，给足宽度 */ .drawer.wide{width:min(920px,94vw)} .drawer.wide .dw-bd{padding:14px 16px} /* ★ 用户 2026-10-31 第 18 轮第 4 项：「抽屉要自适应宽度，让数据完整显示」。 取样单详单是 8 列（# / 进场日期 / 供货厂家 / 规格 / 炉批号 / 组数 / 最迟完成 / 取样要求）， 920px 下「供货厂家」「取样要求」两个自适应列会被压到几十px， 炉批号与批次叠在一起 ⇒ 信息读不出来。 xwide = 宽表格专用档；min(1180px,94vw) 本身随视口自适应，小屏不会溢出。 */ .drawer.xwide{width:min(1180px,94vw)} .drawer.xwide .dw-bd{padding:14px 16px} .dw-hd{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:10px} .dw-hd .x{margin-left:auto;cursor:pointer;color:var(--ink3);font-size:var(--fs-xl);line-height:1;padding:2px 4px} .dw-bd{flex:1;overflow-y:auto;padding:18px} /* 抽屉「← 返回」：靠右紧挨 ×（第 28 轮第 1 项）。 margin-left:auto 让它与标题分开；字号压在 sm 档，免得抢标题视线。 */ .dw-hd .dw-back{margin-left:auto;align-self:center;font-size:calc(12px * var(--font-scale));padding:4px 9px;white-space:nowrap} .dw-hd .dw-back + .x{margin-left:6px} .dw-ft{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px} /* 时间线 */ .tl{position:relative;padding-left:22px} .tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1.5px;background:var(--line)} .tl .n{position:relative;padding-bottom:16px} .tl .n:last-child{padding-bottom:0} .tl .n::before{ content:"";position:absolute;left:-21px;top:4px;width:9px;height:9px;border-radius:var(--radius-full); background:var(--surface);border:2px solid var(--border-strong); } .tl .n.done::before{background:var(--brand-2);border-color:var(--brand-2)} .tl .n.cur::before{background:var(--surface);border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)} .tl .n.late::before{background:var(--danger);border-color:var(--danger)} .tl .n .x{font-size:var(--fs-base);font-weight:600;display:flex;align-items:center;gap:8px} .tl .n .y{font-size:var(--fs-sm);color:var(--ink3);margin-top:1px} .tl .n.pending .x{color:var(--ink3);font-weight:500} /* KV */ .kv{display:grid;grid-template-columns:88px 1fr;gap:8px 12px;font-size:var(--fs-base)} .kv .k{color:var(--ink3)} .kv .v{color:var(--ink)} .sec-t{font-size:var(--fs-xs);color:var(--ink3);letter-spacing:1px;font-weight:600;margin:18px 0 10px;display:flex;align-items:center;gap:8px} .sec-t::after{content:"";flex:1;height:1px;background:var(--line)} /* 打印模板卡 */ .wall{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .tpl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;cursor:pointer} .tpl:hover{border-color:var(--border-strong);box-shadow:0 2px 6px rgba(22,33,29,.08),0 14px 30px -16px rgba(22,33,29,.18)} .tpl .pv{background:var(--surface-3);padding:14px;display:grid;place-items:center;height:186px} .paper{ width:126px;height:168px;background:var(--paper-edge);border-radius:var(--radius-sm);box-shadow:var(--shadow-1); padding:9px 8px;display:flex;flex-direction:column;gap:3px; } .paper .h{height:3px;background:var(--paper-ink);width:78%;margin:0 auto 3px;border-radius:1px} .paper .h2{height:2px;background:var(--paper-line);width:56%;margin:0 auto 4px;border-radius:1px} .paper .ln{height:2px;background:var(--paper-faint);border-radius:1px} .paper .ln.s{width:70%} .paper .g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;margin-top:2px} .paper .g span{height:11px;border:.6px solid var(--paper-cell-line);border-radius:1px;background:var(--paper-cell)} .paper .f{margin-top:auto;height:2px;background:var(--paper-faint);border-radius:1px} .paper .stamp{width:26px;height:26px;border:.8px dashed var(--paper-stamp);border-radius:50%;margin-left:auto;margin-top:2px;opacity:.55} .tpl .meta{padding:11px 14px;border-top:1px solid var(--line)} .tpl .meta .n{font-size:var(--fs-md);font-weight:600;display:flex;align-items:center;gap:7px} .tpl .meta .d{font-size:var(--fs-sm);color:var(--ink3);margin-top:3px;display:flex;gap:10px} .tpl .meta .d .mono{color:var(--ink2)} /* 表单 */ .form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px} .fld{display:flex;flex-direction:column;gap:5px} .fld.wide{grid-column:1/-1} .fld label{font-size:var(--fs-sm);color:var(--ink2);font-weight:500} .fld label em{font-style:normal;color:var(--danger)} .fld input,.fld select,.fld textarea{ height:34px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:0 10px; font:inherit;font-size:var(--fs-base);color:var(--ink);outline:none; } .fld input:focus,.fld select:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(44,122,102,.12)} .fld .hint{font-size:var(--fs-xs);color:var(--ink3)} /* 设置左栏 */ .setnav{display:flex;flex-direction:column;gap:1px} .setnav a{padding:8px 11px;border-radius:var(--radius-sm);font-size:var(--fs-base);color:var(--ink2);text-decoration:none;display:flex;align-items:center;gap:8px} .setnav a:hover{background:var(--panel-2)} .setnav a.on{background:var(--brand-soft);color:var(--brand);font-weight:600} .setnav .grp{font-size:var(--fs-xs);color:var(--ink3);letter-spacing:1px;padding:12px 11px 5px;font-weight:600} /* ============================================================ 一屏多段 + 后台合并屏（2026-11-05 设计稿 设置/后台重组 P1） ------------------------------------------------------------ 合并后的屏由多段组成：段之间只给一条细线和间距，靠各自卡片的头部 当段标题（不再叠一层段标题 —— 同一句话说两遍）。 .set-seg-h 只给"自带头部被摘掉"的段用（报料模板）。 ============================================================ */ .set-seg-sp{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft)} .set-seg-h{font-size:calc(12.5px * var(--font-scale));font-weight:700;color:var(--ink2);margin:0 0 10px 2px} .compose-part{margin-top:0} .compose-part + .compose-part{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft)} .compose-seg{font-size:calc(12.5px * var(--font-scale));font-weight:700;color:var(--ink2);margin:0 0 10px 2px} /* 统计卡 */ .rep{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer} .rep:hover{border-color:var(--border-strong)} .rep .n{font-size:var(--fs-md);font-weight:600;display:flex;align-items:center;gap:8px} .rep .d{font-size:var(--fs-sm);color:var(--ink3);line-height:1.6} .rep .mini{display:flex;align-items:flex-end;gap:3px;height:38px;margin-top:auto} .rep .mini i{flex:1;background:var(--brand-soft);border-radius:var(--radius-sm) 2px 0 0;display:block} .rep .mini i.hi{background:var(--brand-2)} .legend{display:flex;gap:14px;font-size:var(--fs-sm);color:var(--ink2);flex-wrap:wrap} .legend span{display:flex;align-items:center;gap:5px} .legend i{width:8px;height:8px;border-radius:var(--radius-sm);display:block} .note{background:var(--brand-soft);border:1px solid var(--brand-soft);border-radius:var(--radius-md);padding:10px 12px;font-size:var(--fs-base);color:var(--brand-ink);line-height:1.6} .note b{font-weight:650} .empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:44px;color:var(--ink3);font-size:var(--fs-base)} .empty .ic{width:40px;height:40px;border-radius:var(--radius-full);background:var(--panel-2);display:grid;place-items:center;font-size:var(--fs-xl)} @media (max-width:1180px){ .kpis{grid-template-columns:repeat(2,1fr)} .wall{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr} .domains{position:static;display:flex;overflow-x:auto;gap:2px} .domains .t{display:none} } /* ===== v640：工作台分筐 / 排期日历 / 角色视角 ===== */ .rolebar{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:3px} .rolebar span{padding:5px 11px;border-radius:var(--radius-sm);font-size:var(--fs-base);color:var(--ink2);cursor:pointer;white-space:nowrap} .rolebar span:hover{background:var(--panel-2)} .rolebar span.on{background:var(--brand);color:var(--surface)} .bk{margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--sh);overflow:hidden} .bk>.h{display:flex;align-items:center;gap:9px;padding:10px 16px;border-bottom:1px solid var(--line-2);background:var(--panel-2)} .bk>.h .bar{width:3px;height:15px;border-radius:var(--radius-sm);background:var(--slate);width:3px} .bk.bad>.h .bar{background:var(--danger)}.bk.now>.h .bar{background:var(--warn)} .bk.plan>.h .bar{background:var(--info)}.bk.wait>.h .bar{background:var(--slate)} .bk.doing>.h .bar{background:var(--brand-2)} .bk>.h b{font-size:var(--fs-base)} .bk>.h .c{font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-full);padding:1px 8px;color:var(--ink2)} .bk>.h .tip{font-size:var(--fs-sm);color:var(--ink3)} .bk>.h .tg{margin-left:auto;font-size:var(--fs-sm);color:var(--ink3);cursor:pointer} .row{display:grid;grid-template-columns:94px 1fr 112px 118px 78px;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line-2)} .row:last-child{border-bottom:0} .row:hover{background:var(--panel-2)} .row .when{text-align:center;border-radius:var(--radius-sm);padding:3px 2px;font-family:var(--mono);font-size:var(--fs-sm);font-weight:600;line-height:1.3} .row .when small{display:block;font-size:var(--fs-xs);font-weight:400;opacity:.78;font-family:var(--font)} .when.od{background:var(--danger-soft);color:var(--danger)} .when.td{background:var(--warn-soft);color:var(--warn)} .when.fu{background:var(--info-soft);color:var(--info)} .when.nm{background:var(--slate-soft);color:var(--slate)} .tag.dk{background:var(--rail-bg);color:var(--rail-ink)} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px} .cal .dh{text-align:center;font-size:var(--fs-xs);color:var(--ink3);font-weight:600;letter-spacing:1px;padding-bottom:2px} .cal .d{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);min-height:96px;padding:7px 8px;position:relative} .cal .d.off{background:var(--surface-2);border-style:dashed} .cal .d.off .n{color:var(--ink3)} .cal .d.today{border-color:var(--brand);box-shadow:0 0 0 2px rgba(44,122,102,.14)} .cal .d .n{font-family:var(--mono);font-size:var(--fs-base);font-weight:600;display:flex;align-items:baseline;gap:4px} .cal .d .n em{font-style:normal;font-size:var(--fs-xs);font-weight:400;color:var(--ink3);font-family:var(--font)} .cal .d .off-tag{position:absolute;top:7px;right:8px;font-size:var(--fs-xs);color:var(--text-3);background:var(--surface-3);border-radius:var(--radius-sm);padding:0 4px} .cal .d .it{margin-top:5px;font-size:var(--fs-xs);line-height:1.45;border-radius:var(--radius-sm);padding:2px 5px;background:var(--info-soft);color:var(--info-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cal .d .it.w{background:var(--warn-soft);color:var(--warn-ink)} .cal .d .it.g{background:var(--ok-soft);color:var(--ok-ink)} .legend2{display:flex;gap:14px;font-size:var(--fs-sm);color:var(--ink3);flex-wrap:wrap;margin-top:10px} .legend2 span{display:flex;align-items:center;gap:5px} .legend2 i{width:9px;height:9px;border-radius:var(--radius-sm);display:block} /* ============================================================ 以下是原型里没有、真系统必需的部分：登录、提示、弹窗、加载态。 ============================================================ */ /* ---------- 登录遮罩 ---------- */ .lg-wrap{ position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center; background:linear-gradient(160deg,var(--rail-bg),var(--brand) 60%,var(--rail-1)); } .lg-wrap[hidden]{display:none} .lg-card{ width:100%;max-width:352px;background:var(--surface);border-radius:var(--radius-lg);padding:28px 26px 24px; box-shadow:0 24px 60px -20px rgba(0,0,0,.5); } .lg-card .lg-mark{ width:36px;height:36px;border-radius:var(--radius-md);background:linear-gradient(145deg,var(--rail-1),var(--rail-2)); display:grid;place-items:center;color:var(--rail-ink);font-weight:700;font-size:var(--fs-lg);margin-bottom:16px; } .lg-card h1{font-size:var(--fs-xl);margin:0 0 4px;font-weight:650;letter-spacing:-.01em} .lg-sub{font-size:var(--fs-base);color:var(--ink3);margin:0 0 20px} .lg-card label{display:block;font-size:var(--fs-base);color:var(--ink2);margin-bottom:14px} .lg-card input{ display:block;width:100%;margin-top:6px;padding:9px 11px;font:inherit;font-size:var(--fs-md); border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink); } .lg-card input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(44,122,102,.14)} .lg-err{background:var(--danger-soft);color:var(--danger);font-size:var(--fs-base);padding:8px 10px;border-radius:var(--radius-sm);margin-bottom:14px} .lg-err[hidden]{display:none} .lg-card button{ width:100%;padding:10px;font:inherit;font-size:var(--fs-md);font-weight:600;color:var(--surface); background:var(--brand);border:0;border-radius:var(--radius-md);cursor:pointer; } .lg-card button:disabled{opacity:.6;cursor:default} .lg-tip{margin-top:16px;font-size:var(--fs-sm);color:var(--ink3);line-height:1.6} /* ---------- 提示条 ---------- */ .toast{ position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px); background:var(--rail-bg);color:var(--rail-ink);padding:10px 18px;border-radius:var(--radius-md);font-size:var(--fs-base); opacity:0;pointer-events:none;transition:.2s;z-index:300;max-width:76vw; box-shadow:0 12px 30px -12px rgba(0,0,0,.5); } .toast.on{opacity:1;transform:translate(-50%,0)} .toast.err{background:var(--danger-ink)} .toast.warn{background:var(--warn-ink)} /* ---------- 弹窗 ---------- */ .msk{position:fixed;inset:0;background:rgba(18,36,31,.34);z-index:120;display:none;align-items:center;justify-content:center;padding:24px} /* 项目切换器·顶栏版（用户 2026-10-30 第 12 项） */ .proj-top{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:1px solid var(--line); border-radius:var(--radius-full);background:var(--card,var(--surface));font:inherit;font-size:var(--fs-base);color:var(--ink);cursor:pointer; /* ★ 用户 2026-10-31 第 11 轮第 13 项：「让工程名称显示完整，改为自动适应长度」。 原来写死 max-width:300px，而真名是「大亚湾区惠州城城中村改造项目（三标段）」 这类二十多字 —— 300px 只放得下「…（三标」，用户永远看不到标段号。 改成：宽度跟着内容走（max-content），只受视口比例封顶（46vw / 720px）， 留 ellipsis 仅作极端兜底（视口极窄且名字超长时）。 */ max-width:min(720px,46vw);width:max-content;white-space:nowrap} .proj-top:hover{border-color:var(--brand-2)} .proj-top .dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--brand);flex:0 0 auto} .proj-top .proj-name{overflow:hidden;text-overflow:ellipsis;font-weight:600;flex:0 1 auto;min-width:0} .proj-top .car{color:var(--ink3);font-size:var(--fs-xs);flex:0 0 auto} .msk.on{display:flex} /* 弹窗宽度自适应内容（用户 2026-10-30 第 1/2 项）：width:auto = 有多少内容撑多宽， 顶到 max-width 封顶；min-width 兜底防提示语挤成一列。 */ .dlg{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);width:auto;min-width:380px;max-width:720px;max-height:88vh;display:flex;flex-direction:column} .dlg.wide{max-width:980px} /* 个人中心（v648 · 第 33 轮）：窄卡 560px（宽窄走 openDlg 的 profile 选项， class 由 openDlg 每次重设，不往 #dlg 上写内联样式 —— 内联会残留污染下一个弹窗） */ .dlg.profile{max-width:560px;width:min(560px,94vw)} /* 本批次流水号：五列，部位与流水号都是长串 —— 固定成 820px 再按比例分列 */ /* 用户 2026-10-31 第 22 轮第 6 项：「根据内容自动放大长宽比，减少出现竖向条」 ------------------------------------------------------------ ★ 症结不是字号，是**比例**：五列挤在 820px 里，工程部位与流水号两个长串 各占 30% 就只剩 246px，HLS26102000008 这种 14 位流水号被折断后行高翻倍， 于是 16 行就把 44vh 撑满 —— 竖向滚动条其实是"列太窄"逼出来的。 ★ 修法：先把弹窗放宽到 1080（横向更宽 = 长宽比更接近内容的形状）， 再让表体高度跟随内容（上限按视口算），而不是写死 44vh。 结果：同样 16 行，一屏放得下，竖向条不再出现；行数真的很多时才滚。 */ /* ★ 第 38 轮：宽度不再由 .serials 自己拍（原来是 1080，与 mtdoc 的 1120、 wide 的 980 各说各话），统一交给 .sz-w3；这里只留表格相关样式。 */ .dlg.serials .tbl-serial{table-layout:fixed} .dlg.serials .tbl-serial th,.dlg.serials .tbl-serial td{padding-left:10px;padding-right:10px} .dlg.serials .tbl-serial td:first-child,.dlg.serials .tbl-serial th:first-child{padding-left:4px} /* 行高收一点：17 行 × 40px 正好把 640px 的可用高度顶穿，竖向条又出来了。 这里只收上下 padding（横向不动，横向是列宽的命） —— 收到 7px 后 17 行约 612px， 一屏放完，竖向条消失。 */ .dlg.serials .tbl-serial th,.dlg.serials .tbl-serial td{padding-top:6px;padding-bottom:6px} /* 行高收一点：17 行 × 40px 正好把 640px 的可用高度顶穿，竖向条又出来了。 这里只收上下 padding（横向不动，横向是列宽的命） —— 收到 7px 后 17 行约 612px， 一屏放完，竖向条消失。 */ .dlg.serials .tbl-serial th,.dlg.serials .tbl-serial td{padding-top:6px;padding-bottom:6px} /* 拆模行淡一档：这一段是另一类试块，不该和送检行同样显眼 */ .dlg.serials .tbl-serial tr.is-brk td{color:var(--ink3)} /* 第 13 轮第 3 项：表里现在列的是「当天参与统计的全部记录」， 旺季一天十几批，表会顶到弹窗底部 —— 表内滚动，统计条和按钮始终可见 */ .dlg.serials .serials-cap{margin:0 0 8px;font-size:var(--fs-sm)} /* 高度跟着内容走：视口减去头部/说明/统计条/底栏的固定高度，留 40px 余量 */ /* 高度跟着内容走：视口减去头部/说明/底栏的固定高度（约 200px）。 ★ 240 时 17 行 + 统计条差 13px 放不下 → 统计条被顶进滚动区，正好压住最后一行。 放到 200 之后一屏放完；行数真的更多时才滚动，统计条由下面的 sticky 兜住。 */ /* ★ 第 38 轮：弹窗改成定高（sz-w3 = 1120×700）之后，表体不能再用「视口 - 280」 这类算式 —— 它和弹窗自己的高度是两套坐标，算大了就顶穿统计条与底栏 （截图里最后一行压在「安排统计」上就是这个原因）。改成 flex 吃满剩余高度。 */ .dlg.serials .dlg-bd{display:flex;flex-direction:column;overflow:hidden} .dlg.serials .serials-bd{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden} .dlg.serials .serials-bd thead th{position:sticky;top:0;z-index:1;background:var(--panel)} /* 统计条钉在表体底部（用户第 22 轮第 6 项）。 ★ 放宽弹窗、托高表体之后，行数刚好把「安排统计」顶出可视区 —— 统计是最该一直看见的 那一行（取试件的人照着它备箱），所以让它 sticky 在滚动区底部，行数再多也不丢。 */ /* 统计条在弹窗主体之外（.dlg-stat），固定可见、不参与滚动 */ .dlg.serials .dlg-bd{padding-bottom:2px} .dlg.serials .dlg-bd{padding-bottom:2px} .dlg.serials .dlg-stat{padding:0 20px 10px} .dlg.serials .dlg-stat .arrstat{margin-top:0} /* 统计条钉在表体底部（用户第 22 轮第 6 项）。 ★ 放宽弹窗、托高表体之后，行数刚好把「安排统计」顶出可视区 —— 统计是最该一直看见的 那一行（取试件的人照着它备箱），所以让它 sticky 在滚动区底部，行数再多也不丢。 */ .dlg-hd{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px} .dlg-hd b{font-size:var(--fs-md)} .dlg-hd .x{margin-left:auto;cursor:pointer;color:var(--ink3);font-size:var(--fs-xl);line-height:1;padding:0 4px} /* ★ 2026-11-06（第 104 轮 · 回传预览）：加 min-height:0。 .dlg 是 flex column，bd 默认 min-height:auto = 不小于内容高度， 内容一长 bd 就把 .dlg-ft 顶出弹窗 —— 表现为"底部按钮不见了"， 而按钮其实在 700px 之外。加这一行，内容超长时由 bd 自己滚， 按钮永远钉在底部。对正常长度的弹窗没有任何影响。 */ .dlg-bd{padding:18px 20px;overflow-y:auto;min-height:0} .dlg-ft{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end} /* ---------- 勾选框 ---------- */ input[type=checkbox]{width:14px;height:14px;accent-color:var(--brand);cursor:pointer;vertical-align:-2px} /* ---------- 数字输入框：去掉浏览器自带的上下步进箭头（用户 2026-10-30 第 4 项）──── 「全站所有数字输入框，都移除上下倒三角」。Chromium 是 ::-webkit-inner/outer-spin-button，Firefox 是 -moz-appearance:textfield； 两个都要写，只写一个在另一家浏览器里箭头照旧。键盘上下键仍可微调，不受影响。 */ input[type=number]{-moz-appearance:textfield;appearance:textfield} input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* ---------- 加载/空态 ---------- */ .loading{padding:48px;text-align:center;color:var(--ink3);font-size:var(--fs-base)} .skel{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--surface-3),var(--surface-2),var(--surface-3));background-size:200% 100%;animation:sk 1.1s infinite} @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}} /* ---------- 报料解析：草稿表 ---------- */ .draft{width:100%;border-collapse:collapse;font-size:var(--fs-base)} .draft th{text-align:left;font-size:var(--fs-xs);color:var(--ink3);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line);background:var(--panel-2)} .draft td{padding:5px 8px;border-bottom:1px solid var(--line-2)} .draft input,.draft select{height:28px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 7px;font:inherit;font-size:var(--fs-base);width:100%;background:var(--surface)} .draft input:focus,.draft select:focus{outline:none;border-color:var(--brand-2)} .draft .warnrow{background:var(--warn-soft)} /* 用户 2026-10-30 第 6 项：解析草稿列宽 —— 数字类小列（方量/接头数量）不再与 文本长列（厂家/部位）平分宽度，常用屏宽一行放得下、不用横向滚动 */ .draft-pour th:nth-child(1){width:19%} .draft-pour th:nth-child(2){width:10%} .draft-pour th:nth-child(3){width:9%} .draft-pour th:nth-child(4){width:13%} .draft-pour th:nth-child(5){width:10%} .draft-pour th:nth-child(6){width:23%} /* ★ 第 44 轮追：套筒部位移出表格并入组标题（部位全单一致，不值得占一列）， 腾出来的宽度全部给两个厂家列 —— 全名（惠州市鑫奥机械有限公司）原来 被挤成三四行，现在整行放下。 */ .draft-slv th:nth-child(1){width:30px} .draft-slv th:nth-child(2){width:86px} .draft-slv th:nth-child(3){width:80px} .draft-slv th:nth-child(4){width:21%} .draft-slv th:nth-child(5){width:16%} .draft-slv th:nth-child(6){width:21%} .draft-slv th:nth-child(7){width:118px} /* ---------- 别名表 ---------- */ .alias{width:100%;border-collapse:collapse;font-size:var(--fs-base)} .alias th{text-align:left;font-size:var(--fs-xs);color:var(--ink3);font-weight:600;padding:7px 8px;border-bottom:1px solid var(--line);background:var(--panel-2)} .alias td{padding:6px 8px;border-bottom:1px solid var(--line-2);vertical-align:top} .alias .k{width:96px;font-weight:600;color:var(--ink)} .alias input{width:100%;height:28px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 8px;font:inherit;font-size:var(--fs-base)} /* ============================================================ 工作台（V01 口径：左待办四类 + 右四卡） ============================================================ */ /* ★ 第 10 轮（用户：「感觉要溢出屏幕了，要有点边界感」）： 右栏原来是死宽的 336px，窗口一窄左栏被压到几百像素、右栏还杵在那儿， 两条卡片一行挤到贴边。改成有下限的弹性列 + 两档断点， 并把两个格子的 min-width 归零 —— 否则里头的长部位名（nowrap）会把列撑开、 整块内容被推到画布外面去（canvas 是 overflow:auto，溢出后只能靠横向滚才能看见）。 */ .wb-grid{grid-template-columns:minmax(0,1fr) clamp(340px,22vw,392px);align-items:start} /* ★ 第 90 轮（用户 2026-11-05 第 4 条）：「中间『待办事项』让给右侧的『今日送检』」。 右栏原来是 minmax(300px,336px) —— 一旦窗口收窄，它掉到 300 的下限， 四张卡里的部位名被压成两行还带省略号，日期和「已安排」挤在同一行。 现在改成 clamp(340px, 22vw, 392px)：大屏 392（1920 下左右 ≈ 77:23）， 1440 左右 340 起步，永不小于 340 —— 卡片里的信息密度是有下限的， 再窄就只能靠折叠，而折叠会让人以为"没有今天的记录"。 ★ 左栏仍是 minmax(0,1fr)：min-width 0 保住了横向滚动（.wb-tw overflow-x:auto）， 左表列再多也只是多一条滚动条，不会被右栏挤到变形。 */ .wb-grid>*{min-width:0} .wb-card{padding:0} /* P0：改用 .base-card（V01 v460-card）*/ /* 组头 */ .wb-g{border-top:1px solid var(--line-2)} .wb-g:first-child{border-top:none} .wb-gh{display:flex;align-items:center;gap:8px;padding:9px 2px;cursor:pointer;user-select:none} .wb-gh:hover{background:var(--panel-2)} .wb-caret{color:var(--ink4);font-size:var(--fs-xs);width:10px} .wb-dot{width:7px;height:7px;border-radius:var(--radius-sm);flex:none} .wb-gh b{font-size:var(--fs-base);font-weight:650} .wb-cnt{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink3);background:var(--panel-2);border-radius:var(--radius-sm);padding:1px 6px} .wb-note{margin-left:auto;font-size:var(--fs-sm);color:var(--ink4)} .wb-allck{display:flex;align-items:center;gap:4px;font-size:var(--fs-sm);color:var(--ink3);cursor:pointer} .wb-allck input{cursor:pointer} /* 表 */ .wb-tw{overflow-x:auto;margin:0 -16px} /* ★ 第 10 轮：待办表列多，窄屏必然横向滚。滚动条以前是"藏着"的 （浏览器默认在 Windows 上只在悬停时出现），看起来就像最后一列被硬切掉、 「到期」两字只露一半 —— 用户的"要溢出屏幕了"有一半是这个观感。 给它一条常驻的细滚动条，切边就变成"还能往右看"，而不是"界面坏了"。 */ .wb-tw::-webkit-scrollbar,.sp-lw::-webkit-scrollbar{height:8px} .wb-tw::-webkit-scrollbar-thumb,.sp-lw::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} .wb-tw::-webkit-scrollbar-thumb:hover,.sp-lw::-webkit-scrollbar-thumb:hover{background:var(--ink4)} .wb-tbl{font-size:var(--fs-base)} .wb-tbl th{white-space:nowrap;padding:7px 10px} .wb-tbl td{padding:8px 10px} .wb-tbl tbody tr:hover{background:var(--brand-soft)} .wb-tbl .cb{padding-left:14px} .wb-tbl td.num,.wb-tbl td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .wb-tbl td.mono{font-size:var(--fs-sm)} .wb-due{font-size:var(--fs-sm);font-weight:600;white-space:nowrap} .wb-red{color:var(--danger)} .wb-org{color:var(--warn)} .wb-gry{color:var(--ink3)} .wb-empty{padding:16px 4px;font-size:var(--fs-base);color:var(--ink3)} /* 底部批量操作条 */ .wb-bar{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line); position:sticky;bottom:0;background:var(--panel);z-index:2;margin-top:4px} .wb-bartxt{font-size:var(--fs-base);display:flex;align-items:center;gap:6px;min-width:0} .wb-bartxt b{font-weight:650} .wb-baract{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} /* 右侧四卡 */ .wb-mini{padding:0} .wb-mini .base-chd{margin-bottom:8px} .wb-mini .base-chd .wbtitle{font-size:var(--fs-base);font-weight:650} .wb-n{font-family:var(--mono);font-size:var(--fs-sm);background:var(--brand-soft);color:var(--brand);border-radius:var(--radius-sm);padding:1px 6px} .wb-mini .base-chd .sub{font-size:var(--fs-xs);margin-left:auto} /* ★ 用户 2026-10-31 第 12 轮第 2 项：「右侧栏，左右边距缩进一点」。 根因：卡头 .base-chd 左右各 14px 内边距，可卡体 .wb-minibd 是 0 —— 条目行（.wb-mrow / .wb-fee / .wb-mft 全是 padding:X 0）直接顶到卡片边框上， 卡头缩进、卡体贴边，右边那一列看着就"想溢出"。 把间距给到卡体容器：一处改动四张卡同时对齐卡头的 14px。 */ .wb-minibd{display:flex;flex-direction:column;padding:0 14px 8px} .wb-mrow{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid var(--line-2)} .wb-mrow:last-child{border-bottom:none} .wb-mrow:hover{background:var(--panel-2)} .wb-mleft{min-width:0;flex:1} .wb-mleft b{font-size:var(--fs-base);font-weight:620;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 条目名：不加粗（用户第 2 项）。靠字号 + 墨色区分层级，不靠字重。 ★ 第 10 轮：改为最多两行折行。原来是单行 nowrap+ellipsis， 长部位名（「2-14'轴-1-5轴交2-14'轴-2-Y轴地下顶板、梁」）被切在中间， 右栏看着像"装不下要溢出去"；两行能完整读完，卡片也不会横向顶宽。 */ .wb-mleft .wb-mt{font-size:var(--fs-base);font-weight:400;color:var(--ink);display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.45} .wb-mmeta{font-size:var(--fs-xs);color:var(--ink3);margin-top:1px;overflow-wrap:anywhere} .wb-mright{display:flex;align-items:center;gap:4px;flex:none} .wb-mdate{text-align:right;line-height:1.25} .wb-mdate b{font-size:var(--fs-sm);font-family:var(--mono)} .wb-mdate small{display:block;font-size:var(--fs-xs);color:var(--ink3)} /* 待取回：压了 7 天以上，日期徽标转红 —— 取报告没有法定红线， 只有"压太久不像话"，所以是提示色不是错误色 */ .wb-mdate.late b,.wb-mdate.late small{color:var(--danger-ink)} .wb-msep{display:flex;align-items:center;gap:6px;padding:7px 0 3px;font-size:var(--fs-xs);color:var(--ink3);letter-spacing:.5px} .wb-msep .c{font-family:var(--mono);background:var(--panel-2);border-radius:var(--radius-sm);padding:0 5px} .wb-mfee{font-size:var(--fs-base);font-weight:600} .wb-mft{display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink3)} .wb-mft b{margin-left:auto;font-size:var(--fs-md);color:var(--ink)} /* 断点：1440 以下把右栏收到 300（左表才是主战场）；1180 以下整块堆叠 */ @media (max-width:1440px){ .wb-grid{grid-template-columns:minmax(0,1fr) 340px} /* 第 90 轮：跟基准一致，不再掉到 300 */ } @media (max-width:1180px){ .wb-grid{grid-template-columns:1fr} } /* ============================================================ 安排送检 / 送检清单抽屉（V01 tdsm 口径） ============================================================ */ .inp{padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:var(--fs-base);background:var(--panel);color:var(--ink)} .inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .tdsm-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 12px} .tdsm-f{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--ink3)} .tdsm-hint{font-size:var(--fs-sm);color:var(--ink4)} .tdsm-bar .tdsm-f{margin-right:2px} .tdsm-wrap{overflow:auto;max-height:calc(100vh - 260px);border:1px solid var(--line-2);border-radius:var(--radius-md)} .tdsm-tb{font-size:var(--fs-base);min-width:100%} .tdsm-tb th{white-space:nowrap;padding:8px 10px;position:sticky;top:0;background:var(--panel-2);z-index:1} .tdsm-tb td{padding:7px 10px;vertical-align:middle} .tdsm-tb tbody tr{border-top:1px solid var(--line-2)} .tdsm-tb tbody tr:hover{background:var(--brand-soft)} .tdsm-nm b{font-weight:620} .tdsm-nm .mut{font-size:var(--fs-sm);color:var(--ink3)} .tdsm-sub{font-size:var(--fs-xs);color:var(--ink4);margin-top:1px} .tdsm-tb .tdsm-d{width:140px;padding:4px 6px;font-size:var(--fs-sm)} .tdsm-tb .tdsm-w{width:104px;padding:4px 6px;font-size:var(--fs-sm);text-align:center} .tdsm-ok{color:var(--ok);font-weight:600;white-space:nowrap;font-family:var(--mono);font-size:var(--fs-sm)} .tdsm-no{color:var(--warn);font-weight:600;white-space:nowrap;font-family:var(--mono);font-size:var(--fs-sm)} .tdsm-tb .mut{color:var(--ink4)} /* 龄期后的累计温度（同条件专用）：不加粗、小一号，跟在龄期后面 */ .wb-temp{font-family:var(--mono);font-size:var(--fs-sm);color:var(--warn);margin-left:2px} /* 列宽自动适应后，单元格默认不折行，实在放不下才挤 */ .wb-tbl td{white-space:nowrap} .wb-tbl td:first-child{white-space:normal} /* ============================================================ 设置 · 检测单位 / 供应商 ============================================================ */ .labrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px; border:1px solid var(--line-2);border-radius:var(--radius-md);margin-bottom:8px;background:var(--panel)} .labrow.on{border-color:var(--brand);background:var(--brand-soft)} .labrow b{font-size:var(--fs-base)} .labchips{display:flex;gap:6px;flex-wrap:wrap} .labacts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap} .tplbox{border:1px solid var(--line-2);border-radius:var(--radius-md);padding:12px;margin-top:10px} .tplbox>b{font-size:var(--fs-base);display:block;margin-bottom:8px} .labrow .wb-n{font-family:var(--mono)} /* ============================================================ 台账（2026-10-29 重做：取消左侧域栏、恢复平铺） ------------------------------------------------------------ ★ 试件台账是 15 列宽表。V01 的做法是容器横向滚动 + 列不折行； 上一版给每列写死 px 宽度，总和超过容器后浏览器把汉字压成竖排 —— 所以这里一个宽度都不写，交给内容自己撑，放不下就横滚。 ============================================================ */ .tbl-wrap.lg{overflow-x:auto} .tbl.lg{min-width:100%} .tbl.lg th{white-space:nowrap} .tbl.lg td{white-space:nowrap;padding:9px 10px} .tbl.lg th.idx,.tbl.lg td.idx{width:auto} /* 长文本单元格：内部再套一层 .ell 才截得住（表格自动布局会忽略 td 的 max-width） */ .tbl .ell{display:inline-block;max-width:260px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;vertical-align:bottom} /* 台账工具条的搜索框（V01 顶部 `.sch` 的位置） */ input.search{height:32px;width:230px;border:1px solid var(--line);border-radius:var(--radius-md); padding:0 10px;font:inherit;background:var(--panel);color:var(--ink)} input.search:focus{outline:none;border-color:var(--brand)} /* ============================================================ 送检三连抽屉 + 批次详情（2026-10-29 验收 1~3 / 6~7） ============================================================ */ /* 只读摘要：字段一行一条，虚线分隔（V01 v460 抽屉的 .f 行） */ .dw-sum{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden} .dw-sum-r{display:flex;gap:12px;padding:11px 14px;border-bottom:1px dashed var(--line);font-size:var(--fs-base)} .dw-sum-r:last-child{border-bottom:none} .dw-sum-r .k{color:var(--ink3);flex:0 0 84px} .dw-sum-r .v{flex:1;color:var(--ink);word-break:break-all} .dw-due{display:flex;gap:12px;align-items:center;padding:12px 2px 2px;font-size:var(--fs-base)} .dw-due .k{color:var(--ink3);flex:0 0 84px} .dw-due .v{font-weight:600} /* 页脚提示语：整行、不跟按钮抢宽度 */ .dw-hint{flex:0 0 100%;font-size:var(--fs-sm);color:var(--ink3);margin-top:2px;line-height:1.5} /* 抽屉里的批次清单小表 */ .tdsm-lst{margin-top:2px;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden} .tdsm-lstb{width:100%;border-collapse:collapse;font-size:var(--fs-base)} .tdsm-lstb th{background:var(--surface2);color:var(--ink3);font-weight:500;text-align:left;padding:8px 10px;white-space:nowrap} .tdsm-lstb td{padding:8px 10px;border-top:1px solid var(--line);white-space:nowrap} /* 多值余数徽标（报告编号 +2 / 炉批号 +8） */ .v465-badge{display:inline-block;margin-left:5px;padding:0 5px;border-radius:var(--radius-sm); background:var(--surface3);color:var(--ink2);font-size:var(--fs-xs);line-height:17px;vertical-align:middle} /* 钢筋连接 1 级弹窗顶部横排 */ .bt-pop{display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:var(--fs-base); color:var(--ink3);margin-bottom:12px} .bt-pop b{color:var(--ink)} .bt-wrap{overflow-x:auto;max-height:56vh;border:1px solid var(--line);border-radius:var(--radius-md)} .bt-wrap .tbl{min-width:100%} .bt-wrap .tbl th,.bt-wrap .tbl td{white-space:nowrap;padding:8px 10px} /* 批次详情（2 级） */ .bt-hd{margin-bottom:14px} .bt-hd b{font-size:calc(15px * var(--font-scale))} .bt-chip{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:var(--radius-md); background:var(--surface2);border:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink3)} .bt-kv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden} .bt-c{display:flex;gap:10px;background:var(--panel);padding:11px 14px;font-size:var(--fs-base)} .bt-c .k{color:var(--ink3);flex:0 0 76px} .bt-c .v{flex:1;color:var(--ink);word-break:break-all} /* 确认弹窗正文 */ .cfm-bd{font-size:var(--fs-md);line-height:1.75;color:var(--ink2)} .cfm-bd b{color:var(--ink)} .cfm-bd p{margin:0 0 6px} /* 弹窗正文里的条目清单（「哪几张取样单没建成」这类）。浏览器默认 ul 缩进 40px， 在 w1 档（420px）里会把长理由挤成两行，收窄到 18px 刚好。 */ .cfm-bd ul{margin:0;padding:0 0 0 18px} .cfm-bd li{margin:2px 0} /* ── 台账单元格换行（用户 2026-10-29 验收第 3、5 条）──────────────── 为什么必须带 .tbl.lg 前缀：`.tbl.lg td{white-space:nowrap}` 的权重是 (0,2,1)， 光写 `.tbl td.wrap` 是 (0,2,1) 打平后按源序输 —— 上一版就是这么"设了没生效"的。 ★ 用 width 而不是 max-width：表格自动布局会忽略 td 的 max-width， 长轴号串照样把整张表撑宽、把右边几列怼出屏幕。 */ /* ── 台账单元格换行（用户 2026-10-29 验收第 3、5 条）──────────────── 为什么必须带 .tbl.lg 前缀：`.tbl.lg td{white-space:nowrap}` 的权重是 (0,2,1)， 光写 `.tbl td.wrap` 是 (0,2,1) 打平后按源序输 —— 上一版就是这么"设了没生效"的。 ★ 用 width 而不是 max-width：表格自动布局会忽略 td 的 max-width， 长轴号串照样把整张表撑宽、把右边几列怼出屏幕。 ★ 18em = 「工程部位超过 18 字自动换行」（用户 2026-10-30 第 9 轮第 2 项）： em 跟随 --font-scale，字号调大列宽等比放宽，不会出现"调了字号列更挤"。 */ .tbl.lg td.partcell,.tbl.lg th.partcell{ white-space:normal;word-break:break-word;line-height:1.55; width:18em;min-width:13em;max-width:18em;vertical-align:top; } /* 备注：一行约 6 个字（12.5px × 6 ≈ 75px + 左右 padding 24px），超了就换行 */ .tbl.lg td.notecell{ white-space:normal;word-break:break-word;line-height:1.55; width:104px;min-width:96px;vertical-align:top;color:var(--ink2); } /* 部位列上限已统一为 18em（见上方 18 字换行规则），此处不再另行放宽 */ /* ── 页头「后台管理」入口（用户 2026-10-29 验收第 2 条）──────────────── 从左侧导航挪上来：后台是独立页面，放在页头右上角才符合「一进去就换站」的直觉。 ★ 不用 .iconbtn：那是个 32×32 的方块，用户在图里框的是一段带字的区域。 */ .adm-entry{ display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px; border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface); color:var(--ink2);font-size:var(--fs-base);font-weight:500;text-decoration:none; white-space:nowrap;flex:0 0 auto; } .adm-entry:hover{background:var(--panel-2);color:var(--ink);border-color:var(--line-2)} .adm-entry[hidden]{display:none} /* ── 待办事项表格：部位列定宽 16 字，其余列自适应（用户 2026-10-29 第 8 条）── 「工程部位，超过16字，自动换行；剩的列宽，其他的自动分配」 ★ 16em 而不是 16 个 px：字号是 12.5px，写死 200px 一旦改字号就对不上了。 ★ 用 width 而不是 max-width：表格自动布局会忽略 td 的 max-width， 长轴号串照样把表撑宽，右边几列被挤出屏幕（要靠横向滚动才看得见）。 ★ 去掉 .wb-tw 的 overflow-x:auto：既然列宽改成自适应，正常情况就不该溢出； 留着 auto 等于给"撑爆了"这种情况留了个只能横向拖的后路，反而看不见问题。 ★★ 第 13 轮第 1 项（用户第三次报「部位显示不全」）——量出来的真因： `.wb-tw` 还留着老写法 `margin:0 -16px`（当年卡片有 16px 内边距时用来出血）， 而 `.wb-card` 现在是 `padding:0` + `.base-card{overflow:hidden}`， 于是整张表被推到卡片外 15px，首列左半边直接被裁掉 —— 实测 `td.left=175 / card.left=190`，轴线串开头的「2-」就是这么没的。 现在：表不再外扩，组块左右各缩进 14px（与卡头 14px 对齐）， 首列左对齐 + 允许任意断行（overflow-wrap:anywhere）， 长轴号串只会在栏内折成多行，不会再顶出边界。 */ .wb-tw{overflow-x:visible;margin:0} .wb-g{padding:0 14px} .wb-tbl{width:100%;table-layout:auto} .wb-tbl th:first-child,.wb-tbl td:first-child{ width:16em;min-width:9em;max-width:16em; white-space:normal;word-break:break-word;overflow-wrap:anywhere; text-align:left;line-height:1.55;vertical-align:top; padding-left:0; } /* 末列右侧也不留半截内边距，保证最后一列字与组头右边缘齐 */ .wb-tbl th:last-child,.wb-tbl td:last-child{padding-right:0} /* 其余列：不折行但允许被压窄（配合 table-layout:auto，浏览器会自己分配剩余宽度） */ .wb-tbl th:not(:first-child),.wb-tbl td:not(:first-child){ white-space:nowrap;vertical-align:top; } /* 待办分组「展开全部 / 收起」（每页条数见设置 → 列表分页） */ .wb-more{ /* 组块现在左右各缩进 14px（第 13 轮第 1 项），展开条跟着对齐卡片边 */ margin:0 -14px;padding:9px 14px;text-align:center;font-size:var(--fs-sm); color:var(--brand);cursor:pointer;border-top:1px solid var(--line); background:var(--panel-2);user-select:none; } .wb-more:hover{background:var(--brand-soft)} /* 「来自项目档案」来源徽标（设置 → 委托单抬头 / 报审表抬头，用户 2026-10-29 第 6 条） 作用不是装饰：只读框必须让人一眼看出"这个值不在这儿改、去哪儿改"。 */ .srcbadge{ display:inline-flex;align-items:center;gap:4px;margin-top:4px; font-size:var(--fs-xs);line-height:1.5;color:var(--ink4); } .srcbadge::before{content:"↗";font-size:var(--fs-xs);color:var(--info)} /* ============ 2026-10-30 用户验收第 3/13 项 ============ */ /* 组数徽标：贴在工程部位后面（V01 同款），回答「这个部位几组」 */ /* 组数徽标：贴在工程部位后面。用户 2026-10-30 第 7 项要求「放小一点」—— 原来 18px 宽 / 17px 行高，比正文还高，一列十一行看下去像一排按钮。 现在是「贴在字后面的小角标」尺寸，不抢部位名的注意力。 */ .grpbadge{display:inline-block;min-width:14px;padding:0 3px;margin-left:5px; font-family:var(--mono);font-size:var(--fs-xs);line-height:13px;text-align:center; color:var(--text-inv);background:var(--danger);border-radius:var(--radius-sm);vertical-align:1.5px;font-weight:600 ;letter-spacing:0} /* 首页四张卡标题：不加粗（用户第 13 项） */ .wb-mini .hd .wbtitle{font-weight:500;font-size:var(--fs-base);color:var(--ink2);letter-spacing:.2px} /* 侧栏「我」那一格的退出按钮（用户第 9 项） */ .me .me-out{margin-left:auto;border:1px solid rgba(255,255,255,.18);background:transparent; color:rgba(255,255,255,.72);font-size:var(--fs-sm);padding:3px 8px;border-radius:var(--radius-sm);cursor:pointer;flex:none} .me .me-out:hover{background:rgba(220,80,60,.85);border-color:transparent;color:var(--surface)} /* 「安排统计」汇总条（用户第 14 项，对齐 V01 image#7） */ .arrstat{display:flex;align-items:center;gap:10px;margin-top:14px;padding:9px 13px; background:var(--surface-2);border-radius:var(--radius-sm);font-size:var(--fs-base);color:var(--text-2); /* ★ 2026-11-06（第 103 轮）：「送检」拆成「标养 + 同养」之后统计条多了一段， 1120px 的弹窗里刚好卡在边界上 —— 不设 wrap 的话 flex 会**逐字**压窄每一个 span， 「安排统」「计」被拆成两行，比换行难看得多。 现在：段与段之间可以整体换行，段内绝不拆字。 */ flex-wrap:wrap;row-gap:5px} .arrstat>span{white-space:nowrap} .arrstat b{font-weight:600;color:var(--ink3);font-size:var(--fs-sm);letter-spacing:.3px} /* ★ 2026-11-06（第 103 轮）：「送检」拆成「标养 / 同养」两段 —— 同养紧跟标养，之间只用间距分开（它们是同一趟车的两半，不该像拆模那样被竖线隔断）； 拆模 / 钢筋仍带竖线，因为那两段确实不是送检那几箱。 */ .arrstat .same{color:var(--ink3);font-size:var(--fs-sm)} /* 拆模统计：与送检并列、淡一档，前面加一道竖线分开（用户第 22 轮第 6 项） */ .arrstat .brk{color:var(--ink3);font-size:var(--fs-sm);padding-left:10px;border-left:1px solid var(--line)} /* 钢筋（原材 / 连接）统计：第 28 轮第 5 项 —— 各自单列一段，不再混进「未标强度」。 颜色比拆模再淡一档：钢筋试件不装在混凝土的箱子里，是另一批活。 */ .arrstat .mat{color:var(--ink3);font-size:var(--fs-sm);padding-left:10px;border-left:1px solid var(--line);opacity:.85} /* ============ 资料清单（申领流水号 · 用户 2026-10-30 image#1） ============ 这张弹窗里的东西最终要印成纸送出去，所以屏幕上就按纸的样子摆： 白底、居中标题、细边框、不留圆角 —— 屏上看着像纸，印出来才不会「不像一个东西」。 */ .dlg.mtdoc{max-width:1120px} /* 打印模板 · 效果预览（第 35 轮）：纸面 297mm≈1123px，弹窗放得下才不用横拖 */ .dlg.tplprev{max-width:1280px} /* ============================================================ 弹窗尺寸三档（第 38 轮 · 用户拍板 16:10） ------------------------------------------------------------ 以前只有 max-width、高度完全不管，比例是"内容的副产物"： 内容宽就扁（批量编辑 9 列被压成 1.94:1），内容窄就方。 现在宽度固定、高度按比例锁，头 / 主体 / 底栏三段固定，只有主体滚动。 p 440 提示窗口，不锁比例 w1 760 单栏表单，高度随内容、上限 475 w2 980×612 w3 1120×700 ============================================================ */ /* 尺寸走 CSS 变量（第 41 轮）：后台「界面外观 › 交互与弹窗」可在三档间切换， 只改这五个变量，不动任何调用点。变量未设置时用兜底值 = 今天线上的样子。 */ .dlg.sz-p{width:min(var(--dlg-p,440px),92vw);max-width:min(var(--dlg-p,440px),92vw);height:auto;max-height:60vh} .dlg.sz-w1{width:min(var(--dlg-w1,760px),94vw);max-width:min(var(--dlg-w1,760px),94vw);height:auto;max-height:min(475px,88vh)} .dlg.sz-w2{width:min(var(--dlg-w2,980px),94vw);max-width:min(var(--dlg-w2,980px),94vw);height:min(var(--dlg-h2,612px),88vh)} .dlg.sz-w3{width:min(var(--dlg-w3,1120px),94vw);max-width:min(var(--dlg-w3,1120px),94vw);height:min(var(--dlg-h3,700px),88vh)} /* ★ 报料解析窗（2026-11-04 用户：要独立出来，不与 w3 共用） 它有自己的一对变量 --dlg-pd-w / --dlg-pd-h，后台单独存 ui.parseDlgPx。 写成独立一档而不是复用 sz-w3，是为了"改 w3 不再顺带改它"这件事 在 CSS 层就成立 —— 只靠后台界面上多一行选项是拦不住的。 */ .dlg.sz-pd{width:min(var(--dlg-pd-w,1280px),94vw);max-width:min(var(--dlg-pd-w,1280px),94vw);height:min(var(--dlg-pd-h,800px),88vh)} /* ★ 安排送检窗（2026-11-04 用户第 4 条）：「为何不受后台管理管控？」 它原来借 w3 档：线上 w3=1280，浏览器按 94vw 夹成满屏，而 w3 的三档最小 1040 —— 调小了只窄 32px，用户点了"没反应"。 这扇窗只有 6 个短列，本来就不是宽表；给它自己的变量与档名 plan， 后台单独三选一（含真正小的 900×620）。默认 980×660。 */ .dlg.sz-plan{width:min(var(--dlg-plan-w,980px),94vw);max-width:min(var(--dlg-plan-w,980px),94vw);height:min(var(--dlg-plan-h,660px),88vh)} /* 三段式：头与底不参与压缩，主体自己滚 —— 按钮永远可见 */ .dlg.sz-w2 .dlg-hd,.dlg.sz-w3 .dlg-hd,.dlg.sz-pd .dlg-hd,.dlg.sz-plan .dlg-hd, .dlg.sz-w2 .dlg-ft,.dlg.sz-w3 .dlg-ft,.dlg.sz-pd .dlg-ft,.dlg.sz-plan .dlg-ft{flex:0 0 auto} .dlg.sz-w2 .dlg-bd,.dlg.sz-w3 .dlg-bd,.dlg.sz-pd .dlg-bd,.dlg.sz-plan .dlg-bd{flex:1 1 auto;min-height:0} /* 提示窗口：内边距收一档，一句话不必留 20px 的呼吸位 */ .dlg.sz-p .dlg-bd{padding:16px 20px} .dlg.sz-p .cfm-bd{font-size:var(--fs-sm);line-height:1.7} /* ============================================================ 「选一种录入方式」· 卡片列表档（第 91 轮 · 2026-11-05） ------------------------------------------------------------ ★ 病灶不是"不好看"，是**结构错了**（用户 21:15 截图）： 这扇窗只有 3 行字，却套了 w1 档（820 宽），右边白扔 400 多 px； 三个选项是 `