/* gyljs 结算工具 · 共用样式（商品 / 销售数据 / 结算 三个页面共用） */ :root{ --bg:#f5f6f8; --card:#fff; --line:#e3e6ea; --text:#1f2329; --sub:#6b7280; --brand:#1a6dff; --brand-dark:#0d54cc; --ok:#0f9d58; --warn:#e8a300; --err:#d93025; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text); font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",system-ui,sans-serif} header{background:linear-gradient(135deg,#1a6dff,#0d54cc);color:#fff;padding:22px 28px} header h1{margin:0;font-size:20px;font-weight:600;letter-spacing:.5px} header p{margin:6px 0 0;opacity:.88;font-size:13px} /* ============================================================================ ★ 2026-09-27 顶部标题栏的「ℹ️ 说明气泡」—— 货品中心六页与物流中心共用这一套 用户口径：「顶部这一列加一个 ℹ️ 提醒，把【概览 / 数据源 / …】放进去，鼠标放上去才显示， 这样界面的高度就更多了」。原来 header 里那行小字（上面那条 header p）收进气泡， 标题只写中心名（货品中心 / 物流中心），顶栏就此矮一行 —— 纯 CSS，不引 JS、不占高度。 · `.info` 是那个 ℹ️ 图标（tabindex="0" → 键盘 focus 也能看），`.ibox` 是气泡； · ★ 为什么不给 `.info` 加 opacity：opacity<1 会**自建层叠上下文**，把 `.ibox` 的 z-index 关在里面 —— 物流明细的表头是 `position:sticky;z-index:6`，气泡展开时会被压住一角。 所以用 hover/focus 时抬 z-index（同一个层叠上下文里 80 > 6/20）来保证气泡在最上面。 · 气泡必须**自带颜色**（背景白 + color:var(--text)）：它长在蓝色 header 里，会继承白字。 · logistics.html 的页内 style 里有一份逐字相同的拷贝（本文件先加载、页内样式后加载， 同特异性后者胜，渲染结果一致）；改造那页时统一收进这里，别两边各改一半。 ============================================================================ */ .info{position:relative;display:inline-flex;align-items:center;font-size:13.5px;line-height:1; font-weight:400;letter-spacing:0;cursor:help;vertical-align:-1px;flex:0 0 auto} .info:hover,.info:focus{z-index:80} header .info{font-size:13px} .info .ibox{display:none;position:absolute;left:0;top:calc(100% + 7px);z-index:70; width:max-content;max-width:min(760px,84vw);white-space:normal;text-align:left; background:#fff;color:var(--text);border:1px solid var(--line);border-radius:8px; box-shadow:0 10px 28px rgba(20,30,60,.18);padding:9px 12px; font-size:12.5px;font-weight:400;line-height:1.75;letter-spacing:0} .info:hover .ibox,.info:focus .ibox,.info:focus-within .ibox{display:block} .info .ibox b{font-weight:600} .info .ibox .muted{color:var(--sub)} /* ★ 2026-09-26 用户拍板「分段放开」：默认 ≤1560 不变；≥1700 放到 1800；≥2200 铺满。 ★ 居中（margin:0 auto）**不动** —— 用户没要求改居中。 ★ 左右 padding 换成 clamp()（窄屏收窄、宽屏略宽），中间值 1.8vw 在 1560px 屏上≈28px（与原值一致）。 */ main{max-width:1560px;margin:0 auto;padding:20px clamp(16px,1.8vw,36px) 80px} @media (min-width:1700px){ main{max-width:1800px} } @media (min-width:2200px){ main{max-width:none} } .card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:16px} .card h2{margin:0 0 12px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px} .card h2 .n{display:inline-flex;min-width:20px;height:20px;padding:0 6px;border-radius:20px;background:var(--brand);color:#fff; font-size:12px;align-items:center;justify-content:center;font-weight:600} #drop{border:2px dashed #c3cbd8;border-radius:10px;padding:26px;text-align:center;color:var(--sub); cursor:pointer;transition:.15s;background:#fafbfd} #drop:hover,#drop.hot{border-color:var(--brand);background:#f0f6ff;color:var(--brand)} #drop b{color:var(--text)} .files{margin-top:14px;display:flex;flex-direction:column;gap:8px} .file{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#f8fafc; border:1px solid var(--line);border-radius:8px;font-size:13px} .tag{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap} .tag.master{background:#e6f4ea;color:#0f7b43} .tag.sales{background:#e8f0ff;color:#0d54cc} .file .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .file .meta{color:var(--sub);font-size:12px;white-space:nowrap} button{font:inherit;border:1px solid var(--line);background:#fff;color:var(--text); padding:7px 14px;border-radius:7px;cursor:pointer;transition:.12s} button:hover{border-color:#b9c2d0;background:#f7f9fc} button.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;padding:9px 22px} button.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)} button.primary:disabled{background:#b9c6da;border-color:#b9c6da;cursor:not-allowed} button.mini{padding:3px 9px;font-size:12px;color:var(--sub)} button.mini:hover{color:var(--err);border-color:#f0b4ae} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .spacer{flex:1} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px} .stat{background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:11px 14px} .stat .k{font-size:12px;color:var(--sub)} .stat .v{font-size:19px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums} .stat .v small{font-size:12px;font-weight:400;color:var(--sub)} .msg{padding:9px 12px;border-radius:7px;margin-top:8px;font-size:13px} .msg.ok{background:#e6f4ea;color:#0f7b43} .msg.warn{background:#fef7e0;color:#8a6100} .msg.err{background:#fdecea;color:#c5221f} .msg ul{margin:6px 0 0 18px;padding:0} table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums} thead th{position:sticky;top:0;background:#f2f5f9;border-bottom:1px solid #d5dbe4; padding:8px 10px;text-align:left;font-weight:600;white-space:nowrap;z-index:2} thead th.num,tbody td.num{text-align:right} tbody td{padding:7px 10px;border-bottom:1px solid #eef1f5;white-space:nowrap} tbody tr:hover{background:#fafcff} tbody tr.total{font-weight:700;background:#f2f7ff} tbody tr.total td{border-top:2px solid #cfdcf5;border-bottom:none} /* ★ 2026-09-26：滚动区高度从写死的 580px 改成随视口走（原来 1440 高的屏只用掉约 40%）。 下限 320px 是**保底**：窄屏 / 矮屏（含横屏手机）100vh-300px 会很小，clamp 会兜在 320px， 不会把表格压成一条缝。.scroll 在多处使用，这条是全局生效的。 */ .scroll{max-height:clamp(320px,calc(100vh - 300px),900px);overflow:auto;border:1px solid var(--line);border-radius:8px;background:#fff} .tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:14px} .tabs button{border:none;background:none;padding:9px 14px;border-radius:6px 6px 0 0;color:var(--sub); font-weight:500;border-bottom:2px solid transparent;margin-bottom:-2px} .tabs button:hover{background:#f0f4fa;color:var(--text)} .tabs button.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600;background:#f4f8ff} .muted{color:var(--sub);font-size:12.5px} input[type=text],input[type=number],select{font:inherit;padding:6px 9px;border:1px solid var(--line); border-radius:6px;background:#fff;color:inherit} input[type=text],input[type=number]{width:100%} select{padding:6px 8px} .fixrow{display:grid;grid-template-columns:1fr 140px 90px;gap:10px;align-items:center; padding:7px 0;border-bottom:1px solid #eef1f5} .srcbox{display:flex;gap:12px;align-items:center;padding:12px 14px;background:#f8fafc; border:1px solid var(--line);border-radius:8px} .srcbox.on{background:#eefaf1;border-color:#bfe6cc} .srcbox.err{background:#fdf1f0;border-color:#f3c9c4} .srcIcon{font-size:22px} .srvfile{display:flex;align-items:center;gap:10px;padding:7px 12px;background:#fff; border:1px solid var(--line);border-radius:7px;font-size:13px;margin-top:6px} .srvfile .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .badge{font-size:11px;padding:2px 7px;border-radius:20px;font-weight:600} .badge.done{background:#e6f4ea;color:#0f7b43} .badge.todo{background:#fef7e0;color:#8a6100} /* ============ 布局：左侧导航栏 + 右侧内容 ============ */ .layout{display:flex;align-items:stretch;min-height:100vh} /* ★ 2026-09-26：侧栏宽度从写死的 212px 换成 clamp()（宽屏略宽、窄屏收窄）。 13.7vw 在 1560px 屏上≈214px（与原值基本一致）；≥1694px 封顶 232px；≤1358px 兜底 186px。 ★ 收起态 `html.rail .sidebar{flex:0 0 62px;width:62px}`（下面那条）**一个字没动**。 */ .sidebar{flex:0 0 clamp(186px,13.7vw,232px);width:clamp(186px,13.7vw,232px);position:sticky;top:0;height:100vh;overflow-y:auto; background:#fff;border-right:1px solid var(--line); display:flex;flex-direction:column;padding:16px 12px 14px} .sidebar .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--text); text-decoration:none;letter-spacing:.3px;padding:2px 8px 14px} .sidebar .brand .mark{display:inline-flex;width:24px;height:24px;border-radius:7px;flex:0 0 24px; background:linear-gradient(135deg,#1a6dff,#0d54cc);color:#fff; align-items:center;justify-content:center;font-size:13px;font-weight:700} .sidebar nav{display:flex;flex-direction:column;gap:3px;flex:1} .sidebar a.nav{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px; color:var(--sub);text-decoration:none;font-size:13.5px;transition:.12s;white-space:nowrap} .sidebar a.nav:hover{background:#f1f5fb;color:var(--text)} .sidebar a.nav.active{background:#e8f0ff;color:var(--brand);font-weight:600} .sidebar a.nav .ico{font-size:15px;flex:0 0 20px;text-align:center} /* 侧栏顶部：品牌 + 收起按钮（« / »） */ .side-top{display:flex;align-items:center;gap:6px} .side-top .brand{flex:1;min-width:0} .sidebar .collapse{flex:0 0 24px;width:24px;height:24px;padding:0;border:1px solid transparent; background:transparent;border-radius:6px;color:var(--sub);font-size:13px;line-height:1; cursor:pointer;transition:.12s} .sidebar .collapse:hover{background:#f1f5fb;color:var(--text);border-color:var(--line)} /* 收起态（html.rail，状态记在 localStorage，跨页面保持）：只留图标的一条窄栏 */ html.rail .sidebar{flex:0 0 62px;width:62px;padding:16px 9px 14px} html.rail .sidebar .txt, html.rail .sidebar #navStatusText{display:none} html.rail .side-top{flex-direction:column;gap:10px} html.rail .side-top .brand{padding:0;justify-content:center} html.rail .sidebar a.nav{justify-content:center;padding:10px 0} html.rail .sidebar .side-status{justify-content:center;padding:12px 0 0} /* 二级导航栏：一级栏目下的子页面（横向 tab，吸顶） */ .subnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;flex-wrap:wrap; background:rgba(255,255,255,.94);backdrop-filter:blur(8px); border-bottom:1px solid var(--line);padding:0 28px} .subnav a{display:block;padding:11px 14px;color:var(--sub);text-decoration:none;font-size:13.5px; border-bottom:2px solid transparent;margin-bottom:-1px;transition:.12s;white-space:nowrap} .subnav a:hover{color:var(--text);background:#f4f7fc} .subnav a.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600} .sidebar .side-status{margin-top:auto;padding:12px 9px 0;border-top:1px solid var(--line); font-size:12px;color:var(--sub);display:flex;gap:8px;align-items:center} .sidebar .side-status .dot{width:7px;height:7px;border-radius:50%;background:#1a6dff;flex:0 0 7px} .sidebar .side-status .dot.ok{background:#0f9d58} .sidebar .side-status .dot.err{background:#d93025} .sidebar .side-status .dot.gray{background:#b9c2d0} /* 注意：这里不能用 flex 列布局 —— main 靠 margin:0 auto 居中， 在 flex 容器里 auto 外边距会取消 stretch，main 会缩成内容宽度。普通块级最稳。 */ .content{flex:1;min-width:0} main{padding-top:6px} /* ★ 2026-09-26 补的断点（原来只有 860px 一条）：窄笔记本 / 平板 —— 左右间距收窄、统计卡最小列宽从 190px 降到 150px（一行能多放一张卡）。 ★ 只改**左右**内边距（用 longhand）：顶部那 6px 是下面 `main{padding-top:6px}` 定的， 用 padding 简写会把它一起顶掉（861~1280 的顶距会从 6px 变成 16px）。 ★ 表格照样横向滚动：.scroll 本身就是 overflow:auto（这条没动，也不能动）。 ★ 顺序：这条必须在下面 @media (max-width:860px) **之前** —— 否则 860 以下两条同时命中时，会由后写的这条把窄屏的 `main{padding:14px 14px 60px}` 顶掉。 */ @media (max-width:1280px){ main{padding-left:clamp(14px,1.6vw,22px);padding-right:clamp(14px,1.6vw,22px)} .stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} } /* 窄屏（手机）：左侧栏收成顶部横向条 */ /* 窄屏（手机）：左侧栏收成顶部横向条，收起按钮不需要了 */ @media (max-width:860px){ .layout{flex-direction:column} .sidebar{position:static;flex:none;width:auto;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px; padding:8px 12px;border-right:none;border-bottom:1px solid var(--line);overflow-x:auto} .sidebar .brand{padding:0 6px 0 0} .sidebar .brand .txt{display:none} .sidebar .collapse{display:none} .sidebar nav{flex-direction:row;gap:4px;flex:none} .sidebar a.nav{padding:7px 11px} .sidebar .side-status{margin:0 0 0 auto;padding:0 0 0 10px;border-top:none;border-left:1px solid var(--line)} .sidebar .side-status #navStatusText{display:none} /* 窄屏：用户块只留「退出」按钮，挤在横条最右边 */ .sidebar .side-user{margin:0 0 0 auto;padding:0 0 0 10px;border-top:none;border-left:1px solid var(--line)} .sidebar .side-user .who{display:none} .subnav{padding:0 14px;flex-wrap:nowrap;overflow-x:auto} .subnav a{padding:10px 12px} main{padding:14px 14px 60px} .content header{padding:16px 18px} } /* 校验消息里的长文本 */ .msg pre,.outbox{white-space:pre-wrap;word-break:break-all;font:12px/1.5 ui-monospace,Consolas,monospace; background:#0f172a;color:#d7e3f4;border-radius:8px;padding:12px 14px;margin-top:10px; max-height:360px;overflow:auto} /* 首页分组标题（对应左侧一级导航：货品出库 / 物流中心） */ .group-head{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--sub); letter-spacing:1px;margin:22px 0 10px} .group-head::after{content:"";flex:1;height:1px;background:var(--line)} /* 首页入口卡 */ .entries{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} .entry{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line); border-radius:12px;padding:20px;text-decoration:none;color:inherit;transition:.15s} .entry:hover{border-color:#b9cdf5;box-shadow:0 4px 16px rgba(26,109,255,.08);transform:translateY(-1px)} .entry .ico{font-size:26px} .entry h3{margin:0;font-size:16px;font-weight:600} .entry p{margin:0;color:var(--sub);font-size:13px;line-height:1.65;flex:1} .entry .go{color:var(--brand);font-weight:600;font-size:13.5px} /* 侧栏底部：当前登录用户 + 退出（由 auth.js 插入，5 个页面共用） */ .sidebar .side-user{display:flex;align-items:center;gap:8px;margin-top:auto; padding:12px 9px 10px;border-top:1px solid var(--line);font-size:12px;color:var(--sub)} .sidebar .side-user .who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35} .sidebar .side-user .who b{font-weight:600;color:var(--text);font-size:12.5px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sidebar .side-user .who i{font-style:normal;opacity:.72;font-size:11px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sidebar .side-user .logout{flex:0 0 auto;padding:3px 9px;font-size:11.5px;border-radius:6px; border:1px solid var(--line);background:#fff;color:var(--sub);cursor:pointer} .sidebar .side-user .logout:hover{color:var(--err);border-color:#f0b4ae;background:#fff6f5} /* 有用户块之后，状态行就不再抢 auto 边距了 */ .sidebar .side-user + .side-status{margin-top:0;border-top:none;padding-top:6px} /* 收起态：只留一个「退出」按钮 */ html.rail .sidebar .side-user{flex-direction:column;gap:8px;padding:12px 0 8px} html.rail .sidebar .side-user .who{display:none} /* ============================================================================ 导航定稿（总纲 §〇 口径 4）—— ★ 这几条现在还没被用到： 页面上的导航由 nav.js 单一来源注入，现在只有一套配置（`config()`），`.nav-foot` / `.soon` 都按配置渲染。 批 2 把 ACTIVATE 改 true（或新页面建好）时立即生效，不用再回来改样式。 ============================================================================ */ /* 钉在侧栏最下面的那一项（系统设置）：一条分隔线，且不许与下面的用户块/状态灯出现双分隔线 */ .sidebar .nav-foot{margin-top:auto;padding:10px 0 0;border-top:1px solid var(--line); display:flex;flex-direction:column;gap:3px} .sidebar .nav-foot ~ .side-user, .sidebar .nav-foot ~ .side-status{margin-top:0;border-top:none;padding-top:6px} /* 还没建的入口：不可点的「建设中」，不是死链也不是假页 */ .sidebar .nav.soon{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px; font-size:13.5px;color:#b9c2d0;cursor:default;white-space:nowrap} .sidebar .nav.soon .soonTag{margin-left:auto;font-size:10.5px;padding:1px 6px;border-radius:20px; background:#f1f3f7;color:#98a2b3;font-weight:600} html.rail .sidebar .nav.soon{justify-content:center;padding:10px 0} html.rail .sidebar .soonTag{display:none} .subnav .soon{display:block;padding:11px 14px;font-size:13.5px;color:#c2c9d6;cursor:default; white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px} @media print{ .sidebar,header,.tabs,.row button,#drop,.files,.entry{display:none!important} .layout,.content{display:block} main{max-width:none;padding:0} body{background:#fff} .card{border:none;padding:0;margin:0 0 12px} .scroll{max-height:none;overflow:visible;border:none} } /* ============================================================================ 分页条（web/pager.js 渲染 · 各页共用）—— 2026-09-26 追加 ★ 只追加，不改上面任何一条既有规则。 ★ 组件只输出原生标签 + 现成的 class（.muted / .spacer /