/* 公司业务系统 · 样式 无框架、无构建。改完直接刷新页面。 */ :root{ --bg:#F4F5F7; --card:#fff; --line:#E6E8EC; --line-2:#F0F2F5; --ink:#1F2430; --ink-2:#5A6272; --ink-3:#8C94A3; --blue:#006EFF; --blue-50:#EAF2FF; --green:#2E9E5B; --green-50:#EAF7EF; --amber:#E08A00; --amber-50:#FFF6E6; --red:#D93838; --red-50:#FDECEC; --r:10px; --r-lg:14px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased; } .hidden{display:none !important} button,input,select,textarea{font-family:inherit;font-size:inherit} /* ---------------- 通用控件 ---------------- */ .btn{ border:1px solid var(--line);background:var(--card);color:var(--ink); border-radius:var(--r);padding:8px 16px;cursor:pointer;transition:.15s; } .btn:hover{border-color:#C9D6EA;background:#FCFDFF} .btn.primary{background:var(--blue);border-color:var(--blue);color:#fff} .btn.primary:hover{background:#0059D6;border-color:#0059D6} .btn.tiny{padding:5px 12px;font-size:13px} /* ★★ 2026-10-19：全站 44 处写着 `btn xs`、4 处写着 `sb-row`， 但这两个类**从来没定义过** —— 表格行内的小按钮退化成普通按钮（撑得老高）， 弹层底部的按钮行也**不右对齐**（挤在左边）。 ⇒ 在这里补定义，而不是去改 44 个调用点（改漏一个又复发）。 `.xs` 专门给「表格行内」用，比 `.tiny` 再小一档，一行才放得下几个。 */ .btn.xs{padding:3px 9px;font-size:12px;border-radius:6px;line-height:1.6} .sb-row{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:14px} .btn.block{width:100%} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.danger{color:var(--red);border-color:#F3C9C9} .btn.danger:hover{background:var(--red-50)} input,select,textarea{ width:100%;border:1px solid var(--line);background:var(--card); border-radius:var(--r);padding:9px 12px;outline:none;transition:.15s; } /* ★★★ 2026-10-21 修（老板：「我看不到界面内容，你修改一下」） 上面那条 `width:100%` 是给**要打字的输入框**准备的，但它把**勾选框**也一起套上了。 勾选框的宽度是**自己的内容宽度**（就那么大一个方块），一旦被写成 100%： ① 在 flex 容器里它会**独占整行的宽度**（flex:0 0 auto + width:100%） ② 旁边的文字被挤到几十像素宽 ⇒ 中文一个字一行、竖着排 现场（2026-10-21 实测）：「初始化新账套」那页 8 张分档卡，勾选框实测 1172px 宽 （卡片总宽 1198px），标题「销售单据」实测 14×92px（横排本该 56×20） ⇒ 老板看到「一大块空白 + 最右边一列竖着的字」。 ⇒ 在**根上**豁免：勾选框/单选框的宽度回到内容本身。 ★ 下面移动端那条 media query（width:20px;height:20px）在文件更后面、优先级相同 ⇒ 手机上仍然是 20px 的大勾选框，不受影响。 */ input[type=checkbox],input[type=radio]{width:auto} input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,110,255,.12)} textarea{resize:vertical;min-height:64px;line-height:1.6} /* ★★ 2026-10-06 老板：「整个系统填写数值的时候，取消波动变值。就执行用输入数值的方式」 浏览器给 type=number 默认画了一对上下小箭头（点一下 ±一个 step）。老板在 「返利单价」那种窄框里很容易点错 —— 全系统每一个数值框都是同一对箭头， 所以在**通用控件**这一层一次藏掉，业务模块零改动。 ★ 滚轮 / ↑↓ 键那两条在 js/numguard.js（CSS 管不了）。 */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} input[type=number]{-moz-appearance:textfield;appearance:textfield} .f-label{display:block;font-size:12.5px;color:var(--ink-3);margin:14px 0 5px} .req::after{content:" *";color:var(--red)} .msg{margin:12px 0 0;font-size:13px;color:var(--red);min-height:19px} .msg.ok{color:var(--green)} /* ══════════════════════════════════════════════════════════════════════ ★ 报价顺序设置面板（2026-10-11 老板：「按价格册的顺序呈现， 价格册里商品的顺序也能设置更改」→ 拍板「两级都要 + 在价格册页里改」） ══════════════════════════════════════════════════════════════════════ */ /* ★ 排序区容器（在报价单弹窗内部，与 #ps-sheet 平级）。 ⚠️ 2026-10-11：这里原来是「排序面板 = 另一个弹窗」的设计， 老板点一下就把整份报价单冲掉了（页面顶部飘红条）。 ⇒ 现在排序区是**报价单内部的一块**，上下留边距免得贴着报价单挤。 */ #ps-order-box{margin:12px 0 16px;padding:0} #ps-order-box .qp{ border:1px solid var(--line);border-radius:10px;background:#FAFBFD;padding:14px 16px; } .qp{min-width:0} .qp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px; flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)} .qp-head-t b{font-size:15px;color:var(--ink)} .qp-sub{display:block;font-size:12px;color:var(--ink-3);margin-top:3px} .qp-head-b{display:flex;align-items:center;gap:10px} .qp-lab{font-size:12.5px;color:var(--ink-3);white-space:nowrap} .qp-tip{margin:12px 0;padding:10px 12px;background:#F7F9FC;border:1px solid var(--line); border-radius:8px;font-size:12.5px;line-height:1.85;color:var(--ink-2)} .qp-tip b{color:var(--ink)} /* ★ 打错的型号名必须显眼 —— 它「看着设好了但永远不生效」 */ .qp-warn{margin:10px 0;padding:10px 12px;background:#FDF1F0;border:1px solid #F3C6C2; border-radius:8px;font-size:12.5px;line-height:1.8;color:#9A2B26} .qp-h4{margin:16px 0 8px;font-size:13.5px;font-weight:600;color:var(--ink)} .qp-h4n{font-weight:400;font-size:12px;color:var(--ink-3);margin-left:4px} .qp-tb{width:100%;border-collapse:collapse;font-size:12.5px} .qp-tb th{background:#F2F5F9;color:var(--ink-2);font-weight:600;font-size:12px; text-align:left;padding:7px 9px;border-bottom:1px solid var(--line)} .qp-tb td{padding:5px 9px;border-bottom:1px solid #F0F2F5;vertical-align:middle} .qp-tb tbody tr:hover{background:#FAFBFD} .qp-no,.qp-no2{width:56px;height:28px;padding:0 7px;text-align:center; border:1px solid #D8DCE4;border-radius:6px;font-size:12.5px;font-variant-numeric:tabular-nums} .qp-no:focus,.qp-no2:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(31,56,100,.12)} .qp-pos{font-size:12px;color:var(--ink-3)} /* ★★ 2026-10-21 老板：「手动机型排序」—— 加「▲▼」直接上下挪， 不用自己算 1、2、3…（挪完自动重排成连续序号）。 */ .qp-move{white-space:nowrap;line-height:1} .qp-move button{width:24px;height:22px;margin:0 1px;padding:0;border:1px solid #D8DCE4; background:#fff;color:#48505F;border-radius:5px;font-size:10px;line-height:20px; cursor:pointer;vertical-align:middle} .qp-move button:hover:not(:disabled){border-color:var(--blue);color:var(--blue);background:#F4F7FC} .qp-move button:disabled{opacity:.32;cursor:default} .qp-none{color:#B9C0CC} .qp-empty{text-align:center;padding:20px 10px !important;font-size:12.5px; color:var(--ink-3);line-height:1.8} .qp-empty b{color:var(--ink-2)} .qp-empty2{margin:0;padding:12px;font-size:12.5px;color:var(--ink-3);line-height:1.8; background:#FAFBFD;border:1px dashed var(--line);border-radius:8px} .qp-add{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap} .qp-hint{font-size:12.5px;color:var(--blue,#1F3864)} .qp-out{margin-top:8px} /* ★ 搜索结果（2026-10-11 老板批评「手打型号名太容易错」后加）—— 两栏排布，一屏能看十几个，点一个就选中。 */ .qp-slist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:6px;max-height:230px;overflow-y:auto;padding:2px} .qp-sitem{display:flex;flex-direction:column;align-items:flex-start;gap:2px; width:100%;text-align:left;padding:7px 10px;border:1px solid var(--line); border-radius:8px;background:#fff;cursor:pointer;font-size:12.5px;color:var(--ink)} .qp-sitem:hover{border-color:var(--blue,#1F3864);background:#F7F9FE} .qp-sitem.on{border-color:var(--blue,#1F3864);background:#EAF1FE; box-shadow:0 0 0 2px rgba(31,56,100,.1)} .qp-sitem b{font-weight:600;line-height:1.35} .qp-sitem .sub{font-size:11.5px;color:var(--ink-3)} @media (max-width:820px){ .qp-slist{grid-template-columns:1fr} } .qp-foot{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px; border-top:1px solid var(--line)} .qp-tip2{font-size:12.5px;color:var(--ink-3)} @media (max-width:820px){ .qp-head-b{width:100%;justify-content:space-between} .qp-foot{flex-wrap:wrap} } /* ---------------- 登录 ---------------- */ /* ⚠️ 2026-10-10 连返工三次，都记在这里别再犯： ① 原来是横排 flex（align-items:center）—— 挂上备案号后， 备案号会和登录卡片**并排**； ② 改成 absolute;bottom:14px —— 短屏（实测 633px 高）**压住卡片底部 19px**， 正好压在「登录」按钮附近； ③ 改成 flex 正常流 —— 不压了，但短屏下**备案号还是出界 87px** （真浏览器量出来 top=612/bottom=634，视口高只有 546）。 ⚠️ 工信部扫描是按**页面 DOM 文本**抓备案号的 —— 看不见就等于没挂 ⇒ 会被判不合规、可能撤备案。 ⇒ 根因与最终解法（三个要点缺一不可）： a) `justify-content:center` + 内容超一屏 ⇒ **上下同时溢出**（浏览器都这样） ⇒ 去掉，改用 auto margin 居中（放得下时视觉仍居中，超一屏时 auto 塌成 0）。 b) ★ 只给卡片 `flex-shrink` **不够** —— flex item 的 `min-height` 默认是 `auto`，意思是「不许比内容矮」。实测 375×568 时卡片高 587px、 页脚照样被顶出视口 73px。 ⇒ 必须显式 `min-height:0`（解除这个下限）**+ `overflow-y:auto`** （超出部分变成卡片内部滚动），页脚才真的留得住。 c) ⚠️ 还有一条容易漏：`.login-wrap` 用 `min-height:100vh` 而不是 `height:100vh`。 容器只保证「至少一屏高」，内容超了它会**跟着长高**，滚动的是整个页面， `overflow-y:auto` 在卡片上就形同虚设（实测就是这里出的问题）。 ⇒ 改成 `height:100vh` + `overflow:hidden`，让滚动只发生在卡片内部。 实测（真浏览器 · CDP 精确设视口）： 375×667 / 390×844 / 768×1024 / 1440×900 → 页脚完整可见 ✅ 375×568 / 1280×580 → 出界 73px / 54px ❌（修前） */ .login-wrap{ height:100vh;overflow:hidden; display:flex;flex-direction:column; align-items:center;padding:24px 24px 16px; } #login .login-card{ flex:0 1 auto;min-height:0;overflow-y:auto; margin-top:auto;overscroll-behavior:contain; } .login-card{ width:100%;max-width:380px;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:34px 30px 30px; } .login-card .kicker{font-size:12.5px;color:var(--blue);margin:0 0 10px;letter-spacing:.05em} .login-card h1{font-size:24px;margin:0 0 6px;font-weight:600} .login-card .sub{font-size:13.5px;color:var(--ink-2);margin:0} .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .chips:empty{display:none} .chip{ border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12.5px; color:var(--ink-2);cursor:pointer;background:var(--card); } .chip:hover{border-color:var(--blue);color:var(--blue)} .login-card .btn{margin-top:16px} /* ---------------- 备案号（2026-10-10 工信部硬要求）----------------- ICP 备案通过后，网站底部必须展示备案号并链到工信部查询页， 否则工信部扫描到「有域名无备案号」会把备案驳回、并给主体记风险。 ⚠️ 换备案号 / 加公安备案号 = 改 index.html 与 portal.html 里 class="site-foot" 的那段，改完刷新即生效（纯前端，不用重启）。 ⚠️ 这里**不能**用 position:absolute —— 登录卡片高度随内容变， 绝对定位的页脚会在短屏上压住卡片底部（实测重叠 19px）。 现在用 flex 让它正常占位。*/ .site-foot{ flex:0 0 auto;margin:14px 0 12px;text-align:center; font-size:12px;line-height:1.9;color:var(--ink-3); } .site-foot a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px} .site-foot a:hover{color:var(--blue)} /* ★ 安全居中：内容超一屏时 auto 塌成 0，只向下溢出，页脚仍在视口内 （必须写在 .site-foot 主体之后，否则被后面的 margin 覆盖）*/ #login .login-card{margin-top:auto} #login .site-foot{margin-bottom:auto} /* 手机版：屏幕更矮，页脚再瘦一点，别把登录按钮挤下去 */ @media (max-width:820px){ .login-wrap{padding:16px 16px 12px} #login .login-card{padding:26px 20px 24px} .site-foot{font-size:11.5px} } /* ---------------- 主布局 ---------------- */ .app-wrap{display:flex;min-height:100vh} .side{ width:216px;flex:none;background:var(--card);border-right:1px solid var(--line); display:flex;flex-direction:column;position:sticky;top:0;height:100vh; } .brand{display:flex;gap:11px;align-items:center;padding:20px 18px 18px} .logo{ width:30px;height:30px;flex:none;border-radius:9px;background:var(--blue); position:relative; } .logo::after{ content:"";position:absolute;inset:9px 9px auto auto;width:12px;height:12px; border:2px solid #fff;border-radius:3px; } .brand-name{font-size:14.5px;font-weight:600;margin:0} .brand-stage{font-size:11.5px;color:var(--ink-3);margin:1px 0 0} .nav{padding:6px 10px 14px;overflow-y:auto;flex:1} /* ---------------- 左侧菜单 · 分组可折叠（2026-10-02）---------------- 老板：「左边这个界面太长，是不是可以像博远一样，可以合并在一起，可以自由的 点开与合并」。 逻辑在 js/router.js（foldedGroups / toggleGroup / toggleAllGroups），这里只管长相。 ⚠️ `.nav-group` 从「一行灰字」变成了**按钮** —— 箭头 + 组名 + 项数。 ⚠️ 折叠用 display:none，**故意不加高度动画** —— 动画要猜高度，这层是天天用的 经营工具，稳比好看要紧。 */ .nav-tools{display:flex;justify-content:flex-end;padding:2px 2px 2px} .nav-fold-btn{ border:1px solid transparent;background:none;border-radius:999px;cursor:pointer; padding:2px 9px;font-family:inherit;font-size:11.5px;color:var(--ink-3);line-height:1.7; } .nav-fold-btn:hover{border-color:var(--line);background:var(--card);color:var(--blue)} .nav-group{ display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box; border:0;background:none;cursor:pointer;text-align:left;border-radius:var(--r); font-family:inherit;font-size:11.5px;color:var(--ink-3);letter-spacing:.04em; padding:13px 9px 5px; } .nav-group:hover{color:var(--ink-2)} .nav-group .caret{ flex:none;width:0;height:0;border:4px solid transparent;border-left-color:currentColor; border-right-width:0;opacity:.65;transition:transform .13s; } .nav-g:not(.folded) .nav-group .caret{transform:rotate(90deg)} .nav-group .gt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-group .gcount{flex:none;font-size:10.5px;opacity:.75} .nav-body{display:block} .nav-g.folded .nav-body{display:none} .nav-item{ display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:var(--r); font-size:13.5px;color:var(--ink-2);cursor:pointer;margin-bottom:1px; } .nav-item:hover{background:#F7F8FA;color:var(--ink)} .nav-item.active{background:var(--blue-50);color:var(--blue);font-weight:600} .nav-item .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;flex:none} .nav-item .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-item .soon{margin-left:auto;font-size:10.5px;color:var(--ink-3);background:var(--line-2); padding:1px 7px;border-radius:999px} /* 阶段标签：待建（灰）/ 在建（黄）。已能用的模块不显示标签，画面干净 */ .stage{margin-left:auto;flex:none;font-size:10.5px;color:var(--ink-3);background:var(--line-2); padding:1px 7px;border-radius:999px} .stage.wip{background:var(--amber-50);color:var(--amber)} .side-foot{padding:14px;border-top:1px solid var(--line-2)} .who{font-size:12.5px;color:var(--ink-2);margin-bottom:9px} .who b{display:block;font-size:13.5px;color:var(--ink);font-weight:600} /* ---------------- 内容区 ---------------- */ .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:22px 28px 18px;border-bottom:1px solid var(--line);background:var(--bg); position:sticky;top:0;z-index:5; } .topbar h2{font-size:20px;margin:0;font-weight:600} .page-sub{font-size:13px;color:var(--ink-2);margin:2px 0 0} /* 标题块吃掉剩余宽度，右边的搜索框和按钮自然被推到最右 */ .title-box{flex:1;min-width:0} .topbar .search{width:260px;margin-left:0} .content{padding:22px 28px 60px;flex:1} /* ---------------- 统计卡 ---------------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px} .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px} .stat .k{font-size:12.5px;color:var(--ink-3);margin:0 0 4px} .stat .v{font-size:26px;font-weight:600;margin:0;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .stat .u{font-size:12.5px;color:var(--ink-3);margin:3px 0 0} /* ---------------- 表格 ---------------- */ .table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .table-scroll{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:13.5px} th{ text-align:left;font-weight:500;color:var(--ink-3);font-size:12.5px; padding:12px 16px;background:#FAFBFC;border-bottom:1px solid var(--line);white-space:nowrap; } td{padding:12px 16px;border-bottom:1px solid var(--line-2);white-space:nowrap} tbody tr:hover{background:#FCFDFF} tr:last-child td{border-bottom:none} td.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px} td.actions{text-align:right} td.actions button{margin-left:6px} .pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;background:var(--line-2);color:var(--ink-2)} .pill.on{background:var(--green-50);color:var(--green)} .pill.off{background:var(--line-2);color:var(--ink-3)} /* ---------------- 空态 / 占位 ---------------- */ .empty{padding:56px 24px;text-align:center;color:var(--ink-3)} .empty h3{font-size:15px;color:var(--ink-2);margin:0 0 6px;font-weight:500} .empty p{margin:0;font-size:13.5px} .soon-card{ background:var(--card);border:1px dashed #D3D8E0;border-radius:var(--r-lg); padding:26px 28px; } .soon-card h3{font-size:15px;margin:0 0 8px;font-weight:600} .soon-card p{font-size:13.5px;color:var(--ink-2);margin:0 0 8px} .soon-card ul{margin:10px 0 0;padding-left:20px;font-size:13.5px;color:var(--ink-2);line-height:1.9} /* ---------------- 弹窗 ---------------- */ .modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px} .modal-mask{position:absolute;inset:0;background:rgba(20,24,32,.42)} .modal-box{ position:relative;background:var(--card);border-radius:16px;width:100%;max-width:640px; max-height:88vh;display:flex;flex-direction:column;overflow:hidden; } .modal-head{ display:flex;align-items:center;justify-content:space-between; padding:18px 22px;border-bottom:1px solid var(--line); } .modal-head h3{font-size:16px;margin:0;font-weight:600} .modal-head .x{border:none;background:none;font-size:24px;line-height:1;color:var(--ink-3);cursor:pointer;padding:0 4px} .modal-body{padding:6px 22px 20px;overflow-y:auto} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .modal-foot{ display:flex;align-items:center;justify-content:flex-end;gap:12px; padding:16px 22px;border-top:1px solid var(--line);background:#FCFCFD; } .modal-foot .msg{margin:0;flex:1} .hint{font-size:12px;color:var(--ink-3);margin:5px 0 0} /* ---------------- 弹窗能自由拉大 ---------------- 老板 2026-10-19：「结算单也不能自由的拉大（不方便看到更多的内容）」 ★ 做在框架层（core.js:fitModalBox），串号轨迹 / 对账单 / 导入预览一个地方全受益。 尺寸只在他**主动拖过**之后才记住 —— 小表单拉成一大块更难看。 */ .mb-resizable{position:relative} .mb-grip{ position:absolute;right:0;bottom:0;width:18px;height:18px; cursor:nwse-resize;z-index:6;touch-action:none; } .mb-grip::after{ content:'';position:absolute;right:4px;bottom:4px;width:8px;height:8px; border-right:2px solid #C4CBD6;border-bottom:2px solid #C4CBD6;border-radius:0 0 2px 0; } .mb-grip:hover::after{border-color:var(--blue)} .modal-head .mb-max{font-size:17px;color:var(--ink-3);margin-left:auto;margin-right:8px;border:none;background:none;cursor:pointer} .modal-head .mb-max:hover{color:var(--blue)} @media (max-width:720px){ /* 手机上弹层本来就是全屏，拖拽没有意义 */ .mb-grip{display:none} .modal-head .mb-max{display:none} } /* ---------------- 「抵的单 / 开单明细」里的机型 + 串号 ---------------- 老板 2026-10-19：「我看不出客户转的到底是哪一台机子，不好核对」 ⇒ 一台一行，串号用等宽字体（15 位数字眼对眼核，不能让字距飘）。 */ .sd-items td{vertical-align:top} .sd-units{font-size:12px;line-height:1.6;white-space:normal;min-width:190px} .sd-u{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .sd-u+.sd-u{margin-top:3px} .sd-u-nm{color:var(--ink-2);font-size:12px} .sd-u-sn{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;color:var(--ink);letter-spacing:.3px;white-space:nowrap} /* ---------------- 销售场景（激活地域看板） ---------------- */ .scope-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px} .scope-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:16px 18px;position:relative;overflow:hidden; } .scope-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor;opacity:.85} .scope-card.lv0{color:var(--ink-3)} .scope-card.lv1{color:var(--blue)} .scope-card.lv2{color:var(--green)} .scope-card .t{font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 2px} .scope-card .reach{font-size:12px;color:currentColor;margin:0 0 10px;font-weight:500} .scope-card .num{font-size:26px;font-weight:600;color:var(--ink);margin:0;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .scope-card .u{font-size:12.5px;color:var(--ink-3);margin:2px 0 0} .scope-card .sub{font-size:12px;color:var(--ink-3);margin:8px 0 0;line-height:1.7} .scope-toolbar{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:13px 18px;margin-bottom:18px; } .scope-toolbar .n{font-size:13.5px;color:var(--ink-2)} .scope-toolbar .n b{color:var(--blue);font-weight:600} .scope-toolbar .sp{margin-left:auto} .scope-section{margin-bottom:20px} .scope-section .head{ display:flex;align-items:center;gap:10px;padding:0 2px 9px; } .scope-section .head h3{font-size:14.5px;margin:0;font-weight:600} .scope-section .head .cnt{font-size:12.5px;color:var(--ink-3)} .scope-section .head .line{flex:1;height:1px;background:var(--line-2)} .scope-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500} .scope-badge.lv0{background:var(--line-2);color:var(--ink-2)} .scope-badge.lv1{background:var(--blue-50);color:var(--blue)} .scope-badge.lv2{background:var(--green-50);color:var(--green)} .scope-num{font-variant-numeric:tabular-nums} .scope-num b{font-weight:600} .scope-num s{color:var(--ink-3);text-decoration:none} td.pick{width:36px;padding-right:0} td.pick input{width:16px;height:16px;cursor:pointer} .scope-picker{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px} .scope-pick{ flex:1;min-width:150px;border:1px solid var(--line);border-radius:var(--r); padding:12px 14px;cursor:pointer;transition:.15s;background:var(--card); } .scope-pick:hover{border-color:#C9D6EA} .scope-pick.on{border-color:var(--blue);background:var(--blue-50);box-shadow:0 0 0 3px rgba(0,110,255,.08)} .scope-pick .k{font-size:13.5px;font-weight:600;margin:0 0 3px} .scope-pick.on .k{color:var(--blue)} .scope-pick .d{font-size:12px;color:var(--ink-3);margin:0;line-height:1.6} .scope-what{ background:#FAFBFC;border:1px solid var(--line);border-radius:var(--r); padding:12px 16px;font-size:13px;color:var(--ink-2);line-height:1.9; } .scope-what b{color:var(--ink)} .scope-tip{margin-top:14px;font-size:13px;line-height:1.85;color:var(--ink-2); background:var(--amber-50);border:1px solid #F5DFB0;border-radius:var(--r);padding:11px 15px} .scope-tip:empty{display:none} .scope-tip.wide{background:var(--green-50);border-color:#C7E6D3;color:#1C6639} .log-row{font-size:12.5px;color:var(--ink-2)} .log-row .who{color:var(--ink-3)} @media (max-width:820px){ .scope-board{grid-template-columns:1fr} .scope-pick{min-width:100%} } /* ---------------- 门店合规看板 ---------------- */ .cmp-bar{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:13px 18px;margin-bottom:16px; } .cmp-bar .lb{font-size:12.5px;color:var(--ink-3);margin-right:-6px} .cmp-bar input,.cmp-bar select{width:auto;min-width:132px;padding:7px 11px} .cmp-bar .sp{margin-left:auto} .rate{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums} .rate .num{font-weight:600;min-width:46px;text-align:right} .rate .track{width:64px;height:6px;border-radius:3px;background:var(--line-2);position:relative;overflow:hidden;flex:none} .rate .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px} .rate .tick{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--ink-3);opacity:.55} .rate.ok .num{color:var(--green)} .rate.ok .fill{background:var(--green)} .rate.warn .num{color:var(--amber)} .rate.warn .fill{background:var(--amber)} .rate.bad .num{color:var(--red)} .rate.bad .fill{background:var(--red)} .rate.na .num{color:var(--ink-3)} .rate.na .fill{background:var(--line)} .lv{padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500} .lv.ok{background:var(--green-50);color:var(--green)} .lv.warn{background:var(--amber-50);color:var(--amber)} .lv.bad{background:var(--red-50);color:var(--red)} .lv.na{background:var(--line-2);color:var(--ink-3)} .cmp-detail{margin-top:16px} .cmp-detail .hd{display:flex;align-items:center;gap:10px;margin-bottom:10px} .cmp-detail .hd h3{font-size:14.5px;margin:0;font-weight:600} .tag{display:inline-block;padding:1px 8px;border-radius:5px;font-size:11.5px;font-weight:500} .tag.bad{background:var(--red-50);color:var(--red)} .tag.warn{background:var(--amber-50);color:var(--amber)} .tag.ok{background:var(--green-50);color:var(--green)} /* ---------------- 提示条 ---------------- */ .toast{ position:fixed;left:50%;bottom:36px;transform:translateX(-50%); background:#22272F;color:#fff;padding:11px 20px;border-radius:10px;font-size:13.5px;z-index:99; } .toast.bad{background:var(--red)} /* -------------------------------------------------------------------------- ⚠️ 窄屏（手机）样式**不在这一层了**，统一挪到文件末尾的「手机版」那一段 （2026-10-02）。 这里原来写的是：侧栏压成 64px、菜单项只留一个小圆点、分组标题只留一条横线 —— 在手机上等于「一排看不出是什么的点」，老板点不了。现在改成**滑出的抽屉**， 完整显示组名和菜单项。要看效果搜 `手机版（2026-10-02）`。 -------------------------------------------------------------------------- */ /* ========================================================================== 入库单 / 串码台账（2026-09-20 新增） 已有的基础类（.btn .pill .stats .soon-card 等）复用，这里只补缺的。 ========================================================================== */ /* ---- 缺的通用件 ---- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .grid{width:100%;border-collapse:collapse;font-size:13.5px} .grid th{ text-align:left;font-weight:600;color:var(--ink-2);background:var(--line-2); padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap; } .grid td{padding:9px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle} .grid tbody tr:hover{background:#FBFCFE} .grid td.num,.grid th.num{text-align:right;font-variant-numeric:tabular-nums} .grid tr.voided td{opacity:.45;text-decoration:line-through} .loading{padding:40px;text-align:center;color:var(--ink-3)} .note{border-radius:var(--r);padding:10px 14px;font-size:13.5px;line-height:1.7;margin:10px 0} .note.blue{background:var(--blue-50);border-left:3px solid var(--blue)} .note.green{background:var(--green-50);border-left:3px solid var(--green)} .note.amber{background:var(--amber-50);border-left:3px solid var(--amber)} .note.red{background:var(--red-50);border-left:3px solid var(--red)} .pill.blue{background:var(--blue-50);color:#0059D6;border-color:#C7DEFF} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start} .sep{border:0;border-top:1px solid var(--line);margin:16px 0} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px} /* ---- 分页 ---- */ .pager{display:flex;align-items:center;gap:6px;padding:12px;color:var(--ink-3);font-size:13px} .pg{border:1px solid var(--line);background:var(--card);border-radius:7px; min-width:30px;padding:4px 8px;cursor:pointer} .pg:hover{border-color:#C9D6EA} .pg.cur{background:var(--blue);border-color:var(--blue);color:#fff} .pg-dots{color:var(--ink-3);padding:0 2px} /* ---- 分页条：共 N 条 · 每页条数下拉 · 页码 ---- */ .pager{flex-wrap:wrap;row-gap:8px} .pg-info{white-space:nowrap} .pg-info b{color:var(--ink)} .pg-sz{display:inline-flex;align-items:center;gap:4px;white-space:nowrap; margin-left:4px;padding-left:10px;border-left:1px solid var(--line)} .pg-sz select{border:1px solid var(--line);background:var(--card);border-radius:7px; padding:3px 6px;font-size:13px;color:var(--ink);cursor:pointer} .pg-sz select:hover{border-color:#C9D6EA} .pg-btns{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap} /* ---- 入库页工具条 ---- */ .ib-bar{display:flex;gap:8px;align-items:center;margin:16px 0 12px;flex-wrap:wrap} .ib-bar .search{flex:1 1 200px;max-width:320px;padding:8px 12px} .ib-bar .btn{white-space:nowrap} .ib-dash{color:var(--ink-3)} .ib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:12px 0} .ib-grid label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-3)} .ib-grid label select,.ib-grid label input{padding:7px 10px;font-size:13.5px;color:var(--ink)} .ib-grid > div{display:flex;flex-direction:column;gap:2px} .ib-grid .k{font-size:12.5px;color:var(--ink-3)} .ib-grid .v{font-size:13.5px} .ib-paste{display:block;margin-top:12px;font-size:12.5px;color:var(--ink-3)} .ib-paste textarea{min-height:150px;margin-top:5px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px} .ib-h{margin:18px 0 8px;font-size:14px;color:var(--ink)} .ib-kv{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--ink-2)} .ib-kv b{color:var(--ink)} .ib-note{font-size:12.5px;color:var(--ink-3);margin:6px 0 0;line-height:1.7} .ib-io{display:flex;gap:12px;margin:8px 0} .ib-io .io{flex:1;border-radius:var(--r);padding:10px 14px;text-align:center} .ib-io .io.in{background:var(--green-50)} .ib-io .io.out{background:var(--red-50)} .ib-io .io .v{font-size:22px;font-weight:600;margin:0} .ib-io .io.in .v{color:var(--green)} .ib-io .io.out .v{color:var(--red)} .ib-io .io .k{font-size:12px;color:var(--ink-3);margin:2px 0 0} .ib-miss{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:var(--r); padding:8px 10px;font-size:12.5px;background:#FCFDFF} .ib-miss .n{color:var(--amber);font-weight:600;margin-right:6px} .ib-errs{font-size:12.5px;color:var(--ink-2);max-height:170px;overflow:auto; border-left:2px solid var(--line);padding-left:10px;margin:6px 0} .ib-errs.warn{border-left-color:var(--amber)} .ib-moves{max-height:400px;overflow:auto;border:1px solid var(--line);border-radius:var(--r)} /* ---- 串码轨迹时间线 ---- */ .timeline{margin-top:8px;padding-left:6px} .tl-item{display:flex;gap:12px;padding-bottom:14px;position:relative} .tl-item:not(:last-child)::before{ content:"";position:absolute;left:11px;top:26px;bottom:0;width:2px;background:var(--line); } .tl-dot{ width:24px;height:24px;border-radius:50%;flex:0 0 24px;display:flex; align-items:center;justify-content:center;font-size:12px;color:#fff;z-index:1; } .tl-item.in .tl-dot{background:var(--green)} .tl-item.out .tl-dot{background:var(--red)} .tl-item.voided{opacity:.45} .tl-body{flex:1;padding-top:1px} .tl-t{margin:0;font-size:13.5px} .tl-s{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)} .tl-s.red{color:var(--red)} /* =========================================================================== 框架层新增：模块地图（系统 → 使用说明） =========================================================================== */ .map{display:flex;flex-direction:column;gap:18px} .map-group h4{ font-size:13px;margin:0 0 8px;font-weight:600;color:var(--ink-2); display:flex;align-items:center;gap:8px; } .map-group h4 .sub{font-size:11.5px;color:var(--ink-3);font-weight:400} .map-row{ display:flex;align-items:baseline;gap:10px;padding:9px 14px;background:var(--card); border:1px solid var(--line);border-radius:var(--r);margin-bottom:6px; } .map-row .lv{flex:none;min-width:52px;text-align:center} .map-name{flex:none;min-width:110px;font-size:13.5px;font-weight:500} .map-desc{flex:1;font-size:12.5px;color:var(--ink-3);line-height:1.7} @media (max-width:720px){ .map-row{flex-wrap:wrap} .map-desc{flex-basis:100%} .topbar .search{width:100%;order:3} } /* =========================================================================== 库存看板 —— 「客户要这个货，哪儿的能卖给他」 一个型号一行，给一个明确结论；每个结论一组色带 =========================================================================== */ .iv-quota{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); margin-bottom:12px;overflow:hidden} /* padding 交给 summary / list，折叠时才没有空档 */ .iv-quota-total{margin-left:auto;font-size:13px} .iv-quota-total b{font-size:19px;color:var(--green);font-variant-numeric:tabular-nums} .iv-quota-list{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px} .iv-quota-empty{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.7} .iv-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} .iv-group{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card); margin-bottom:14px;overflow:hidden} .iv-head{display:flex;align-items:center;gap:10px;padding:13px 18px;flex-wrap:wrap; border-bottom:1px solid var(--line-2)} .iv-head b{font-size:14.5px} .iv-dot{font-size:11px} .iv-cnt{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums} .iv-hint{font-size:12px;color:var(--ink-3);margin-left:auto} .iv-group.iv-local .iv-dot{color:var(--green)} .iv-group.iv-local .iv-head{background:var(--green-50)} .iv-group.iv-province .iv-dot{color:var(--blue)} .iv-group.iv-province .iv-head{background:var(--blue-50)} .iv-group.iv-release .iv-dot{color:var(--amber)} .iv-group.iv-release .iv-head{background:var(--amber-50)} .iv-group.iv-blocked .iv-dot{color:var(--red)} .iv-group.iv-blocked .iv-head{background:var(--red-50)} .iv-group.iv-none-v .iv-dot{color:var(--ink-3)} .iv-group table.grid{border:0;border-radius:0} .iv-name{font-weight:500;font-size:13.5px} .iv-places{line-height:2} .iv-place{display:inline-flex;align-items:baseline;gap:5px;background:var(--line-2); border-radius:999px;padding:2px 10px;font-size:12.5px;margin:2px 6px 2px 0} .iv-place s{text-decoration:none;color:var(--ink-3);font-size:11.5px} .iv-place b{font-variant-numeric:tabular-nums} .iv-place.bad{background:var(--red-50)} .iv-place .iv-can{color:var(--amber);font-weight:600} .iv-n{font-size:12.5px;font-variant-numeric:tabular-nums;margin-right:6px;white-space:nowrap} .iv-n.good{color:var(--green)} .iv-n.blue{color:var(--blue)} .iv-n.warn{color:var(--amber)} .iv-n.bad{color:var(--red)} .iv-serials{padding:10px 18px;background:#FAFBFC;font-size:12px;line-height:2} .iv-serials .mono{margin-right:4px} .iv-serials s{text-decoration:none;color:var(--ink-3);margin-right:12px;font-size:11.5px} /* =========================================================================== 库存看板改版（2026-10-01 老板：「显示不够直观，有信息看不全」「加品牌/系列/品类多选」） --------------------------------------------------------------------------- 改前的病根：一张 5 列的表格，最后一列「在哪儿/什么档位」把表**横向撑出屏幕**， 老板只看得见「厦门…」半截。所以位置信息一律改成**会自动换行的小方块**（flex-wrap）， 卡片本身又是个普通 div —— 从根上不可能再横向溢出。 =========================================================================== */ /* ---- 搜索区 ---- */ .iv-search{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:13px 16px;margin-bottom:12px} .iv-srow{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .iv-srow #iv-q{flex:1;min-width:200px;width:auto} .iv-slabel{font-size:12.5px;color:var(--ink-3);white-space:nowrap} /* 品牌 / 系列 / 品类：一排一个横向滚动条都不给，直接换行 */ .iv-frow{display:flex;align-items:flex-start;gap:9px;margin-top:9px;padding-top:9px; border-top:1px dashed var(--line)} .iv-frow:first-child{border-top:0;padding-top:0} .iv-flabel{font-size:12.5px;color:var(--ink-3);white-space:nowrap;padding-top:4px;min-width:30px} .iv-fchips{display:flex;flex-wrap:wrap;gap:6px;flex:1} .iv-fchip s{text-decoration:none;color:var(--ink-3);margin-left:5px;font-size:11px; font-variant-numeric:tabular-nums} .iv-fchip.on s{color:rgba(255,255,255,.85)} .iv-fall{background:var(--line-2);color:var(--ink-2)} .iv-more{border-style:dashed;color:var(--blue);border-color:#BBD4FF} /* 口径说明：收起来，别占地方 */ .iv-legend{margin:0 0 12px;font-size:12.5px} .iv-legend>summary{cursor:pointer;color:var(--ink-3);padding:2px 0} .iv-legend>summary:hover{color:var(--blue)} /* ---- 最值钱的那句话 ---- */ .iv-tip{display:flex;gap:10px;align-items:baseline;background:var(--card); border:1px solid var(--line);border-left:4px solid var(--ink-3); border-radius:var(--r);padding:11px 15px;margin-bottom:12px;font-size:14px;line-height:1.7} .iv-tip>b{white-space:nowrap;font-size:14px} .iv-tip span{flex:1} .iv-tip.good{border-left-color:var(--green);background:var(--green-50)} .iv-tip.warn{border-left-color:var(--amber);background:var(--amber-50)} /* ---- 额度：收进 details ---- */ .iv-quota>summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; cursor:pointer;list-style:none;padding:12px 18px} .iv-quota>summary::-webkit-details-marker{display:none} .iv-quota>summary::before{content:"▸";color:var(--ink-3);font-size:11px} .iv-quota[open]>summary::before{content:"▾"} .iv-quota>summary>b{font-size:14px} .iv-quota-list{padding:0 18px 14px} /* ---- 结论分组：卡片容器 ---- */ .iv-cards{padding:2px 0} /* ---- 一张卡 ---- */ .iv-card{border-top:1px solid var(--line);padding:13px 18px} .iv-cards .iv-card:first-child{border-top:0} .iv-card:hover{background:#FCFDFF} .iv-ctop{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap} .iv-cname{flex:1;min-width:240px} .iv-cname>b{font-size:13.5px;font-weight:600;line-height:1.5} .iv-attrs{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px} .iv-attrs span{font-size:11.5px;color:var(--ink-2);background:var(--line-2); border-radius:5px;padding:1px 7px} /* 台数：4 个带颜色的小方块（现货 / 调货 / 可放开 / 卡住） */ .iv-cright{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end} .iv-nums{display:flex;gap:7px;flex-wrap:wrap} .iv-cacts{display:flex;gap:7px} .iv-num{min-width:56px;text-align:center;border-radius:var(--r);padding:4px 9px 5px; border:1px solid var(--line);background:var(--card);cursor:help} .iv-num b{display:block;font-size:19px;line-height:1.15;font-variant-numeric:tabular-nums} .iv-num s{display:block;text-decoration:none;font-size:11px;color:var(--ink-3);line-height:1.3} .iv-num.good{border-color:#C6E7D3;background:var(--green-50)} .iv-num.good b{color:var(--green)} .iv-num.blue{border-color:#C7DDFF;background:var(--blue-50)} .iv-num.blue b{color:var(--blue)} .iv-num.warn{border-color:#F5E0B8;background:var(--amber-50)} .iv-num.warn b{color:var(--amber)} .iv-num.bad{border-color:#F3C9C9;background:var(--red-50)} .iv-num.bad b{color:var(--red)} /* ---- 一级：每个「堆」一行摘要（明细在二级看板）---- ★ 2026-10-01 老板第二轮：「看板这里很乱，我建议生成二级看板」。 所以一级不再是「每处货位一个小块铺满整张卡」，而是**一堆一行**： 几处、几台、前 3 个位置长什么样、最久放了多久 —— 整行可点，进二级。 ★ 行内一律 flex-wrap：位置名有长有短（「厦门市翔安区永翌德通信经营部」）， 定宽 grid 会被它顶出去（上一轮「信息看不全」就是这么来的）。 */ .iv-stacks{margin-top:9px;display:flex;flex-direction:column;gap:5px} .iv-stk{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:6px 10px;border:1px solid var(--line);border-radius:var(--r); background:var(--card);cursor:pointer;transition:.15s} .iv-stk:hover{border-color:#C9D6EA;background:#FCFDFF} .iv-stk-h{flex:none;font-size:12.5px;white-space:nowrap} .iv-stk-h i{font-style:normal;margin-right:3px} .iv-stk-h b{font-weight:600} .iv-stk-ok .iv-stk-h b{color:var(--green)} .iv-stk-go .iv-stk-h b{color:var(--blue)} .iv-stk-out .iv-stk-h b{color:var(--ink-2)} .iv-stk-no .iv-stk-h b{color:var(--red)} .iv-stk-cnt{flex:none;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums} .iv-stk-cnt b{font-size:14px;color:var(--ink)} .iv-stk-pl{flex:1;min-width:200px;display:flex;flex-wrap:wrap;gap:5px;align-items:center} .iv-pm{display:inline-flex;align-items:baseline;gap:4px;background:var(--line-2); border-radius:6px;padding:1px 8px;font-size:12px;max-width:100%} .iv-pm i{font-style:normal} .iv-pm s{text-decoration:none;color:var(--ink-3);font-size:11px} .iv-pm b{font-variant-numeric:tabular-nums;color:var(--ink)} .iv-stk-more{font-size:11.5px;color:var(--blue)} .iv-stk-can{flex:none;font-size:11.5px;color:var(--amber);font-weight:600} .iv-stk-age{flex:none;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums} .iv-stk-age.bad{color:var(--red)} .iv-stk-age.warn{color:var(--amber)} .iv-stk-go{flex:none;font-size:11.5px;color:var(--ink-3);white-space:nowrap} .iv-stk:hover .iv-stk-go{color:var(--blue)} .iv-attrs-age{background:var(--amber-50);color:var(--amber)} .iv-warn{margin-top:12px;padding:9px 14px;border-radius:var(--r); background:var(--amber-50);border-left:3px solid var(--amber);font-size:12.5px;color:var(--ink-2)} .iv-sc{font-style:normal;border-radius:5px;padding:1px 6px;font-size:11px;white-space:nowrap} .iv-sc.warn{background:#FFF1D6;color:var(--amber)} .iv-sc.blue{background:#DCEAFF;color:var(--blue)} .iv-sc.on{background:#D6F0E0;color:var(--green)} /* =========================================================================== 二级看板（弹窗里）：这个型号的货都在哪、每一台串码和库龄 挂在 #imodal（宽 1100），所以内容列可以多一点；但**照样不许横向溢出**。 =========================================================================== */ .ivm-top{padding:2px 0 10px;border-bottom:1px solid var(--line);margin-bottom:12px} .ivm-name{font-size:15px;font-weight:600;line-height:1.5} .ivm-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:12.5px;color:var(--ink-2)} .ivm-meta b{color:var(--ink);font-variant-numeric:tabular-nums} /* 库龄分布：一眼看出这批货压了多久 */ .ivm-agebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 2px} .ivm-agecell{min-width:78px;text-align:center;border:1px solid var(--line); border-radius:var(--r);padding:5px 10px;background:var(--card)} .ivm-agecell b{display:block;font-size:18px;line-height:1.2;font-variant-numeric:tabular-nums} .ivm-agecell s{display:block;text-decoration:none;font-size:11px;color:var(--ink-3)} .ivm-agecell.good b{color:var(--green)} .ivm-agecell.blue b{color:var(--blue)} .ivm-agecell.warn b{color:var(--amber)} .ivm-agecell.bad b{color:var(--red)} .ivm-agehint{flex:1;min-width:180px} /* 一堆一块 */ .ivm-stk{margin-top:16px} .ivm-stk-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; padding:8px 12px;border-radius:var(--r) var(--r) 0 0;background:var(--line-2);font-size:13px} .ivm-stk-h i{font-style:normal} .ivm-stk-h b{font-weight:600} .ivm-stk-h span{font-size:12px;color:var(--ink-2)} .ivm-stk-h span b{font-size:14px;color:var(--ink)} .ivm-stk-hint{margin-left:auto} .ivm-stk-ok .ivm-stk-h{background:var(--green-50)} .ivm-stk-ok .ivm-stk-h b{color:var(--green)} .ivm-stk-go .ivm-stk-h{background:var(--blue-50)} .ivm-stk-go .ivm-stk-h b{color:var(--blue)} .ivm-stk-no .ivm-stk-h{background:var(--red-50)} .ivm-stk-no .ivm-stk-h b{color:var(--red)} /* 一个位置（可展开） */ .ivm-pls{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);overflow:hidden} .ivm-pl{border-top:1px solid var(--line)} .ivm-pl:first-child{border-top:0} .ivm-pl>summary{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; padding:9px 12px;cursor:pointer;font-size:12.5px;list-style:none} .ivm-pl>summary::-webkit-details-marker{display:none} .ivm-pl>summary::before{content:"▸";color:var(--ink-3);font-size:11px} .ivm-pl[open]>summary::before{content:"▾"} .ivm-pl>summary:hover{background:#FCFDFF} .ivm-pl[open]>summary{background:#FCFDFF} .ivm-picon{font-style:normal} .ivm-pname{font-size:13px;max-width:340px;overflow-wrap:anywhere} .ivm-kind{font-style:normal;font-size:11px;color:var(--blue);background:var(--blue-50); border-radius:5px;padding:1px 6px;white-space:nowrap} .ivm-pcity{text-decoration:none;color:var(--ink-3);font-size:11.5px} .ivm-pqty{font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink)} .ivm-punit{text-decoration:none;color:var(--ink-3);font-size:11px;margin-left:-5px} .ivm-page{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums} .ivm-page.bad{color:var(--red)} .ivm-page.warn{color:var(--amber)} .ivm-pcan{font-style:normal;font-size:11.5px;color:var(--amber);font-weight:600} .ivm-popen{margin-left:auto;font-size:11.5px;color:var(--ink-3)} .ivm-pl[open] .ivm-popen{visibility:hidden} /* 每一台串码：flex-wrap —— 长串号也溢不出去 */ .ivm-sl{padding:2px 12px 8px;background:#FAFBFC} .ivm-s{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; padding:4px 0;border-bottom:1px dashed var(--line-2);font-size:12px} .ivm-s:last-child{border-bottom:0} .ivm-fifo{font-style:normal;flex:none;min-width:46px;font-size:11px; color:var(--green);background:var(--green-50);border-radius:5px;padding:1px 5px;text-align:center} .ivm-fifo.off{background:none} .ivm-sn{font-size:12.5px;color:var(--ink);font-weight:500;overflow-wrap:anywhere} .ivm-imei{color:var(--ink-3)} .ivm-sage{font-variant-numeric:tabular-nums;color:var(--ink-2)} .ivm-sage.bad{color:var(--red)} .ivm-sage.warn{color:var(--amber)} .ivm-sage.blue{color:var(--blue)} .ivm-sdate{color:var(--ink-3);font-variant-numeric:tabular-nums} .ivm-sform{font-size:11px;color:var(--blue);background:var(--blue-50);border-radius:5px;padding:1px 6px} .ivm-scost{color:var(--ink-2);font-variant-numeric:tabular-nums} .ivm-scomp{color:var(--ink-3);margin-left:auto} .ivm-sst{font-size:11px;color:var(--amber);background:var(--amber-50);border-radius:5px;padding:1px 6px} .ivm-sfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:8px 12px 10px;background:#FAFBFC;border-top:1px solid var(--line-2)} @media (max-width:720px){ .iv-stk-pl{min-width:0} .ivm-pname{max-width:200px} .ivm-scomp{margin-left:0} } /* 徽标补充：结论用的三档 */ .pill.good{background:var(--green-50);color:var(--green)} .pill.warn{background:var(--amber-50);color:var(--amber)} .pill.bad{background:var(--red-50);color:var(--red)} /* ★ 2026-09-24 补：statusPill() 里一直在用 'amber'，但这里**从来没定义过** —— 所以「部分到货」「审批中」这些一直显示成默认灰色，看不出是在办。 */ .pill.amber{background:var(--amber-50);color:var(--amber)} .pill.red{background:var(--red-50);color:var(--red)} /* 改档弹窗里的「会花谁家的额度」 */ .scope-quota{margin-top:12px;padding:10px 12px;background:var(--blue-50);border-radius:var(--r); font-size:12.5px;line-height:1.9} .scope-quota .k{margin:0 0 4px;font-size:12px;color:var(--ink-3);font-weight:600} /* =========================================================================== 门店改档 —— 老板周六的固定动作 顺序：选门店 → 看额度 → 在这家店的库存里搜货 → 勾选 → 放开 =========================================================================== */ .rl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .rl-quota{display:flex;gap:20px;flex-wrap:wrap;align-items:center; background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:14px 18px;margin-bottom:12px} .rl-quota-main{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .rl-quota-main .k{font-size:13.5px;color:var(--ink-2)} .rl-quota-main .v{font-size:32px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1} .rl-quota-main .v.good{color:var(--green)} .rl-quota-main .v.off{color:var(--ink-3)} .rl-quota-main .u{font-size:13px;color:var(--ink-2)} .rl-quota-side{margin-left:auto;font-size:12.5px;color:var(--ink-2);line-height:1.9;text-align:right} .rl-quota-side b{font-variant-numeric:tabular-nums} .rl-search{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} .rl-search input#rl-q{flex:1;min-width:220px;max-width:none} .rl-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2); white-space:nowrap;cursor:pointer} .rl-check input{width:auto} .rl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap; background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:10px 14px;margin-bottom:10px} .rl-sel{font-size:13.5px} .rl-sel b{font-size:17px;font-variant-numeric:tabular-nums} .goodTxt{color:var(--green)} .badTxt{color:var(--red)} .blueTxt{color:var(--blue)} .amberTxt{color:var(--amber)} .rl-name{font-size:13.5px;font-weight:500} .rl-pager{display:flex;align-items:center;gap:12px;justify-content:center;padding:12px 0} table.grid tbody tr.on,table tbody tr.on{background:var(--amber-50)} table tbody tr td .mono.sub{color:var(--ink-3);font-size:11.5px} @media (max-width:760px){ .rl-quota-side{margin-left:0;text-align:left} .rl-search input#rl-q{min-width:140px} } /* =========================================================================== 价格册 —— 一个商品一行 × 一个价档一列，格子点开就改 形状照老板那张「报价图」：列多、要横向滚，所以第一列固定住 =========================================================================== */ .px-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px} .px-tiers-label{font-size:12.5px;color:var(--ink-3);flex:none} .px-tiers{display:flex;flex-wrap:wrap;gap:6px;align-items:center} /* ★ 2026-10-01 老板：「表上方可以减少一些，让整个报价表显示的比例到 80%」。 做法：把「价格档」和「品牌」两排挤进**同一行**（各自横向滚，永远不换行）， 原来那几行说明收进「怎么用」折叠里，统计挪到工具栏最右边。 省下来的高度全部让给表格（见下面 .px-wrap 的 max-height）。 */ .px-bar-top{gap:6px;margin-bottom:6px} .px-bar-top .px-tiers{flex:1 1 260px;min-width:0;flex-wrap:nowrap; overflow-x:auto;overflow-y:hidden;padding-bottom:2px} .px-bar-top .px-tiers::-webkit-scrollbar{height:5px} .px-bar-top .px-tiers::-webkit-scrollbar-thumb{background:#D6DCE6;border-radius:3px} .px-bar-top .px-tiers .chip{flex:none;padding:3px 11px;font-size:12px} .px-sep{margin-left:2px;padding-left:10px;border-left:1px solid var(--line)} .px-stat{margin-left:auto;font-size:12.5px;color:var(--ink-2);white-space:nowrap} .px-stat b{font-variant-numeric:tabular-nums} /* 「怎么用」折叠：默认只占一行，要看点开 —— 说明还在，但不占地方 */ .px-help{font-size:12px;color:var(--ink-3);margin:0 0 8px} .px-help summary{cursor:pointer;color:var(--blue);font-size:12.5px;outline:none; display:inline-flex;align-items:center;gap:5px;user-select:none} .px-help summary::-webkit-details-marker{display:none} .px-help summary::before{content:'?';display:inline-flex;width:15px;height:15px; border-radius:50%;background:var(--blue-50);color:var(--blue);font-size:11px; font-weight:700;align-items:center;justify-content:center} .px-help[open] summary{margin-bottom:6px} .px-help p{margin:0;line-height:1.85;background:#FAFBFD;border:1px solid var(--line); border-radius:var(--r);padding:9px 13px} .px-tiers .chip s{text-decoration:none;color:var(--amber);margin-left:2px;font-size:10px} .px-tiers .chip.px-all{background:var(--line-2);color:var(--ink-2)} .px-tiers .chip.px-all:not(.on){border-style:solid} /* ★ 2026-09-24 老板反馈「显示哪些城市的点击后没有明显的视觉效果」—— 查下来是 .chip 压根没有 .on 的样式定义，选中和没选中长得一模一样。 补上：选中 = 实心蓝底白字；没选中的淡下去 + 虚线边，一眼分得清。 */ .chip.on{ background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600; box-shadow:0 1px 3px rgba(0,110,255,.3); } .chip.on:hover{background:#0059D6;border-color:#0059D6;color:#fff} .px-tiers .chip:not(.on):not(.px-all){color:var(--ink-3);border-style:dashed} .px-tiers .chip:not(.on):not(.px-all):hover{color:var(--blue);border-style:solid} .px-tiers .chip.on s{color:#CFE3FF} /* 品牌那一排：跟档位同一套交互，后面缀一个款式数量的灰色小字 */ .px-brands .chip .n{font-size:11px;opacity:.65;margin-left:3px;font-variant-numeric:tabular-nums} .px-brands .chip.on .n{opacity:.9} /* 商品列拖拽调宽：表格用 fixed 布局，宽度由 colgroup 控制，拖的时候只改 col 不重绘 */ .px-table{table-layout:fixed} .px-grip{ position:absolute;top:0;right:-3px;width:7px;height:100%; cursor:col-resize;z-index:6; } .px-grip::after{ content:'';position:absolute;top:24%;left:3px;width:1px;height:52%;background:var(--line); } .px-grip:hover{background:var(--blue-50)} .px-grip:hover::after{background:var(--blue);width:2px;left:2.5px} body.px-dragging{cursor:col-resize;user-select:none} .px-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2); white-space:nowrap;cursor:pointer} .px-check input{width:auto} .px-head{margin-bottom:8px} .px-stat{font-size:13px;color:var(--ink-2)} .px-stat b{font-variant-numeric:tabular-nums} .warnTxt{color:var(--amber)} .goodTxt{color:var(--green)} .badTxt{color:var(--red)} /* ★ 2026-10-01：高度从「视口 − 300」提到「视口 − 170」—— 顶部瘦身之后，表格能占到屏幕的八成，老板不用老往下滚。 */ .px-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card); max-height:calc(100vh - 170px);min-height:320px} .px-table{border:0;border-radius:0;min-width:100%} .px-table th,.px-table td{border-bottom:1px solid var(--line-2);padding:6px 10px;font-size:13px} .px-table thead th{position:sticky;top:0;z-index:3;background:var(--card);border-bottom:1px solid var(--line)} /* ★ 2026-10-01 修「字体回重叠了」—— 根因两条，缺一条都还会叠： ① 商品名 white-space:nowrap，格子 260px 而名字宽到 296px， 溢出的 36px 直接画到隔壁价格格上，和价格数字叠在一起 → 给格子加 overflow:hidden + 文字走省略号，**永远不许溢出**。 ② `.sub` 这个类在样式表里**压根没定义过**，第二行是按 body 的 14px 渲染的， 比第一行标题（13px）还大，两行贴在一起看着就是一坨 → 这里把商品列两行的字号/行高钉死。 顺带：sticky 列提到 z-index 12（原来 4 跟价格格的定位层容易打架）， 右边缘加一道渐隐阴影，一眼看得出「这一列浮在别的列上面」。 */ .px-table th.px-fix,.px-table td.px-fix{position:sticky;left:0;z-index:12;background:var(--card); border-right:1px solid var(--line);min-width:220px;max-width:280px;text-align:left; overflow:hidden} .px-table thead th.px-fix{z-index:13} .px-table th.px-fix::after,.px-table td.px-fix::after{ content:'';position:absolute;top:0;right:-7px;width:7px;height:100%;pointer-events:none; background:linear-gradient(90deg,rgba(24,38,72,.08),rgba(24,38,72,0))} .px-fix-in{overflow:hidden} /* ★ 2026-10-01 价档列：一列一套色 + 右对齐 老板原话：「每个地市列和价格没有对齐，会影响到地市的价格判断。 建议不同列有不同色系区隔，对齐。」 ① **对齐**：表头和价格都右对齐、共用同一条右边缘 —— 8 个市并排时， 一眼看得出这个价属于哪个市（以前表头居中、数字靠右，两边不搭）。 ② **色系**：每列一条 3px 色条 + 极浅同色底 + 格子左边线；鼠标压到哪一格， 整列一起亮（.px-hl，表头也整块变色）。颜色按「档的固定次序」发， 相邻两列永远不同色（厦门有两个档，按地市取色会撞成一个颜色）。 颜色由 renderTable() 里那段