/* ══ CSS 重置 ════════════════════════════ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ═══════════════════════════════════════════════════════ 泰国VAT发票系统 v3.0 · 全局样式 — 现代设计系统 ═══════════════════════════════════════════════════════ */ /* ── 设计令牌 ─────────────────────────────────────── */ :root { /* 品牌色系 */ --primary: #4f6ef7; --primary-light: #6b85f9; --primary-dark: #3a56d4; --primary-bg: #eef1fe; --primary-ring: rgba(79,110,247,.18); /* 语义色 */ --success: #22c55e; --success-bg: #f0fdf4; --warning: #f59e0b; --warning-bg: #fffbeb; --danger: #ef4444; --danger-bg: #fef2f2; --info: #3b82f6; --info-bg: #eff6ff; /* 中性色 */ --bg: #f4f6fb; --card: #ffffff; --border: #e5e9f0; --border-light: #f0f2f7; --text: #1e293b; --text-secondary:#64748b; --text-muted: #94a3b8; --hover-bg: #f8f9fc; /* 侧边栏 */ --sidebar-bg: #0f172a; --sidebar-hover: rgba(255,255,255,.08); --sidebar-active:rgba(79,110,247,.2); /* 圆角 */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; /* 阴影 */ --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 1px 4px rgba(0,0,0,.06); --shadow: 0 2px 12px rgba(0,0,0,.07); --shadow-md: 0 4px 20px rgba(0,0,0,.08); --shadow-lg: 0 8px 30px rgba(0,0,0,.1); /* 过渡 */ --ease: cubic-bezier(.4,0,.2,1); --duration: .2s; --duration-slow:.35s; } /* Order management and compact system navigation */ .system-menu-toggle .nav-icon { transition: transform .2s ease; } .system-menu-toggle.open .nav-icon { transform: rotate(45deg); } .nav-item.admin-only, .nav-item.system-subitem { padding-left: 36px !important; font-size: 13px; } .order-page { width:100%; max-width:none; margin:0; padding:22px 24px 40px; } .order-shell .topbar-inner { width:100%; max-width:1400px; margin:0 auto; } .order-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; } .order-toolbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:1; flex-wrap:wrap; } .order-toolbar-actions > select { width:auto; min-width:150px; } .order-search { width:min(420px,34vw); min-width:280px; } .order-table-wrap { background:#fff; border:1px solid var(--border-light); border-radius:12px; overflow:auto; box-shadow:var(--shadow-xs); } .order-table { width:100%; border-collapse:collapse; min-width:1180px; } .order-table th { padding:11px 12px; color:var(--text-secondary); font-size:12px; text-align:left; background:#f8fafc; border-bottom:1px solid var(--border); white-space:nowrap; } .order-table td { padding:12px; border-bottom:1px solid var(--border-light); vertical-align:top; } .order-table tr:hover td { background:#fafbff; } .status-pair { display:flex; gap:5px; flex-wrap:wrap; } .status-chip { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; } .status-chip.ok { color:#047857; background:#ecfdf5; } .status-chip.wait { color:#92400e; background:#fffbeb; } .status-chip.bad { color:#b91c1c; background:#fef2f2; } .status-chip.info { color:#3730a3; background:#eef2ff; } .status-chip.muted { color:#475569; background:#f1f5f9; } .history-mark { color:#7c3aed; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:5px; padding:2px 6px; font-size:10px; font-weight:700; } .order-progress { width:112px; height:6px; border-radius:999px; background:#e2e8f0; overflow:hidden; margin-top:6px; } .order-progress > span { display:block; height:100%; background:var(--primary); border-radius:inherit; } .order-modal { position:fixed; inset:0; z-index:1200; background:rgba(15,23,42,.52); display:none; align-items:flex-start; justify-content:center; overflow:auto; padding:28px; } .order-modal.show { display:flex; } .order-dialog { width:min(1240px,96vw); background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; } .order-dialog-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; color:#fff; background:linear-gradient(135deg,#3349ba,#4f6ef7); } .order-dialog-body { padding:20px 22px 24px; } .order-form-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .order-field label { display:block; color:var(--text-secondary); font-size:12px; margin-bottom:5px; font-weight:600; } .order-field input,.order-field select,.order-field textarea { width:100%; border:1px solid var(--border); border-radius:7px; padding:9px 10px; font:inherit; color:var(--text); background:#fff; } .order-field.span-2 { grid-column:span 2; } .order-field.span-4 { grid-column:span 4; } .order-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; } /* 品目中心弹窗（2026-09-13 大哥：警示/确认弹窗一律在「订单品目」区域最中心打开） */ .oc-dialog-overlay { position:fixed; inset:0; z-index:1300; background:rgba(15,23,42,.52); } .oc-dialog-card { position:fixed; z-index:1301; transform:translate(-50%,-50%); width:min(560px,92vw); max-height:74vh; overflow:auto; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); padding:22px 24px; transition:opacity .12s ease; } .oc-dialog-msg { white-space:pre-line; font-size:14px; line-height:1.7; color:#1e293b; word-break:break-word; } .oc-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; } .order-empty { padding:50px; text-align:center; color:var(--text-muted); } .dashboard-alert-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:18px; } .dashboard-alert-card { background:#fff; border:1px solid var(--border-light); border-left:4px solid var(--primary); border-radius:10px; padding:15px 16px; } .dashboard-alert-card.danger { border-left-color:var(--danger); }.dashboard-alert-card.warning { border-left-color:var(--warning); }.dashboard-alert-card.success { border-left-color:var(--success); } @media(max-width:1000px){.order-toolbar{align-items:flex-start;flex-direction:column}.order-toolbar-actions{width:100%;justify-content:flex-start}.order-search{width:min(420px,100%)}.order-form-grid{grid-template-columns:repeat(2,1fr)}.order-field.span-4{grid-column:span 2}.order-summary-grid,.dashboard-alert-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:769px) and (max-width:1024px){.order-shell .main-wrap{margin-left:56px}} @media(max-width:768px){.order-shell .main-wrap{margin-left:0;width:100%;max-width:100%}} @media(max-width:640px){.order-page{padding:14px}.order-toolbar{align-items:stretch;flex-direction:column}.order-search{min-width:0}.order-form-grid,.order-summary-grid,.dashboard-alert-grid{grid-template-columns:1fr}.order-field.span-2,.order-field.span-4{grid-column:span 1}} /* Rich order UI: follows the approved blue dashboard, ledger and entry designs. */ .order-shell { background:#f4f6fb; } .order-shell .topbar { flex:0 0 56px; } .order-shell .topbar .logo-title { font-weight:500; } /* 2026-09-13 大哥：顶部上移、左右扩宽、底部让位给表格（横向滚动条尽量下移） */ .order-shell .order-page { padding:8px 12px 8px; } .om-heading-row,.od-heading,.oc-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; } .om-heading-row h1,.od-heading h1,.oc-heading h1 { margin:0; color:#1e293b; font-size:20px; font-weight:600; } .om-heading-row p,.od-heading p,.oc-heading p { margin:3px 0 0; color:#64748b; font-size:12px; } /* Customer order ledger */ .om-tabs { display:flex; align-items:center; gap:4px; margin-bottom:12px; padding:4px; border:1px solid #e5e9f0; border-radius:10px; background:#fff; box-shadow:0 1px 4px rgba(15,23,42,.04); overflow-x:auto; } /* ── 单行工具条（2026-09-11 大哥要求：新增订单最左、页签居中、筛选+导出右对齐、行高压到最小）── */ .om-topbar { display:flex; align-items:center; gap:4px; flex-wrap:nowrap; overflow:hidden; margin-bottom:6px; padding:3px 8px 3px 6px; border:1px solid #e5e9f0; border-radius:9px; background:#fff; box-shadow:0 1px 4px rgba(15,23,42,.04); min-height:34px; } .om-topbar .om-new-order { height:26px; padding:0 10px; font-size:11.5px; border-radius:6px; flex:0 0 auto; } /* 视图下拉（2026-09-13 大哥：6 个页签占宽 ~500px → 压缩为下拉，省 ~350px；浅蓝轻强调以区别右侧筛选控件） */ .om-topbar .om-tab-select { height:26px; font-size:11.5px; padding:0 6px; border:1px solid #cdd8f0; border-radius:6px; background:#f8faff; color:#3350c9; font-weight:600; flex:0 0 auto; width:auto; min-width:118px; cursor:pointer; } .om-topbar .om-tab-select:hover { border-color:#9db0e8; } .om-topbar .om-tab-select:focus { outline:0; border-color:#4f6ef7; } /* 待送货工作台入口（2026-09-16 大哥：从视图下拉移出 → 独立按钮置于「＋新增订单 / 视图下拉」右侧；样式与视图下拉同族，进工作台时高亮） */ .om-topbar .om-desk-btn { height:26px; padding:0 10px; font-size:11.5px; border-radius:6px; flex:0 0 auto; border:1px solid #cdd8f0; background:#f8faff; color:#3350c9; font-weight:600; cursor:pointer; box-shadow:none; } .om-topbar .om-desk-btn:hover { border-color:#9db0e8; background:#eef3ff; } .om-topbar .om-desk-btn:focus { outline:0; border-color:#4f6ef7; } .om-topbar .om-desk-btn.active { background:linear-gradient(135deg,#4f6ef7 0%,#7d94ff 100%); border-color:#4f6ef7; color:#fff; box-shadow:0 2px 8px rgba(79,110,247,.22); } .om-topbar-spacer { flex:1 1 auto; min-width:6px; } .om-topbar .om-filterbar { display:flex; align-items:center; gap:5px; flex-wrap:nowrap; padding:0; border:0; background:none; flex:0 1 auto; min-width:0; } .om-topbar .om-field { height:26px; font-size:11.5px; padding:0 7px; border-radius:5px; flex:0 1 104px; min-width:72px; width:auto; } .om-topbar .om-field-search { flex:0 1 334px; width:334px; min-width:88px; } .om-topbar .om-field-date { flex:0 1 116px; min-width:100px; } .om-topbar .om-export { height:26px; padding:0 10px; font-size:11.5px; border-radius:6px; flex:0 0 auto; } .om-ledger-page .om-panel { margin-top:0; } .om-panel,.od-panel,.oc-panel { overflow:hidden; border:1px solid #edf0f5; border-radius:12px; background:#fff; box-shadow:0 1px 4px rgba(15,23,42,.055); } .om-filterbar { display:grid; grid-template-columns:minmax(170px,1.3fr) repeat(4,minmax(105px,.58fr)) repeat(2,minmax(128px,.72fr)) auto; gap:8px; padding:13px 16px; border-bottom:1px solid #f0f2f7; background:linear-gradient(to bottom,#fafbfd,#f7f8fc); } .order-page { padding-top:12px; } .om-field { width:100%; min-width:0; height:35px; border:1px solid #d8dee9; border-radius:6px; padding:0 10px; outline:none; background:#fff; color:#1e293b; font-size:12px; } .om-field:focus { border-color:#4f6ef7; box-shadow:0 0 0 3px rgba(79,110,247,.14); } .om-table-wrap { overflow-x:auto; } .om-table { width:100%; min-width:0; border-collapse:collapse; table-layout:fixed; font-size:11px; } .om-table th { padding:10px 8px; border-bottom:1px solid #e5e9f0; background:#fafbfd; color:#64748b; text-align:left; font-weight:600; white-space:nowrap; } .om-table td { padding:10px 8px; border-bottom:1px solid #f0f2f7; color:#334155; vertical-align:middle; overflow:hidden; } .om-table tbody tr:hover td { background:#fafbff; } .om-table>thead th:nth-child(1){width:58px}.om-table>thead th:nth-child(4){width:58px}.om-table>thead th:nth-child(5){width:84px}.om-table>thead th:nth-child(6){width:94px}.om-table>thead th:nth-child(7){width:80px}.om-table>thead th:nth-child(8){width:86px}.om-table>thead th:nth-child(9),.om-table>thead th:nth-child(10){width:94px}.om-table>thead th:nth-child(11){width:76px}.om-table>thead th:nth-child(12){width:110px}.om-table>thead th:nth-child(13){width:250px} /* ── 台账视图（2026-09-11）：⚙️列设置 + 21 列品目级 + 操作列 ── */ /* 表格容器：纵向封顶 → 表头 sticky 常驻顶部、横向滚动条常驻容器底部（大哥 2026-09-11 需求） */ .om-table-wrap { overflow:auto; max-height:calc(100vh - 260px); } .om-table-wrap::-webkit-scrollbar { height:14px; width:12px; } .om-table-wrap::-webkit-scrollbar-track { background:#f1f5f9; border-radius:7px; } .om-table-wrap::-webkit-scrollbar-thumb { background:#c7d2fe; border-radius:7px; border:3px solid #fff; } .om-table-wrap::-webkit-scrollbar-thumb:hover { background:#818cf8; } .om-ledger-table { min-width:0; } /* 表头/行内容「高度对齐」（2026-09-12 大哥需求）： vertical-align:top → 所有表头标签首行同基线、同一行内各列内容首行同基线； 原先 middle 会让 1 行表头（如 PO单号）在 2 行表头撑开的行里被居中，与同行其它表头/内容错开。 */ /* 2026-09-12 大哥反馈「表头字段列与列之间间距太大」：内边距 7px → 5px（列间距整体收紧） */ .om-ledger-table th { padding:5px 5px; vertical-align:top; position:relative; } .om-ledger-table td { padding:5px 5px; vertical-align:top; } /* ⚙️ 列表头按钮仍垂直居中 */ .om-ledger-table thead th.om-cols-gear-th { vertical-align:middle; } .om-ledger-table th.om-2line { line-height:1.3; white-space:normal; } .om-ledger-table th.om-2line em { display:block; font-style:normal; font-weight:500; color:#94a3b8; font-size:10px; } /* 列宽拖动把手（右侧 7px 热区，col-resize） 2026-10-14 修复（大哥反馈「订单管理标头没修复」连带排查）： 原 right:-3px 使把手右侧约 3px 越界到相邻列领地，被后绘制的相邻 th 覆盖命中 （elementFromPoint 实测：7px 里只有左缘约 4px 可点，中心点落到相邻 th） ⇒ 改 right:0 整体回收本列内，7px 全部可点。 */ .om-col-resizer { position:absolute; top:0; right:0; width:7px; height:100%; cursor:col-resize; z-index:8; } .om-col-resizer::after { content:""; position:absolute; top:2px; bottom:2px; left:3px; width:1px; background:transparent; } .om-col-resizer:hover::after { background:#818cf8; } body.om-col-resizing { cursor:col-resize; user-select:none; } body.om-col-resizing .om-ledger-table thead th[data-sortable]:hover { color:inherit; } /* 表头常驻顶部：sticky + 不透明底色（否则行内容会透出来） */ .om-ledger-table thead th { position:sticky; top:0; z-index:4; background:#fafbfd; box-shadow:inset 0 -1px 0 #e5e9f0; } .om-ledger-table thead th.om-cols-gear-th { z-index:6; } /* 排序：点表头切换 升序/降序，指示器 ⇅ → ▲/▼ */ .om-ledger-table thead th[data-sortable] { cursor:pointer; user-select:none; } .om-ledger-table thead th[data-sortable]:hover { color:#3454d1; } .om-sort-ic { display:inline-block; margin-left:3px; font-style:normal; font-size:9px; color:#cbd5e1; vertical-align:1px; } .om-sort-ic::after { content:"⇅"; } .om-ledger-table thead th.om-sort-asc .om-sort-ic::after { content:"▲"; color:#3454d1; } .om-ledger-table thead th.om-sort-desc .om-sort-ic::after { content:"▼"; color:#3454d1; } .om-ledger-table thead th.om-2line.om-sort-asc .om-sort-ic::after, .om-ledger-table thead th.om-2line.om-sort-desc .om-sort-ic::after { position:absolute; margin-left:2px; } .om-ledger-table thead th.om-2line[data-sortable] { position:sticky; } /* 列宽（2026-09-13 17:5x 大哥「合理规划 + 默认显示出 ⚙️→已收款金额」重排：2912 → 2058px） 规划口径（实测校准）：① 每列宽 ≈ 表头文字 + 排序图标 12px + padding 10px（表头 nowrap 硬约束）； ② 数字列 = 文字宽 55 + 排序位 18 + 左 padding（76 可达）；③ 文本列（品名/料号/PO/客户） 截断 + 悬停 title；④ 目标达成：隐藏 6 个成本/成交价列时，「⚙️→已收款金额」22 列 = 1418px， 1600 屏仅需横向滚 12px 即全列可见（旧 2042px 需滚 634px）。 */ .om-ledger-table thead th:nth-child(1){width:40px} .om-ledger-table thead th:nth-child(2){width:64px} /* 客户名称（截断+悬停） */ .om-ledger-table thead th:nth-child(3){width:64px} /* 订单年度 */ .om-ledger-table thead th:nth-child(4){width:52px} /* 部门（包胶部徽标文字完整） */ .om-ledger-table thead th:nth-child(5){width:64px} /* PO单号（截断+悬停） */ .om-ledger-table thead th:nth-child(6){width:64px} /* 订货日期 */ .om-ledger-table thead th:nth-child(7){width:70px} /* 料号（截断+悬停） */ .om-ledger-table thead th:nth-child(8){width:80px} /* 品名（截断+悬停） */ .om-ledger-table thead th:nth-child(9){width:46px} /* 规格（截断+悬停） */ .om-ledger-table thead th:nth-child(10){width:42px} /* 单位 */ .om-ledger-table thead th:nth-child(11){width:58px} /* 数量 */ .om-ledger-table thead th:nth-child(12),.om-ledger-table thead th:nth-child(13), .om-ledger-table thead th:nth-child(14),.om-ledger-table thead th:nth-child(15), .om-ledger-table thead th:nth-child(16),.om-ledger-table thead th:nth-child(17), .om-ledger-table thead th:nth-child(18),.om-ledger-table thead th:nth-child(19){width:76px} .om-ledger-table thead th:nth-child(20){width:64px} /* 送货日期 */ .om-ledger-table thead th:nth-child(21){width:76px} /* 已送/欠数 */ .om-ledger-table thead th:nth-child(22){width:72px} /* 备料-库存 */ .om-ledger-table thead th:nth-child(23){width:76px} /* 已开票数量（到货情况列 2026-09-13 移除） */ .om-ledger-table thead th:nth-child(24){width:76px} /* 已开票金额 */ .om-ledger-table thead th:nth-child(25){width:68px} /* 对账时间 */ .om-ledger-table thead th:nth-child(26){width:54px} /* 关联单据 */ .om-ledger-table thead th:nth-child(27){width:84px} /* 已收款金额 */ .om-ledger-table thead th:nth-child(28){width:58px} /* 链路状态 */ .om-ledger-table thead th:nth-child(29){width:126px} /* 操作（3 按钮/行 ×2 行） */ .om-ledger-table td.om-num { text-align:right; padding-right:18px; font-variant-numeric:tabular-nums; white-space:nowrap; } /* ── 链路列（2026-09-12 新增）：已开票/已收款/关联单据/链路状态 ── */ .om-inv-full { color:#2f7d32; font-weight:500; } .om-inv-part { color:#b26a00; } .om-docs { font-size:11px; color:var(--text-secondary,#5a5a5a); } .om-chain { display:inline-block; padding:1px 7px; border-radius:9px; font-size:11px; line-height:17px; border:1px solid transparent; white-space:nowrap; } .om-chain-none { background:#f1f1f1; color:#7a7a7a; border-color:#e0e0e0; } .om-chain-ship { background:#e8f1fb; color:#1a5fa8; border-color:#cfe1f6; } .om-chain-inv { background:#fdf2e2; color:#a8630a; border-color:#f5dfc0; } .om-chain-paid { background:#e7f4e8; color:#2f7d32; border-color:#cbe7cd; } .om-chain-done { background:#f5f3ff; color:#7c3aed; border-color:#e4ddfa; } /* 已完结（2026-09-15：原备料-库存「已完结」标识迁入链路状态列） */ /* ── 备料-库存=仓库实时库存（2026-09-15）：负库存标红（仓库页同口径允许负库存+预警）── */ .om-wh-neg { color:#dc2626; font-weight:500; } /* ── 备料-库存「本单专属到货」优先显示（2026-09-15）：琥珀底徽标 ── */ .om-stock-own { display:inline-block; padding:0 5px; border-radius:4px; background:#fdf2e2; color:#a8630a; border:1px solid #f5dfc0; font-weight:500; } /* ── 部门徽标（2026-09-12 新增）：包胶部订单一眼可辨 ── */ .om-dept { display:inline-block; padding:1px 7px; border-radius:9px; font-size:11px; line-height:17px; border:1px solid transparent; white-space:nowrap; } .om-dept-bj { background:#ece7fb; color:#5b3fa8; border-color:#dcd3f5; } .om-dept-other { background:#eef2f7; color:#4a5b70; border-color:#dfe6ee; } /* 数字列表头与数值同侧（右对齐）：修「表头靠左、数字靠右」的视觉错位（2026-09-12） 实测：改前表头文字右边界比数值右边界偏左 23~36px → 改后 ≤3px（8 列精确 0.0） 右侧留 18px 给排序图标：表头文字与数值同时内缩到同一右边界，两者才能严格对齐。 */ .om-ledger-table thead th.om-sortable-num { text-align:right; padding-right:18px; } /* 排序图标绝对定位： ① 消除「两行表头」里 另起一行产生的多余空行（表头行高由 3 行降到 2 行）； ② 单行数字表头（数量/已送欠数）的文字得以贴齐右边界。 */ .om-ledger-table thead th.om-sortable-num .om-sort-ic { position:absolute; right:6px; top:6px; line-height:1; } .om-ledger-table thead th.om-sortable-num .om-sort-ic::after { position:static; margin-left:0; } /* 已送/欠数：欠数 > 0 显示琥珀色 */ .om-ship-sep { color:#cbd5e1; } .om-ship-owed { color:#b45309; font-weight:600; } /* ── 送货批次 / 到货记录 / 收款明细（2026-09-12 定版）：双击单元格 → 单元格内就地展开 ── 大哥选择「格内直接看到」（不弹浮层）；列宽已调足（到货 110 / 收款 144 / 送货默认 96） 容纳「日期 + 数值」单行；超长金额自然折行兜底（不裁剪）。 */ .om-batch-cell { display:flex; flex-direction:column; gap:2px; } .om-batch-hint { align-self:flex-start; font-size:10.5px; color:#94a3b8; line-height:1.5; } .om-batch-cell-warn .om-batch-hint { color:#b45309; } /* 单批次「送货日期」行：日期后补已送数量（口径同「已送/欠数」列）2026-09-12 大哥口径 */ .om-ledger-table td[data-col="delivery_date"] .om-dd-qty { color:#0f766e; font-weight:600; margin-left:6px; font-variant-numeric:tabular-nums; } /* 品目备注（2026-10-08 大哥定案 C）：delivery_info 里混入的非日期文本不再冒充「送货日期」， 降级为备注灰字附显（与独立列 item_note 合并下发为 item_note_text）。 */ .om-ledger-table td[data-col="delivery_date"] .om-dd-note { display:block; margin-top:2px; font-size:10.5px; line-height:1.4; color:#94a3b8; word-break:break-all; } .om-ledger-table td[data-col="delivery_date"], .om-ledger-table td[data-col="arrival"], .om-ledger-table td[data-col="paid_amount"] { user-select:none; -webkit-user-select:none; } .om-cell-expand { margin-top:4px; padding-top:4px; border-top:1px dashed #cbd5e1; display:flex; flex-direction:column; gap:4px; } .om-cell-expand .om-xb-line { display:block; font-size:11px; line-height:1.5; font-variant-numeric:tabular-nums; } .om-cell-expand .om-xb-line em { font-style:normal; color:#64748b; } .om-cell-expand .om-xb-line b { color:#0f766e; font-weight:600; margin-left:6px; } .om-cell-expand .om-xb-foot { display:block; margin-top:4px; padding-top:4px; border-top:1px dashed #e2e8f0; font-size:10px; line-height:1.5; color:#94a3b8; } .om-cell-expand .om-xb-empty { display:block; font-size:10.5px; line-height:1.5; color:#94a3b8; } /* ── 售后/换货痕迹徽标（2026-09-24 大哥定案）── 换货等类型按设计不写订单挂链 ⇒ 不进「已送/欠数」；此处只在送货日期列后提示「有该记录」， 双击展开只看「日期 + 类型 + 数量」（前端不显示单号 / 原单号 / 技术措辞）。 配色沿用订单台账浅色线条风。 */ .om-as-badge { display:inline-block; margin-left:6px; padding:0 5px; border-radius:7px; border:1px solid #f5c2c7; background:#fdf2f2; color:#b02a37; font-size:10px; line-height:15px; white-space:nowrap; vertical-align:middle; cursor:help; font-weight:600; } .om-cell-expand .om-xb-line.om-as-line b { color:#b02a37; } /* 退货（负数批次）行：负数红字（2026-09-29 大哥定案：退货留在批次列表、红字负数； 含退货的行不再显示「合计」，下方售后区不再重复列同一笔） */ .om-cell-expand .om-xb-line.om-xb-ret b { color:#b02a37; } /* ?view= 定位高亮（保存订单后跳回列表时的目标行闪烁） */ @keyframes om-row-flash-kf { 0% { background:#fef08a; } 100% { background:transparent; } } .om-ledger-row.om-row-flash > td { animation: om-row-flash-kf 2.5s ease-out 1; } .om-ledger-table td.om-muted { color:#94a3b8; } .om-ledger-table tr.om-ledger-row { cursor:default; } .om-ledger-table .om-cell-ellipsis { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 台账问题标识（只标识不修改）：⚠ + 悬停看原因 */ .om-issue { color:#d97706; font-weight:700; margin-right:3px; cursor:help; } .om-issue-note { margin:2px 0 6px; padding:6px 9px; background:#fffbeb; border:1px solid #fde68a; border-radius:6px; color:#92400e; font-size:11.5px; line-height:1.5; } .om-issue-src { margin:-2px 0 6px; color:#94a3b8; font-size:11px; } /* 表头 ⚙️ 列设置（与送货管理/发票明细同款交互，class 前缀改 om- 以适配本页） */ .om-cols-gear-th { position:relative; z-index:6; padding:2px 2px !important; text-align:center; } .om-cols-gear-btn { border:1px solid transparent; background:transparent; cursor:pointer; font-size:15px; line-height:1; padding:4px 6px; border-radius:5px; } .om-cols-gear-btn:hover { background:#eef2ff; border-color:#c7d2fe; } /* 齿轮菜单：position:fixed —— 表格容器已 overflow:auto（会裁切 absolute 子元素）， 由 JS 按齿轮按钮位置设置 top/left（打开时定位、滚动/缩放时关闭） */ .om-cols-menu { position:fixed; top:0; left:0; margin-top:0; width:250px; max-height:72vh; overflow-y:auto; background:#fff; border:1px solid #dbe2ea; border-radius:8px; box-shadow:0 12px 30px rgba(15,23,42,.16); z-index:2000; padding:4px 0; text-align:left; } .om-cols-menu .cols-tt { font-size:11px; color:#64748b; font-weight:600; padding:6px 12px 4px; border-bottom:1px solid #f1f5f9; } .om-cols-menu label { display:flex; align-items:center; gap:8px; padding:5px 12px; font-size:12.5px; color:#1e293b; cursor:pointer; white-space:nowrap; } .om-cols-menu label:hover { background:#f8fafc; } .om-cols-menu label input { accent-color:#1d4ed8; margin:0; flex-shrink:0; } .om-cols-menu .cols-actions { display:flex; justify-content:space-between; gap:6px; padding:6px 8px; border-top:1px solid #f1f5f9; position:sticky; bottom:0; background:#fff; } .om-cols-menu .cols-actions button { border:1px solid #dbe2ea; background:#fff; color:#334155; border-radius:6px; padding:3px 10px; font-size:11.5px; cursor:pointer; flex:1; } .om-cols-menu .cols-actions button:hover { background:#f1f5f9; } .om-table .om-po,.om-table td>div:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .om-source { display:inline-flex; align-items:center; gap:5px; color:#166534; white-space:nowrap; } .om-source::before { content:""; width:6px; height:6px; border-radius:50%; background:#22c55e; } .om-source.history { color:#64748b; }.om-source.history::before{background:#94a3b8} .om-po { color:#3454d1; font-weight:600; }.om-subline{margin-top:3px;color:#94a3b8;font-size:10px}.om-money{font-variant-numeric:tabular-nums;white-space:nowrap} .om-tag { display:inline-flex; align-items:center; padding:3px 7px; border-radius:5px; font-size:10px; white-space:nowrap; } .om-tag.blue{background:#eef1fe;color:#3a56d4}.om-tag.green{background:#ecfdf3;color:#047857}.om-tag.amber{background:#fffbeb;color:#a16207}.om-tag.red{background:#fef2f2;color:#dc2626}.om-tag.gray{background:#f1f5f9;color:#64748b}.om-tag.purple{background:#f5f3ff;color:#7c3aed} .om-progress { min-width:100px; }.om-progress-line{display:flex;justify-content:space-between;gap:7px;margin-bottom:4px;color:#475569;font-size:10px}.om-track{height:5px;border-radius:99px;background:#e5e9f0;overflow:hidden}.om-fill{height:100%;border-radius:inherit;background:#4f6ef7} .om-action { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:26px; padding:0 6px; border:1px solid #d8dee9; border-radius:5px; background:#fff; color:#3a56d4; cursor:pointer; font-size:11px; font-weight:500; line-height:1; white-space:nowrap; } .om-action:hover { border-color:#4f6ef7; color:#4f6ef7; } .om-action-group { display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap; } tr.om-order-row { cursor:pointer; } .om-status-overlay { position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:1000; display:flex; align-items:center; justify-content:center; } .om-status-dialog { background:#fff; border-radius:10px; padding:18px 18px 16px; width:220px; box-shadow:0 10px 40px rgba(0,0,0,.15); display:flex; flex-direction:column; gap:8px; } .om-status-title { font-size:13px; font-weight:600; color:#0f172a; margin-bottom:2px; } .om-status-dialog button { height:34px; border:1px solid #d8dee9; border-radius:6px; background:#fff; color:#334155; cursor:pointer; font-size:12px; } .om-status-dialog button:hover { border-color:#4f6ef7; color:#4f6ef7; } .om-status-dialog button.danger { color:#ef4444; border-color:#fecaca; } .om-status-dialog button.danger:hover { border-color:#ef4444; } .om-status-dialog button.ghost { color:#94a3b8; } .om-status-dialog.om-arrival-dialog { width:auto; min-width:480px; max-width:640px; gap:10px; } .om-arrival-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .om-arrival-fields label { display:flex; flex-direction:column; gap:4px; font-size:11px; color:#475569; font-weight:500; } .om-arrival-fields input { height:32px; padding:0 9px; border:1px solid #d8dee9; border-radius:6px; font-size:12px; color:#0f172a; } .om-arrival-fields input:focus { outline:none; border-color:#4f6ef7; } .om-arrival-table { width:100%; border-collapse:collapse; font-size:12px; } .om-arrival-table th { text-align:left; padding:6px 8px; color:#64748b; font-weight:600; font-size:11px; border-bottom:1px solid #e5e9f0; background:#f8fafc; } .om-arrival-table td { padding:6px 8px; border-bottom:1px solid #eef1f6; color:#1e293b; vertical-align:middle; } .om-arrival-table input.arrival-qty { width:86px; height:28px; padding:0 7px; border:1px solid #d8dee9; border-radius:5px; font-size:12px; } .om-arrival-table input.arrival-qty:focus { outline:none; border-color:#4f6ef7; } .om-status-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:2px; } tr.om-order-row:hover td { background:#f6f8ff; } .om-action.danger { color:#ef4444; border-color:#fecaca; } .om-action.muted { color:#94a3b8; cursor:default; font-weight:400; border-color:#e2e8f0; } /* 2026-09-13 大哥：分页条压到最低行高（48px→22px 量级）；「跳至」加 nowrap 防空间不足时被压成竖排 */ .om-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:22px; padding:1px 12px; color:#64748b; font-size:11px; } .om-pages { display:flex; gap:3px; align-items:center; flex-wrap:wrap; }.om-page { min-width:20px; height:20px; padding:0 5px; border:1px solid #d8dee9; border-radius:4px; background:#fff; color:#64748b; cursor:pointer; font-size:10.5px; line-height:1; }.om-page.active{border-color:#4f6ef7;background:#4f6ef7;color:#fff}.om-page:disabled{opacity:.45;cursor:default} .om-page-jump { display:inline-flex; align-items:center; gap:3px; margin-left:4px; color:#64748b; white-space:nowrap; flex-shrink:0; } .om-page-jump .om-jump-label { white-space:nowrap; } .om-page-jump input { width:42px; height:20px; padding:0 4px; border:1px solid #d8dee9; border-radius:4px; text-align:center; font-size:10.5px; } .om-page-jump input:focus { outline:none; border-color:#4f6ef7; } /* Order dashboard */ .od-rule,.oc-step { padding:7px 11px; border:1px solid #dce4ff; border-radius:6px; background:#f7f9ff; color:#3a56d4; font-size:11px; white-space:nowrap; } .od-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; } .od-kpi { min-width:0; min-height:92px; padding:13px 14px; border:1px solid #edf0f5; border-radius:11px; background:#fff; box-shadow:0 1px 4px rgba(15,23,42,.055); color:#1e293b; cursor:pointer; text-align:left; transition:.18s ease; } .od-kpi:hover,.od-kpi.active { transform:translateY(-1px); border-color:#b9c6ff; box-shadow:0 5px 14px rgba(79,110,247,.12); } .od-kpi.finance { border-color:#e6e1f9; background:#faf8ff; } .od-kpi.finance:hover,.od-kpi.finance.active { border-color:#a78bfa; box-shadow:0 5px 14px rgba(124,88,247,.12); } .od-kpi-label { display:flex; justify-content:space-between; gap:6px; color:#64748b; font-size:11px; }.od-kpi-label i{width:7px;height:7px;border-radius:50%;background:#4f6ef7}.od-kpi-label i.danger{background:#ef4444}.od-kpi-label i.warning{background:#f59e0b}.od-kpi-label i.success{background:#22c55e} .od-kpi strong { display:block; margin:7px 0 4px; font-size:22px; line-height:1; font-weight:600; }.od-kpi strong small{margin-left:4px;color:#64748b;font-size:10px;font-weight:400}.od-kpi>span:last-child{color:#94a3b8;font-size:10px} .od-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:12px; align-items:start; } .od-main-stack { display:grid; gap:12px; } .od-delivery-bar { display:flex; height:44px; margin:14px; border-radius:8px; overflow:hidden; } .od-dbar-seg { display:flex; align-items:center; justify-content:center; min-width:0; color:#fff; font-size:12px; font-weight:500; overflow:hidden; } .od-dbar-seg span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 6px; } .od-dbar-seg.done { background:#22c55e; }.od-dbar-seg.active { background:#f59e0b; }.od-dbar-seg.cancelled { background:#94a3b8; } .od-panel-head { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:0 15px; border-bottom:1px solid #f0f2f7; background:linear-gradient(to bottom,#fff,#fafbfd); color:#1e293b; font-size:12px; }.od-panel-head a,.od-panel-head span{color:#3a56d4;font-size:10px;text-decoration:none} .od-table-wrap { overflow-x:auto; }.od-table{width:100%;min-width:640px;border-collapse:collapse;table-layout:fixed;font-size:11px}.od-table th{padding:9px 9px;border-bottom:1px solid #e5e9f0;background:#fafbfd;color:#64748b;text-align:left;font-weight:600;white-space:nowrap}.od-table td{padding:11px 9px;border-bottom:1px solid #f0f2f7;vertical-align:middle}.od-table tbody tr:hover td{background:#fafbff}.od-table th:nth-child(1){width:200px}.od-table th:nth-child(2){width:90px}.od-table th:nth-child(3){width:150px}.od-table th:nth-child(4){width:80px}.od-table th:nth-child(5){width:90px} .od-side-stack{display:grid;gap:12px}.od-stage-list{padding:8px 14px 12px}.od-stage-row{display:grid;grid-template-columns:72px 1fr 28px;align-items:center;gap:8px;padding:7px 0;color:#475569;font-size:11px}.od-stage-track{height:6px;border-radius:99px;background:#edf0f5;overflow:hidden}.od-stage-track span{display:block;height:100%;border-radius:inherit;background:#4f6ef7}.od-stage-row b{text-align:right;font-size:11px} .od-risk-list{padding:6px 14px}.od-risk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #f0f2f7;font-size:11px}.od-risk-row:last-child{border:0}.od-risk-row b{display:block;color:#334155}.od-risk-row span{color:#94a3b8;font-size:10px}.od-risk-amount{color:#dc2626!important;font-size:12px!important;font-weight:600}.od-rank-amount{color:#6d28d9!important;font-size:12px!important;font-weight:600}.od-side-empty{padding:22px 4px;text-align:center;color:#94a3b8;font-size:11px} .od-history-note{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid #ddd6fe;border-radius:10px;background:#faf5ff;color:#6d28d9;font-size:11px}.od-history-note span{color:#8b5cf6} /* Rich new-order page */ .oc-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(310px,.72fr); gap:12px; align-items:start; }.oc-stack{display:grid;gap:12px}.oc-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 15px;border-bottom:1px solid #f0f2f7;background:linear-gradient(to bottom,#fafbfd,#f7f8fc);color:#1e293b;font-size:12px}.oc-panel-head>span{color:#94a3b8;font-size:10px}.oc-panel-head b,.oc-fields b{color:#ef4444}.oc-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;padding:14px 15px 15px}.oc-fields label>span,.oc-label,.oc-rules label>span{display:block;margin-bottom:5px;color:#475569;font-size:11px}.oc-fields input,.oc-fields select,.oc-rules select{width:100%;min-width:0;height:35px;border:1px solid #d8dee9;border-radius:6px;padding:0 9px;background:#fff;color:#1e293b;font-size:12px}.oc-fields input:focus,.oc-fields select:focus,.oc-rules select:focus{outline:0;border-color:#4f6ef7;box-shadow:0 0 0 3px rgba(79,110,247,.14)}.oc-fields .span-2{grid-column:span 2}.oc-field-hint{display:block;margin-top:4px;color:#94a3b8;font-size:9px;line-height:1.35} .oc-segments{display:flex;flex-wrap:wrap;gap:6px}.oc-segments label{position:relative}.oc-segments input{position:absolute;opacity:0;pointer-events:none}.oc-segments label>span{display:block;margin:0;padding:6px 9px;border:1px solid #d8dee9;border-radius:6px;background:#fff;color:#64748b;cursor:pointer;font-size:11px}.oc-segments input:checked+span{border-color:#4f6ef7;background:#eef1fe;color:#3a56d4;box-shadow:0 0 0 1px rgba(79,110,247,.1)} .oc-link{border:0;background:transparent;color:#4f6ef7;cursor:pointer;font-size:11px}.oc-items-head{align-items:center;position:relative} /* 「✨ AI翻译」按钮：与「英文开票品名／规格」标题同行、紧跟其后（2026-09-13 大哥：同行不换行，空间不够缩字号） */ .oc-translate-th{display:inline-block;margin-left:3px;vertical-align:middle;border:0;border-radius:4px;padding:1px 4px;background:#eef1fe;color:#3a56d4;cursor:pointer;font-size:8px;line-height:1.5;white-space:nowrap}.oc-translate-th:hover{background:#e0e7ff}.oc-translate-th:disabled{opacity:.6;cursor:wait}.oc-items-tools{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}.oc-tool-btn{border:0;border-radius:6px;padding:3px 7px;background:#f1f5f9;color:#334155;cursor:pointer;font-size:10px;white-space:nowrap;transition:background .15s}.oc-tool-btn:hover{background:#e2e8f0}.oc-tool-btn strong{color:#4f6ef7}.oc-tool-link{color:#4f6ef7;text-decoration:none;font-size:10px;white-space:nowrap;padding:3px 4px}.oc-tool-link:hover{text-decoration:underline}.oc-items-wrap{overflow-x:auto}.oc-items{width:100%;min-width:0;border-collapse:collapse;table-layout:fixed;font-size:10px}.oc-items th{padding:8px 6px;border-bottom:1px solid #e5e9f0;background:#fafbfd;color:#64748b;text-align:left;font-weight:600;white-space:nowrap}.oc-items td{padding:7px 6px;border-bottom:1px solid #f0f2f7;vertical-align:top}.oc-items th:nth-child(1){width:28px}.oc-items th:nth-child(2){width:94px}.oc-items th:nth-child(3){width:170px}.oc-items th:nth-child(4){width:170px}.oc-items th:nth-child(5){width:170px;font-size:9px}.oc-items th:nth-child(6){width:54px}.oc-items th:nth-child(7){width:90px}.oc-items th:nth-child(8){width:95px}.oc-items th:nth-child(9){width:92px}.oc-items th:nth-child(10){width:92px}.oc-items th:nth-child(11){width:90px}.oc-items th:nth-child(12){width:88px}.oc-items th:nth-child(13){width:68px}.oc-items th:nth-child(14){width:68px}.oc-items th:nth-child(15){width:31px} /* 品目表「删除」列：按钮居中、去左右 padding —— 27px 按钮塞进 30px 列会溢出撑出横向滚动（2026-09-12 修 3px 微滚） */ .oc-items td:last-child{padding-left:0;padding-right:0;text-align:center} .oc-cell,.oc-cell-stack input,.oc-cell-select{width:100%;min-width:0;height:31px;border:1px solid #e1e6ef;border-radius:5px;padding:0 7px;background:#fff;color:#334155;font-size:10px}.oc-cell-stack{display:grid;gap:4px}.oc-delete{width:27px;height:29px;border:0;border-radius:5px;background:transparent;color:#94a3b8;cursor:pointer}.oc-delete:hover{background:#fef2f2;color:#dc2626}.oc-item-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:#fafbfd;color:#64748b;font-size:11px}.oc-item-foot strong{color:#3a56d4;font-size:12px}.oc-cur-head{display:flex;flex-direction:row;gap:4px;align-items:center;white-space:nowrap}.oc-cur-toggle{display:flex;gap:2px}.oc-cur-toggle button{border:1px solid #d8dee9;border-radius:4px;background:#fff;color:#64748b;cursor:pointer;font-size:9px;line-height:1;padding:2px 4px;min-width:22px}.oc-cur-toggle button:hover{background:#f1f5f9}.oc-cur-toggle button.active{border-color:#4f6ef7;background:#eef1fe;color:#3a56d4;font-weight:700}.oc-items .item-number{font-size:9px;padding:0 5px} /* 品目表长文本单元格：改用 textarea 自动增高（2026-09-21 大哥：客户料号/客户原文品名规格显示不全） */ .oc-items td textarea.oc-cell{padding:4px 7px;min-height:31px;height:auto} .oc-side-body{padding:13px 15px 15px}.oc-drop{display:flex;align-items:center;gap:10px;min-height:76px;padding:11px;border:1px dashed #bfc9d9;border-radius:8px;background:#f8f9fc;color:#64748b;cursor:pointer}.oc-drop-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:#eef1fe;color:#4f6ef7;font-size:16px}.oc-drop b{display:block;color:#334155;font-size:11px}.oc-drop small{display:block;margin-top:3px;color:#94a3b8;font-size:10px}.oc-parse{width:100%;margin-top:9px}.oc-file-result{margin-top:8px;padding:8px 9px;border-radius:6px;background:#f1f5f9;color:#64748b;font-size:10px;overflow-wrap:anywhere}.oc-file-result.ready{background:#eef1fe;color:#3a56d4}.oc-file-result.warn{background:#fef3c7;color:#92400e} .oc-rules{display:grid;gap:11px}.oc-fixed-check{display:flex;align-items:flex-start;gap:7px;color:#475569;font-size:10px}.oc-fixed-check input{margin-top:2px;accent-color:#4f6ef7}.oc-terms{margin-top:10px;padding:9px;border-radius:6px;background:#f8fafc;color:#64748b;font-size:11px}.oc-milestones{display:grid;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid #f0f2f7}.oc-milestone-row{display:grid;grid-template-columns:52px 1fr 94px 74px 26px;gap:6px;align-items:center}.oc-milestone-row input{width:100%;min-width:0;height:29px;border:1px solid #d8dee9;border-radius:5px;padding:0 6px;font-size:10px}.oc-milestone-amount{text-align:right;color:#64748b;font-size:10px}.oc-alert{margin-top:10px;padding:8px 9px;border:1px solid #fde7b0;border-radius:6px;background:#fffbeb;color:#92400e;font-size:10px}.oc-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 14px;border:1px solid #edf0f5;border-radius:12px;background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.055);color:#64748b;font-size:11px}.oc-actions>div:last-child{display:flex;gap:7px}.oc-actions strong{color:#1e293b}.oc-paste-dialog{width:min(780px,94vw)}.oc-paste-text{width:100%;min-height:260px;border:1px solid #d8dee9;border-radius:7px;padding:10px;font:12px/1.6 Consolas,monospace;resize:vertical} .order-detail-dialog{width:min(1320px,96vw)}.order-detail-title{font-size:18px;font-weight:700}.order-detail-sub{margin-top:2px;font-size:11px;opacity:.8}.order-dialog-close{border:0;background:none;color:#fff;font-size:26px;cursor:pointer}.order-detail-rules{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}.order-history-note{margin-top:12px;color:#64748b;font-size:11px}.order-detail-milestones{margin-top:14px;padding:12px;border:1px solid #e5e9f0;border-radius:8px;background:#fafbfd}.order-detail-milestones h3{margin:0 0 8px;font-size:12px}.order-detail-milestones-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.order-detail-milestone{padding:8px;border-radius:6px;background:#fff;color:#475569;font-size:11px} .oc-client-search{position:relative}.oc-client-dropdown{position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow:auto;border:1px solid #d8dee9;border-radius:8px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.16)}.oc-client-dropdown[hidden]{display:none}.oc-client-dropdown button{display:block;width:100%;padding:9px 11px;border:0;border-bottom:1px solid #f0f2f7;background:#fff;text-align:left;cursor:pointer}.oc-client-dropdown button:last-child{border-bottom:0}.oc-client-dropdown button:hover,.oc-client-dropdown button:focus{outline:0;background:#f4f6ff}.oc-client-dropdown strong{display:block;color:#1e293b;font-size:11px;font-weight:600}.oc-client-dropdown small{display:block;margin-top:2px;color:#94a3b8;font-size:9px}.oc-client-empty{padding:14px;color:#94a3b8;font-size:10px;text-align:center}.oc-fields input.recognized{border-color:#7c9bff;background:#f7f9ff;box-shadow:0 0 0 2px rgba(79,110,247,.09)} .oc-drop.dragging{border-color:#4f6ef7;background:#eef2ff;box-shadow:0 0 0 3px rgba(79,110,247,.12)}.oc-drop:focus{outline:0;border-color:#4f6ef7;box-shadow:0 0 0 3px rgba(79,110,247,.12)}.oc-recognition{margin-top:9px;padding:10px;border:1px solid #dce4ff;border-radius:8px;background:#f8faff}.oc-recognition[hidden]{display:none}.oc-recognition-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px;border-bottom:1px solid #e6ebfa;color:#1e293b;font-size:11px}.oc-recognition-head span{padding:3px 6px;border-radius:999px;font-size:9px}.oc-recognition-head span.high{background:#dcfce7;color:#166534}.oc-recognition-head span.review{background:#fef3c7;color:#92400e}.oc-recognition dl{display:grid;gap:0;margin:7px 0 0}.oc-recognition dl>div{display:grid;grid-template-columns:70px 1fr;gap:7px;padding:4px 0;border-bottom:1px dashed #e8ecf5}.oc-recognition dt{color:#64748b;font-size:9px}.oc-recognition dd{margin:0;color:#1e293b;font-size:10px;overflow-wrap:anywhere}.oc-recognition-warnings{margin-top:8px;padding:8px;border:1px solid #fde7b0;border-radius:6px;background:#fffbeb;color:#92400e;font-size:9px;line-height:1.55}.oc-recognition-warnings ul{margin:4px 0 0;padding-left:16px}.oc-recognition-actions{display:flex;gap:12px;margin-top:8px}.oc-recognition-actions a{color:#4f6ef7;font-size:10px;text-decoration:none}.oc-cell-stack input.needs-review,.oc-cell-stack textarea.needs-review{border-color:#f59e0b;background:#fffbeb}.oc-cell-stack input.needs-review:focus,.oc-cell-stack textarea.needs-review:focus{outline:0;box-shadow:0 0 0 2px rgba(245,158,11,.14)}.oc-english-review{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:3px 5px;border-radius:5px;background:#fff7d6;color:#92400e;font-size:8px}.oc-english-review[hidden]{display:none}.oc-confirm-english{border:0;border-radius:4px;padding:3px 6px;background:#f59e0b;color:#fff;font-size:8px;white-space:nowrap;cursor:pointer}.oc-translation-action{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed #f2d48a}.oc-translation-action div{display:grid;gap:2px}.oc-translation-action span{color:#a16207}.oc-translation-action button{border:0;border-radius:6px;padding:6px 9px;background:#4f6ef7;color:#fff;font-size:9px;font-weight:600;cursor:pointer;white-space:nowrap}.oc-translation-action button:disabled{opacity:.6;cursor:wait}.oc-translation-status{margin-top:6px;color:#475569;line-height:1.5} /* 新增订单页——右侧面板高度压缩（PDF区/执行开票规则/收款条件） */ .oc-side-body{padding:9px 15px 11px} .oc-drop{min-height:58px;padding:7px 10px;gap:9px;border-color:#a9b8d0} .oc-drop-icon{width:36px;height:36px;border-radius:8px;font-size:15px} .oc-drop b{font-size:11px} .oc-drop small{margin-top:3px;font-size:9.5px} .oc-rules{gap:6px} .oc-rules select{height:30px} .oc-rules label>span{margin-bottom:3px} .oc-fixed-check{font-size:10px} .oc-terms{margin-top:6px;padding:6px 9px} .oc-milestones{margin-top:6px;padding-top:6px;gap:6px} .oc-alert{margin-top:7px;padding:6px 8px} /* 修复：.oc-milestones{display:grid} 会覆盖 HTML hidden 属性，导致「普通账期/分阶段收款」切换时分阶段区域不隐藏。加 [hidden] 显式声明，特异性高于 display:grid。 */ .oc-milestones[hidden]{display:none} /* 修复右侧「4.收款条件」分阶段行：①百分比 input[type=number] 自带上下箭头遮挡数字→经 .oc-milestone-pct 容器包裹 + %后缀，隐藏 spinner 并在右侧显示 %；②日期放到阶段名称后面同一行(不要两行)：一行排 比例%|阶段名|日期|删除，金额放第二行独占。 */ .oc-milestone-row{ display:grid; grid-template-columns:46px minmax(0,1fr) 92px 24px; grid-template-areas:"pct label due del" "amt amt amt amt"; gap:4px 6px; align-items:center; } .oc-milestone-pct{grid-area:pct;position:relative;display:flex;align-items:center;min-width:0} .oc-milestone-pct input[data-key="percent"]{flex:1 1 0;min-width:0;height:29px;text-align:center;-webkit-appearance:none;-moz-appearance:textfield;appearance:textfield;padding:0 16px 0 2px} .oc-milestone-pct input[data-key="percent"]::-webkit-inner-spin-button, .oc-milestone-pct input[data-key="percent"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} /* 全局：数字输入框隐藏上下增减箭头（number spinner），避免遮挡内容、易误操作 */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} input[type="number"]{-moz-appearance:textfield;appearance:textfield} .oc-pct-sign{position:absolute;right:6px;top:50%;transform:translateY(-50%);color:#64748b;font-size:10px;pointer-events:none} .oc-milestone-row input[data-key="label"]{grid-area:label;min-width:0} .oc-milestone-row input[data-key="due_date"]{grid-area:due;min-width:0;-webkit-appearance:none;-moz-appearance:textfield;appearance:textfield;padding:0 2px;font-size:9.5px} .oc-milestone-row .oc-milestone-amount{grid-area:amt;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#64748b;font-size:10px} .oc-milestone-row .oc-delete{grid-area:del;width:24px;height:29px} /* 新增订单页——页面整体紧凑：1基本信息压缩、右列收窄、品目表适应不横滚（不动菜单与布局模型） */ .oc-fields{padding:8px 12px 8px;row-gap:6px} .oc-items{width:100%;min-width:1400px} @media(min-width:1281px){ .oc-page .oc-grid{grid-template-columns:minmax(0,1fr) 280px} } /* 2026-09-26 大哥确认：≤1280 时订单顶栏改两行 —— 左侧组（新增订单/视图下拉/待送货工作台）一行， 筛选条独占第二行满宽。筛选条自身仍 flex-nowrap 单行排列（遵守「筛选控件不得换行/竖排」红线）。 改前实测：1152 视口下「📥 导出Excel」越界 119px、订单日期(止)越界 22px 且被 .om-topbar{overflow:hidden} 静默裁掉。 */ @media(max-width:1280px){.od-kpis{grid-template-columns:repeat(3,1fr)}.oc-grid{grid-template-columns:1fr}.oc-right-stack{grid-template-columns:repeat(3,minmax(0,1fr))}.om-filterbar{grid-template-columns:repeat(4,minmax(120px,1fr))}.om-filterbar #order-search{grid-column:span 4} .om-topbar{flex-wrap:wrap;row-gap:4px} .om-topbar .om-filterbar{flex:1 1 100%}} @media(max-width:1000px){.od-layout{grid-template-columns:1fr}.od-side-stack{grid-template-columns:repeat(2,minmax(0,1fr))}.od-history-note{grid-column:span 2}.oc-right-stack{grid-template-columns:1fr}.oc-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.om-filterbar{grid-template-columns:1fr 1fr}.om-filterbar #order-search{grid-column:span 2}} @media(max-width:640px){.om-heading-row,.od-heading,.oc-heading{flex-direction:column}.od-rule,.oc-step{white-space:normal}.od-kpis{grid-template-columns:repeat(2,1fr)}.od-side-stack{grid-template-columns:1fr}.od-history-note{grid-column:auto;flex-direction:column}.oc-fields{grid-template-columns:1fr}.oc-fields .span-2{grid-column:auto}.oc-actions{align-items:stretch;flex-direction:column}.oc-actions>div:last-child{width:100%}.oc-actions .btn{flex:1}.om-filterbar{grid-template-columns:1fr}.om-filterbar #order-search{grid-column:auto}.order-detail-milestones-grid{grid-template-columns:1fr 1fr}} /* ── 旋转动画 ─────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } /* ── 骨架屏动画 ─────────────────────────────── */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton-pulse { background: linear-gradient(90deg, #f0f2f7 25%, #e8eaf0 50%, #f0f2f7 75%); background-size: 800px 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } /* ── 淡入动画 ─────────────────────────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInRight { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } /* ── 重置 & 基础 ──────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── 顶栏 ─────────────────────────────────────── */ .topbar { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #fff; padding: 0 28px; height: 56px; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 4px 20px rgba(0,0,0,.15); } .topbar-inner { max-width: 1400px; margin: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 12px; } .logo-icon { font-size: 24px; } .logo-title { font-size: 16px; font-weight: 700; letter-spacing: .3px; } .logo-sub { font-size: 11px; color: #7d8ba6; margin-top: 1px; } .topbar-right { display: flex; align-items: center; gap: 10px; } .badge-date, .badge-no { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-sm); padding: 4px 12px; font-size: 12px; color: #94a3b8; backdrop-filter: blur(4px); transition: all var(--duration) var(--ease); } .badge-no { color: var(--primary-light); font-weight: 600; border-color: rgba(79,110,247,.15); background: rgba(79,110,247,.1); } /* ── 仅用于「开送货单 / 送货管理」页顶栏（独特类名，不影响其它页面）── */ .dn-sep { font-size: 12px; color: rgba(255,255,255,.25); margin: 0 2px; user-select: none; } .dn-lang-switcher { display: inline-flex; gap: 2px; align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 2px 3px; font-size: 11px; } .dn-lang-switcher .lang-btn { padding: 2px 6px; border: none; background: none; cursor: pointer; border-radius: 4px; font-size: 11px; color: rgba(255,255,255,.75); transition: all var(--duration) var(--ease); } .dn-lang-switcher .lang-btn:hover { color: #fff; background: rgba(255,255,255,.08); } .dn-lang-switcher .lang-btn.active { background: var(--primary) !important; color: #fff !important; font-weight: 600; } /* ── 布局 ─────────────────────────────────────── */ .layout { max-width: 1400px; margin: 20px auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 320px; gap: 20px; animation: fadeIn var(--duration-slow) var(--ease); } @media(max-width:900px){ .layout{ grid-template-columns: 1fr; } } /* ── 卡片 ─────────────────────────────────────── */ .card { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); overflow: hidden; transition: box-shadow var(--duration) var(--ease); } /* Audit log: preserve complete audit evidence instead of truncating it. */ .audit-log-card { overflow: visible; } .audit-log-table-wrap { overflow-x: auto; overflow-y: visible; } .audit-log-table { width: 100%; min-width: 1120px; table-layout: fixed; } .audit-log-table th, .audit-log-table td { vertical-align: top; } /* 表头允许换行：中文/英文/泰文表头长度差异极大，固定列宽 + nowrap 会把表头挤到相邻列（重叠）；换行确保永不重叠、永不裁字 */ /* ⚠️ 2026-10-06 修：vertical-align 必须与数据格一致（top）——表头长短不一（泰文常换 2 行）时， 若表头 middle 居中，各列表头文字的起始线会高低不齐，与整列内容明显错位 */ /* ⚠️ 2026-10-06 修②：text-align 必须与数据格一致（left）—— 浏览器默认居中，会让表头文字浮在 列中间（最宽的「操作内容」列实测偏 300px），且拖动列宽时表头跟着左右移动。改为左对齐后， 表头文字与下方数据文字起始位置完全重合，且不随列宽变化而移动 */ .audit-log-table thead th { white-space: normal; overflow-wrap: anywhere; word-break: break-word; position: relative; vertical-align: top; text-align: left; } /* 列宽拖拽手柄（范式 B：table-layout:fixed + colgroup，列宽权威在 ，写 th/td 宽度无效） */ .audit-log-table .col-resize-handle { position: absolute; right: 0; top: 0; width: 7px; height: 100%; cursor: col-resize; user-select: none; z-index: 3; } .audit-log-table .col-resize-handle:hover, .audit-log-table .col-resize-handle.active { background: var(--primary); opacity: .35; } .audit-log-table .audit-operator-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .audit-log-table .audit-time-cell, .audit-log-table .audit-ip-cell { white-space: nowrap; font-size: 12px; overflow: hidden; text-overflow: ellipsis; } .audit-log-table .audit-module-cell, .audit-log-table .audit-action-cell { white-space: normal; overflow-wrap: anywhere; } .audit-log-table .audit-detail-cell { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.55; color: var(--text); } .audit-col-operator { width: 130px; } .audit-col-time { width: 150px; } .audit-col-module { width: 110px; } .audit-col-action { width: 142px; } .audit-col-detail { width: auto; } .audit-col-ip { width: 130px; } /* ══ 🩺 实时请求监控 · 两张表（2026-10-10 大哥反馈「表头全挤在一起」）══════════ 根因：模板里写的是 ，而全站 CSS 从未定义过 .table ⇒ 浏览器默认渲染：th/td padding=0、
默认居中、无边框线、 且 table-layout:auto 时宽度只按内容撑（实测仅 489px 挤在左侧 1390px 容器里）。 修法：补一套与 .audit-log-table 同源的表格骨架（不改 .table 全局，避免波及他页）。 */ .reqmon-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; } .reqmon-table thead th { padding: 9px 14px; background: #fafbfd; color: #64748b; font-weight: 600; text-align: left; white-space: nowrap; border-bottom: 1px solid #e5e9f0; } /* 表头与数据格必须同对齐同基线（同 .audit-log-table 的教训：th 默认居中会让文字浮在列中间） */ .reqmon-table tbody td { padding: 9px 14px; border-bottom: 1px solid #f0f2f7; vertical-align: middle; color: #334155; text-align: left; } .reqmon-table tbody tr:hover td { background: #fafbff; } .reqmon-table tbody tr:last-child td { border-bottom: none; } /* 数字/时长列右对齐 + 等宽数字（多行数字对齐，读数更快） */ .reqmon-table th.reqmon-num, .reqmon-table td.reqmon-num { text-align: right; font-variant-numeric: tabular-nums; } /* 长文本列：单行显示 + 省略号（悬停 title 可看全文）；屏幕表格，不涉及打印红线 */ .reqmon-table td.reqmon-ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reqmon-table td.reqmon-nowrap { white-space: nowrap; } /* 列宽分配（table-layout:fixed ⇒ 未指定的列平分剩余宽度） */ #reqmon-running-table th:nth-child(1) { width: 112px; } /* 状态 */ #reqmon-running-table th:nth-child(3) { width: 110px; } /* 操作人 */ #reqmon-running-table th:nth-child(4) { width: 104px; } /* 耗时 */ #reqmon-running-table th:nth-child(6) { width: 136px; } /* 来源IP */ #reqmon-running-table th:nth-child(7) { width: 96px; } /* 操作 */ #reqmon-slow-table th:nth-child(1) { width: 136px; } /* 结束时间 */ #reqmon-slow-table th:nth-child(3) { width: 110px; } /* 操作人 */ #reqmon-slow-table th:nth-child(4) { width: 104px; } /* 耗时 */ #reqmon-slow-table th:nth-child(5) { width: 92px; } /* 结果 */ #reqmon-slow-table th:nth-child(6) { width: 84px; } /* 写库 */ #reqmon-slow-table th:nth-child(7) { width: 112px; } /* 是否被终止 */ .card:hover { box-shadow: var(--shadow); } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--border-light); font-weight: 600; font-size: 14px; background: linear-gradient(to bottom, #fafbfd, #f7f8fc); } .form-card { padding: 0; } .form-card form { padding: 6px 22px 56px; } .form-card form > .section-title:first-of-type { margin-top: 0; } /* 开票表单卡首屏留白：消除 header 与「基本信息」之间多余空白，仅作用于本卡首分区 */ /* ── 右侧列容器 ── */ .right-column { display: flex; flex-direction: column; gap: 16px; align-self: stretch; } .history-card { overflow-y: auto; flex: 1; min-height: 0; } .history-card::-webkit-scrollbar { width: 4px; } .history-card::-webkit-scrollbar-track { background: transparent; } .history-card::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; } /* ── 草稿箱 ─────────────────────────────────── */ .draft-section { flex-shrink: 0; } .draft-section #draft-panel { padding: 4px 16px 10px; overflow-y: auto; max-height: 240px; } .draft-section #draft-panel::-webkit-scrollbar { width: 3px; } .draft-section #draft-panel::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; } /* ── 发票草稿箱折叠（默认收起，点标题展开/收起；与送货单 dn- 命名隔离）── */ .inv-draft-card .card-header { cursor: pointer; user-select: none; } .inv-draft-card .card-header:hover #inv-draft-arrow { color: #334155; } #inv-draft-arrow { display: inline-block; width: 12px; text-align: center; font-size: 11px; color: #94a3b8; flex-shrink: 0; line-height: 1; transition: color .15s; } .inv-draft-card.collapsed #inv-draft-body { display: none; } .inv-draft-rule { font-size: 10px; color: #9ca3af; padding: 4px 16px 2px; line-height: 1.4; } /* ── 表单元素 ─────────────────────────────────── */ .section-title { font-weight: 600; color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; margin: 18px 0 10px; display: flex; align-items: center; gap: 10px; } .ci-tabs { display:flex; gap:2px; padding:12px 20px 0; border-bottom:1px solid #e5e9f0; flex-wrap:wrap; background:#fafbfd; border-radius:12px 12px 0 0; } .ci-tab { border:0; background:transparent; padding:10px 16px; cursor:pointer; font-size:13px; color:#64748b; border-bottom:2px solid transparent; white-space:nowrap; } .ci-tab:hover { color:#334155; } .ci-tab.active { color:#4f6ef7; border-bottom-color:#4f6ef7; font-weight:600; } .ci-panel[hidden] { display:none; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border-light); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; } .span2 { grid-column: span 2; } .form-group { display: flex; flex-direction: column; gap: 5px; } .form-group label { font-size: 11px; font-weight: 600; color: var(--text-secondary); letter-spacing: .3px; } .req { color: var(--danger); } input[type="text"], input[type="number"], input[type="date"], select { box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; color: var(--text); background: #fff; width: 100%; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background var(--duration) var(--ease); } input:hover { border-color: #c7cdd8; } input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); background: #fff; } input::placeholder { color: var(--text-muted); } /* ── 类型标签 ─────────────────────────────────── */ .type-tabs { display: flex; gap: 6px; } .tab { border: 1px solid var(--border); background: var(--hover-bg); border-radius: 20px; padding: 5px 14px; font-size: 12px; cursor: pointer; transition: all var(--duration) var(--ease); font-weight: 500; } .tab:hover { background: var(--primary-bg); border-color: var(--primary-light); color: var(--primary); } .tab.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 8px rgba(79,110,247,.25); } .tab.active[data-type="cn"] { background: var(--danger); border-color: var(--danger); box-shadow: 0 2px 8px rgba(239,68,68,.25); } /* IN（商业请款单）标签：低调浅色（雾青灰）｜2026-10-02 大哥定案 */ .tab[data-type="in"] { color: #6B8A93; } .tab:hover[data-type="in"] { background: #EFF5F6; border-color: #BCD2D8; color: #5B7C86; } .tab.active[data-type="in"] { background: #E7F0F2; color: #4F7280; border-color: #A8C4CB; box-shadow: none; } /* ── 客户下拉 ─────────────────────────────────── */ .select-wrap { position: relative; } .dropdown { position: absolute; z-index: 200; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); max-height: 260px; overflow-y: auto; animation: fadeInUp .15s var(--ease); } .dropdown-item { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border-light); line-height: 1.4; transition: background var(--duration) var(--ease); } .dropdown-item:last-child { border-bottom: none; } .dropdown-item:hover { background: var(--primary-bg); } .dropdown-item .d-main { font-weight: 600; font-size: 13px; } .dropdown-item .d-sub { font-size: 11px; color: var(--text-secondary); } .hidden { display: none !important; } /* ══ 弹窗覆盖层（用于 sbModal / payModal / userModal / roleModal / restoreModal / edit-pay-modal） ══ */ /* 基础隐藏：不依赖 :has()，兼容 IE/旧Edge/系统自带浏览器 */ .modal { display: none !important; } /* 显示状态：不依赖 :has()，所有浏览器通用 */ /* 2026-10-01 大哥要求：弹窗出现时不得模糊/重度压暗背后数据（需核对背后数据）→ 去掉毛玻璃、遮罩减淡 */ .modal.show { display: flex !important; position: fixed; inset: 0; background: rgba(15,23,42,.3); z-index: 1000; overflow-y: auto; padding: 20px; align-items: center; justify-content: center; animation: fadeIn .15s var(--ease); } /* :has() 增强样式（现代浏览器补充） */ .modal:has(> .modal-content) { position: fixed; inset: 0; background: rgba(15,23,42,.3); z-index: 1000; overflow-y: auto; padding: 20px; } .modal:has(> .modal-content).show { display: flex !important; align-items: center; justify-content: center; animation: fadeIn .15s var(--ease); } .modal:has(> .modal-content) .modal-content { background: #fff; border-radius: var(--radius-xl); max-width: 520px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.2); margin: auto; animation: fadeInUp .2s var(--ease); /* 弹窗不超屏：最大高度 90vh，内部滚动；标题/按钮 sticky 固定 */ max-height: 90vh; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border-light); background: #fafbfc; position: sticky; top: 0; z-index: 20; flex-shrink: 0; } .modal-title { font-size: 16px; font-weight: 600; color: var(--text); } .modal-close { font-size: 22px; cursor: pointer; color: var(--text-muted); line-height: 1; padding: 4px; transition: color .15s; background: none; border: none; } .modal-close:hover { color: var(--text); } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border-light); background: #fafbfc; position: sticky; bottom: 0; z-index: 20; flex-shrink: 0; } /* ── 品目表 ───────────────────────────────────── */ .items-header, .item-row { display: grid; grid-template-columns: 36px 100px 100px 1fr 70px 60px 110px 100px 36px 30px; gap: 6px; align-items: center; } .item-row { align-items: start; } .item-row .col-idx, .item-row .f-qty, .item-row .f-unit, .item-row .f-price, .item-row .col-amt, .item-row .del-btn { align-self: center; } .item-row .col-idx { font-size: 12px; font-weight: 500; color: var(--text-muted); text-align: center; user-select: none; } .items-header { padding: 8px 6px; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); background: #fafbfd; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .item-row { padding: 7px 6px; border-bottom: 1px solid var(--border-light); transition: background var(--duration) var(--ease); animation: fadeIn .2s var(--ease); } .item-row:hover { background: #f8f9fd; } .item-row input { padding: 6px 8px; font-size: 13px; border-radius: 5px; } /* ── 品目行所有textarea自动增高 ── */ .item-row .f-po, .item-row .f-code, .item-row .f-desc { padding: 6px 8px; font-size: 13px; border-radius: 5px; line-height: 1.4; resize: none; overflow: hidden; min-height: 34px; max-height: 200px; field-sizing: content; } .item-row .col-amt { font-weight: 600; color: var(--primary); text-align: right; padding-right: 4px; font-size: 13px; font-variant-numeric: tabular-nums; } /* ── 导入 Excel 开票 · 送货行匹配角标（2026-10-07 方案 A · 第 10 列）──────── 唯一命中 ✓ 自动挂链 / 歧义「选」强制人工选 / 可开量不足 ! / 未命中 — 角标是按钮，点击可查看与改选候选送货行；hidden 用 visibility 占位保持列对齐。 */ .item-row .match-badge, .items-header .col-match { align-self: center; justify-self: center; } .match-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; transition: all var(--duration) var(--ease); } .match-badge.hidden { visibility: hidden; pointer-events: none; } .match-badge.mb-ok { border-color: #86efac; background: #f0fdf4; color: #15803d; } .match-badge.mb-amb { border-color: #fcd34d; background: #fffbeb; color: #b45309; } .match-badge.mb-short { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; } .match-badge.mb-none { border-color: #e2e8f0; background: #f8fafc; color: #94a3b8; } .match-badge:hover { filter: brightness(.95); } .match-badge.mb-attn { box-shadow: 0 0 0 2px rgba(245, 158, 11, .28); } /* 匹配结果条（品目表上方，单行不换行） */ .imatch-bar { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; overflow-x: auto; margin: 0 0 8px; padding: 8px 12px; border: 1px solid #e6ebfa; border-radius: 8px; background: #f8faff; font-size: 12px; color: #475569; } .imatch-bar[hidden] { display: none; } .imatch-bar .im-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .imatch-bar .im-chip b { font-weight: 700; } .imatch-bar .im-ok b { color: #15803d; } .imatch-bar .im-amb b { color: #b45309; } .imatch-bar .im-short b{ color: #b91c1c; } .imatch-bar .im-none b { color: #64748b; } .imatch-bar .im-go { margin-left: auto; padding: 4px 10px; border: 1px solid #c7d2fe; border-radius: 6px; background: #fff; color: #4f6ef7; font-size: 12px; cursor: pointer; white-space: nowrap; } .imatch-bar .im-go:hover { background: #eef2ff; } /* 候选送货行选择弹窗 */ .imatch-pick-table { width: 100%; border-collapse: collapse; font-size: 12px; } .imatch-pick-table th { padding: 7px 8px; border-bottom: 1px solid #e5e9f0; background: #fafbfd; color: #64748b; font-weight: 600; text-align: left; white-space: nowrap; } .imatch-pick-table td { padding: 7px 8px; border-bottom: 1px solid #f0f2f7; color: #1e293b; vertical-align: middle; } .imatch-pick-table tr.picked { background: #f0fdf4; } .imatch-pick-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .del-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: all var(--duration) var(--ease); text-align: center; border-radius: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .del-btn:hover { color: var(--danger); background: var(--danger-bg); } [class^="col-"] { min-width: 0; } /* ── 长文本自动增高输入框（2026-09-21 大哥：编辑页长字段显示不全治理）────── 痛点：长料号/长品名/长规格/长PO 在单行 input 里只能靠光标左右滚动，输入时看不出是否输错。 做法：改