/* ===================================================== 差旅费报销后台 v2 — 全局样式（对照高保真原型 token） ===================================================== */ :root{ --primary:#2563eb; --primary-dark:#1d4ed8; --primary-light:#eff6ff; --danger:#ef4444; --danger-light:#fef2f2; --warn:#f59e0b; --warn-light:#fffbeb; --success:#10b981; --success-light:#ecfdf5; --bg:#f1f5f9; --card:#ffffff; --border:#e5e7eb; --text:#1f2937; --text2:#6b7280; --text3:#9ca3af; --radius:12px; --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.04); } *{box-sizing:border-box; margin:0; padding:0;} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } a{color:var(--primary); text-decoration:none;} /* ===== 布局 ===== */ .desktop{min-height:100vh; display:flex;} .sidebar{width:200px; background:#0f172a; color:#cbd5e1; flex-shrink:0; padding:16px 0; position:sticky; top:0; height:100vh; overflow-y:auto;} .sidebar .s-logo{padding:0 16px 16px; font-weight:700; color:#fff; font-size:15px; border-bottom:1px solid #1e293b; margin-bottom:10px;} .sidebar .s-item{padding:11px 16px; display:flex; align-items:center; gap:10px; font-size:13px; color:#cbd5e1; border-left:3px solid transparent; transition:.12s;} .sidebar .s-item:hover{background:#1e293b; color:#fff;} .sidebar .s-item.active{background:#1e293b; color:#fff; border-left-color:var(--primary);} .sidebar .s-group{padding:14px 16px 6px; font-size:11px; color:#64748b; font-weight:600; letter-spacing:1px;} .desktop-main{flex:1; padding:20px; background:#f8fafc; min-width:0;} .topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap;} .topbar h2{font-size:18px;} .topbar h2 small{font-size:13px; color:var(--text3); font-weight:400; margin-left:8px;} .topbar-right{display:flex; gap:10px; align-items:center;} .user-chip{font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--border); padding:6px 12px; border-radius:20px;} .warn-strip{background:var(--warn-light); border:1px solid #fde68a; color:#92400e; border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:14px;} /* ===== 通用组件 ===== */ .tag{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:12px; font-weight:500; white-space:nowrap;} .tag.red{background:var(--danger-light); color:var(--danger);} .tag.orange{background:var(--warn-light); color:var(--warn);} .tag.green{background:var(--success-light); color:var(--success);} .tag.blue{background:var(--primary-light); color:var(--primary);} .tag.gray{background:#f3f4f6; color:var(--text2);} .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; cursor:pointer; padding:10px 18px; border-radius:10px; font-size:14px; font-weight:600; transition:.15s; text-decoration:none;} .btn-primary{background:var(--primary); color:#fff;} .btn-primary:hover{background:var(--primary-dark); color:#fff;} .btn-ghost{background:#fff; color:var(--text); border:1px solid var(--border);} .btn-ghost:hover{border-color:var(--primary); color:var(--primary);} .btn-danger{background:var(--danger); color:#fff;} .btn-danger:hover{filter:brightness(.95);} .btn-success{background:var(--success); color:#fff;} .btn-sm{padding:6px 12px; font-size:13px; border-radius:8px;} .btn[disabled]{opacity:.5; cursor:not-allowed;} .panel{background:#fff; border-radius:12px; padding:16px; box-shadow:var(--shadow); margin-bottom:16px;} .panel h4{font-size:14px; margin-bottom:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .panel h4 .spacer{margin-left:auto;} .kv{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed #f1f5f9; font-size:13px; flex-wrap:wrap;} .kv .k{color:var(--text2);} .kv .v{font-weight:600; text-align:right;} .kv .v.mono{font-variant-numeric:tabular-nums;} .link{color:var(--primary); cursor:pointer; font-weight:500;} .money{font-weight:700; color:var(--danger); font-variant-numeric:tabular-nums;} .divider{height:1px; background:var(--border); margin:16px 0;} .section-title{font-size:13px; color:var(--text3); font-weight:600; margin:16px 0 10px; text-transform:uppercase; letter-spacing:.5px;} .tip-box{background:var(--primary-light); border-left:4px solid var(--primary); border-radius:8px; padding:12px 16px; margin:14px 0; font-size:13px; color:#1e3a8a; line-height:1.7;} .tip-box.warn{background:var(--warn-light); border-color:var(--warn); color:#92400e;} .tip-box.danger{background:var(--danger-light); border-color:var(--danger); color:#b91c1c;} .field{margin-bottom:14px;} .field label{display:block; font-size:13px; color:var(--text2); margin-bottom:6px; font-weight:500;} .field label .req{color:var(--danger); margin-left:2px;} .field input, .field select, .field textarea{ width:100%; border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:14px; background:#fff; color:var(--text); outline:none; transition:.15s; font-family:inherit;} .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light);} .field .readonly{display:flex; align-items:center; justify-content:space-between; background:#f9fafb; border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:14px;} .field .readonly .val{font-weight:600;} .help{font-size:12px; color:var(--text3); margin-top:4px;} /* 标签页/工具条 */ .tab-strip{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;} .tab-strip .ts{padding:8px 16px; border-radius:8px; background:#fff; border:1px solid var(--border); cursor:pointer; font-size:13px; color:var(--text2); font-weight:500;} .tab-strip .ts.active{background:var(--primary); color:#fff; border-color:var(--primary);} .tab-strip .ts .cnt{font-weight:700; margin-left:4px;} .toolbar{display:flex; gap:10px; margin-bottom:14px; align-items:center; flex-wrap:wrap;} .toolbar input{flex:1; min-width:160px; border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:13px;} .toolbar select{border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:13px; background:#fff;} .toolbar input:focus,.toolbar select:focus{outline:none; border-color:var(--primary);} /* 表格 */ table.dt{width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; box-shadow:var(--shadow); font-size:13px;} table.dt th{background:#f8fafc; text-align:left; padding:12px 14px; color:var(--text2); font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap;} table.dt td{padding:11px 14px; border-bottom:1px solid #f3f4f6; vertical-align:middle;} table.dt tr:hover td{background:#f8fafc;} table.dt .num{font-variant-numeric:tabular-nums;} .pagination{display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:14px; font-size:13px; color:var(--text2);} .pagination button{border:1px solid var(--border); background:#fff; border-radius:6px; padding:5px 12px; cursor:pointer;} .pagination button[disabled]{opacity:.4; cursor:not-allowed;} /* 统计卡 */ .stat-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:16px;} .stat-card{background:#fff; border-radius:12px; padding:16px; box-shadow:var(--shadow);} .stat-card .lbl{font-size:12px; color:var(--text3);} .stat-card .num{font-size:26px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums;} .stat-card .num.red{color:var(--danger);} .stat-card .num.blue{color:var(--primary);} .stat-card .num.green{color:var(--success);} .stat-card .num.orange{color:var(--warn);} .stat-card .sub{font-size:12px; color:var(--text3); margin-top:4px;} /* 风险分胶囊 */ .risk-pill{display:inline-flex; align-items:center; justify-content:center; min-width:38px; padding:3px 10px; border-radius:20px; font-weight:800; font-size:13px; font-variant-numeric:tabular-nums;} .risk-pill.red{background:var(--danger-light); color:var(--danger);} .risk-pill.orange{background:var(--warn-light); color:var(--warn);} .risk-pill.green{background:var(--success-light); color:var(--success);} /* 详情双栏 */ .detail-split{display:grid; grid-template-columns:1.4fr 1fr; gap:16px;} @media (max-width:1100px){ .detail-split{grid-template-columns:1fr;} .stat-grid{grid-template-columns:repeat(2,1fr);} } /* 状态徽章 */ .status-tag{display:inline-flex; padding:3px 12px; border-radius:8px; font-size:13px; font-weight:700;} .status-0{background:#f3f4f6; color:var(--text2);} .status-1{background:var(--warn-light); color:var(--warn);} .status-2{background:var(--primary-light); color:var(--primary);} .status-3{background:#f5f3ff; color:#7c3aed;} .status-4{background:var(--success-light); color:var(--success);} .status-5{background:var(--danger-light); color:var(--danger);} /* 时间线（审核历史） */ .timeline{list-style:none;} .timeline li{position:relative; padding:0 0 14px 22px; font-size:13px;} .timeline li::before{content:""; position:absolute; left:5px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--primary);} .timeline li::after{content:""; position:absolute; left:9px; top:16px; bottom:-2px; width:1px; background:var(--border);} .timeline li:last-child::after{display:none;} .timeline .t-head{font-weight:700;} .timeline .t-meta{color:var(--text3); font-size:12px; margin-top:2px;} .timeline .t-body{color:var(--text2); margin-top:2px; line-height:1.6;} /* Excel 版式大图（行程表 / 报销单） */ .excel-view{background:#fff; border-radius:10px; padding:10px; overflow-x:auto; box-shadow:var(--shadow);} table.bill{border-collapse:collapse; width:100%; min-width:860px; background:#fff; color:#111; font-size:12px; table-layout:fixed;} table.bill td, table.bill th{border:1px solid #111; padding:3px 6px; white-space:nowrap; text-align:center; height:26px; overflow:hidden;} table.bill th{background:#f3f4f6; font-weight:600;} table.bill .bt{font-size:17px; font-weight:700; letter-spacing:2px; border:none; height:34px;} table.bill .lbl-l{text-align:left; font-weight:600;} table.bill .fill{text-align:left;} table.bill .money-r{text-align:right; font-variant-numeric:tabular-nums;} table.bill .sum{background:#f8fafc; font-weight:700;} table.bill .muted{color:var(--text3);} table.bill .hd{background:#f3f4f6; font-weight:600;} table.bill .note{text-align:left; white-space:normal; font-size:11px;} table.bill .off-day{color:var(--text3); background:#fafafa;} /* 发票网格 */ .inv-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:10px;} .inv-item{border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:12px; background:#fff;} .inv-item.abnormal{border-color:var(--danger); background:var(--danger-light);} .inv-item .amt{font-weight:700; color:var(--danger); font-size:14px;} .inv-item .meta{color:var(--text3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .inv-item .ops{margin-top:6px; display:flex; gap:10px; align-items:center;} .inv-item input{accent-color:var(--primary);} /* 弹窗 */ .modal-mask{position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:200; display:none; align-items:center; justify-content:center; padding:16px;} .modal-mask.show{display:flex;} .modal{background:#fff; border-radius:14px; width:440px; max-width:94vw; max-height:90vh; overflow-y:auto; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.3);} .modal h3{font-size:16px; margin-bottom:14px;} .modal .foot{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;} /* 轻提示 */ .toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:#0f172a; color:#fff; padding:11px 22px; border-radius:10px; font-size:13px; z-index:300; opacity:0; transition:opacity .25s; pointer-events:none; max-width:80vw; text-align:center; box-shadow:0 8px 30px rgba(0,0,0,.3);} .toast.show{opacity:1;} .toast.success{background:#065f46;} .toast.error{background:#991b1b;} /* 独立页（登录/无权限/错误） */ .center-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;} .standalone-card{background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:12px 28px; max-width:480px; width:100%;} /* 操作条 */ .action-bar{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;} /* 徽标行 */ .chip-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;} /* 合住分摊核对表 */ .share-table td.ok{background:var(--success-light);} .share-table td.bad{background:var(--danger-light); color:var(--danger); font-weight:700;} /* 部门树（可折叠） */ .dept-tree, .dept-tree ul{list-style:none; padding-left:18px;} .dept-tree .dt-node{padding:4px 0; font-size:13px;} .dept-tree .dt-toggle{display:inline-block; width:12px; margin-right:2px; text-align:center; color:var(--text3); font-size:10px; line-height:1; cursor:pointer; user-select:none; vertical-align:middle;} .dept-tree .dt-toggle.dt-toggle-empty{cursor:default; color:transparent;} .dept-tree .dt-toggle:not(.dt-toggle-empty):hover{color:var(--primary);} .dept-tree .dt-toggle:focus-visible{outline:2px solid var(--primary); outline-offset:1px; border-radius:3px;} .dept-tree .dt-node .dt-name{cursor:pointer; padding:2px 8px; border-radius:6px;} .dept-tree .dt-node .dt-name:hover{background:var(--primary-light);} .dept-tree .dt-node .dt-name.selected{background:var(--primary); color:#fff;} .dept-tree .dt-children.collapsed{display:none;} /* 趋势条形 */ .trend{display:flex; align-items:flex-end; gap:10px; height:120px; padding:10px 4px;} .trend .bar-wrap{flex:1; text-align:center; font-size:11px; color:var(--text3);} .trend .bar{background:var(--primary-light); border:1px solid #dbeafe; border-radius:6px 6px 0 0; min-height:4px; position:relative;} .trend .bar .val{position:absolute; top:-16px; left:50%; transform:translateX(-50%); white-space:nowrap; color:var(--primary); font-weight:700; font-size:11px;} /* ===================================================== v21 新增：Excel 版式容器强化 + 详情页证据区/空态/大金额 （视觉对齐高保真原型 241/204-205/254-259 行定义） ===================================================== */ /* Excel 版式容器：白底 + 细边框 + 紧凑字号，模拟 Excel 网格 */ .excel-view{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; box-shadow:var(--shadow); } .excel-view > table.bill{border-collapse:collapse;} /* 容器内表格紧凑化，贴近 Excel 观感 */ .excel-view table.bill{font-size:12px; letter-spacing:0;} .excel-view table.bill td, .excel-view table.bill th{height:26px;} /* 证据区（原型 .evidence / .ev） */ .evidence{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;} .evidence .ev{ background:var(--primary-light); color:var(--primary); border-radius:8px; padding:8px 12px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid transparent; transition:.15s; word-break:break-word; } .evidence .ev:hover{border-color:var(--primary);} /* 详情页大金额（原型 733 行：font-size:20px;font-weight:800） */ .amount-xl{font-size:22px; font-weight:800; color:var(--danger); font-variant-numeric:tabular-nums;} /* 发票网格：占位尾卡与更多提示 */ .inv-more{display:flex; align-items:center; justify-content:center; color:var(--text3); border-style:dashed;} /* 通用空态块（列表 / 网格内） */ .empty-box{ color:var(--text3); text-align:center; padding:26px 16px; font-size:13px; border:1px dashed var(--border); border-radius:10px; background:#fafafa; } /* 分段按钮（子视图切换，避免三层嵌套 Tab） */ .seg-strip{display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff;} .seg-strip button{ border:none; background:#fff; color:var(--text2); cursor:pointer; padding:9px 18px; font-size:13px; font-weight:600; border-right:1px solid var(--border); } .seg-strip button:last-child{border-right:none;} .seg-strip button:hover{background:var(--primary-light); color:var(--primary);} .seg-strip button.active{background:var(--primary); color:#fff;} /* 可点击表格行内联标签（证据 / 提示） */ .evidence .ev[disabled]{opacity:.55; cursor:not-allowed;} /* 导入结果逐行明细表 */ .import-rows{max-height:320px; overflow-y:auto; margin-top:8px;} .import-rows table.dt{box-shadow:none;} .import-detail{background:#fafafa; border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-top:6px; font-size:12px;} .import-detail b{color:var(--text);} /* 时间轴（账户版本 / 车辆归属变更履历） */ .vt-list{list-style:none;} .vt-list li{position:relative; padding:0 0 16px 24px; font-size:13px;} .vt-list li::before{ content:""; position:absolute; left:6px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--border); border:2px solid #fff; box-shadow:0 0 0 1px var(--border); } .vt-list li.current::before{background:var(--success); box-shadow:0 0 0 1px var(--success);} .vt-list li.rejected::before{background:var(--danger); box-shadow:0 0 0 1px var(--danger);} .vt-list li.pending::before{background:var(--warn); box-shadow:0 0 0 1px var(--warn);} .vt-list li::after{content:""; position:absolute; left:10px; top:18px; bottom:-2px; width:2px; background:var(--border);} .vt-list li:last-child::after{display:none;} .vt-list .vt-h{font-weight:700; display:flex; gap:8px; align-items:center; flex-wrap:wrap;} .vt-list .vt-m{color:var(--text3); font-size:12px; margin-top:2px;} .vt-list .vt-b{color:var(--text2); margin-top:4px; line-height:1.6; word-break:break-word;} /* 人员搜索下拉（选人控件复用） */ .person-pick{border:1px solid var(--border); border-radius:8px; max-height:210px; overflow-y:auto; margin-top:6px; background:#fff;} .person-hit{padding:8px 10px; border-bottom:1px solid #f3f4f6; cursor:pointer; font-size:13px;} .person-hit:last-child{border-bottom:none;} .person-hit:hover{background:var(--primary-light);} .person-hit .sub{color:var(--text3); font-size:12px;} /* 只读展示块（禁手输 userid 时选中项的回显） */ .picked-box{ background:var(--success-light); border:1px solid #a7f3d0; color:#065f46; border-radius:8px; padding:10px 12px; font-size:13px; font-weight:600; display:flex; justify-content:space-between; gap:10px; align-items:center; } .picked-box .sub{font-weight:400; font-size:12px; color:#047857;} /* GPS 在线状态点 */ .gps-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle;} .gps-dot.on{background:var(--success);} .gps-dot.off{background:var(--text3);} .gps-dot.none{background:var(--warn);} /* ===================================================== v21 新增：行内链接式按钮（账户管理页） 用