/* ============================================================ 供销链管理系统 · 设计规范 —— 复刻云擎系统设计令牌（YunQing Design Tokens） —— 字体：微软雅黑 light/regular/bold + Arial —— 主色：4F46E5 / 0F172A（品牌靛蓝 · 导航 · 强文字） —— 语义色：8B5CF6 / 10B981 / 0EA5E9 / EF4444 / F59E0B ============================================================ */ :root { --font-base: "Microsoft YaHei", "微软雅黑", "HarmonyOS Sans SC", "PingFang SC", Arial, sans-serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fs-24: 24px; --fs-18: 18px; --fs-16: 16px; --fs-14: 14px; --fs-13: 13px; --fs-12: 12px; --primary: #4F46E5; /* 「深底上的文字/链接色」：浅色主题下 = 主色；暗色主题下要换成浅靛蓝，否则 #4F46E5 在深底上几乎看不清 */ --link: #4F46E5; --primary-dark: #0F172A; --primary-soft: rgba(79,70,229,.10); --primary-soft-2: rgba(79,70,229,.16); --blue: #4F46E5; --c-accent: #8B5CF6; --c-success: #10B981; /* **按钮绿**（用户 2026-09-19 定 #13ce66；2026-09-22 收成一个令牌）—— 新增 / 转入销售订单 / 创建 / 添加明细行 全部走它 ⇒ 不会再出现"两个不同的绿" */ --c-green: #13ce66; --c-info: #0EA5E9; --c-gray: #94A3B8; --c-danger: #EF4444; --c-warning: #F59E0B; --danger: #EF4444; --danger-soft: rgba(239,68,68,.10); --bg: #F8FAFC; --bg-list: #F1F5F9; --card: #FFFFFF; --card-2: #F1F5F9; --text: #1E293B; /* 列表正文文字色（用户 2026-09-21）： · 亮色主题 = **纯黑 #000000**（用户 2026-09-21 上午定的列表规范） · 暗色主题 = 主题浅字（见 [data-theme="dark"]）—— 用户 2026-09-21 12:2x：「暗色模式下，**不允许出现黑色字或者黑色无背景的字**」⇒ 列表里的黑字必须走这个变量，**不许再硬编码 #000000** */ --list-text: #000000; /* 「次要深灰」文字（明细表头 / 单据动态标签 / 灰胶囊 …）—— 亮色 = #494949；**暗色 = --muted 浅灰**（用户 2026-09-21：「暗色模式下不允许出现黑色字」）； 原来这些地方**硬编码 #494949** ⇒ 暗色底上几乎看不见 ⇒ 一律改走本变量 */ --ink-2: #494949; --muted: #64748B; --line: #E2E8F0; --line-strong: #CBD5E1; --field-bg: #F8FAFC; --field-border: #CBD5E1; --chip: #F1F5F9; /* 主色的**不透明**浅色版（= rgba(79,70,229,.1) 铺在白底上的实际颜色）—— 给吸顶表头这类**会盖住滚动内容**的元素用：用半透明会被下面的行透出来 （用户 2026-09-17 晚报的） */ --tint-primary: #EDEDFC; /* 圆角策略（用户 2026-09-19 更正：「取消全局直角，除了 table 和卡片必须直角， 其他的按钮什么的你可以按照规范来设计」）→ 令牌恢复**设计规范圆角**； 「卡片 + 表格（含列表 / 明细单）」由**文件末尾的直角白名单**单独压回 0 （旧口径 2026-09-16 是全局归零，已作废） */ --radius: 6px; --radius-sm: 4px; --radius-lg: 8px; --shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05); --shadow-lg: 0 2px 4px rgba(15,23,42,.08), 0 8px 32px rgba(15,23,42,.10); --shadow-hover: 0 8px 28px rgba(15,23,42,.10); --ring: 0 0 0 3px rgba(79,70,229,.18); /* 导航配色（C · 品牌靛蓝）：侧栏明暗两主题都是深色，仅底色/默认文字随主题微调 */ --side-bg: #1E1B4B; --nav-text: #9DA6D8; --nav-hover-bg: rgba(255,255,255,.07); --nav-hover-text: #E0E7FF; --nav-active-bg: rgba(129,140,248,.24); --nav-active-text: #E0E7FF; --nav-active-bar: #818CF8; --nav-line: rgba(255,255,255,.10); --header-bg: rgba(255,255,255,.72); --header-border: rgba(255,255,255,.55); } [data-theme="dark"] { --bg: #0B1430; --bg-list: #101B3D; --card: #12204A; --card-2: #0F1A3D; --text: #E8ECFF; /* 列表正文色：暗色下**必须是浅字**（用户 2026-09-21：暗色模式不许有黑字）*/ --list-text: #E8ECFF; --ink-2: var(--muted); /* 次要深灰 → 暗色下转浅灰（否则 #494949 在深底上看不见）*/ --muted: #8893B8; --line: #233160; --line-strong: #2C3C70; --field-bg: #0C173A; --field-border: #2C3E6E; --chip: #1A2A57; --primary-soft: rgba(79,70,229,.20); --primary-soft-2: rgba(79,70,229,.28); --tint-primary: #1E2869; /* = 上面的 primary-soft 铺在暗色卡片 #12204A 上的实际颜色（不透明） */ --danger-soft: rgba(255,0,0,.16); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); /* 暗色下补 `--shadow-lg`（用户 2026-09-19 22:0x）—— 原来**只有亮色定义** → 暗色主题里会继续用「深色投影」，铺在深色卡片上**几乎看不见** */ --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 10px 34px rgba(0,0,0,.5); --shadow-hover: 0 12px 34px rgba(0,0,0,.55); --ring: 0 0 0 3px rgba(79,70,229,.30); --side-bg: #151938; --nav-text: #94A3B8; --header-bg: rgba(34,49,95,.66); --header-border: rgba(255,255,255,.08); --link: #A5B4FC; /* 深底上的文字/链接色（浅靛蓝，对比度足够） */ } /* ============================================================ 暗色模式 · 对比度修正 主色 #4F46E5 在深底上当**文字色**用几乎看不清（编号链接 / 人员标签 / 权限页的选中项与操作按钮…）→ 统一换成 --link（浅靛蓝）；红色操作也提亮。 ============================================================ */ [data-theme="dark"] .entity-name-link, [data-theme="dark"] .cell-link, [data-theme="dark"] .link-btn, [data-theme="dark"] .tag-chip, [data-theme="dark"] .tnode.on, [data-theme="dark"] .tnode .dots:hover, [data-theme="dark"] .perm-seg a:hover, [data-theme="dark"] .pm-sub-tabs a.on, [data-theme="dark"] .tb-role, [data-theme="dark"] .ph-crumb, [data-theme="dark"] .auto-preview, [data-theme="dark"] .fd-chip.sys, [data-theme="dark"] .tag-check.is-on, [data-theme="dark"] .cat-lv.lv1, [data-theme="dark"] .dp-cell.today, [data-theme="dark"] .dp-trigger:hover, [data-theme="dark"] .dp-title:hover, [data-theme="dark"] .dp-nav button:hover, [data-theme="dark"] .dp-footer button, [data-theme="dark"] .fd-move:hover, [data-theme="dark"] .tb-menu-item:hover, [data-theme="dark"] .tb-theme:hover, [data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .pg-num:hover, [data-theme="dark"] .pg-btn:hover, [data-theme="dark"] .cat-caret:hover, [data-theme="dark"] .cat-ico-btn:hover, [data-theme="dark"] .cat-row .cat-label:hover { color: var(--link); } [data-theme="dark"] .tnode.on::before { background: var(--link); } [data-theme="dark"] .tag-chip, [data-theme="dark"] .tnode.on, [data-theme="dark"] .tag-check.is-on, [data-theme="dark"] .auto-preview { background: rgba(129,140,248,.18); } /* ---------- 暗色下的「表单 / 就地编辑」：彩色选项**恢复为不带背景**（用户 2026-09-15：「要不看不清楚」）---------- · 下拉选项只写了**内联 `background`**（浅色底）没写 color → 暗色里文字是浅色 → **浅底 + 浅字**看不清 · 多选 / 标签的 chip 是内联 `background+color` 的浅色药丸 → 在深色面板上也刺眼 处理：只在这两个上下文里把内联底色/字色**压掉**（`!important` 是因为要盖内联样式）， 列表/详情页的彩色标签**保持不变**（那边浅底深字本来就清楚，用户要的就是那边有颜色）。 */ [data-theme="dark"] .embed-body select option, [data-theme="dark"] .inline-edit-grid select option, [data-theme="dark"] .embed-body .opt-chip, [data-theme="dark"] .inline-edit-grid .opt-chip, [data-theme="dark"] .embed-body .tag-check .tag-chip, [data-theme="dark"] .inline-edit-grid .tag-check .tag-chip { background: transparent !important; color: var(--text) !important; } /* 红色操作（删除 / 移除…）在深底上提亮 */ [data-theme="dark"] .link-btn.danger, [data-theme="dark"] .link-btn.danger:hover { color: #FCA5A5; } /* 禁用态：统一压低透明度，避免「看起来还能点」 */ [data-theme="dark"] .btn:disabled, [data-theme="dark"] .link-btn:disabled { opacity: .42; cursor: not-allowed; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-base); font-weight: var(--fw-regular); background-color: var(--bg); color: var(--text); font-size: var(--fs-14); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .35s ease, color .35s ease; } a { color: inherit; text-decoration: none; } .app-sidebar, .card, .filter-bar, .stat, input, select, textarea, .btn, .nav-item, .badge { transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .25s ease; } /* ============================================================ 布局：左侧固定导航（深色）+ 右侧内容 ============================================================ */ .app-shell { min-height: 100vh; } .app-sidebar { position: fixed; top: 60px; bottom: 0; left: 0; width: 176px; background: var(--side-bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 20px 14px 14px; z-index: 30; } .side-nav { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; line-height: 1.2; border-radius: var(--radius-sm); color: var(--nav-text); font-size: var(--fs-14); white-space: nowrap; position: relative; } .nav-item svg { flex-shrink: 0; } .nav-item:hover { background: var(--nav-hover-bg); color: var(--nav-hover-text); } .nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: var(--fw-bold); } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0; background: var(--nav-active-bar); } .side-bottom { padding-top: 12px; border-top: 1px solid var(--nav-line); } .side-collapse { display: flex; align-items: center; justify-content: center; width: 100%; background: none; border: none; color: var(--nav-text); cursor: pointer; padding: 8px 0; } .side-collapse:hover { color: var(--nav-hover-text); } .app-scrim { display: none; } .app-content { margin-left: 176px; padding-top: 60px; min-height: 100vh; display: flex; flex-direction: column; min-width: 0; } /* ---------- 顶栏（全宽固定，对齐参考系统：logo 贴窗口左缘，分隔线与侧栏右缘对齐） ---------- */ .app-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 60px; display: flex; align-items: center; gap: 0; padding: 0 22px; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } /* 品牌区：宽度**固定** 178px（= 侧栏宽 176 − 左内边距 22），确保右侧「页面标题 / 角色」起点恒定， 不随 Logo 缩放或名称长短而左右漂移；内容超出时由 Logo 收缩、名称省略号消化。 */ .tb-left { display: flex; align-items: center; gap: 8px; width: 154px; flex-shrink: 0; min-width: 0; } /* 未填系统名称：Logo 独占品牌区并水平居中（放大显示） */ .tb-left.no-name { justify-content: center; } /* Logo 画布比例固定 702:180；不写名称时放大，写了名称时缩放与文字并排。 Logo 不参与收缩（flex-shrink:0），名称超出时由自身省略号消化，保证 Logo 尺寸稳定 */ .tb-logo { display: block; height: 24px; width: auto; max-width: 100%; min-width: 0; aspect-ratio: 702 / 180; object-fit: contain; flex-shrink: 0; } .tb-left.no-name .tb-logo { height: 40px; } .tb-brand { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--primary-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } [data-theme="dark"] .tb-brand { color: var(--text); } .tb-divider { position: absolute; left: 176px; top: 18px; width: 1px; height: 24px; background: var(--line); flex-shrink: 0; } .tb-head { display: flex; align-items: baseline; gap: 8px; margin-left: 16px; flex: 1; min-width: 0; } .tb-title { font-size: var(--fs-14); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } .tb-theme { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; } .tb-theme:hover { color: var(--primary); border-color: var(--primary); } [data-theme="light"] .ic-moon { display: none; } [data-theme="dark"] .ic-sun { display: none; } .tb-menu-btn { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 10px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--text); cursor: pointer; } .tb-me-wrap { position: relative; } .tb-me { display: flex; align-items: center; gap: 8px; cursor: pointer; background: none; border: none; font-family: inherit; color: var(--text); font-size: var(--fs-14); padding: 4px 6px; } .tb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 0; background: var(--primary); color: #fff; font-size: var(--fs-13); font-weight: var(--fw-bold); } .tb-me-caret { color: var(--muted); } .tb-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 6px; z-index: 50; } .tb-menu.open { display: block; } .tb-menu-head { padding: 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .tb-menu-name { font-weight: var(--fw-bold); font-size: var(--fs-14); } .tb-menu-acc { font-size: var(--fs-12); color: var(--muted); } .tb-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); border: none; background: none; color: var(--text); font-family: inherit; font-size: var(--fs-14); cursor: pointer; text-align: left; } .tb-menu-item:hover { background: var(--primary-soft); color: var(--primary); } /* ---------- 主区 ---------- */ /* 内容区跟随窗口铺满：**不设最大宽度**（表格类业务希望超宽屏尽量多显示列）； 左右固定 16px 内边距 → 与导航、与右侧窗口边缘各留 16px。 */ .app-main { flex: 1; padding: 16px; width: 100%; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .page-head h1 { font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--primary-dark); margin: 0; } [data-theme="dark"] .page-head h1 { color: var(--text); } .page-head .count { font-size: var(--fs-16); color: var(--muted); font-weight: var(--fw-regular); } .ph-ops { display: flex; gap: 8px; margin-left: auto; } /* 页面标题已去掉，按钮靠右对齐 */ /* ---------- 控件标准 · 按钮（用户 2026-09-17 给定，全站以此为准）---------- 档位 左右内距 高度 字号 圆角 Small 8px 24px 14px 2px → .btn-sm（.btn-xs 并入同档：49 处历史类名保留） Medium 16px 32px 14px 2px → .btn（默认） Large 16px 40px 16px 2px → .btn-lg 一律用固定 height（不再 min-height）：min-height 会被行高/内边距撑出不同高度， 统一标准的意义就是「同档按钮在任何页面都一模一样」。 */ :root { --btn-h-sm: 24px; --btn-px-sm: 8px; --btn-fs-sm: 14px; --btn-h-md: 32px; --btn-px-md: 16px; --btn-fs-md: 14px; --btn-h-lg: 40px; --btn-px-lg: 16px; --btn-fs-lg: 16px; --btn-radius: 2px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: var(--btn-h-md); padding: 0 var(--btn-px-md); border-radius: var(--btn-radius); font-family: inherit; font-size: var(--btn-fs-md); line-height: 1; cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .btn-primary { background: var(--primary); color: #fff; } /* 绿色按钮变体（用户 2026-09-22：「这个按钮调整为绿色」；随后又要求 「你添加明细行和转入销售订单是同一个绿色吗？」⇒ 必须与「新增 / 转入销售订单」**同一个绿**）—— 走 --c-green（#13ce66），不再是 --c-success（#10B981，那是**状态色**、与按钮绿不同）*/ .btn-green { background: var(--c-green); color: #fff; } .btn-primary:hover { background: #4338CA; } .btn-ghost { background: var(--card); border-color: var(--line-strong); color: var(--text); } .btn-ghost:hover { border-color: var(--primary); color: var(--primary); } /* 「新增」按钮专用绿色（用户 2026-09-19） */ #ptNew { background: var(--c-green) !important; border-color: var(--c-green) !important; color: #fff !important; } #ptNew:hover { background: #0fb857 !important; border-color: #0fb857 !important; } /* 「转入销售订单」也走同一款绿（用户 2026-09-19 20:3x：「转入销售订单按钮是绿色」）—— 它原本是 `.btn-primary`（主色蓝），现与「新增」统一为 #13ce66 只改**颜色**，不改按钮档位/尺寸（仍是 `.btn-xs`）；`bTr.disabled` 的禁用逻辑照旧 */ #ptTransfer { background: var(--c-green) !important; border-color: var(--c-green) !important; color: #fff !important; } #ptTransfer:hover { background: #0fb857 !important; border-color: #0fb857 !important; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #DC2626; } /* 工具条「删除」= **描边 + 红字**（用户 2026-09-18 19:43 按钮规范：删除统一这种形态， 不用实心红底 —— 实心红会跟主操作按钮抢注意力） 原来靠 `#ptDel` / `#orderDelBtn` 两个 id 选择器各写一遍，现在收敛成一个类 */ .btn-danger-ghost { color: var(--danger); border-color: rgba(239,68,68,.4); } .btn-danger-ghost:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,.06); } /* Small 档（.btn-xs 是历史类名，一并归到 Small，尺寸跟标准走） */ .btn-sm, .btn-xs { height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: var(--btn-fs-sm); } /* Large 档 */ .btn-lg { height: var(--btn-h-lg); padding: 0 var(--btn-px-lg); font-size: var(--btn-fs-lg); border-radius: var(--btn-radius); } .btn-block { width: 100%; min-height: var(--btn-h-lg); } /* 禁用的按钮要看得出来：原来**只有暗色主题**写了 `.btn:disabled` → 浅色下禁用的按钮看着和可用的一样（用户要靠点一下才知道 ，2026-09-16 补） */ .btn:disabled, .link-btn:disabled { opacity: .45; cursor: not-allowed; } /* 工具条「删除」统一用 `.btn-danger-ghost`（见上方 .btn-danger 一段）—— 原来这两个 id 各写一遍告警色，已删除；`#orderDelOff`（有关联单据→灰掉）保留 */ #orderDelOff { opacity: .45; cursor: not-allowed; } .link-btn { background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-13); color: var(--primary); padding: 2px 4px; } /* 「关联卡片」表格里可点的格子（用户 2026-09-27：采购编号要能跳到处理中心详情）—— 与全站链接同色，悬停下划线；**不要**加圆角（全站 border-radius:0）✓ */ .cell-link { color: var(--primary); text-decoration: none; } .cell-link:hover { text-decoration: underline; } /* 关联卡片里"链接样式的按钮"（如「查看质检」——点开应用内提示，不是跳页）✓ */ .cell-link-btn { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; color: var(--primary); } .cell-link-btn:hover { text-decoration: underline; } .link-btn:hover { text-decoration: underline; } .link-btn.danger { color: var(--danger); } /* ---------- 筛选栏 ---------- */ .info-list { display: flex; flex-direction: column; gap: 12px; } .filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow); } /* 查询行里的「新建 XX」按钮：推到整行最右侧 */ .filter-bar .fb-create { margin-left: auto; } /* 🆕 列表页「批量导入」按钮（用户 2026-09-26）： 只负责**推到整行最右**，观感与悬停完全跟 `.btn-ghost` 一致 —— 以前它复用了 `.fb-create`（= 新建按钮的绿色样式，还带 `!important`）⇒ 悬停变绿，与旁边的 「查询 / 重置」不一致 ✗ */ .filter-bar .imp-btn { margin-left: auto; } /* 「整组右对齐」的按钮组（用户 2026-09-26 货品管理：「把 批量导入 / 批量录入 / 新增规格 / 导出 调整为右对齐」）—— · 组内 `nowrap`：四个按钮不拆行、始终保持一组 ✓ · 组本身 `margin-left: auto`：**每一行都生效** ⇒ 整组换到第二行时依然贴右边缘 ✓ · 组内第一个按钮的 `.imp-btn`（也是 margin-left:auto）要**清掉**，否则会在组内再吃一次剩余空间、 把"批量导入"推到左边、其余挤到右边 ⇒ 看起来就散了 ✗ */ .filter-actions-end { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-left: auto; } /* 组内第一个按钮（`.imp-btn`）与「新增」（`.fb-create`）都自带 `margin-left: auto`，要**清掉** —— 否则会在组内再吃一次剩余空间，把成员拆到两头（用户 2026-09-26：供货的三个按钮要「右侧对齐、间隙一致」）✗ */ .filter-actions-end .imp-btn, .filter-actions-end .fb-create { margin-left: 0; } /* 🆕 「批量录入」的粘贴表格（用户 2026-09-26）：格子里的输入框**平时无框**，像 Excel 一样直接填 / 粘贴 ✓ */ #grid td { padding: 2px 4px; } #grid .cell { width: 100%; min-height: 30px; padding: 0 8px; font-size: var(--fs-13); border: 1px solid transparent; background: transparent; color: var(--text); font-family: inherit; outline: none; } #grid .cell:hover { border-color: var(--line); } #grid .cell:focus { border-color: var(--primary); background: var(--card); box-shadow: var(--ring); } /* 粘贴的值不在选项里 ⇒ 那一格标红（提示区在表格下方，见 `#pasteWarn`）—— 用户 2026-09-26：「售卖状态只有 2 个选项，我在批量录入页面，把别的值粘贴过来，你也允许，这个是不对的」 ⚠️ 必须排在 `:hover` / `:focus` **之后**（同特异性靠后生效），否则悬停/聚焦时红框会被盖掉 ✗ */ #grid .cell.is-err { border-color: var(--danger); background: var(--danger-soft); } #grid select.cell.is-err { color: var(--danger); } /* 下拉列（售卖状态 / 主单位…）在格子里也是**真下拉框** ✓：平时同样无框，箭头留出右侧内距 ✓ */ #grid select.cell { background: transparent; padding-right: 22px; cursor: pointer; } /* 「带单位」字段（如 规格 = CM）：**每一行都把单位显示在输入框后面**（用户 2026-09-26）✓ 外套 `.cellwrap` = flex 行：控件撑满、单位 `flex:none` 贴在最后 ✓ */ #grid .cellwrap { display: flex; align-items: center; gap: 6px; min-width: 0; } #grid .cellwrap > .cell { flex: 1 1 auto; min-width: 0; } #grid .cellwrap > .num-suffix { flex: none; font-size: var(--fs-13); } /* 「允许填写时新增选项」的列 = **可输入下拉**（`.ssel` 包着输入框，用户 2026-09-26）—— `.cell` 挂在里面的 `.ssel-inp` 上 ⇒ 撑满这格的规则要落在中间那层 `.ssel` 上 ✓ （否则 `.cellwrap > .cell` 匹配不到输入框，格子会被压成内容宽 ✗） */ #grid .cellwrap > .ssel { flex: 1 1 auto; min-width: 0; } /* 🆕 「批量录入」卡片**铺满浏览器可用高度**（用户 2026-09-26）—— 卡片高度由页面 JS 按「卡片自身位置 + 窗口高」算好写进 style；这里只负责**纵向分配**： 标题 / 说明 / 底部按钮都不动，中间的滚动表格吃掉剩余高度 ⇒ 一屏尽量多显示几行 ✓ ⚠️ 每一层都要 `min-height: 0`：flex 子项默认 min-height:auto ⇒ 不写的话表格会被内容撑开、滚不动 ✗ */ #entryCard { display: flex; flex-direction: column; } #entryCard > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } #entryCard .table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; } /* 「导入核对」卡片 = **同一套铺满**（用户 2026-09-26：「解析结果这个卡片，高度默认占满浏览器」）—— 与上面 `#entryCard` 完全同构：卡片纵向 flex ⇒ 标题 / 来源说明 / 底部按钮都不动， 中间那张核对表格吃掉剩余高度（一屏尽量多显示行）✓ ⚠️ 同样每一层都要 `min-height: 0`：flex 子项默认 `min-height:auto` ⇒ 不写会被内容撑开、滚不动 ✗ */ #chkCard { display: flex; flex-direction: column; } #chkCard > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } #chkCard .table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; } /* 🆕 表头**冻结**（用户 2026-09-26：「这一行表头冻结」）—— 「批量录入」与导入核对两张表都用 ✓ · `.table-wrap` 就是滚动容器 ⇒ sticky 在这里才生效 ✓ · 底色用与普通表头**完全相同**的 `--card-2`，粘住之后不会看着像另一块 ✗ · z-index 3：压过普通单元格，又不抢冻结列的 4 ✓ */ .tbl-frz thead th { position: sticky; top: 0; z-index: 3; background: var(--card-2); } /* ============================================================ 「导入核对页」（供货报价导入 / 货品批量导入）—— **两页共用这一套**（用户 2026-09-26： 「货品管理，批量导入，解析并预览后也需要支持可以编辑」） · 两页的卡片 id 都是 `#chkCard` ⇒ 规则可以共用一份（别在各自视图里再写一遍 ✗） · 🔴 出错的红边一律走 **class**（`.cell-bad` / `.imp-bad`），**不写内联 style** —— 内联优先级高于 class ⇒ 实时重校验撤不掉「已修好的那格红标」✗ ============================================================ */ #chkCard .table-wrap { overflow: auto; } #chkCard td.cell-bad { background: #FEF2F2; } #chkCard td.cell-bad:hover { background: #FEE2E2; } /* 字段列给**最小宽度**：列一多就把表格撑得比容器宽 ⇒ 出横向滚动条， 绝不靠压窄输入框硬塞进一屏（用户 2026-09-26：「后面的字段输入值宽度不够了，你就横向滑动」）✓ */ #chkCard th.f-imp { min-width: 170px; } /* 下拉多选框（`.ms-field`，复用系统样式，压到与其它输入框一致的 28px）—— 面板打开时会被挂到 body ⇒ 面板那几条**不能带 `#chkCard` 前缀** ✓ */ #chkCard .imp-ms { display: block; width: 100%; } #chkCard .imp-ms .ms-text { font-size: 12px; } .imp-ms-panel { font-size: 12px; } .imp-ms-panel .ms-opt { padding: 5px 9px; font-size: 12px; } /* 系统日期选择器（`.dp-field`）在核对表里压到 28px；放开全局的 max-width:220px ✓ */ #chkCard .imp-dp { display: inline-flex; width: 100%; max-width: none; } #chkCard .imp-dp .dp-display { height: 28px; min-height: 28px; font-size: 12px; padding: 0 26px 0 6px; line-height: 26px; } #chkCard .imp-dp .dp-trigger { width: 26px; } #chkCard .imp-dp .dp-trigger svg { width: 14px; height: 14px; } /* 出错控件的红边（class 化 ⇒ paintRow 一 toggle 就同步出现/消失）✓ */ #chkCard input.imp-bad, #chkCard select.imp-bad { border-color: #FCA5A5 !important; background: #FFF !important; color: #DC2626 !important; } #chkCard .dp-field.imp-bad .dp-display { border-color: #FCA5A5; background: #FFF; color: #DC2626; } #chkCard .dp-field.imp-bad .dp-trigger { color: #DC2626; } #chkCard .ms-field.imp-bad .ms-trigger { border-color: #FCA5A5; background: #FFF; color: #DC2626; } /* 订单中心筛选行控件多（搜索 + 6 下拉 + 2 日期 + 4 按钮）→ 适当压缩宽度，保证一行放得下（用户 2026-09-17） */ .filter-bar-orders { gap: 6px; } /* 行内间距 8→6，省约 26px */ .filter-bar-orders .cs-input { flex: 0 1 180px; min-width: 140px; } /* 搜索框（用户 2026-09-17 指定 180px） */ .filter-bar-orders .filter-select { padding: 0 4px; } /* 下拉左右内边距 6→4 */ .filter-bar-orders .btn { padding: 0 10px; } /* 按钮左右内边距 12→10 */ /* 提示 / 选项字号缩小（14→12）：筛选行框窄，14px 会把「搜索订单号/客户/销售人」「下单开始日期」等提示截断（用户 2026-09-17） */ .filter-bar-orders .cs-input, .filter-bar-orders .filter-select, .filter-bar-orders .csel-trigger, .filter-bar-orders .dp-display { font-size: var(--fs-12); } .filter-bar-orders .lg-tilde { font-size: var(--fs-12); } /* 自定义下拉触发器比原生多「箭头 + 间距」，会挤掉文字宽度 → 筛选行里收紧（不改整体宽度，一行布局不变） */ .filter-bar-orders .csel-trigger { gap: 4px; } .filter-bar-orders .csel-caret { width: 12px; height: 12px; } /* 按钮分成两组（用户 2026-09-17）： · .filter-actions = 查询 / 重置 → 紧跟在「结束日期」后面，**不**右推 · .filter-actions-end = 新建订单 / 立即同步 → 整组推到整行最右 两组都 nowrap：组内不换行，放不下时整组换行 → 保证每组按钮永远同行 */ .filter-bar-orders .filter-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .filter-bar-orders .filter-actions-end { margin-left: auto; } .filter-bar-orders .fb-create { margin-left: 0; } /* 取消旧的「推到最右」，改由 .filter-actions-end 推 */ .info-count { font-size: var(--fs-13); color: var(--muted); margin-right: 4px; white-space: nowrap; } .cs-input, .filter-select { min-height: 34px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: var(--fs-14); outline: none; } .cs-input { flex: 0 1 260px; } .cs-input:focus, .filter-select:focus { border-color: var(--primary); box-shadow: var(--ring); } /* 🆕 筛选行里的**可搜索下拉**（`.ssel-filter`；用户 2026-09-26：供应商 / 货品的筛选要能模糊搜索）—— 必须**定宽**：`.ssel` 自身没有宽度约束、会按内容撑开 ⇒ 实测被撑到 **1191px**，把筛选行挤断 ✗✗ （原生下拉只有 126px）；宽度取原生下拉的量级，高度与原生下拉（34）对齐 ✓ */ .filter-bar .ssel-filter { width: 130px; max-width: 130px; flex: 0 0 auto; } .filter-bar .ssel-filter .ssel-inp { height: 34px; min-height: 34px; font-size: var(--fs-14); } /* 🆕 筛选行**整体压缩**（用户 2026-09-26：「你搜索变成好多行了，不是1行了」）—— 背景：供货报价的筛选行原本合计约 **1225px**，而 1440 视口下筛选栏内宽只有 **1206px** ⇒ 只差 19px，右侧按钮组（.filter-actions-end）整组被挤到第二行、栏高 56 → **96（两行）** ✗ 做法：含可搜索筛选的筛选行打 `filter-bar-fs`（见 views/entity/list.ejs）⇒ 只压这一类页面： · 间隙 8 → 6（7 处，省 14） · 搜索框 260 → 180（省 80） · 按钮左右内边距 12 → 10（查询 / 重置，省 24） · 右侧按钮组间隙 8 → 6（省 4） ⇒ 给「供应商 / 全部货品」两个下拉**让出加宽的空间** ✓ ⚠️ 不支持搜索的页面**一点不变**（它们没有 `filter-bar-fs` 类）✓ 「供应商 / 全部货品」两个可搜索下拉的宽度**按窗口宽度分三档**（用户 2026-09-26： 「供应商和货品的搜索行宽度都要增宽一些」）—— 原则：**能用多宽就给多宽，但整行必须还是一行**： · 视口 > 1400（栏内宽 > 1168）：**180**（与关键字搜索框同宽）✓ · 视口 ≤ 1400（栏内宽 ≤ 1168）：cs-input 140 + 两下拉 160 ⇒ 合计约 1088 ✓（1366 视口内宽 1132） · 视口 ≤ 1319（栏内宽 ≤ 1087）：两下拉降到 126 ⇒ 合计约 1020 ✓（1280 视口内宽 1046） 公式：两个下拉之外的元素合计 628（含 7 个 6px 间隙）⇒ 总宽 = 628 + 搜索框 + 2 × 下拉宽 ✗ */ .filter-bar-fs { gap: 6px; } .filter-bar-fs .cs-input { flex: 0 1 180px; min-width: 120px; } .filter-bar-fs .btn { padding: 0 10px; } .filter-bar-fs .filter-actions-end { gap: 6px; } .filter-bar.filter-bar-fs .ssel-filter { width: 180px; max-width: 180px; } @media (max-width: 1400px) { .filter-bar-fs .cs-input { flex: 0 1 140px; } .filter-bar.filter-bar-fs .ssel-filter { width: 160px; max-width: 160px; } } @media (max-width: 1319px) { .filter-bar.filter-bar-fs .ssel-filter { width: 126px; max-width: 126px; } } /* ---------- 表格 ---------- */.info-table-shell { display: flex; flex-direction: column; gap: 12px; } /* 列表所在卡片要有阴影（用户 2026-09-21）——只作用于列表页的表格外壳，不动详情页/报表里的 .table-wrap */ .info-table-shell > .table-wrap { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); } .table-wrap { overflow-x: auto; } .card .table-wrap { border-radius: var(--radius); } .data-table { width: 100%; /* 用 **separate + spacing 0** 而不是 collapse（用户 2026-09-21：「列与列竖线有的不显示」）—— 根因：`border-collapse: collapse` 下，**position:sticky 的单元格**（冻结列 / 吸顶表头） 边框由「表格层」绘制，会被 sticky 单元格自己的绘制层盖掉 ⇒ 竖线时有时无 separate 模式下边框归各单元格自己画 ⇒ 任何 sticky / 背景都盖不掉 单元格只有 right / bottom 两条边 → 不会出现双线；外边距为 0 → 列宽/冻结偏移都不变 */ border-collapse: separate; border-spacing: 0; background: var(--card); font-size: 14px; color: var(--list-text); } .data-table th, .data-table td { padding: 0 14px; height: 32px; text-align: left; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); white-space: nowrap; color: var(--list-text); } .data-table th { font-size: 14px; font-weight: var(--fw-bold); color: var(--list-text); background: var(--card-2); text-align: center; vertical-align: middle; } /* 暗色模式下列表表头文字 = **白色**（用户 2026-09-21 明确要求；正文由 --list-text 转浅字） */ [data-theme="dark"] .data-table th { color: #ffffff; } /* ---------- 列表表格行规范（用户 2026-09-18 14:59，2026-09-21 10:47 改）---------- 「列表页 table：**固定行高 30**、文字内容**统一 14**、颜色 **#000000**」 · 行高由 `height` 定（td 自带 `vertical-align: middle` → 内容垂直居中 ）—— 上下内距去掉只留左右（padding: 0 14px），否则 height 与 padding 叠加会忽高忽低 · 字号统一 14（表头 13 → 一并统一，整张表一个字号）；正文与表头颜色统一 #000000 · 只作用于**列表页 / 报表页**的 `.entity-table` + `.data-table`；详情页、明细表（`.pi-table`）、首页仪表盘不受影响 */ .entity-table th, .entity-table td { height: 32px; padding: 0 14px; font-size: 14px; color: var(--list-text); border-right: 1px solid var(--line); } .entity-table .muted { color: var(--list-text); } /* ---------- 列表表头「点击上下排序」（用户 2026-09-18 规范；图标照 14:49 给的参考页面）---------- 图标 = 参考系统 `.lxy-table .lxy-table-sort-wrap` 的**纯 CSS 三角**（border 技巧）， 数值直接照抄参考页面：每颗三角 **宽 8（border 左右各 4）× 高 5**、两颗之间 **2px**、 默认色 **#BFBFBF**、正在生效的那颗转 **主色**（参考系统用的是它的 primary-500）。 · 上三角 = 升序（`border-color` 的**下边**有色）、下三角 = 降序（**上边**有色） · 按钮里**不放 SVG**（伪元素画），`margin-left: 6px` 与参考一致 · 三态循环（用户 14:49）：未排序 → 升序 → 降序 → **恢复默认**（见 partial thSort.ejs 的 data-dir） · 不可排序的类型（选项 / 人员 / 关联 / 公式 / 明细 / 派生列）**不出按钮** */ .th-sortable { white-space: nowrap; } .th-sort { display: inline-block; cursor: pointer; margin-left: 6px; padding: 0; border: 0; background: none; vertical-align: -1px; } .th-sort::before, .th-sort::after { content: ''; display: block; width: 0; height: 0; border-style: solid; } /* 上三角（升序）*/ .th-sort::before { border-width: 0 4px 5px; border-color: transparent transparent #BFBFBF; margin-bottom: 2px; } /* 下三角（降序）*/ .th-sort::after { border-width: 5px 4px 0; border-color: #BFBFBF transparent transparent; } /* 悬停：整颗转主色（提示可点）*/ .th-sort:hover::before { border-bottom-color: var(--primary); } .th-sort:hover::after { border-top-color: var(--primary); } /* 当前排序方向：**只有生效的那颗**是主色，另一颗保持灰 */ .th-sort.is-asc::before { border-bottom-color: var(--primary); } .th-sort.is-desc::after { border-top-color: var(--primary); } .data-table tbody tr:hover { background: var(--bg-list); } .data-table .g-name { font-weight: var(--fw-bold); } .entity-name-link { color: var(--primary); cursor: pointer; font-weight: normal; font-size: 14px; } .entity-name-link:hover { text-decoration: underline; } .data-table .muted { color: var(--list-text); } .data-table .num { font-variant-numeric: tabular-nums; } .data-table .empty { text-align: center; color: var(--muted); padding: 32px 0; } .op-col { white-space: nowrap; } .op-col .btn { margin-right: 4px; } /* ---------- 列表「汇总行」（用户 2026-09-21）---------- 「所有字段类型，增加 1 个按钮，就是列表汇总…汇总显示在列表页的最下方」 · 位置 = 表格**最后一行**（`` 里那一行）→ 分页器之前 · 只有字段设置里开了「列表汇总」的列才有数字；没开的列留空格，保证列对齐 · 外观：比正文略重（加粗 + 浅底），与「明细汇总」那一行同一观感； 文字色走 `--list-text`（亮色纯黑 / 暗色浅字，见变量定义处），不硬编码 */ .sum-row td { height: 32px; padding: 0 14px; font-size: 14px; font-weight: var(--fw-bold); color: var(--list-text); background: var(--bg-list); border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; } .sum-row td { border-right: 1px solid var(--line); } /* 首格 = 「合计」+「全部 N 条」小字：说明汇总口径是**筛选后的全部记录**（不是只算当页）*/ .sum-row .sum-tag { font-weight: var(--fw-bold); color: inherit; } .sum-row .sum-sub { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); } /* ---------- 列表「冻结列」（用户 2026-09-18 15:0x）---------- 「在字段显示设置里点某个字段的冻结 → 该字段**及其前面的字段**在列表里固定在左侧； 只允许冻结 1 个字段；但是从来都不影响系统编号」 · 冻结范围 = **系统编号（第 0 列，恒冻结）+ 该字段及之前的列**； · 每个单元格的 `left` 偏移由 `public/js/app.js` 在页面渲染后按真实列宽算出（列宽是自适应的）； · 冻结格必须**不透明**，否则横向滚动时下面的内容会透出来 */ .data-table td.is-fz { position: sticky; z-index: 3; background: var(--card); } .data-table th.is-fz { position: sticky; z-index: 4; background: var(--card-2); } /* 行悬停时冻结格跟随高亮（否则白色块在灰底行里很跳） */ .data-table tbody tr:hover td.is-fz { background: var(--bg-list); } /* 冻结块的右边界： · 静态一条 1px 分隔线（标记冻结区的边界）—— 用 box-shadow 而不是 border，border 会改变列宽、 把「输入框 350」那类对齐打乱； · **横向滚动时加一层投影**（用户 2026-09-18 15:30：「冻结行在往右拖动的时候， 冻结行右侧需要有 1 个阴影」）—— 表示右侧还有内容正从冻结块下面滑过去。 JS（`public/js/app.js` 冻结列那段）按 `.table-wrap` 的 `scrollLeft > 0` 给表格加 `.is-scrolled-x` 类， 滚回最左就摘掉 → 没滚动时不会有一条莫名其妙的阴影 阴影能盖住右侧滚过来的内容，靠的是冻结格自身的 `z-index`（td 3 / th 4 > 普通格 auto） · **改「柔和渐隐」**（用户 2026-09-18 17:52，截图问「你能看出来这个投影吗」→ 选「柔和渐隐（推荐）」）： 旧值 `8px 0 10px -6px rgba(…,.30)` 是**单层**，净可见约 4px、边缘均匀 → 看着像**一条灰边**、不像阴影 ； 试过的第二版（三层 `box-shadow`，alpha .14/.11/.08）**太淡看不出** → 最终改用 **伪元素 + linear-gradient** 做真正的「渐隐带」：从冻结列右缘起 16px 内 `0.20 → 0.10（40%）→ 0.03（75%）→ 0` 平滑化开 —— 边缘有存在感、又不会硬边 · 用 ::after 绝对定位在 td/th 的**右外侧**（`left:100%`），`pointer-events:none` 不挡点击； · 冻结格自身 `z-index`（td 3 / th 4）> 普通格 auto → 渐变带盖在滑过来的内容上 · 只在 `.is-scrolled-x`（横向滚动过）时才有 想调强弱：只改这一行渐变的 alpha / 宽度（16px）；**不要**回到单层 box-shadow 写法。 */ .data-table .is-fz-last { box-shadow: 1px 0 0 0 var(--line-strong); } /* 渐隐带本体（常驻在 DOM 里，靠 opacity 淡入淡出 → 保留 0.16s 的呼吸感） */ .data-table .is-fz-last::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 16px; pointer-events: none; opacity: 0; transition: opacity .16s ease-out; background: linear-gradient(to right, rgba(15, 23, 42, .20) 0%, rgba(15, 23, 42, .10) 40%, rgba(15, 23, 42, .03) 75%, rgba(15, 23, 42, 0) 100%); } .data-table.is-scrolled-x .is-fz-last::after { opacity: 1; } html[data-theme="dark"] .data-table .is-fz-last::after { background: linear-gradient(to right, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 40%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, 0) 100%); } /* 状态徽标 */ .badge { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 0; font-size: var(--fs-12); font-weight: var(--fw-regular); line-height: 20px; } .badge.is-success { background: rgba(16,185,129,.12); color: #10B981; } /* 「新增」按钮专用绿色（用户 2026-09-19：#13ce66）—— 已收进 --c-green 令牌 */ .btn.btn-create, .fb-create { background: var(--c-green) !important; color: #fff; } .btn.btn-create:hover, .fb-create:hover { background: #0fb857 !important; } .badge.is-info { background: rgba(14,165,233,.12); color: #0EA5E9; } .badge.is-warning { background: rgba(245,158,11,.14); color: #F59E0B; } .badge.is-danger { background: rgba(239,68,68,.12); color: #EF4444; } .badge.is-muted { background: var(--chip); color: var(--muted); } /* 汇率看板：标题 + 「按日期查看」筛选 */ .rates-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; } .rates-filter { display: flex; align-items: center; gap: 8px; } .rates-filter input[type=date], .rates-filter input[type=month], .rates-year { padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: var(--fs-13); } .rates-note { margin: 8px 0 10px; } .rates-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .rates-dates .badge { text-decoration: none; } /* 「手动调整汇率」月 × 币种网格（仿用户给的月度表：月份行、币种列） */ .rates-grid-wrap { overflow-x: auto; } .rates-grid { width: 100%; border-collapse: collapse; } .rates-grid th, .rates-grid td { padding: 6px 10px; text-align: center; white-space: nowrap; } .rates-grid th:first-child, .rates-grid td:first-child { text-align: left; position: sticky; left: 0; background: var(--card-bg); z-index: 1; } .rates-grid thead th { background: var(--primary-soft); } .rates-grid tbody tr:nth-child(even) { background: rgba(0,0,0,.02); } .rates-grid .rate-cell { width: 128px; max-width: 150px; text-align: right; font-variant-numeric: tabular-nums; padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: var(--fs-13); } /* ---------- 分页（按用户 2026-09-17 给定的规范参数）---------- 参数含义（用户原话）：32 = 高度 · 48 = 宽度 · 22 = 高度（紧凑档）· 12 = 内容距边界间隙 · 16 / 14 = 间隙 落地： · 页码 / 箭头按钮：高 32 · 左右内距 12（内容距边界）· 按钮之间 8 · 字号 14 · 图标 16 · 「每页 N 条」下拉：按「控件标准 · 下拉」Medium 档（高 32） · 「跳至」输入框：宽 48 · 高 32 · 数字居中 · 三个分组（共 N 页 / 页码 / 每页 / 跳至）之间 16 圆角写 2px 但被文件末尾的全站直角规则压成 0（用户：圆角不用管）。 */ .cust-pager { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 4px 2px; } .pg-total { font-size: var(--fs-14); color: var(--muted); } .pg-nav { display: flex; align-items: center; gap: 8px; } .pg-btn, .pg-num { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 12px; border-radius: 2px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: var(--fs-14); } .pg-btn svg { display: block; } .pg-num:hover, .pg-btn:hover { border-color: var(--primary); color: var(--primary); } .pg-num.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .pg-btn.is-disabled { opacity: .4; pointer-events: none; } .pg-gap { color: var(--muted); padding: 0 2px; } .pg-size, .pg-jump { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); color: var(--muted); } .pg-jump { gap: 16px; } /* 「跳至」与输入框、「页」字之间 16 */ .pg-size select, .pg-input { height: 32px; min-height: 32px; padding: 0 8px; border-radius: 2px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: var(--fs-14); outline: none; } .pg-input { width: 48px; text-align: center; } /* 跳至输入框：宽 48 */ /* ---------- 分页 · 五档样式（用户 2026-09-17）---------- data-style = basic（基本，≤9 页）| more（更多，9–19 页）| jump（跳转，>20 页）| mini（迷你）| simple（简洁） · basic / more / jump = 列表页三档，高 32（由 partial 按页数自动切） · mini / simple = 弹窗 / 表格内的紧凑档，高 22（.is-compact） 「基本 / 更多 / 跳转」的差别只在**页码省略策略与是否带「跳至」**（页码窗口逻辑在 partial 里） */ .pg-state { font-size: var(--fs-14); color: var(--muted); white-space: nowrap; } .pg-state b { color: var(--text); font-weight: 600; } /* 紧凑档：迷你 / 简洁 —— 高 22、图标 12、间隙收窄 */ .cust-pager.is-compact { gap: 8px; padding: 2px 0; } .cust-pager.is-compact .pg-total { font-size: var(--fs-12); } .cust-pager.is-compact .pg-btn, .cust-pager.is-compact .pg-num { min-width: 22px; height: 22px; padding: 0 8px; } .cust-pager.is-compact .pg-btn svg { width: 12px; height: 12px; } /* 简洁档：无边框纯文字（‹ 上一页 / 第 x / y 页 / 下一页 ›） */ .cust-pager[data-style="simple"] .pg-btn.pg-text { border: none; background: transparent; color: var(--link); min-width: 0; padding: 0 4px; } .cust-pager[data-style="simple"] .pg-btn.pg-text:hover { color: var(--primary); } /* 弹窗内的分页（转入选单 .tp-pager）= 迷你档：数字按钮高 22 */ .tp-pager .pg-num { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 2px; } /* ---------- 卡片 ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); } .card h2 { margin: 0 0 14px; font-size: var(--fs-18); color: var(--primary-dark); } [data-theme="dark"] .card h2 { color: var(--text); } .rel-title { margin: 0 0 12px; font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--primary-dark); } [data-theme="dark"] .rel-title { color: var(--text); } /* **区块标题**（用户 2026-09-18：「区块名字在弹窗和卡片中，如果是显示的状态下，以这种样式显示」） = 「16px 加粗深色标题」 + 左侧一条**竖线**。 尺寸口径照参考图（153×48 截图）实测：竖条 x20-22 / y21-36 → **3×16px**； 条右边缘 x22 → 文字左边缘 x32 → **条↔字 9px**；文字高 16px（= 字号 16，与 .rel-title 一致，颜色也是它）； 竖条直角（全站直角规范 `--radius*: 0`；参考图那点微圆是缩放抗锯齿，3px 宽下看不出）。 **竖条颜色 = 本系统主色 `var(--primary)`**（用户 2026-09-18 下午改：原来照参考图取的橙 #FF9052， 「前面的竖线颜色不要是橙色，还是本系统的主色」→ 走令牌而不是写死十六进制，主题切换也跟得上）。 只给**区块**（type=group）的标题加这个类（3 处：entity/form、orders/form、orders/detail）—— 不要写到 .rel-title 本身：那是模块卡 / 详情卡 / 面板标题（「订单信息」卡、「生产维度」卡…）的通用标题， 它们不该长竖条（用户只要求区块名用这个样式）。 */ .sec-title { display: flex; align-items: center; gap: 9px; } .sec-title::before { content: ''; flex: none; width: 3px; height: 1em; background: var(--primary); } /* 区块标题里若还有 pm-hint 之类的小字，别被竖条挤变形（对齐保持居中） */ .sec-title > * { min-width: 0; } .related-card { margin-top: 16px; } /* 关联卡片标题行：标题 + 可选操作按钮（如货品详情 → 供货卡片「新建供货」）左右分布 */ .rel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .rel-head .rel-title { margin: 0; } /* 关联卡片 = 页签形态（用户 2026-09-26 货品详情：「这两张卡片，变成两个 tab 页」）—— 页签直接用现成的 `.pi-subtabs / .pi-subtab`（采购处理详情页「采购下单」下方那套， 项目自定的 tab 规范：白底 + 选中项主色文字 + 3px 主色下划线）⇒ 这里只补两件事： · 右上角按钮（如「+ 新增供货」）靠右：用 `padding-right` 给页签让位，按钮本身绝对定位 · 面板 / 按钮的显隐（`is-off` = `display:none`，不要用 `hidden` 属性，会被 flex 规则压掉） 注意（2026-09-26 用户实测反馈：「我切换这个 tab 的时候，这一行的高度会变化」）： · 按钮在流里时高 32 + 上下 margin 5 = 42，比页签行（33 + 1 边框 = 34）还高 · 切到没有按钮的页签时按钮 `is-off`（`display:none`）退出布局 ⇒ 行高 43 掉到 34，整行向上跳 9px ⇒ 按钮必须**绝对定位脱离文档流**，行高才恒等于页签自身高度（与范本页一致），且按钮位置固定 ⇒ 选择器写成 `.pi-subtabs.rel-tabs-head`（两个类）才能压过后面的 `.pi-subtabs`（单类） */ .pi-subtabs.rel-tabs-head { position: relative; padding-right: 160px; } .pi-subtabs.rel-tabs-head .rt-act { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0; } .rel-pane { padding-top: 4px; } .rel-pane.is-off, .rt-act.is-off { display: none; } /* ---------- 控件标准 · 下拉 select（用户 2026-09-17 给定，全站以此为准）---------- 档位 高度 文字左距 文字↔箭头 箭头↔右边 字号 箭头尺寸 Small 24px 8px 8px 8px 14px 12px → .sel-sm Medium 32px 16px 8px 12px 14px 12px → .sel（默认） Large 40px 16px 8px 12px 16px 16px → .sel-lg 原生 select 必须 appearance:none + **自绘箭头**：浏览器自带箭头的位置/间距不可控， 做不到「箭头↔右边 12px」这种精确值。 padding-right = 8(文字↔箭头) + 箭头 + 箭头↔右边： Small 8+12+8=28 · Medium 8+12+12=32 · Large 8+16+12=36 全站「直角」规则（文件末尾 `border-radius: 0 !important`）在生效 → 圆角仍为 0； 要 2px 得把 select 从那条规则里放行，需用户确认（2026-09-17 待定）。 */ :root { --sel-h-sm: 24px; --sel-h-md: 32px; --sel-h-lg: 40px; --sel-px-sm: 8px; --sel-px-md: 16px; --sel-px-lg: 16px; --sel-fs-sm: 14px; --sel-fs-md: 14px; --sel-fs-lg: 16px; --sel-caret-sm: 12px; --sel-caret-md: 12px; --sel-caret-lg: 16px; --sel-pr-sm: 8px; --sel-pr-md: 12px; --sel-pr-lg: 12px; --sel-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E"); } [data-theme="dark"] { --sel-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238893B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E"); } .sel { appearance: none; -webkit-appearance: none; height: var(--sel-h-md); padding: 0 32px 0 var(--sel-px-md); border: 1px solid var(--field-border); outline: none; background-color: var(--field-bg); background-image: var(--sel-arrow); background-repeat: no-repeat; background-position: right var(--sel-pr-md) center; background-size: var(--sel-caret-md) var(--sel-caret-md); color: var(--text); font-family: inherit; font-size: var(--sel-fs-md); line-height: 1; } .sel-sm { height: var(--sel-h-sm); padding: 0 28px 0 var(--sel-px-sm); font-size: var(--sel-fs-sm); background-position: right var(--sel-pr-sm) center; background-size: var(--sel-caret-sm) var(--sel-caret-sm); } .sel-lg { height: var(--sel-h-lg); padding: 0 36px 0 var(--sel-px-lg); font-size: var(--sel-fs-lg); background-position: right var(--sel-pr-lg) center; background-size: var(--sel-caret-lg) var(--sel-caret-lg); } .sel:focus, .sel-sm:focus, .sel-lg:focus { border-color: var(--primary); box-shadow: var(--ring); } /* ---------- 控件标准 · 输入框 input（用户 2026-09-17 给定，全站以此为准）---------- 档位 高度 文字距边界 字号 类名 Small 24px 8px 14px → .inp-sm Medium 32px 12px 14px → .inp（默认） Large 40px 12px 16px → .inp-lg Medium + 前缀 / 后缀图标：图标 16px、**图标距边界 12px**、**图标↔文字 8px**、文字 14px、高 32 → 带图标那一侧的文字内距 = 12 + 16 + 8 = 36px（.inp-wrap + .inp-ico） 与下拉的差别：下拉「文字左距」是 16（用户给定），input 是 12 —— 别混用。 */ :root { --inp-h-sm: 24px; --inp-h-md: 32px; --inp-h-lg: 40px; --inp-px-sm: 8px; --inp-px-md: 12px; --inp-px-lg: 12px; --inp-fs-sm: 14px; --inp-fs-md: 14px; --inp-fs-lg: 16px; --inp-ico: 16px; /* 前缀 / 后缀图标尺寸 */ --inp-ico-in: 12px; /* 图标距边界 */ --inp-ico-gap: 8px; /* 图标 ↔ 文字 */ --inp-px-ico: 36px; /* 12 + 16 + 8 = 带图标一侧的文字内距 */ /* 搜索框的**后缀线性搜索图标**（描边圆 + 手柄，16px；同 select 的自绘箭头思路：CSS 背景图， 这样全站搜索框不必逐个改 HTML，也不会漏）用户 2026-09-17 */ --inp-search-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14'/%3E%3C/svg%3E"); } [data-theme="dark"] { --inp-search-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238893B8' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14'/%3E%3C/svg%3E"); } .inp, .inp-sm, .inp-lg { height: var(--inp-h-md); padding: 0 var(--inp-px-md); box-sizing: border-box; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: var(--inp-fs-md); line-height: 1; outline: none; width: 100%; } .inp:focus, .inp-sm:focus, .inp-lg:focus { border-color: var(--primary); box-shadow: var(--ring); } .inp-sm { height: var(--inp-h-sm); padding: 0 var(--inp-px-sm); font-size: var(--inp-fs-sm); } .inp-lg { height: var(--inp-h-lg); padding: 0 var(--inp-px-lg); font-size: var(--inp-fs-lg); } /* 带前缀 / 后缀图标（Medium 档）：外层 .inp-wrap，图标用内联 SVG 并加 .inp-ico.is-pre / .is-suf */ .inp-wrap { position: relative; display: flex; align-items: center; width: 100%; } .inp-wrap .inp-ico { position: absolute; top: 50%; transform: translateY(-50%); width: var(--inp-ico); height: var(--inp-ico); display: block; color: var(--muted); pointer-events: none; } .inp-wrap .inp-ico.is-pre { left: var(--inp-ico-in); } .inp-wrap .inp-ico.is-suf { right: var(--inp-ico-in); } .inp-wrap .inp.is-pre { padding-left: var(--inp-px-ico); } .inp-wrap .inp.is-suf { padding-right: var(--inp-px-ico); } /* ---------- 表单 ---------- */ /* 表单布局标准（用户 2026-09-17 给定，三种布局共用一套参数）： ① **垂直**（默认）：标签在上、输入框在下 → 标签↔输入框 **8**；字段与字段（列与列）上下 **24** 适用于标签较长的表单 ② **水平**：标签在左（**右对齐**）、输入框在右（左对齐） → 标签↔输入框 **16**；字段与字段上下 **24** 适用于标签较短的表单 → 单行加 `.is-h`，或给表单容器加 `.form-h` 整表生效 ③ **直线**：所有表单内容排成 **1 行** → 容器加 `.form-line`（适用于内容较少的表单） */ :root { --form-lb-v: 8px; /* 垂直布局：标签 ↔ 输入框（上下） */ --form-lb-h: 16px; /* 水平布局：标签 ↔ 输入框（左右） */ --form-row-gap: 14px; /* 列与列（字段与字段）上下间距 —— 三种布局统一 14（2026-09-20 用户改） */ --form-lb-w: 96px; /* 水平布局的标签列宽（右对齐用；长标签可自行覆盖） */ /* 详情页字段的「列名」列宽（右对齐用） —— 用户 2026-09-18 16:38：「整体调整一下，字段列名称，确保 8 个中文汉字不换行」 实测（14px）：纯 8 个汉字 + 全角冒号 = **126px**；最坏情况「销售额（收含税/运费）：」 （8 汉字 + 全角括号 + 半角斜杠 + 冒号）= **160px** → 统一取 **168px**（留 8px 余量）。 只改宽度、**不动列数**（详情页仍是一行 4 个）→ 每列内容由 181 变窄到约 **108**， 值较长时会多折几行，属预期（用户要的是列名单行）。 */ --dt-lb-w: 100px; /* 2026-09-18 17:02 用户指定 100（96 → 168 → 160 → 100，都是他一轮轮试出来的） */ /* 详情页字段的字号 / 颜色（用户 2026-09-18 15:40 给定 → **列名与内容同字号、各自一个色**） */ --dt-fs: 14px; /* 列名 + 内容 都 14 */ --dt-label: var(--ink-2); /* 列名颜色（跟主题走：亮 #494949 / 暗 浅灰）*/ /* 列名 ↔ 内容 的间隔（用户 2026-09-18 16:54：「降为现在的一半」→ 16 → **8**）—— 详情页（`.detail-item` / `.kv-item`）/ 采购出货生产卡片（`.po-item`）共用这一个变量 */ --dt-gap: 8px; --dt-text: #130928; /* 内容颜色 */ } /* 暗色主题：`#130928`（近黑）在深底上会看不见 → 内容用暗色主题的正文色、列名用它的弱化色 */ [data-theme="dark"] { --dt-label: var(--muted); --dt-text: var(--text); } .edit-form { display: flex; flex-direction: column; gap: var(--form-row-gap); } .form-row { display: flex; flex-direction: column; gap: var(--form-lb-v); } /* ② 水平布局：标签右对齐、输入框左对齐；两者间距 16 */ .form-row.is-h, .form-h .form-row, .form-line > .form-row { flex-direction: row; align-items: center; gap: var(--form-lb-h); } .form-row.is-h > label, .form-h .form-row > label, .form-line > .form-row > label { flex: none; width: var(--form-lb-w); justify-content: flex-end; text-align: right; /* 标签要与**内容的第一行**对齐（如「数字格式」要和上面的类型选择框同一行、垂直居中）， 不能整块内容居中 —— 内容多行时（数字格式 / 货币 / 进度）居中的话标签会跑到中间去 （用户 2026-09-17 反馈：「数字格式四个字一直在数字类型选择框的那一行，不是居中」） */ align-self: flex-start; align-items: center; min-height: var(--sel-h-md); } /* 水平布局下输入框占满标签右边的剩余宽度（默认的 width:100% 会把 label 挤扁） */ .form-row.is-h > input, .form-row.is-h > select, .form-row.is-h > textarea, .form-row.is-h > .csel, .form-row.is-h > .dp-field, .form-h .form-row > input, .form-h .form-row > select, .form-h .form-row > textarea, .form-h .form-row > .csel, .form-line > .form-row > input, .form-line > .form-row > select { flex: 1 1 auto; width: auto; min-width: 0; } /* ③ 直线布局：一行排开（内容少的表单，如筛选 / 快填） */ .form-line { display: flex; align-items: center; gap: var(--form-lb-h); flex-wrap: nowrap; } .form-line > label { flex: none; text-align: right; } .form-line > .form-row { flex: 1 1 auto; min-width: 0; } /* ---------- Switch 开关规范（用户 2026-09-17 给定）---------- 三种样式：① 常规（默认） ② 带文字（开关内写「开 / 关」等补充说明） ③ 不可用（失效态） 两种尺寸：**Large 42×24**（全页面行动点，默认）/ **Small 28×16**（较小场景，表单行里用它） 用法： 圆角：pill / 圆点都不在全局「强制直角」名单里 → 这里的药丸形状不会被压平 */ :root { --sw-lg-w: 42px; --sw-lg-h: 24px; --sw-lg-knob: 20px; --sw-sm-w: 28px; --sw-sm-h: 16px; --sw-sm-knob: 12px; --sw-on: var(--primary); /* 开：主色 */ --sw-off: #C9CDD4; /* 关：灰 */ } .sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: var(--fs-14); color: var(--text); } .sw > input[type=checkbox] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .sw-pill { position: relative; flex: none; box-sizing: border-box; width: var(--sw-lg-w); height: var(--sw-lg-h); border-radius: 999px; background: var(--sw-off); display: inline-flex; align-items: center; padding: 0 2px; transition: background .18s ease; } .sw-pill::after { content: ''; flex: none; width: var(--sw-lg-knob); height: var(--sw-lg-knob); border-radius: 50%; background: #fff; transition: margin-left .18s ease, width .18s ease; } .sw > input:checked + .sw-pill { background: var(--sw-on); } .sw > input:checked + .sw-pill::after { margin-left: calc(var(--sw-lg-w) - var(--sw-lg-knob) - 4px); } /* Small 尺寸 */ .sw-sm .sw-pill { width: var(--sw-sm-w); height: var(--sw-sm-h); } .sw-sm .sw-pill::after { width: var(--sw-sm-knob); height: var(--sw-sm-knob); } .sw-sm > input:checked + .sw-pill::after { margin-left: calc(var(--sw-sm-w) - var(--sw-sm-knob) - 4px); } /* ② 带文字：文字画在开关**内部**（开→左、关→右），颜色为白、字号 12 */ .sw-text .sw-pill::before { content: attr(data-off); position: absolute; right: 5px; top: 50%; transform: translateY(-50%); color: #fff; font-size: var(--fs-12); line-height: 1; white-space: nowrap; } .sw-text .sw-sm .sw-pill::before, .sw-sm.sw-text .sw-pill::before { right: 4px; font-size: 11px; } .sw-text > input:checked + .sw-pill::before { content: attr(data-on); left: 5px; right: auto; } .sw-text.sw-sm > input:checked + .sw-pill::before { left: 4px; } /* ③ 不可用（失效态）：整块变淡、不可点 */ .sw > input:disabled + .sw-pill { opacity: .45; } .sw:has(> input:disabled) { cursor: not-allowed; } .sw:has(> input:disabled) .sw-label { color: var(--muted); } .sw-label { font-size: var(--fs-13); color: var(--text); } .sw-hint { font-size: var(--fs-12); color: var(--muted); } .form-row label { font-size: var(--fs-13); color: var(--muted); display: flex; align-items: baseline; gap: 6px; } .form-row .req { color: var(--danger); } .form-row .hint { font-size: var(--fs-12); color: var(--c-gray); font-weight: var(--fw-light); } .form-row input[type=text], .form-row input[type=number], .form-row input[type=password], .form-row input[type=date], .form-row textarea { min-height: var(--sel-h-md); height: var(--sel-h-md); padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: var(--fs-14); outline: none; width: 100%; } .form-row textarea { height: auto; min-height: calc(var(--sel-h-md) * 2); padding: 6px 10px; } /* 多行文本（textarea）的**默认高度 = 普通输入框高度的 2 倍**（用户 2026-09-18 14:42 定的规范）： 32 × 2 = **64**；上面用 `min-height` 实现 → 模板里 `rows` 给得更大时取较大值 */ /* 表单下拉：走「控件标准 · 下拉」Medium 档（高度 32 / 文字左距 16 / 箭头 12px / 箭头↔右边 12px） */ .form-row select { min-height: var(--sel-h-md); height: var(--sel-h-md); padding: 0 32px 0 var(--sel-px-md); border-radius: var(--radius-sm); border: 1px solid var(--field-border); background-color: var(--field-bg); background-image: var(--sel-arrow); background-repeat: no-repeat; background-position: right var(--sel-pr-md) center; background-size: var(--sel-caret-md) var(--sel-caret-md); color: var(--text); font-family: inherit; font-size: var(--sel-fs-md); outline: none; width: 100%; appearance: none; -webkit-appearance: none; } .form-row textarea { resize: vertical; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--primary); box-shadow: var(--ring); } .form-row input[readonly] { opacity: .72; background: var(--chip); } .form-row .is-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; } /* 供货「货品信息」带出区：颜色 / 主单位 / 子单位换算 */ .form-row[hidden] { display: none !important; } /* .form-row 是 flex，会盖掉 UA 的 [hidden] */ .form-row .gp-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-2); padding: 10px 12px; } .gp-line { display: flex; align-items: center; gap: 10px; min-height: 34px; } .gp-line-top { align-items: flex-start; } .gp-k { flex: none; width: 76px; font-size: var(--fs-13); color: var(--muted); } .gp-v { font-size: var(--fs-14); color: var(--text); } .form-row .gp-line select { flex: 1; min-height: 34px; padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: var(--fs-14); outline: none; } .form-row .gp-line select:focus { border-color: var(--primary); box-shadow: var(--ring); } .gp-convs { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 3px; } .gp-conv-row { display: flex; align-items: center; gap: 8px; } .form-row .gp-conv-row input.gp-conv-num { width: 120px; min-height: 34px; padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: var(--fs-14); outline: none; } .form-row .gp-conv-row input.gp-conv-num:focus { border-color: var(--primary); box-shadow: var(--ring); } .gp-conv-txt { font-size: var(--fs-13); color: var(--muted); white-space: nowrap; } /* 「供货填值」的货品字段录入行 + 供货单价后面的「主单位/币别」 */ .gp-fields { display: flex; flex-direction: column; gap: 8px; } .form-row input.gp-fill, .form-row select.gp-fill, .form-row textarea.gp-fill { flex: 1; width: auto; min-height: 34px; padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: var(--fs-14); outline: none; } .form-row input.gp-fill:focus, .form-row select.gp-fill:focus, .form-row textarea.gp-fill:focus { border-color: var(--primary); box-shadow: var(--ring); } .form-row textarea.gp-fill { width: 100%; resize: vertical; } .amount-wrap.has-unit .amount-input { border-radius: 0 !important; } .gp-unit { flex: none; font-size: var(--fs-13); color: var(--muted); white-space: nowrap; } /* 有主单位时：隐藏重复的 ¥ 前缀，输入框变成最左侧，需要左圆角 */ .amount-wrap.no-sym .amount-pre { display: none; } .amount-wrap.no-sym .amount-input { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; } .gp-price-unit { display: flex; align-items: center; padding: 0 10px; height: 36px; background: var(--chip); border: 1px solid var(--field-border); border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--muted); font-size: var(--fs-13); white-space: nowrap; } /* 两级分类合并呈现：「子类」下拉跟在「分类」下拉下面，仅当所选分类有子类时出现 */ .cat-sub-inline { display: flex; align-items: center; gap: 8px; } .cat-sub-inline .cat-sub-label { font-size: var(--fs-13); color: var(--muted); flex: none; } .cat-sub-inline select { flex: 1; } .amount-wrap { display: flex; align-items: center; width: 100%; } /* 货币符号块的高度**必须跟输入框同档**：原来写死 36px，而系统输入框是 `--sel-h-md`(32) → 符号块上下各突出 2px，与右边数字框**不齐**（用户 2026-09-18 14:27 截图问「货币符号所占高度 为什么和输入框高度不一致？」）→ 统一走 `--sel-h-md` （换档位时一起跟着变，别再写死数值） */ .amount-pre { flex: none; padding: 0 10px; height: var(--sel-h-md); display: flex; align-items: center; background: var(--chip); border: 1px solid var(--field-border); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--muted); font-size: var(--fs-14); } .amount-input { flex: 1 1 auto; width: auto; min-width: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; } /* 金额的「币别」下拉：接在金额输入框左侧（外观与原来的 ¥ 前缀一致，但可手动改）。 必须「窄 + 固定宽」：否则会被 `.form-row select{width:100%}`（特异性 0,1,1） 盖掉这里的 `flex:none`（0,1,0）→ 下拉撑满整行、把右侧数字输入框挤没。故用 `.form-row .amount-cur`（0,2,0）提权。 */ .form-row .amount-cur { flex: none; width: auto; max-width: 40%; padding: 0 8px; height: var(--sel-h-md); background: var(--chip); border: 1px solid var(--field-border); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--text); font-family: inherit; font-size: var(--fs-13); cursor: pointer; outline: none; } .form-row .amount-cur:focus { border-color: var(--primary); box-shadow: var(--ring); } /* 「固定币别」字段（如「客户扣款」恒为人民币）：不是下拉，就是个静态符号 —— 不可点、不看记录币别 */ .form-row .amount-cur-fixed { display: inline-flex; align-items: center; justify-content: center; cursor: default; color: var(--muted); } /* 数字字段（百分数 % 后缀等） */ .num-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 160px; } .num-wrap input[type=number] { flex: 1; } /* 「带单位」字段的单位后缀（如 规格 = CM）—— 🚨 必须 `white-space: nowrap` + `flex: none`：不加的话，格子一窄 "CM" 就会被**折成竖着的两行** （C 一行 M 一行 —— 用户 2026-09-26 报：「CM 是被什么压到竖项了」）✗✗ · `nowrap`：文字永不折行 ✓ · `flex: none`：作为 flex 子项（`.num-wrap` / `.cellwrap`）时不参与收缩 ✓ */ .num-suffix { color: var(--muted); font-size: var(--fs-14); white-space: nowrap; flex: none; } /* 🆕 「带单位」（用户 2026-09-26）：文本 / 多行文本也套一层 `.num-wrap` ⇒ 单位永远在**最后** ✓ 数字框本来就有 `flex:1`；文本 / 多行文本必须补上，否则输入框不撑满、后缀会飘在中间 ✗ */ .num-wrap > input[type=text] { flex: 1 1 auto; min-width: 0; } .num-wrap > textarea { flex: 1 1 auto; width: auto; min-width: 0; } /* 字段设置 · 数字格式配置 */ .num-cfg { display: flex; flex-direction: column; gap: 10px; } /* 水平布局（.form-row.is-h）下，数字格式这类**配置块**要占满标签右边（否则整块被压到最小宽度） */ .form-row.is-h > .num-cfg, .form-row.is-h > .num-line, .form-row.is-h > .num-wrap, .form-row.is-h > .num-sub, .form-row.is-h > .date-fmt, .form-row.is-h > .fd-opts-wrap, .form-row.is-h > .fd-casc-wrap, .form-row.is-h > .person-cfg, .form-row.is-h > .fd-history, .form-row.is-h > .auto-wrap, .form-row.is-h > .amount-wrap { flex: 1 1 auto; min-width: 0; } .num-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .num-line > select { min-width: 130px; } .num-dec { gap: 8px; color: var(--txt); font-size: var(--fs-14); white-space: nowrap; } .num-dec select { margin-left: 6px; min-width: 110px; } .num-cur-label { white-space: nowrap; } /* 「人员」字段配置（字段设置里选类型=人员时出现）：选择方式 + 显示部门 */ .person-cfg { display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* 「历史值处理」（用户 2026-09-17 晚）：保留历史值 / 更新历史值 两个单选，横排 */ /* 「历史值处理 / 已关闭的值」两行（用户 2026-09-17 晚）：各一行、标签在左列（与上面各行右对齐同列） */ .fd-history { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0; } /* ---------- 级联字段控件（用户 2026-09-17 · Cascader 规范）---------- 输入框：右侧留 28px 给箭头（箭头 12px，规范给的 icon 尺寸）； 面板：多列联动，`padding: 4px 0`（规范 4 / 32 / 4），项高 32、字号 14、左内距 12、右侧 12px 箭头； 面板由 JS 挂到 document.body + position:fixed（避免被弹窗 / iframe 裁掉）。 */ .casc { position: relative; display: block; min-width: 0; } .casc-input { width: 100%; padding-right: 28px !important; cursor: pointer; } .form-row .casc-input[readonly] { background: var(--field-bg); } .casc-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; color: var(--muted); pointer-events: none; } .casc.open .casc-arrow { color: var(--primary); transform: translateY(-50%) rotate(180deg); } .casc.is-sm .casc-input { height: 24px; font-size: var(--fs-13); } .casc.is-lg .casc-input { height: 40px; font-size: var(--fs-16); } .casc-panel { position: fixed; z-index: 400; display: flex; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(15,23,42,.14); padding: 4px 0; max-height: 320px; width: max-content; max-width: min(760px, calc(100vw - 24px)); /* 按内容撑开（规范图：面板比输入框宽） */ } .casc-col { min-width: 92px; max-width: 240px; overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--line); } .casc-col:last-child { border-right: none; } .casc-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; font-size: var(--fs-14); color: var(--text); cursor: pointer; white-space: nowrap; } .casc-item .casc-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .casc-item .casc-ico { flex: none; width: 12px; height: 12px; } .casc-item:hover { background: var(--bg-list); } .casc-item.on { background: var(--primary-soft); color: var(--primary); font-weight: var(--fw-medium); } .casc-empty { height: 32px; padding: 0 12px; display: flex; align-items: center; font-size: var(--fs-14); color: var(--muted); } /* 「支持搜索」开关打开时（关联字段 + 级联取值）：每一列顶部一个**吸顶**搜索框 —— 任一级都能模糊过滤；列本身是滚动容器（overflow-y:auto），sticky 正好粘在列顶 ✓ */ .casc-sbox { position: sticky; top: 0; z-index: 2; background: var(--card); padding: 4px 6px 6px; border-bottom: 1px solid var(--line); } .casc-sinp { width: 100%; height: 28px; padding: 0 8px; font-size: var(--fs-13); color: var(--text); background: var(--field-bg); border: 1px solid var(--line); border-radius: 0; outline: none; } .casc-sinp:focus { border-color: var(--primary); background: var(--card); } .casc-none { height: 28px; padding: 0 12px; display: flex; align-items: center; font-size: var(--fs-13); color: var(--muted); } /* 字段设置弹窗里「级联选项」的树编辑器：缩进代表层级 */ .fd-casc-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; width: 100%; } .fd-casc-list { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; } .fd-casc-row { display: flex; align-items: center; gap: 8px; } .form-row .fd-casc-row .fd-casc-name { flex: 1 1 auto; min-width: 0; height: var(--sel-h-md); padding: 0 10px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: var(--fs-14); outline: none; } .fd-casc-btns { display: flex; align-items: center; gap: 8px; } .person-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* 「选择方式」四个字已删（用户 2026-09-17）→ 去掉左间距；下拉**按内容宽度、不撑满整行** （撑满会把右边的「显示部门」挤到第二行 ）。选择器带 `.form-row` 前缀才压得住通用的 `.form-row select` */ .form-row .person-line > select { min-width: 190px; width: auto; flex: none; } /* 人员字段「限制范围」（用户 2026-09-17 改版）：行里只放「选择部门 / 人员」按钮 + 已选摘要， 候选项列表在**弹窗** `#fdScopeModal` 里勾选（用户：不是让你展示所有部门和人员的，而是弹窗选择） */ .person-scope-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; } /* 写了 display:flex 就必须补这条：否则 `hidden` 属性会被 display:flex 覆盖、永远关不掉 */ .person-scope-line[hidden] { display: none; } .ps-summary { font-size: var(--fs-13); color: var(--text); word-break: break-all; } .ps-summary:empty { display: none; } /* 没选 → 整段不占位、不显示任何文字 */ .ps-summary.is-err { color: var(--danger); font-weight: var(--fw-bold); } /* 开了没选就保存 → 红字拦住 */ /* 弹窗里的两列（部门 / 人员） */ .scope-cols { display: flex; gap: 16px; flex-wrap: wrap; } .ps-group { flex: 1 1 240px; min-width: 0; } .ps-head { font-size: var(--fs-13); color: var(--muted); margin-bottom: 6px; } .ps-list { max-height: 280px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--line); background: var(--field-bg); display: flex; flex-direction: column; gap: 6px; } .ps-list .sw-inline { font-size: var(--fs-13); } .num-sub { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--card-2); } /* 「限制范围」（用户 2026-09-17）：[最小值] ≤ X ≤ [最大值] */ .num-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .num-range .num-range-inp { width: 110px; } /* 特异性高于 .form-row input[type=number] 的 width:100% */ .num-range-op { font-size: var(--fs-13); color: var(--muted); white-space: nowrap; } /* 背景框里内容是**多行**时用它（如日期「显示方式」）：纵向铺满，不居中堆在左上 */ .num-sub-col { flex-direction: column; align-items: stretch; gap: 10px; flex-wrap: nowrap; } .num-color-label { margin-right: 4px; } .color-pick { display: inline-flex; gap: 10px; flex-wrap: wrap; } .color-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--fs-14); padding: 3px 8px 3px 4px; border: 1px solid transparent; border-radius: 0; } .color-opt:hover { border-color: var(--line); } .color-opt input { accent-color: var(--primary); } .color-dot { width: 14px; height: 14px; border-radius: 0; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } /* 可搜索下拉里的**副文本**（关联字段的辅助字段，如供应商简称）—— 只在候选行里当灰色小字辨识， **不参与回填**（选中后格子里只显示主字段值 ✓ 用户 2026-09-26）*/ /* 候选行 = **多列（像表格）**：主字段（没拼接时即输出值）+ 辅助字段 1/2…（只作选择参考 ✓） 用户 2026-09-26：「主字段 辅字段1 辅字段2，就像一个表格一样选择」*/ /* 列数自适应（辅助字段可能 1 个也可能多个，不能写死列数） 必须用两个类 .ssel .ssel-opt：文件后面还有一条单类 .ssel-opt 会压过来； 并显式 overflow:visible，否则那条的 overflow:hidden 会把副列裁掉 */ .ssel .ssel-opt { display: flex; align-items: center; gap: 12px; overflow: visible; } /* 关联字段的可搜索下拉（.sup-ssel）：候选项前面给个**选中圆圈** —— 与详情页 / 表单的关联控件（radio）保持一致（用户 2026-09-26：「前面为什么没有那个选中的圆圈呢」）； 只作用于 .sup-ssel ⇒ 普通下拉（单位 / 状态…）不受影响 ✓ 未选中＝空心圆，选中＝主色实心 ✓ 标题行也留同宽占位，保证列与标题对齐 ✓ */ .sup-ssel .ssel-opt { gap: 8px; } .sup-ssel .ssel-opt::before { content: ''; flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card); } .sup-ssel .ssel-opt.is-on::before { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 3px var(--card); } .sup-ssel .ssel-head::before { content: ''; flex: 0 0 auto; width: 13px; } .ssel .ssel-opt .ssel-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 详情页 / 表单的关联控件（.rel-field）候选行也用**同一套多列口径** ✓ 用户 2026-09-26 */ /* ⚠️ 写成 .rel-field .ms-opt.rel-opt（三个类）：实测单类 .rel-opt 会被既有规则压成 flex ✗ （老坑：元素"改不动 / 没生效"先数选择器类数 ✓）*/ /* 列数**自适应**（辅助字段可能多个 ⇒ 用 flex 而非写死网格列 ✗ 用户 2026-09-26）； 注意必须写三个类，否则会被既有规则压掉（实测被压成 flex 且列宽不对 ✗）*/ .rel-field .ms-opt.rel-opt { display: flex; align-items: center; gap: 12px; overflow: visible; } .rel-field .ms-opt.rel-opt .rel-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rel-field .ms-opt.rel-opt .rel-sub { flex: 0 0 auto; min-width: 72px; color: var(--muted); font-size: var(--fs-12); white-space: nowrap; } /* 关联控件面板顶部的**列标题行**（冻结）✓ */ .rel-cols-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: var(--card-2); border-bottom: 1px solid var(--line); font-size: var(--fs-12); color: var(--muted); } .rel-cols-head > span:first-child { flex: 1 1 auto; min-width: 0; } .rel-cols-head > span + span { flex: 0 0 auto; min-width: 72px; } /* 副列固定最小宽，各行辅字段竖着对齐；没值的行留空但仍占位 */ .ssel .ssel-opt .ssel-sub { flex: 0 0 auto; min-width: 72px; color: var(--muted); font-size: var(--fs-12); white-space: nowrap; } /* 面板顶部的列标题行（sticky 冻结）：主字段名 + 各辅助字段名 */ .ssel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: var(--card-2); border-bottom: 1px solid var(--line); font-size: var(--fs-12); color: var(--muted); } .ssel-head > span:first-child { flex: 1 1 auto; min-width: 0; } .ssel-head > span + span { flex: 0 0 auto; min-width: 72px; } /* 「已选 N 条」这类**贴着按钮的计数**：与按钮同一行、上下居中（用户 2026-09-26： 「已选2条，为什么是一个小字？应该和确认导入按钮一行，上下居中」）—— · 以前用 `.pm-hint`（12px 灰 + flex 默认 stretch ⇒ 文字贴行顶），看着像脚注 ✗ · 现在高度与字号都取按钮的值（`--btn-h-md` / `--btn-fs-md`）⇒ 天然与按钮齐平 ✓ · 只换这一处；其它弹窗底部同款小字要不要一起对齐，等用户拍板 ✓ */ .cnt-inline { display: inline-flex; align-items: center; align-self: center; height: var(--btn-h-md); font-size: var(--btn-fs-md); color: var(--text); } .cnt-inline b { font-weight: var(--fw-medium); } /* 字段设置弹窗：表单行之间按标准行距 24 排（该表单不是网格布局，行距由容器 gap 给） */ #fdForm { display: flex; flex-direction: column; gap: var(--form-row-gap); } /* ---------- 弹窗 ---------- */ .modal-scrim, .to-modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 90; display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px); } .modal-scrim.open, .to-modal.open { display: flex; } .modal { /* 原来写的是 `inset: 0; margin: auto` —— 上下都锚到 0 时，`height: auto` 会被解析成 **填满视口**（height 反而不再是内容高）→ 弹窗永远是满高、按钮下面留白 。 改成「左上角 50% + translate 居中」→ 高度才能真正随内容走 （配合 fitModalFrame）*/ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 95; /* 宽度（用户 2026-09-18 14:11 定「输入框统一 350」，14:47 又定「内容距弹窗边缘 24」）→ 由这两条**一起**反推（一行 2 个 + 上下输入 + 卡片左右内距 6 的规范下）： 350 ×2(列) + 18(列距) = 718 → + 卡片内距 6×2 = 730 → + 卡片框线 1×2 = 732 → + 弹窗外层内距 18×2 = **768** （内容距弹窗边缘 = 18 + 1 + 6 = 25 ≈ 24，输入框正好 350，两条都满足） 历史：2026-09-15 曾要求「加一倍」→ 1280（那时是一行 3 个 + 左右布局）；14:11 按 350 反推成 804。 */ /* 高度：**随内容自适应**（用户 2026-09-18 14:51：「最后一个输入控件底部 ↕ 下方分割线 = 24」）—— iframe 的真实高度由 `public/js/app.js` 的 `fitModalFrame()` 量出来写进 inline style， 这里只留上限：超过 `86vh / 760px` 就让 iframe 内部滚动（操作栏 sticky 吸底）*/ width: min(768px, 94vw); height: auto; max-height: min(86vh, 760px); background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); display: none; flex-direction: column; overflow: hidden; } .modal.open { display: flex; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); } .modal-title { font-size: var(--fs-16); font-weight: var(--fw-bold); } .modal-close { background: none; border: none; font-size: 20px; color: var(--muted); cursor: pointer; line-height: 1; padding: 2px 6px; } .modal-close:hover { color: var(--danger); } /* iframe 高度不再吃 flex 剩余空间（那样与「弹窗高度由内容决定」循环依赖）→ 由 fitModalFrame() 显式给值 */ .modal-frame { flex: 0 0 auto; border: none; width: 100%; } /* 「采购详情单」弹窗 = **大窗**（用户 2026-09-22：「单据详情是打开弹窗查看。采购详情单。」）—— 要装下**整张**采购处理详情页（左侧导航 + 卡片 + 明细表）⇒ 宽 1360 / 高 92vh， 并让 iframe **填满**弹窗（`!important` 压掉 fitModalFrame() 写进来的内联高度，否则内容会被 overflow:hidden 裁掉、 而 iframe 自己的滚动条又在视口外 ⇒ 里外都滚不动 ）*/ .modal.is-doc { width: min(1360px, 96vw); height: 92vh; max-height: 92vh; } .modal.is-doc .modal-frame { flex: 1 1 auto; height: 100% !important; min-height: 0; } .embed-body { background: var(--card); padding: 18px; } .modal-form { max-width: 100%; } /* ============================================================ 【弹窗字段区规范 · 完整版】用户 2026-09-18 定稿 ① 布局：**一行 2 个字段**（原 3 个 → 14:02 改） ② 形态：**上下输入** —— 字段标题在上、输入框在下（弹窗不再有专属水平布局） ③ 列与列（字段与字段）：**上下间距 16**、左右列距 18 ④ 字段标题 ↔ 字段输入框：**上下间距 8** ⑤ 字号/字重：区块名称标题 **16 加粗**（距卡片左边界 24）；字段标题 **14 + 正文黑** ⑥ 卡片左右内距 **24**；弹窗宽度 **804**（由输入框 350 反推，推导见 `.modal` 上方注释） · 作用域：**只在弹窗（iframe）内生效** —— `body.embed-body` 只有 embed 版页面才有； 整页编辑 / 详情页不在此作用域 → 仍是标准 24 行距、13px 灰字段名 · 网格必须包在 `.modal-grid` 上，**不要直接给 `
` 加 display:grid** —— 那样 `.form-actions` 会变成 grid item，`position:sticky` 只在它自己的 grid area 内滚动 → **吸底失效** · `.gp-full`（如「货品信息」带出区）整行跨列 ============================================================ */ body.embed-body .modal-form .modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; /* ③ 字段与字段：上下 16 / 左右 18 */ align-items: start; } body.embed-body .modal-form .modal-grid > .form-row { margin-top: 0; } body.embed-body .modal-form .modal-grid > .form-row.gp-full { grid-column: 1 / -1; } /* 弹窗字段跨行规则（用户 2026-09-18 14:45）： 「默认**多行文本**字段独占弹窗 1 行、**下拉多选**字段独占 1 行」→ 这两类**整行跨列**（占满 2 列 = 718px） 用模板传下来的 `data-ftype` 精确匹配类型，**不要**用 `:has(textarea)` / `:has(.ms-field)` —— 后者会把「标签 / 人员多选 / 关联多选」（同样用 `.ms-field` 渲染）一起拉成整行 （模板：`entity/form.ejs`、`orders/form.ejs` 的 `
`） */ body.embed-body .modal-form .modal-grid > .form-row[data-ftype="textarea"], body.embed-body .modal-form .modal-grid > .form-row[data-ftype="multi_select"] { grid-column: 1 / -1; } /* ④ 字段标题 ↔ 输入框 上下 8 —— 与全局 `--form-lb-v` 同值，这里**显式写出来**， 让这套弹窗规范自成一套、不依赖外部变量（改弹窗不用去翻 :root） */ body.embed-body .modal-form .form-row { gap: 8px; } /* 弹窗里**单列表单**（如「调整单价」，容器是 .edit-form 而不是网格）的行距也统一 16， 免得同一个弹窗体系里两种行距（网格 16 / 单列 24）看起来不统一 */ body.embed-body .modal-form .edit-form { gap: 16px; } /* ⑤-a 区块名称标题 = 16px 加粗： 必须带 `.card` 前缀提权 —— `.card h2`（0,1,1）会盖掉 `.rel-title`（0,1,0）的 16px， 弹窗里原来**实际是 18px**（用户看到的就是这个）→ 这里按规范压回 16 */ body.embed-body .modal-form .card > h2 { font-size: var(--fs-16); font-weight: var(--fw-bold); } /* ⑤-a 补充「标题 / 内容距**弹窗边缘** 24」（2026-09-18 14:47 用户再次明确：「默认状态下，这个间距也是 24」）→ 卡片左右内距 = **6**：`body.embed-body` 内距 18 + 卡片 1px 边框 + 6 = **25 ≈ 24** 这里给 6 而不是 24 是为了**同时**满足两条硬约束： · 内容（标题 / 字段 / 明细表）距弹窗边缘 24 · 字段列宽（= 输入框宽度）正好 **350** 验证：弹窗宽 768 − 36(embed 内距) − 2(边框) − 12(卡片内距) − 18(列距) = 700 → 700 ÷ 2 = **350** */ body.embed-body .modal-form .card { padding-left: 6px; padding-right: 6px; } /* ⑤-b 字段标题 = 14px + 正文黑（原来是 13px 的 --muted 灰） 提示小字 `.hint` 仍是 12px 灰（不动，它是辅助信息不是标题） */ body.embed-body .modal-form .form-row > label { font-size: var(--fs-14); color: var(--text); } /* ---------- 弹窗里**只有 1 个区块**时：不要区块标题、不要卡片外框（用户 2026-09-18 14:15）---------- 「当弹窗中只有 1 个区块的时候，就不需要这个区块再出现 1 个单独的卡片了 … 内容区域只有 1 张卡片」 · 标题那一层由模板负责：`entity/form.ejs` / `orders/form.ejs` 的 `_singleCard` 为真时**不渲染 `

`** （口径 = 按实际渲染的字段分桶，只有 1 桶才算「只有一个区块」） · 这里只去掉卡片的**边框 / 阴影 / 底色** → 视觉上字段直接铺在弹窗里，不再「卡套卡」 · **必须保留 1px 边框占位 + 24 内距**：去掉它们内容会宽出 50px → 输入框就不是 350 了 */ body.embed-body .modal-form .card.card-bare { background: transparent; border-color: transparent; box-shadow: none; } /* 「只有 1 张卡片」时：**弹窗顶部 ↕ 第一个字段 = 24**（用户 2026-09-18 14:37 圈出这段空白要「默认 24」） 24 = `body.embed-body` 上内距 18 + 卡片补的 6。 只能动**上**内距 —— 左右 24 不能碰（那是「输入框正好 350」的推导基础，见 `.modal` 注释）； 下内距 18 也不动（它和操作栏的 `margin-top: 14` 一起构成到按钮行的留白）。 */ body.embed-body .modal-form .card.card-bare { padding-top: 6px; padding-bottom: 0; } /* 弹窗字段**不再有**「弹窗专用水平布局」（原 `--form-lb-w:112px` / is-h 那三条，2026-09-18 14:02 随新规范删除）—— 弹窗字段一律「上下输入」；`.is-h` 只服务于**字段设置弹窗**（`views/admin/fields.ejs`）里那些标签很短的配置行 */ @media (max-width: 760px) { body.embed-body .modal-form .modal-grid { grid-template-columns: 1fr; } } .to-panel { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); overflow: hidden; } /* 左右内距 24 = 内容区 16 + 滚动条槽 8（见下面 `.to-body` 的 `scrollbar-gutter`）—— 标题 / 关闭按钮要和内容块的左右边缘对齐，别各写各的（用户 2026-09-17 晚：弹窗两侧间隙不对） */ /* 标题栏**统一 48 高**（用户 2026-09-18 19:31：「转入订单弹窗的外框标准不对」）—— 原来是 `padding:12px 24px` 让标题行高度随内容走：里面的关闭控件若是 ``（行高 27）→ 头部变成 **54**， 而 `