/* ============================================================ Design Token（2026-09-15 建立） ------------------------------------------------------------ 为什么要有这一层：审核实测发现全站散落 17 种字号、10 种卡片内边距、 17 种圆角、8 套按钮规格且互不对应 —— 根因是视觉值各处硬编码， 改一处漏一处。这里把它们收拢成唯一真值源，后续统一引用变量。 ⚠ 当前策略（分两步走）： 第一步（本次）：只**声明**变量，不改动下面任何既有规则 —— 零视觉变化、零风险。 第二步（后续批次）：逐块把字面量替换为 var(...)，替换时同步复测。 例：.lodging-table 已作为第一块试点，改用下面的变量。 字号梯级设计依据（从 21 种收到 8 级）： 实测 9 / 9.5 / 10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13 / 13.5 / 14 / 15 / 16 / 18 / 19 / 20 / 21 / 22 / 24 共 19 种文本字号（另有 28 / 40 两处纯图标字号）。 梯级不是拍脑袋定的，是按「逐行清点 + 语义就近靠档」推出来的，两条硬约束： ① body 与 input 的基础字号是 14px —— 若归到 13 或 15，全站正文会整体 缩放 7%，属"为了整齐而破坏版面"。所以保留 --fs-base: 14px。 ② 11 / 12 / 13 / 14 四档小字各差 1px（可辨识），一举消灭了 9 / 9.5 / 10 / 10.5 / 11.5 / 12.5 / 13.5 七个冗余档位。 实际替换后 96% 的处所字号变化 ≤0.5px（视觉零感），最大变化 ±2px 仅 4 处。 ⚠ --fs-lg 取 16px 是有意为之，不是凑数： 它既是卡片标题档，也是**输入控件的下限** —— iOS Safari 在输入框字号 小于 16px 时，聚焦会自动放大整个页面（填报销单每点一格跳一次）。 所以所有 input / select / textarea 都指向这一档。 ============================================================ */ :root { /* ---------- 字号：8 级 ---------- */ --fs-xs: 11px; /* 辅助说明、图例、角标、meta */ --fs-sm: 12px; /* 表单 label、次级文本、tag */ --fs-md: 13px; /* 表格单元格、紧凑正文 */ --fs-base: 14px; /* 正文默认（body） */ --fs-lg: 16px; /* 输入控件 / 卡片标题（iOS 输入聚焦不放大阈值） */ --fs-xl: 18px; /* 页面标题、区块大标题 */ --fs-2xl: 20px; /* 登录页标题、统计大数 */ --fs-3xl: 24px; /* 统计卡主数字 */ /* ---------- 行高：4 档 ---------- */ --lh-num: 1; /* 金额、计数等大数字 */ --lh-tight: 1.2; /* 标题、单行数字 */ --lh-body: 1.4; /* 正文默认 */ --lh-loose: 1.6; /* 多行说明、长文本 */ /* ---------- 圆角：3 档 ---------- */ --radius-sm: 4px; /* 小控件：标签、小徽章 */ --radius-md: 8px; /* 按钮、卡片、输入框 */ --radius-lg: 12px; /* 弹窗、登录框等大容器 */ /* ---------- 间距：4 档（8 的倍数） ---------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; /* ---------- 卡片内边距：2 档 ---------- */ --card-pad-sm: 12px; /* 图表卡、紧凑卡 */ --card-pad-md: 16px; /* 内容卡、表单卡 */ /* ---------- 语义色 ---------- */ /* ★ 2026-10-08 第 83 批 L1 换肤（飞书风 · 拍板方向 A 现代浅色 + 蓝绿双板块色）： 主色 #1F4E79 → #185FA5（OA 蓝），文本/底色同步提亮；语义红绿不动。 ⚠️ --c-border / --c-border-strong 不动 —— verify_ncr_toolbar_ui 按 #C8D3E0 实值断言筛选条描边。 ⚠️ 工厂绿不进 --c-primary —— 板块色由 .sidebar-sec-factory 等作用域类承载，防「一处改了全站跟着变」。 */ --c-primary: #185FA5; /* 主色：OA 蓝（板块色·蓝） */ --c-primary-dark: #0C447C; /* 主色深：hover */ --c-primary-soft: #E6F1FB; /* 主色浅底：导航高亮、选中态 */ --c-factory: #0F6E56; /* 工厂板块绿 */ --c-factory-dark: #085041; /* 工厂绿深：hover */ --c-factory-soft: #E1F5EE; /* 工厂绿浅底 */ --c-text: #1A1D21; /* 主文本 */ --c-text-sub: #5F6470; /* 次级文本、label */ --c-muted: #9BA1AB; /* 弱化文本（第 83 批顺手调亮，还对比度欠账） */ --c-border: #DCE3EC; /* 常规描边 */ --c-border-strong: #C8D3E0; /* 输入框描边（断言按此实值，勿动） */ --c-bg: #F7F8FA; /* 页面底色（第 83 批：#F2F5F9 → #F7F8FA） */ --c-bg-soft: #F8FAFC; /* 卡片内浅底、条纹 */ --c-danger: #D9534F; /* 危险 / 删除 */ --c-success: #2E9E5B; /* 成功 / 通过 */ --c-warning: #E88A00; /* 警示 / 待处理（⚠ 对比度待 P1 批次处理） */ /* ---------- 触控 ---------- */ --tap-min: 44px; /* 移动端可点元素最小尺寸（iOS HIG / Material 共识值） */ } * { margin: 0; padding: 0; box-sizing: border-box; } /* 正文基准行高（P1「行高补齐」）： 改造前全站 95% 的文字都是浏览器默认 normal（≈1.2），小字号下拥挤、也无法 形成层级。这里铺一个 1.4 的正文基准；标题与数字由各自规则用 --lh-tight(1.2) / --lh-num(1) 覆盖回去。 */ body { font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Arial, sans-serif; background: #F2F5F9; color: #17233D; font-size: var(--fs-base); line-height: var(--lh-body); } a { text-decoration: none; color: inherit; } button { cursor: pointer; font-family: inherit; } input, select, textarea { font-family: inherit; font-size: var(--fs-lg); } /* 登录页 */ /* ★ 2026-10-08 第 83 批：登录页浅色化（飞书风）——深蓝大色块 → 浅灰底 + 白卡 + 品牌蓝点缀 */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #EDF2F9 0%, #F7F8FA 100%); padding: 20px; } .login-box { display: flex; width: 100%; max-width: 820px; background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 8px 24px rgba(0,0,0,0.10); } .login-brand { flex: 0 0 45%; display: flex; flex-direction: column; } .login-brand-logo { flex: 1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 30px; } .login-brand-logo img { max-width: 140px; max-height: 132px; width: auto; height: auto; } .login-brand-info { flex: 1; display: flex; flex-direction: column; justify-content: center; background: #E6F1FB; padding: 28px; color: #0C447C; } /* ★ 第 85 批补丁 v3：登录页主名「耀润」字号**翻倍**（20 → 40px）；英文副标题已删除 ⇒ .en 规则一并移除。 */ .login-brand-info h1 { font-size: calc(var(--fs-2xl) * 2); font-weight: 700; } .login-brand-info p { font-size: var(--fs-sm); color: #5F6470; margin-top: 12px; line-height: var(--lh-loose); } .login-form { flex: 1; padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; } .login-form h2 { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: 6px; } .login-form .sub { font-size: var(--fs-sm); color: #9BA1AB; margin-bottom: 24px; } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: var(--fs-sm); color: #3D5166; margin-bottom: 6px; } .form-group label .req { color: #D9534F; } .form-group input, .form-group select, .form-group textarea { width: 100%; height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #C8D3E0; border-radius: 6px; background: #fff; outline: none; transition: border-color 0.2s; } /* 多行文本框豁免固定高度：44px 只约束单行控件（input/select），textarea 按 rows 自适应 */ .form-group textarea { height: auto; min-height: 44px; resize: vertical; } /* 单选/复选框与紧凑表格输入沿用自身尺寸，不被 44px 单行控件规则误伤 */ .form-group input[type=radio], .form-group input[type=checkbox] { width: auto; height: auto; } .form-group .liquor-table input, .form-group .liquor-table select, .form-group .ent-liq-table input, .form-group .ent-liq-table select { height: auto; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #1F4E79; } .form-group input.error { border-color: #D9534F; background: #FFF5F5; } .form-group .error-msg { font-size: var(--fs-xs); color: #D9534F; margin-top: 4px; } .form-group .readonly { background: #EEF2F7; color: #3D5166; } .btn { padding: 11px 20px; border-radius: var(--radius-md); font-size: var(--fs-base); font-weight: 600; border: none; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* ★ 第 83 批：主按钮随 token 走（#185FA5 OA 蓝） */ .btn-primary { background: #185FA5; color: #fff; } .btn-primary:hover { background: #0C447C; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-success { background: #2E9E5B; color: #fff; } .btn-success:hover { background: #25804A; } .btn-danger { background: #fff; color: #D9534F; border: 1px solid #D9534F; } .btn-danger:hover { background: #FFF5F5; } .btn-default { background: #fff; color: #5F6470; border: 1px solid #C8D3E0; } .btn-default:hover { background: #F8FAFC; } .btn-block { width: 100%; } .login-forgot { text-align: center; font-size: var(--fs-xs); color: #9BA1AB; margin-top: 14px; } .login-error { background: #FFF5F5; color: #D9534F; padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--fs-sm); margin-bottom: 16px; display: none; } /* 主布局 */ .app-layout { min-height: 100vh; display: flex; flex-direction: column; } /* ★ 第 83 批：顶栏深蓝渐变 → 白底细边（飞书风）；高度 52px 不动（mobile-nav top:48 / 侧栏 sticky top:52 都依赖它） */ .app-header { background: #fff; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #1A1D21; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #E8EAEE; } .app-header-left { display: flex; align-items: center; gap: 10px; cursor: pointer; } .app-header-left img { height: 30px; width: auto; } /* ★ 第 85 批补丁 v3：品牌字标「耀润」字号**翻倍**（16 → 32px，故写 calc 而非新字号级）； 英文副标题已从 index.html 删除 ⇒ 原先给副标题的字号规则一并移除（避免留死 CSS）。 */ .app-header-left .title { font-size: calc(var(--fs-lg) * 2); font-weight: 700; letter-spacing: 1px; line-height: var(--lh-tight); } .app-header-right { display: flex; align-items: center; gap: 18px; } .header-user { display: flex; align-items: center; gap: 8px; cursor: pointer; position: relative; } /* ★ 第 83 批：白底下头像从「半透明白」改为浅灰底品牌蓝字 */ .header-user .avatar { width: 28px; height: 28px; border-radius: 50%; background: #EEF2F7; color: #185FA5; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 600; } .header-user .name { font-size: var(--fs-md); } .header-user .role { font-size: var(--fs-xs); color: #9BA1AB; } .user-dropdown { position: absolute; top: 100%; right: 0; background: #fff; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 140px; display: none; z-index: 200; } .user-dropdown.show { display: block; } .user-dropdown .item { padding: 10px 14px; font-size: var(--fs-md); color: #5F6470; cursor: pointer; border-bottom: 1px solid #EEF2F7; } .user-dropdown .item:hover { background: #F8FAFC; } .user-dropdown .item:last-child { color: #D9534F; border-bottom: none; } .app-body { flex: 1; display: flex; } /* ★ 2026-10-08 第 83 批：侧栏深蓝渐变 → 白底细边（飞书风），菜单按板块分组（组头 .sidebar-sec-title）。 板块色：OA 蓝 / 工厂绿（.sidebar-sec-factory 作用域）——绿只在工厂组生效，全站主色仍是蓝。 ★ 2026-09-15 用户要求：右侧内容区滚动时，左侧菜单栏固定不动（所有角色一致生效，与角色无关）。 为什么用 sticky 而不是 fixed：本页的滚动容器是**文档**（.app-content 的 overflow-y:auto 是个「不滚动的滚动容器」—— 见下方 .form-page-host 那段注释），所以 sticky 的参照物就是视口， 吸得住；且不会破坏表单页底部那条 sticky 工具条（它依赖的正是「文档滚动」这个前提）。 top: 52px = 顶部固定 header 的高度，否则菜单会被 header 压住一截。 height + overflow-y:auto：菜单项超过视口高度时侧栏自己滚，不把整页撑高。 */ .app-sidebar { width: 180px; background: #fff; border-right: 1px solid #E8EAEE; padding: 12px 0; flex-shrink: 0; position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; } /* ★ 第 83 批：菜单按板块分组（app.js renderSidebar 渲染 .sidebar-sec 容器） */ .sidebar-sec { margin-bottom: 4px; } .sidebar-sec-title { padding: 8px 20px 4px; font-size: var(--fs-xs); color: #9BA1AB; letter-spacing: 1px; font-weight: 600; } .sidebar-sec-me { margin-top: 8px; border-top: 1px solid #EEF0F3; padding-top: 8px; } .sidebar-item { padding: 11px 20px; font-size: var(--fs-md); color: #5F6470; cursor: pointer; display: flex; align-items: center; gap: 8px; border-left: 3px solid transparent; transition: all 0.2s; } .sidebar-item:hover { background: #F2F4F7; color: #1A1D21; } .sidebar-item.active { background: #E6F1FB; color: #185FA5; font-weight: 600; border-left-color: #185FA5; } /* 工厂组高亮用板块绿（唯一作用域，别处不受影响） */ .sidebar-sec-factory .sidebar-item.active { background: #E1F5EE; color: #0F6E56; border-left-color: #0F6E56; } .app-content { flex: 1; padding: 20px; overflow-y: auto; } .page-title { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 4px; } /* 标题行（标题 + 右侧导出按钮） */ .page-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; } .page-title-row .page-title { margin-bottom: 0; } .export-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; font-size: var(--fs-md); font-weight: 600; color: #1B6FB8; background: #fff; border: 1px solid #C7D6E8; border-radius: var(--radius-md); cursor: pointer; transition: all .15s; } .export-btn:hover { background: #EEF5FC; border-color: #1B6FB8; } .export-btn:active { transform: translateY(1px); } .page-sub { font-size: var(--fs-sm); color: #8A94A6; margin-bottom: 18px; } .page-sub-with-paid { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .page-sub-paid { font-size: var(--fs-md); font-weight: 600; color: #1B7A4A; white-space: nowrap; } /* 卡片 */ .card { background: #fff; border-radius: var(--radius-md); border: 1px solid #DCE3EC; padding: 16px; margin-bottom: 16px; } .card-title { font-size: var(--fs-base); font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; } .card-title .link { font-size: var(--fs-sm); color: #1F4E79; cursor: pointer; font-weight: 400; } /* 统计卡片 */ /* ── 统计卡配色语义约定（2026-09-15 收口 · UI 审核 P0-4）──────────────────── 颜色只表达「状态类别」，不表达顺序、也不表达金额健康度： blue = 中性 / 总量 总数、人数、年度合计、月份金额 gold = 待处理（需关注） 待审批、待财务审批、待打款、在审批中 green = 已完成 已打款、已通过 red = 异常 / 需干预 统计卡上不使用，留给「已驳回」这类标签 purple= 停用，勿在新卡片上使用 收口前三处硬伤：① 同一「待打款」同时用 green 与 gold； ② 「在审批中」用 red，被业务方读成「出错了」；③ 月份金额用 red/green/purple 编码月份， 红色最容易被读成「超支」——月份已由 label 文字说明，颜色不该再承担信息。 */ .stats-row { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .stat-card { flex: 1 1 140px; min-width: 120px; background: #fff; border-radius: var(--radius-md); padding: 14px 16px; border: 1px solid #DCE3EC; border-left: 3px solid #185FA5; } .stat-card.gold { border-left-color: #8A6D3B; } .stat-card.green { border-left-color: #2E9E5B; } .stat-card.red { border-left-color: #D9534F; } .stat-card.purple { border-left-color: #7B5EA7; } .stat-card .label { font-size: var(--fs-sm); color: #8A94A6; } .stat-card .value { font-size: var(--fs-3xl); font-weight: 700; margin-top: 4px; } .stat-card.blue .value { color: #185FA5; } .stat-card.gold .value { color: #8A6D3B; } .stat-card.green .value { color: #2E9E5B; } .stat-card.red .value { color: #D9534F; } .stat-card.purple .value { color: #7B5EA7; } .stat-card .desc { font-size: var(--fs-xs); color: #8A94A6; margin-top: 2px; } /* 提醒条 */ .alert-bar { background: #FFF8E6; border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 18px; border-left: 3px solid #E8B84B; display: flex; justify-content: space-between; align-items: center; } .alert-bar .text { font-size: var(--fs-md); color: #8A6D2E; } .alert-bar .text b { font-weight: 600; } .alert-bar .action { font-size: var(--fs-sm); color: #1F4E79; font-weight: 600; cursor: pointer; white-space: nowrap; margin-left: 12px; } .alert-bar.red { background: #FFF0F0; border-left-color: #D9534F; } .alert-bar.red .text { color: #B83A36; } /* 表格 */ .table-wrap { background: #fff; border-radius: var(--radius-md); border: 1px solid #DCE3EC; overflow-x: auto; overflow-y: hidden; } /* 单号单元格：等宽 + 禁止换行。 单号形如 YRBX-陈泰元-20260914-01，内含 '-'，浏览器默认会在每个连字符后折行， 会把一个单号竖着拆成 4 行、把行高从 ~30px 撑到 ~58px。必须锁成一行。 */ .doc-no { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-sm); white-space: nowrap; } table { width: 100%; border-collapse: collapse; } th { background: #F7F8FA; padding: 10px 14px; font-size: var(--fs-sm); font-weight: 600; color: #5F6470; text-align: left; } td { padding: 12px 14px; font-size: var(--fs-md); border-bottom: 1px solid #EEF2F7; } tr:last-child td { border-bottom: none; } tr:hover td { background: #F8FAFC; } /* 状态标签 */ .tag { display: inline-block; padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; } /* 标签配色语义约定（2026-09-15 收口 · UI 审核 P0-4） 收口前：「待处理」这一个语义用了四种颜色 —— 待审批=绿(#2E9E5B)、 待总监审批=橙(#E88A00)、待财务审批=蓝(#1F4E79)、待打款=紫(#7B1FA2)。 同一进度在不同页面呈现不同颜色，业务员没法靠颜色判断「这单走到哪了」。 收口后只留三类：橙 = 待处理 · 绿 = 已完成 · 红 = 异常。 */ .tag.pending { background: #FFF3E0; color: #E88A00; } .tag.approved { background: #E3F0E8; color: #1B7A4A; } .tag.rejected { background: #FFF0F0; color: #D9534F; } .tag.paid { background: #E3F0E8; color: #1B7A4A; } .tag.gm-pending { background: #FFF3E0; color: #E88A00; } .tag.finance-pending { background: #FFF3E0; color: #E88A00; } .tag.pending-payment { background: #FFF3E0; color: #E88A00; } /* 表单分组 */ .form-section { margin-bottom: 20px; } .form-section-title { font-size: var(--fs-sm); font-weight: 600; color: #1F4E79; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #EEF2F7; } .form-row { display: flex; gap: 12px; flex-wrap: wrap; } .form-row .form-group { flex: 1 1 200px; min-width: 180px; } /* 客户明细行：一次出差可对应多个「客户 + 事项」（2026-09-14 新增） */ .client-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; } .client-row .form-group { flex: 1 1 180px; min-width: 140px; margin-bottom: 0; } .client-row .client-del { flex: 0 0 auto; width: 40px; height: 41px; padding: 0; border-radius: var(--radius-md); border: 1px solid #E8C9C9; background: #FFF5F5; color: #D9534F; font-size: 18px; line-height: var(--lh-num); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .client-row .client-del:hover { background: #FFE9E9; border-color: #D9534F; } .btn-add-client { width: 100%; margin-top: 2px; border: 1px dashed #A8BDD6; background: #F7FAFD; color: #1F4E79; } .btn-add-client:hover { background: #EAF1F9; border-color: #1F4E79; } .form-hint { font-size: var(--fs-xs); color: #8A94A6; margin-top: 8px; line-height: var(--lh-loose); } @media (max-width: 640px) { .client-row { gap: 8px; } .client-row .form-group { flex: 1 1 100px; min-width: 0; } .client-row .client-del { width: 36px; } } /* 酒水审批明细表（2026-09-14 新增，对应纸质《酒水审批》表） 列较多，窄屏用横向滚动兜底，不折行、不换行错位 */ .liquor-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #DCE3EC; border-radius: var(--radius-md); background: #fff; } .liquor-table { width: 100%; border-collapse: collapse; min-width: 660px; } /* 详情页的合并总表多一列「对应客户」，需要更宽的下限 */ .liquor-table.liquor-table-wide { min-width: 800px; } .liquor-table th { background: #EAF0F7; padding: 8px 10px; font-size: var(--fs-sm); font-weight: 600; color: #3D5166; text-align: left; white-space: nowrap; } .liquor-table td { padding: 8px 10px; font-size: var(--fs-md); border-bottom: 1px solid #EEF2F7; vertical-align: middle; } .liquor-table tfoot td { padding: 9px 10px; font-size: var(--fs-md); font-weight: 700; color: #1F4E79; background: #F8FAFC; border-bottom: none; } .liquor-table input, .liquor-table select { width: 100%; padding: 6px 8px; border: 1px solid #DCE3EC; border-radius: var(--radius-md); font-size: var(--fs-lg); color: #22334A; background: #fff; box-sizing: border-box; } .liquor-table input:focus, .liquor-table select:focus { outline: none; border-color: #1F4E79; box-shadow: 0 0 0 2px rgba(31,78,121,0.08); } .liquor-table .lq-total, .liquor-table .lq-total-cell { font-weight: 600; color: #1F4E79; white-space: nowrap; } .liquor-table .liquor-del-cell { width: 44px; text-align: center; } /* 删除按钮的基础样式挂在 .client-row 作用域下，这里需另写一份 */ .liquor-table .client-del { width: 32px; height: 32px; padding: 0; border-radius: var(--radius-md); margin: 0 auto; border: 1px solid #E8C9C9; background: #FFF5F5; color: #D9534F; font-size: 16px; line-height: var(--lh-num); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .liquor-table .client-del:hover { background: #FFE9E9; border-color: #D9534F; } .liquor-sum-label { text-align: right; } /* 公司领导审批栏（出差详情页） */ .liquor-sign { display: flex; align-items: stretch; margin-top: 10px; border: 1px solid #DCE3EC; border-radius: var(--radius-md); overflow: hidden; } .liquor-sign-label { flex: 0 0 92px; display: flex; align-items: center; justify-content: center; text-align: center; background: #EAF0F7; font-size: var(--fs-sm); font-weight: 600; color: #3D5166; padding: 12px 8px; line-height: var(--lh-loose); } .liquor-sign-value { flex: 1; padding: 12px; font-size: var(--fs-md); color: #22334A; } @media (max-width: 640px) { .liquor-table { min-width: 560px; } .liquor-table th, .liquor-table td { padding: 7px 8px; font-size: var(--fs-sm); } .liquor-table input, .liquor-table select { padding: 5px 6px; font-size: var(--fs-lg); } .liquor-sign-label { flex: 0 0 76px; font-size: var(--fs-xs); } } /* 住宿费 + 伙食补助（2026-09-14 新增；2026-09-15 Token 化 + 新增「发票」列） 本块改动：①「标准」→「费用」；②每行多一个「发票」上传位（44px = --tap-min）； ③所有视觉值改引 Token 变量 —— 这一块是全站第一块试点，其余块后续批次跟进。 与酒水表同一套表格观感，窄屏横向滚动兜底（手机端另有 .lg-scroll-hint 文字提示）。 */ .lodging-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: #fff; } .lodging-table { width: 100%; border-collapse: collapse; min-width: 760px; } .lodging-table th { background: #EAF0F7; padding: var(--space-sm) 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-sub); text-align: left; white-space: nowrap; } .lodging-table td { padding: var(--space-sm) 10px; font-size: var(--fs-md); border-bottom: 1px solid #EEF2F7; vertical-align: middle; } .lodging-table tfoot td { padding: 9px 10px; font-size: var(--fs-md); font-weight: 700; color: var(--c-primary); background: var(--c-bg-soft); border-bottom: none; } /* ★ 2026-09-17 第 33 批：补 select —— 第 30 批加「归属客户」列时只写了 input 的样式， 表格里的下拉裸奔成系统原生样式（截图反馈），与同行地区/费用/天数输入框不一致。 */ .lodging-table input, .lodging-table select { width: 100%; padding: 5px 7px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); /* 用 --fs-lg(16px) 而非 --fs-md：所有 input 必须 ≥16px， iOS Safari 在输入框字号小于 16px 时聚焦会自动放大整页 —— 住宿费表要填 4 个字段， 每点一格跳一次放大，是业务员投诉最多的体验问题。表格内已相应收窄 padding 抵住行高。 */ font-size: var(--fs-lg); color: #22334A; background: #fff; box-sizing: border-box; } .lodging-table input:focus, .lodging-table select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 2px rgba(31,78,121,0.08); } /* select 浏览器默认渲染比 input 高 2px（同 padding 同字号实测 36 vs 34），显式钉住同高 */ .lodging-table select { height: 34px; } .lodging-table .lq-total, .lodging-table .lq-total-cell { font-weight: 600; color: var(--c-primary); white-space: nowrap; } .lodging-table .liquor-del-cell { width: 44px; text-align: center; } /* 删除按钮的基础样式挂在 .client-row 作用域下，这里需另写一份 */ .lodging-table .client-del { width: 32px; height: 32px; padding: 0; border-radius: var(--radius-sm); margin: 0 auto; border: 1px solid #E8C9C9; background: #FFF5F5; color: var(--c-danger); font-size: 16px; line-height: var(--lh-num); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .lodging-table .client-del:hover { background: #FFE9E9; border-color: var(--c-danger); } /* 住宿发票单元格（2026-09-15 新增）：已传缩略图 + 「+」上传位，可并存。 尺寸统一取 44px（--tap-min）—— 手机上这一列和另外 5 列抢宽度， 但触控目标不能再小，所以用「+」而非文字按钮来省空间。 */ /* 每行只一张发票 → 未传只出「+」、已传只出缩略图，两者互斥不并存（见 lodgingInvCell） */ .lg-inv-list { display: inline-flex; gap: var(--space-xs); align-items: center; vertical-align: middle; min-height: var(--tap-min); } .lg-inv-cell.has-inv .lg-inv-add { display: none; } .lg-inv-thumb { position: relative; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--c-border); flex: 0 0 auto; } .lg-inv-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; } .lg-inv-thumb .del { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; background: var(--c-danger); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); line-height: var(--lh-num); cursor: pointer; } .lg-inv-thumb.pdf-thumb { display: flex; align-items: center; justify-content: center; background: #FDF0E6; border-color: #F0C9A8; } .lg-inv-thumb.pdf-thumb a { color: #C0572F; font-size: var(--fs-xs); font-weight: 700; text-decoration: none; letter-spacing: 0.5px; } .lg-inv-add { width: var(--tap-min); height: var(--tap-min); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--c-border-strong); border-radius: var(--radius-sm); color: var(--c-muted); font-size: 18px; line-height: var(--lh-num); cursor: pointer; transition: all 0.2s; } .lg-inv-add:hover { border-color: var(--c-primary); color: var(--c-primary); } /* 只读版（详情页 / 审批页）：DOM 里根本没有 .lg-inv-add（见 invReadonly），无需隐藏规则。 未上传用警示色标出而不是留白 —— 留白看不出是「没传」还是「不支持」。 */ .lg-inv-none { font-size: var(--fs-xs); color: var(--c-warning); } /* 手机端横向滚动提示：默认隐藏，仅手机显示（桌面容器够宽、不溢出，常显会误导） */ .lg-scroll-hint { display: none; } /* 适用对象勾选（□公司领导 □其他人员）—— 2026-09-15 用户要求**整行删除**，此组样式当前无元素匹配； 保留不删：删的是表单里那排 radio，样式留着以后若要恢复可直接复用（没有匹配元素时零副作用）。 */ .lodging-target { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; } .lg-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: #22334A; cursor: pointer; user-select: none; } .lg-chk input[type="radio"] { width: 15px; height: 15px; accent-color: #1F4E79; cursor: pointer; margin: 0; } /* 分区标题后的「（可选）」小字 */ .sec-opt { font-weight: 400; font-size: var(--fs-xs); color: #6B7686; } @media (max-width: 640px) { /* 6 列（地区/费用/天数/金额/发票/删除）在手机上必然溢出，这是既定事实。 处理方式（2026-09-15 用户确认）：保留横向滚动 + 明确提示，不做卡片式重排。 min-width 460 → 560：按「每列 ~92px（与原 460÷5 单列宽一致）」× 6 列反推 = 552，取 560 —— 新增的发票列不该以压缩其它列的输入框为代价。 下方 .lg-scroll-hint 是配套提示：不给提示的话业务员只看得到前两列， 会以为「天数 / 金额」不存在 → 直接漏填（UI 审核 P0-1）。 ⚠ 字号：这里**刻意不写 font-size**（2026-09-15 实测踩坑）。 住宿表单元格文字实际由上面 768px 块里的 `.app-content td { font-size: var(--fs-md) }` （第 633 行附近）统一接管 —— 两者权重相同、它在后，写在这里也会被覆盖， 等于死代码。原以为能压到 11.5px「省空间」，实测根本没生效。 输入框同理不再单独压字号：min-width 已放宽，保持桌面同一档 var(--fs-md)=13px。 */ .lodging-table { min-width: 700px; } .lodging-table th, .lodging-table td { padding: 7px 8px; } .lodging-table input { padding: 5px 6px; } .lodging-target { gap: 14px; } .lg-scroll-hint { display: block; font-size: var(--fs-xs); color: var(--c-muted); padding: 2px 0 var(--space-xs); } } /* ===== 客户卡片（2026-09-14 重做）：一位客户一张卡，卡内挂这位客户自己的酒水审批明细 ===== 归属关系由 DOM 结构本身保证 —— 卡片里的酒水就是这张卡客户的，不需要手选、也不可能选错。 */ .client-card { border: 1px solid #DCE3EC; border-radius: var(--radius-md); background: #FBFCFE; padding: 12px; margin-bottom: 12px; } .client-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .client-card-no { font-size: var(--fs-sm); font-weight: 600; color: #1F4E79; } .client-card-head .client-del { width: 30px; height: 30px; padding: 0; border-radius: var(--radius-md); border: 1px solid #E8C9C9; background: #FFF5F5; color: #D9534F; font-size: 16px; line-height: var(--lh-num); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .client-card-head .client-del:hover { background: #FFE9E9; border-color: #D9534F; } /* 卡内子块（出差信息 / 费用与借款）：与酒水块同款虚线分隔，视觉上「同属这位客户」 */ .client-sub { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #E4EAF2; } .client-sub .form-row { margin-bottom: 0; } .client-sub .form-group:last-child { margin-bottom: 0; } /* 校验未通过时把出错的那张卡闪一下红框（focusClientCard） */ .client-card.invalid { border-color: #D9534F; box-shadow: 0 0 0 3px rgba(217,83,79,.14); background: #FFFAFA; } /* ★ 客户与项目：客户卡片两列并排（2026-09-15 用户要求） 排布 = 常规两列网格的行优先填充：第 1、2 张一行；第 3 张落在第 1 张下面，第 4 张落在第 2 张下面。 minmax(0,1fr) 不能省 —— 否则卡内酒水表（min-width 660px）会把列宽顶开、整页横向溢出。 */ #tf_clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } #tf_clients .client-card { margin-bottom: 0; } /* 窄屏回落单列：手机/平板上一列一卡，避免卡内表格被压到没法填 */ /* ⚠️ 必须写 minmax(0,1fr)：裸 1fr 的最小宽度是 min-content，会被卡内 660px 的酒水表顶开， 880px 视口下整页横向溢出（2026-09-15 实测踩到） */ @media (max-width: 900px) { #tf_clients { grid-template-columns: minmax(0, 1fr); } } .client-liquor { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #E4EAF2; } .client-sub-title { font-size: var(--fs-sm); font-weight: 600; color: #3D5166; margin-bottom: 8px; } .client-liquor .liquor-table-wrap { border-color: #E4EAF2; } /* 整单汇总（客户分区底部）：只读胶囊，随卡片输入实时变 —— 让人当场看见「整单长什么样」 ★ 2026-09-17（第 27 批）：改**两行**展示（行程一行 / 金额一行）+ 字号上调一档 —— 用户反馈「6 个胶囊挤一行、字太小，看不清整单费用」。行内保留 flex-wrap，窄屏继续折行不溢出。 只调本组件字号，**不动全站 token 阶梯**（理由见本文件顶部 --fs-base 处的说明）。 */ .trip-sum { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .ts-line { display: flex; flex-wrap: wrap; gap: 10px; } .trip-sum .ts-item { display: inline-flex; align-items: baseline; gap: 8px; background: #F6F9FC; border: 1px solid #E4EAF2; border-radius: var(--radius-md); padding: 8px 14px; } .trip-sum .ts-label { font-size: var(--fs-md); color: #8A94A6; } .trip-sum b { font-size: var(--fs-base); color: #1F4E79; font-variant-numeric: tabular-nums; } /* 金额行再大一档并加粗：让「这趟要花多少钱」一眼可见 */ .trip-sum .ts-line-money b { font-size: var(--fs-lg); font-weight: 700; } /* 出差详情：每位客户一块，块内显示该客户的酒水招待小计 */ /* ★ 2026-09-15：详情页客户块改两列并排（用户要求「客户一、客户二并排一行， 客户三在客户一下面、客户四在客户二下面」）。排布 = 常规两列网格的行优先填充， 与表单页 #tf_clients 同一套规则。 ⚠️ minmax(0,1fr) 不能省 —— 裸 1fr 的最小宽度是 min-content，块内三列 form-row 会被顶开、整页横向溢出。 */ .detail-clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } @media (max-width: 900px) { .detail-clients { grid-template-columns: minmax(0, 1fr); } } /* 由「虚线分隔的纵向块」改为「并排卡片」：两列后各块高度不等，靠虚线对齐会显得散 */ .detail-client-block { padding: 12px; border: 1px solid #E4EAF2; border-radius: var(--radius-md); background: #FCFDFF; } .detail-client-sub { font-size: var(--fs-sm); color: #1F4E79; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E4EAF2; } /* 每位客户卡片内的「酒水招待明细」（2026-09-15 用户要求：明细跟着客户走，不用去底部总表里找） 一位客户可能有多笔酒水 → 每笔两行：主行=类别+品名+小计，副行=容量/数量/单价（灰字）。 窄卡片（两列并排后约 590px，手机更窄）下比 6 列小表可读得多。 */ .detail-client-liquors { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E4EAF2; } .dcl-head { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: #3D5166; margin-bottom: 6px; } .dcl-head .dcl-count { font-weight: 400; font-size: var(--fs-xs); color: #8A94A6; } .dcl-row { padding: 6px 9px; border-radius: var(--radius-md); background: #F4F8FD; } .dcl-row + .dcl-row { margin-top: 5px; } .dcl-line { display: flex; align-items: baseline; gap: 7px; font-size: var(--fs-md); color: #22334A; } .dcl-cat { flex: 0 0 auto; font-size: var(--fs-xs); line-height: var(--lh-loose); color: #1F4E79; background: #E7F0FA; border-radius: var(--radius-sm); padding: 0 5px; } .dcl-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; } .dcl-total { flex: 0 0 auto; font-weight: 700; color: #1F4E79; white-space: nowrap; } .dcl-spec { font-size: var(--fs-xs); color: #7A879B; margin-top: 2px; } /* 明细块已经用虚线跟上方字段分隔，紧跟其后的合计行不再重复画一条 */ .detail-client-liquors + .detail-client-sub { border-top: none; padding-top: 0; } /* 酒水合并总表下方的「按客户小计」 */ .liquor-subline { font-size: var(--fs-sm); color: #1F4E79; margin-top: 8px; line-height: var(--lh-loose); } /* 按客户汇总（报销单）：客户名 + 金额的胶囊列表 */ .client-sum-box { display: flex; flex-wrap: wrap; gap: 8px; } .cs-item { display: inline-flex; align-items: baseline; gap: 8px; background: #F8FAFC; border: 1px solid #E4EAF2; border-radius: var(--radius-md); padding: 7px 12px; } .cs-name { font-size: var(--fs-sm); color: #3D5166; } .cs-amt { font-size: var(--fs-md); font-weight: 600; color: #1F4E79; } @media (max-width: 640px) { .client-card { padding: 10px; } .cs-item { padding: 6px 10px; } } /* 费用明细 */ .expense-item { background: #F8FAFC; border-radius: var(--radius-md); padding: 12px; margin-bottom: 10px; border: 1px solid #EEF2F7; } .expense-item .form-row { margin-bottom: 12px; } .expense-item > .form-group:last-child { margin-bottom: 0; } .expense-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .expense-item-header .idx { font-size: var(--fs-md); font-weight: 600; color: #1F4E79; } .expense-item-header .del { font-size: var(--fs-sm); color: #C9302C; cursor: pointer; background: none; border: none; font-family: inherit; line-height: 1.2; padding: 8px 10px; margin: -8px -10px; border-radius: var(--radius-sm); } .expense-item-header .del:hover { background: #FDEEED; } .expense-item-header .del:focus-visible { outline: 2px solid #1F4E79; outline-offset: 1px; } .expense-item .form-row .form-group { flex: 1 1 120px; min-width: 100px; margin-bottom: 0; } /* 图片上传 */ .upload-area { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .upload-btn { width: 72px; height: 72px; background: #F8FAFC; border: 1px dashed #C8D3E0; border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #6B7686; font-size: var(--fs-xs); } .upload-btn:hover { border-color: #1F4E79; color: #1F4E79; } .upload-btn .plus { font-size: 20px; line-height: var(--lh-num); margin-bottom: 2px; } .upload-thumb { position: relative; width: 72px; height: 72px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid #DCE3EC; } .upload-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .upload-thumb .del { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: #D9534F; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); cursor: pointer; } .upload-thumb.loading { display: flex; align-items: center; justify-content: center; background: #F8FAFC; } .upload-thumb .spinner { width: 20px; height: 20px; border: 2px solid #DCE3EC; border-top-color: #1F4E79; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============ 招待费二级选项（2026-09-15 新增，见 §6.25）============ 「招待费」选中后才出现：含酒水 / 酒水外带 二选一（radio 同 name 天然互斥）。 选「酒水外带」再展开酒水费用输入 + 酒水发票上传（PDF 走 .pdf-thumb 卡片）。 */ .ent-liquor { display: flex; gap: 18px; align-items: center; padding: 4px 0; } .ent-liquor label { display: flex; align-items: center; gap: 5px; font-size: var(--fs-md); color: #22334A; cursor: pointer; white-space: nowrap; } .ent-liquor input[type="radio"] { accent-color: #1F4E79; cursor: pointer; } .ent-hint { font-size: var(--fs-xs); color: #8A94A6; margin-top: 4px; line-height: var(--lh-loose); } /* PDF 发票缩略图： 渲染 PDF 会裂图，改成一个可点开的文字卡片 */ .upload-thumb.pdf-thumb { display: flex; align-items: center; justify-content: center; background: #FDF0E6; border-color: #F0C9A8; } .upload-thumb.pdf-thumb a { color: #C0572F; font-size: var(--fs-md); font-weight: 700; text-decoration: none; letter-spacing: 0.5px; } .upload-thumb.pdf-thumb a:hover { text-decoration: underline; } /* 票据缩略图右下角的「下载」角标（2026-09-17）：同源 ，点角标直接存本地。 与点缩略图看大图互不干扰（两者是兄弟元素）；一直可见，不做 hover 才出现 —— 触屏设备没有 hover。 */ .upload-thumb .thumb-dl { position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; background: rgba(15,34,56,0.78); color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); line-height: 1; cursor: pointer; text-decoration: none; } .upload-thumb .thumb-dl:hover { background: #1F4E79; } /* 只读详情页的票据缩略图（2026-09-17）： 默认 .upload-thumb 是 72×72 + object-fit:cover，会把 1240×430 的火车票裁成中间一条红边， 财务根本看不出这是张什么票 —— 审票场景等于白给。这里改为按比例完整显示（contain）+ 加宽， 并用白底衬托（票面本是白纸）。仅作用于带 thumb-receipt 的缩略图，不影响上传区/酒水票。 */ .upload-thumb.thumb-receipt { width: 112px; height: 80px; background: #fff; } .upload-thumb.thumb-receipt img { object-fit: contain; } /* 智能填报弹窗里的发票缩略图：可点开放大（2026-09-17 第 26 批）。 72×72 + cover 的缩略图看不出票面，业务员没法核对「这张票是哪笔消费」。 复用全站 image-preview-mask（z-index 2000 > .modal-mask 1000，天然盖在弹窗之上）。 放大镜角标用 hover 淡入而非常驻：右下角留给 .thumb-dl、右上角被 × 占用， 常驻第三个小角标会把 72px 的图塞得过满。触屏无 hover，靠 title 与 zoom-in 光标兜底。 */ #ai_upload_area .upload-thumb img { cursor: zoom-in; } #ai_upload_area .upload-thumb::after { content: '🔍'; position: absolute; left: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 5px; background: rgba(15, 34, 56, 0.72); display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; opacity: 0; transition: opacity 0.15s; pointer-events: none; /* 点角标等同点图，不拦事件 */ } #ai_upload_area .upload-thumb:hover::after { opacity: 1; } /* ============ 招待二级酒水明细 + 预估参照区（2026-09-15 二次修订）============ 「含酒水」「酒水外带」两种情形都要填酒水明细（字段对齐出差单酒水表）； 区别只有：含酒水不传票、金额仅记录；外带必传票、金额计入总额。 明细表用 .ent-liq-wrap 横向兜底（窄屏不挤压列宽）。 */ .ent-liq-wrap { overflow-x: auto; border: 1px solid #E3E9F0; border-radius: var(--radius-md); } .ent-liq-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); min-width: 680px; } .ent-liq-table th { background: #F5F8FC; color: #3D5166; font-weight: 600; text-align: left; padding: 7px 8px; border-bottom: 1px solid #E3E9F0; white-space: nowrap; } .ent-liq-table td { padding: 5px 6px; border-bottom: 1px solid #EEF2F7; } .ent-liq-table tbody tr:last-child td { border-bottom: none; } .ent-liq-table tfoot td { background: #FAFCFE; font-size: var(--fs-md); color: #3D5166; padding: 7px 8px; border-top: 1px solid #E3E9F0; } .ent-liq-table input, .ent-liq-table select { width: 100%; box-sizing: border-box; height: 30px; padding: 2px 6px; border: 1px solid #D8E0EA; border-radius: var(--radius-sm); font-size: var(--fs-lg); } .ent-liq-table input:focus, .ent-liq-table select:focus { outline: none; border-color: #1F4E79; } .ent-liq-table .el-total { white-space: nowrap; font-weight: 600; color: #1F4E79; } .ent-liq-sum { margin-top: 6px; font-size: var(--fs-md); color: #3D5166; } .ent-liq-sum b { color: #C0572F; } /* 只读预估参照区（灰底虚线框，和可编辑区明确区分） */ .est-liq-box { background: #F7F9FC; border: 1px dashed #D8E0EA; border-radius: var(--radius-md); padding: 10px 12px; } .est-liq-title { font-size: var(--fs-md); font-weight: 600; color: #3D5166; margin-bottom: 6px; } .est-liq-empty { font-size: var(--fs-md); color: #8A94A6; padding: 4px 0; } .est-liq-note { margin-top: 7px; font-size: var(--fs-xs); color: #8A94A6; line-height: var(--lh-loose); } .est-liq-note b { color: #5A6B7F; } /* 详情页里的酒水明细只读展示 */ .ent-liq-view { margin: 6px 0 8px; } .ent-liq-view-title { font-size: var(--fs-xs); color: #8A94A6; margin-bottom: 4px; } .ent-liq-view .ent-liq-table { min-width: 560px; } .ent-liq-view .ent-liq-table td { color: #22334A; } /* 汇总区 */ .summary-box { background: #F8FAFC; border-radius: var(--radius-md); padding: 12px 16px; margin: 16px 0; } .summary-row { display: flex; justify-content: space-between; font-size: var(--fs-md); padding: 4px 0; } .summary-row .label { color: #5A6B7F; } .summary-row .value { font-weight: 600; } .summary-row.total { border-top: 1px solid #EEF2F7; padding-top: 8px; margin-top: 4px; font-size: var(--fs-lg); } .summary-row.total .value { color: #1F4E79; font-weight: 700; font-size: var(--fs-xl); } .summary-row.refund .value { color: #D9534F; } /* 差旅标准提示 */ .standard-tip { background: #FFF8E6; border-radius: var(--radius-md); padding: 8px 12px; border-left: 3px solid #E8B84B; font-size: var(--fs-xs); color: #8A6D2E; line-height: var(--lh-loose); margin: 12px 0; } /* 弹窗 ★ 第 91 批：标题栏「深蓝渐变」→「白底 + 0.5px 底边线」（与卡片头同语言，方案 §一.8）； 底部按钮改为**右置**（方案 §一.8）；补**单层投影**（方案 §一.4）；补入场动效。 为什么整批改：第 83 批 L1 全站换肤漏掉了 .modal-* —— 弹窗是全站唯一还留着旧色板的组件。 34 处弹窗全走同一个 showModal()，所以只改这里一处，全站弹窗一起升级。 */ .modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(23,35,61,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal { background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 640px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; border: 0.5px solid rgba(0,0,0,.08); box-shadow: 0 8px 24px rgba(0,0,0,.12); animation: modalIn .18s ease-out; } /* 入场动效：用 scale（不改**几何中心**）而非 translateY —— 桌面居中断言容差只有 8px， 位移动画会在测量瞬间把中心推偏；scale 的中心恒定，既有「弹出」感又不干扰居中回归。 */ @keyframes modalIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } } /* 宽弹窗：出差申请/详情的酒水表有 7 列，560px 会逼出横向滚动、看不到「总价」，桌面上放宽到 760px */ /* 760 → 880：出差申请/详情改成「客户卡片 + 卡内酒水表」后，详情页的酒水合并总表 多了一列「对应客户」（8 列），760 会把最后的总价列藏进横向滚动里。 */ .modal.modal-wide { max-width: 880px; } .modal-header { background: #fff; padding: 14px 18px; color: #1A1D21; display: flex; justify-content: space-between; align-items: center; border-bottom: 0.5px solid rgba(0,0,0,.08); } .modal-header h3 { font-size: var(--fs-lg); font-weight: 700; color: #1A1D21; } /* 关闭按钮：× 文本 → 内联 SVG 线性图标（第 91 批 · 方案 §一.10）；28×28 命中区便于点按 */ .modal-header .close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; cursor: pointer; color: #8A94A6; border-radius: var(--radius-sm); font-size: 18px; } .modal-header .close:hover { background: #F2F5F9; color: #1A1D21; } .modal-header .close .svg-ico { width: 18px; height: 18px; vertical-align: 0; } .modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; } /* 底部按钮右置（方案 §一.8）。手机端在 768 媒体查询里改回**等宽撑满**（移动端底部操作条惯例）。 */ .modal-footer { padding: 12px 18px; border-top: 0.5px solid rgba(0,0,0,.08); display: flex; gap: 10px; justify-content: flex-end; } /* 入场动效的关停：总开关 / 系统「减弱动态效果」（与第 88 批动效体系同一套开关） */ :root[data-motion-off="1"] .modal { animation: none !important; } @media (prefers-reduced-motion: reduce) { .modal { animation: none !important; } } /* 审批历史时间线 */ .timeline { padding-left: 4px; } .timeline-item { display: flex; gap: 10px; margin-bottom: 12px; position: relative; } .timeline-dot { flex: 0 0 8px; display: flex; flex-direction: column; align-items: center; } .timeline-dot .dot { width: 8px; height: 8px; border-radius: 50%; background: #1F4E79; margin-top: 5px; } .timeline-dot .dot.green { background: #2E9E5B; } .timeline-dot .dot.red { background: #D9534F; } .timeline-dot .line { width: 1px; flex: 1; background: #DCE3EC; margin-top: 2px; } .timeline-content { flex: 1; padding-bottom: 4px; } .timeline-content .action { font-size: var(--fs-md); color: #17233D; } .timeline-content .action b { font-weight: 600; } .timeline-content .time { font-size: var(--fs-xs); color: #8A94A6; margin-top: 2px; } .timeline-content .remark { font-size: var(--fs-xs); color: #D9534F; background: #FFF5F5; padding: 5px 8px; border-radius: var(--radius-sm); margin-top: 4px; } /* 图片预览 */ .image-preview-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 2000; } .image-preview-mask img { max-width: 90%; max-height: 85%; object-fit: contain; } .image-preview-mask .close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 28px; cursor: pointer; } /* 预览层底部工具条：计数 + 下载（2026-09-17 加下载功能时由 .counter 单元素改为条状容器） */ .preview-bar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; } .preview-counter { color: #fff; font-size: var(--fs-md); background: rgba(0,0,0,0.5); padding: 4px 12px; border-radius: var(--radius-lg); } .preview-dl { display: inline-flex; align-items: center; gap: 6px; background: #1F4E79; color: #fff; font-size: var(--fs-md); padding: 8px 16px; border-radius: var(--radius-lg); text-decoration: none; white-space: nowrap; } .preview-dl:hover { background: #17405F; } /* PDF 票据无法当图片渲染（会裂图），预览层改为给一个「新窗口打开」的入口 */ .preview-pdf { color: #fff; font-size: var(--fs-lg); background: rgba(255,255,255,0.12); padding: 18px 28px; border-radius: var(--radius-md); } .preview-pdf a { color: #fff; } /* Toast */ .toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: var(--radius-md); font-size: var(--fs-md); color: #fff; z-index: 3000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: toastIn 0.3s; } .toast.success { background: #2E9E5B; } .toast.error { background: #D9534F; } .toast.info { background: #1F4E79; } @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* 空状态 */ .empty-state { text-align: center; padding: 40px 20px; } .empty-state .icon { width: 64px; height: 64px; border-radius: 50%; background: #F2F5F9; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #C8D3E0; font-weight: 300; } .empty-state .title { font-size: var(--fs-base); font-weight: 600; color: #3D5166; } .empty-state .desc { font-size: var(--fs-sm); color: #8A94A6; margin-top: 4px; margin-bottom: 14px; } /* 筛选tab */ /* 「出差与报销」模块内的两个页签（2026-09-15 上午侧栏两项合并后新增） ⚠️ 当日下午用户要求「把出差与报销的两个表重新拆开」→ 侧栏恢复两项、页签不再渲染， 本组样式**当前无元素匹配**。保留不删，理由与 JS 里 docsTabsHTML 相同（同日反复过一次）。 若恢复，注意刻意与下方 .filter-tabs（状态筛选）做出层次差： 页签 = 浅灰轨道 + 白底选中药丸；筛选 = 白底 + 深蓝选中。 两排若都做成深蓝 pill，用户会分不清哪排是「换单据类型」、哪排是「筛状态」。 */ .docs-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #EEF2F7; border-radius: var(--radius-md); margin-bottom: 14px; } .docs-tab { display: flex; align-items: center; gap: 6px; padding: 7px 18px; border-radius: var(--radius-md); font-size: var(--fs-md); color: #5A6B7F; cursor: pointer; user-select: none; } .docs-tab.active { background: #fff; color: #1F4E79; font-weight: 600; box-shadow: 0 1px 2px rgba(31,78,121,0.10); } .docs-tab-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-md); background: #D9534F; color: #fff; font-size: var(--fs-xs); line-height: 18px; text-align: center; font-weight: 600; } .docs-tab.active .docs-tab-badge { background: #1F4E79; } @media (max-width: 640px) { .docs-tabs { display: flex; width: 100%; } .docs-tab { flex: 1; justify-content: center; padding: 7px 8px; } } .filter-tabs { display: flex; gap: 8px; margin-bottom: 14px; } .filter-tab { padding: 7px 16px; background: #fff; border: 1px solid #DCE3EC; border-radius: var(--radius-md); font-size: var(--fs-sm); color: #8A94A6; cursor: pointer; } .filter-tab.active { background: #1F4E79; color: #fff; border-color: #1F4E79; font-weight: 600; } /* ============ 基础设置：预算设置 / 差旅标准 两栏并排（2026-09-15 用户要求）============ 用户原话「把这两个并在一起，这两个一行并排展示」→ 同屏左右两栏，各自带保存按钮。 刻意与 .docs-tabs（页签切换）不同：这里是**同时可见**，不是二选一。 ⚠️ 与 §6.10/§6.13 同一条理由：必须写 minmax(0,1fr)，裸 1fr 的最小宽度是 min-content， 栏内 form-group 的输入框会把它顶开、整页横向溢出。 ⚠️ 窄屏回落单列（与 .detail-clients 同一断点 900px，保证同一屏内两种并排行为一致）。 */ .base-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 4px; } .base-settings-grid .card { max-width: none; margin-bottom: 0; } .base-card-head { font-size: var(--fs-base); font-weight: 600; color: #1F4E79; margin-bottom: 4px; } .base-card-sub { font-size: var(--fs-sm); color: #8A94A6; line-height: var(--lh-loose); margin-bottom: 14px; } @media (max-width: 900px) { .base-settings-grid { grid-template-columns: minmax(0, 1fr); } } /* 列表页搜索框：按单号 / 客户 / 申请人检索 */ .search-bar { margin-bottom: 14px; } .search-input { width: 100%; max-width: 340px; padding: 8px 12px; border: 1px solid #C8D3E0; border-radius: var(--radius-md); background: #fff; font-size: var(--fs-lg); color: #22303F; outline: none; transition: border-color 0.2s; } .search-input:focus { border-color: #1F4E79; } .search-input::placeholder { color: #A9B4C2; } /* 列表页筛选条：主按钮 + 多个下拉筛选 + 搜索框一行排布（NCR 列表首用，2026-09-25） 规范对齐：输入控件一律 --fs-lg（iOS 聚焦不放大阈值）、描边 #C8D3E0、圆角 --radius-md、 聚焦深蓝描边 —— 与 .search-input / .form-group input 同一套 token，不允许裸原生控件。 */ .filter-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .filter-bar select { height: 40px; padding: 8px 30px 8px 12px; border: 1px solid #C8D3E0; border-radius: var(--radius-md); background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A6478' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; -webkit-appearance: none; font-size: var(--fs-lg); color: #22303F; outline: none; transition: border-color 0.2s; cursor: pointer; } .filter-bar select:focus { border-color: #1F4E79; } .filter-bar select:hover { border-color: #A8BDD6; } .filter-bar .filter-search { flex: 1; min-width: 160px; height: 40px; padding: 8px 12px; border: 1px solid #C8D3E0; border-radius: var(--radius-md); background: #fff; font-size: var(--fs-lg); color: #22303F; outline: none; transition: border-color 0.2s; } .filter-bar .filter-search:focus { border-color: #1F4E79; } .filter-bar .filter-search::placeholder { color: #A9B4C2; } .filter-bar .btn { height: 40px; padding: 8px 16px; flex: none; } /* ★ 第 77 批：NCR 列表快捷筛选开关（「只看逾期」「只看我负责」） ⚠️ 刻意用