/* ============ 安诚ERP 管理系统 - 统一样式 ============ */ :root { --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #eff6ff; --success: #16a34a; --success-light: #f0fdf4; --warn: #d97706; --warn-light: #fffbeb; --danger: #dc2626; --danger-light: #fef2f2; --gray-bg: #f1f5f9; --card-bg: #ffffff; --border: #e2e8f0; --text: #0f172a; --text-2: #475569; --text-3: #94a3b8; --radius: 10px; --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 14px rgba(15, 23, 42, .06); --shadow-lg: 0 10px 40px rgba(15, 23, 42, .18); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; background: var(--gray-bg); color: var(--text); font-size: 14px; } .hidden { display: none !important; } /* ============ 按钮 ============ */ .btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; transition: all .15s; white-space: nowrap; line-height: 1.4; } .btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; } .btn-danger { color: var(--danger); } .btn-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); } .btn-success { color: var(--success); } .btn-success:hover { border-color: var(--success); color: var(--success); background: var(--success-light); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn-ghost:hover { background: rgba(37,99,235,.08); } .btn-block { width: 100%; } .btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ============ 登录页（商务风 · 左右分栏 + 节点网络图案） ============ */ .login-view { display: flex; min-height: 100vh; background: #f5f8fc; } /* —— 左侧品牌区 —— */ .login-brand { position: relative; overflow: hidden; flex: 1 1 52%; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 58px 56px; color: #fff; background: linear-gradient(160deg, #08182c 0%, #10305a 55%, #154a80 100%); } .lb-mesh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .lb-glow { position: absolute; left: -120px; top: 18%; width: 560px; height: 560px; pointer-events: none; background: radial-gradient(closest-side, rgba(56,132,255,.35), transparent 72%); } /* 文案整块在品牌区里居中：宽度用百分比 + 上限（百分比负责宽屏居中，上限别让文字飘到中间）， max() 里的 430px 是正文自然行宽，屏幕不够宽时不许被挤窄换行。@supports 兜一层老浏览器。 ★ min-height 464px 用来把文案块撑到与右侧登录表单「首行齐平」 （用户 2026-10-04 反馈：左栏文案整体比右侧低）。两栏都是垂直居中，而文案块只有 368px、 比 .login-form（实测 447px）矮一截，居中后顶边必然低 39px，看着就不在一条水平线上。 推导（左栏 padding 上下都是 58px，M = min-height）： 左顶 = 58 + (100vh - 58*2 - M)/2 = 100vh/2 - M/2 右顶 = (100vh - 447)/2 = 100vh/2 - 223.5 M=447 时两块顶边严格重合；取 464（+17）是再抬高 8.5px，抵消左侧首行文字居中在 46px logo 方块里造成的视觉下沉，让「安诚ERP」与「欢迎登录」两行字真正落在同一水平线。 这个差值与视口高度无关 —— 窗口高矮、甚至内容把 .login-view 撑高时，两侧都同步升降。 */ .lb-inner { position: relative; width: 66%; max-width: 620px; margin: 0 auto; min-height: 464px; } @supports (width: max(66%, 430px)) { .lb-inner { width: max(66%, 430px); } } .lb-brandrow { position: relative; display: flex; align-items: center; gap: 13px; margin-bottom: 40px; } .lb-mark { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #3b82f6, #1d4ed8); color: #fff; font-size: 21px; font-weight: 700; box-shadow: 0 8px 22px rgba(37,99,235,.45); } .lb-name { font-size: 15px; font-weight: 600; letter-spacing: .18em; color: #dbe7f7; } .lb-slogan { position: relative; font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: .03em; margin-bottom: 16px; } .lb-slogan em { font-style: normal; color: #6fa8ff; } .lb-desc { position: relative; font-size: 14px; line-height: 1.9; color: #a9bdd9; max-width: 430px; } .lb-feats { position: relative; margin-top: 32px; list-style: none; display: flex; flex-direction: column; gap: 12px; } .lb-feats li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #c9d8ec; } .lb-feats li::before { content: "✓"; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; font-size: 12px; display: flex; align-items: center; justify-content: center; background: rgba(59,130,246,.18); border: 1px solid rgba(96,165,250,.32); color: #82b6ff; } /* —— 右侧表单区 —— */ .login-panel { position: relative; overflow: hidden; flex: 1 1 48%; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 48px 40px; } .login-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(#d8e0ec 1.1px, transparent 1.1px); background-size: 26px 26px; } .login-form { position: relative; width: 378px; max-width: 100%; } .login-form h3 { font-size: 24px; font-weight: 700; letter-spacing: .05em; color: #0b1f3a; margin-bottom: 7px; } .lf-hint { font-size: 13px; color: #8b98aa; margin-bottom: 30px; } .role-tabs { display: flex; background: var(--gray-bg); border-radius: 10px; padding: 4px; margin-bottom: 20px; } .role-tab { flex: 1; border: none; background: transparent; padding: 8px 4px; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--text-2); transition: all .15s; } .role-tab.active { background: var(--card-bg); color: var(--primary); font-weight: 600; box-shadow: 0 1px 4px rgba(15,23,42,.12); } .login-field { margin-bottom: 17px; } .login-field label { display: block; font-size: 12.5px; font-weight: 600; color: #46566e; letter-spacing: .04em; margin-bottom: 8px; } .login-field input { width: 100%; padding: 12px 14px; border: 1px solid #dee4ee; border-radius: 9px; background: #fff; font-size: 14px; outline: none; font-family: inherit; color: var(--text); transition: all .16s; } .login-field input::placeholder { color: #aab5c4; } .login-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3.5px rgba(37,99,235,.13); } .lf-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 20px; font-size: 12.5px; color: #8b98aa; } .lf-row label { display: flex; align-items: center; gap: 7px; cursor: pointer; } .lf-row input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; } .lf-row a { color: var(--primary); text-decoration: none; } .lf-row a:hover { text-decoration: underline; } .login-submit { width: 100%; padding: 13px; border: none; border-radius: 10px; cursor: pointer; background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .2em; text-indent: .2em; font-family: inherit; box-shadow: 0 10px 24px rgba(29,78,216,.32); transition: all .16s; } .login-submit:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 30px rgba(29,78,216,.42); } .login-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; } .login-error { background: var(--danger-light); color: var(--danger); font-size: 13px; border-radius: 8px; padding: 9px 12px; margin-bottom: 14px; text-align: left; } .login-tip { font-size: 12px; color: #98a3b3; line-height: 1.75; margin-top: 18px; } .login-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid #eef1f6; font-size: 11px; color: #aab4c2; letter-spacing: .06em; } /* —— 窄屏：品牌区收成顶部条，表单占满 —— */ @media (max-width: 880px) { .login-view { flex-direction: column; } .login-brand { flex: 0 0 auto; padding: 26px 22px 24px; justify-content: flex-start; } .lb-inner { width: 100%; min-height: 0; } /* 窄屏品牌条只留 logo 行，别撑出 447px 的空块 */ .lb-brandrow { margin-bottom: 0; } .lb-slogan, .lb-desc, .lb-feats { display: none; } .login-panel { flex: 1 1 auto; align-items: flex-start; padding: 30px 22px 44px; } .login-form { width: 100%; max-width: 420px; margin: 0 auto; } } /* ============ 登录 ⇄ 主界面 过渡动画 ============ 思路：切页时把「离场方」提升为 fixed 覆盖层（z-index 200）， 这样它脱离文档流、不把对方挤下去，两边就能安全交叠 → 交叉淡入淡出。 */ .login-view.is-leaving, .login-view.is-arriving { position: fixed; inset: 0; z-index: 200; } /* 登录页退场（登录成功） */ .login-view.is-leaving { animation: loginFadeOut .34s ease both; pointer-events: none; } @keyframes loginFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.018); } } /* 登录页入场（退出登录） */ .login-view.is-arriving { animation: loginArrive .36s ease both; } @keyframes loginArrive { from { opacity: 0; transform: scale(1.018); } to { opacity: 1; transform: none; } } /* 主界面入场：整屏淡入 + 侧栏左滑 + 内容上浮（错开 80ms 做层次） */ .app-view.is-entering { animation: appFadeIn .4s ease both; } @keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } } .app-view.is-entering .sidebar { animation: navSlideIn .5s cubic-bezier(.22,.75,.28,1) both; } @keyframes navSlideIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } } .app-view.is-entering .main { animation: mainRiseIn .5s cubic-bezier(.22,.75,.28,1) .08s both; } @keyframes mainRiseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .app-view.is-leaving { pointer-events: none; } /* 登录按钮加载态 */ .login-submit.is-loading { text-indent: 0; letter-spacing: .1em; cursor: progress; } .btn-spin { display: inline-block; width: 14px; height: 14px; margin-right: 9px; vertical-align: -2px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: btnSpin .7s linear infinite; } @keyframes btnSpin { to { transform: rotate(360deg); } } /* 尊重系统「减少动态效果」设置：保留状态切换，去掉运动 */ @media (prefers-reduced-motion: reduce) { .login-view.is-leaving, .login-view.is-arriving, .app-view.is-entering, .app-view.is-entering .sidebar, .app-view.is-entering .main { animation-duration: .01ms !important; } } /* ============ 布局 ============ */ /* 2026-10-20：min-height → height + overflow:hidden。 原来只写 min-height:100vh，内容一旦比视口高（异步数据回来前的中间态、维护横幅、 某个表格行多出来一点），整个文档就长出滚动条；滚动条一出，可用宽度从 1512 掉到 1497， 数据到位后滚动条消失又弹回 1512 —— 肉眼看到的就是「整个工作区横向抽了一下」。 本系统所有内容都在 .page-tab 里自己滚（.page-tab { overflow-y: auto }）， 文档本来就不该滚，所以这里直接封死，任何中间态溢出都只是被裁掉、不产生滚动条。 */ .app-view { display: flex; height: 100vh; overflow: hidden; } /* ⚠️ 侧栏宽度下限 188px＝品牌名「安诚ERP 管理系统」单行所需（实测 187.9px，见 tests/render-check-sidebar-width.html）。 最长菜单项只需 169px，故品牌名是唯一的宽度约束；再想收窄必须同步缩短品牌文案。 */ .sidebar { width: 200px; background: #0f172a; color: #cbd5e1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; flex-shrink: 0; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 16px 15px; font-size: 14px; font-weight: 600; color: #f1f5f9; letter-spacing: .01em; border-bottom: 1px solid rgba(255,255,255,.06); } /* 品牌名兜底：万一被更窄的宽度挤到，宁可出省略号也不要折成两行（折行会顶高品牌行、看着像坏了） */ .brand-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-mark { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; } .sidebar-nav { flex: 1; padding: 10px 10px 16px; overflow-y: auto; } .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; } /* ——— 一级菜单项（顶层 / 分组内的页面） ——— */ .nav-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 2px; border-radius: 7px; cursor: pointer; color: #94a3b8; font-size: 13.5px; line-height: 20px; transition: background .15s, color .15s; } .nav-item:hover { color: #e2e8f0; background: rgba(255,255,255,.05); } .nav-item.active { color: #f8fafc; background: rgba(59,130,246,.16); font-weight: 500; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 16px; border-radius: 0 2px 2px 0; background: #3b82f6; } .nav-item.active .nav-icon { color: #60a5fa; } .nav-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .nav-icon svg { width: 17px; height: 17px; } .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-badge { margin-left: auto; background: var(--danger, #e5484d); color: #fff; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px; text-align: center; padding: 0 5px; } /* ============ 导航分组折叠（二期地基） ============ 分组头只当「标签」使：小号 + 字距 + 更暗的色阶，不配图标，避免与菜单项抢视觉重量 */ .nav-group { margin-top: 14px; } .nav-group-head { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 6px; cursor: pointer; user-select: none; color: #64748b; font-size: 11px; font-weight: 600; letter-spacing: .08em; transition: color .15s, background .15s; } .nav-group-head:hover { color: #94a3b8; background: rgba(255,255,255,.03); } .nav-group.has-current .nav-group-label { color: #cbd5e1; } .nav-group-caret { display: flex; width: 13px; height: 13px; flex-shrink: 0; opacity: .85; transition: transform .18s; } .nav-group-caret svg { width: 100%; height: 100%; } .nav-group.is-collapsed .nav-group-caret { transform: rotate(-90deg); } .nav-group-label { flex: 1; } .nav-group-count { font-size: 10.5px; font-weight: 500; color: #475569; letter-spacing: 0; } /* 子项：整体缩进一档 + 左侧导引线，和分组头拉开层级 */ .nav-group-body { position: relative; display: flex; flex-direction: column; gap: 1px; margin: 3px 0 0 12px; padding-left: 11px; } .nav-group-body::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 1px; background: rgba(255, 255, 255, .11); } .nav-group-body .nav-item { padding: 8px 10px; margin-bottom: 0; font-size: 13px; } /* 子项选中时把左侧导引线这一段点亮，而不是再堆一块背景 */ .nav-group-body .nav-item.active::before { left: -11px; background: #3b82f6; } .nav-group.is-collapsed .nav-group-body { display: none; } /* 审批中心 */ .ap-form-hint { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; } .ap-diff-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border, #e5e7eb); font-size: 13px; } .ap-diff-label { min-width: 130px; color: var(--text-sub, #6b7280); flex-shrink: 0; } .ap-diff-old { color: #b91c1c; background: #fef2f2; border-radius: 6px; padding: 2px 8px; text-decoration: line-through; } .ap-diff-arrow { color: var(--text-sub, #6b7280); } .ap-diff-new { color: #166534; background: #f0fdf4; border-radius: 6px; padding: 2px 8px; font-weight: 500; } /* ============ 审批详情（变更摘要 / 分类正文 / 调价明细） ============ */ .ap-summary { background: var(--primary-light); border: 1px solid #c7d9ff; color: #1e3a8a; border-radius: 10px; padding: 12px 15px; font-size: 14px; font-weight: 600; line-height: 1.6; } .ap-sec { margin-top: 20px; } .ap-sec-title { font-size: 13px; font-weight: 600; color: var(--text-2); line-height: 1.3; margin-bottom: 6px; padding-left: 9px; border-left: 3px solid var(--primary); } .ap-kv { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; } .ap-kv > b { min-width: 132px; flex-shrink: 0; font-weight: 400; color: var(--text-2); } .ap-kv > span { color: var(--text); word-break: break-word; } .ap-sec .empty-state { padding: 16px 12px; font-size: 13px; } .ap-form-hint.danger { background: var(--danger-light); border-color: #fca5a5; color: #991b1b; } .ap-chg { width: 100%; border-collapse: collapse; font-size: 13px; } .ap-chg th, .ap-chg td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; } .ap-chg th { color: var(--text-2); font-weight: 500; background: var(--gray-bg); } .ap-chg tbody tr:hover { background: #f8fafc; } .ap-chg .num { text-align: right; font-variant-numeric: tabular-nums; } .ap-up { color: #b91c1c; font-weight: 600; } /* 涨价：红（成本上浮，需要盯） */ .ap-down { color: #15803d; font-weight: 600; } /* 降价：绿 */ .ap-add { color: #1d4ed8; font-weight: 600; } .ap-drop { color: #94a3b8; text-decoration: line-through; } /* 凭证展示（报销明细 / 审批详情）：一排 3 张「大图」，不点开就能基本看清票面。 contain 不裁剪 + 白底：发票照片整张可见；高度固定 320px 保证三张行高一致。 */ .ap-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .ap-photos a { width: 100%; height: 320px; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; } .ap-photos img { width: 100%; height: 100%; object-fit: contain; display: block; } /* 凭证文件被清理掉时不显示裂图，给一句人话。 ⚠️ 用 ::before 而不是 ::after：有「补传这张」按钮时，::after 会排在按钮**下面**， 读起来就是「先给按钮、再说文件丢了」。::before 保证文案在上、按钮在下。 */ .ap-photos a.ap-photo-missing::before { content: "凭证文件已丢失"; font-size: 11px; color: var(--text-3); text-align: center; line-height: 1.4; padding: 0 8px; } /* 2026-10-20：丢失的凭证给一个「原位置补传」出口（默认隐藏，只在 .ap-photo-missing 时露出来）。 竖向排：「凭证文件已丢失」在上、按钮在下，不挤在一行。 */ .ap-photos a.ap-photo-missing { flex-direction: column; gap: 10px; cursor: default; } .ap-photos .ap-repair { display: none; font-size: 12px; padding: 4px 12px; border-radius: 6px; border: 1px solid #2563eb; color: #2563eb; background: #fff; cursor: pointer; white-space: nowrap; } .ap-photos a.ap-photo-missing .ap-repair { display: inline-block; } .ap-photos .ap-repair:hover { background: #eff6ff; } /* 审批列表：列多且内容长，横向滚动而不是把列挤到换行 */ .ap-table { min-width: 1200px; } .ap-table th, .ap-table td { white-space: nowrap; padding: 10px 11px; } /* 除摘要外的长文本列都限宽折行，把宽度让给「申请内容」和「操作」 */ .ap-table th:nth-child(2), .ap-table td:nth-child(2), .ap-table th:nth-child(3), .ap-table td:nth-child(3), .ap-table th:nth-child(5), .ap-table td:nth-child(5), .ap-table th:nth-child(6), .ap-table td:nth-child(6) { white-space: normal; } .ap-table td:nth-child(2) { min-width: 110px; max-width: 152px; } .ap-table td:nth-child(3) { min-width: 180px; max-width: 205px; } .ap-table td:nth-child(5) { min-width: 128px; max-width: 172px; } .ap-table td:nth-child(6) { min-width: 128px; max-width: 180px; } /* 「申请内容」列：摘要最多两行，完整内容鼠标悬停可见 */ .ap-sum-col { min-width: 300px; max-width: 330px; } .ap-table th:nth-child(7) { min-width: 280px; } .ap-table td.ap-sum { white-space: normal; max-width: 400px; } /* 摘要在单元格内做两行截断（不把 td 改成 -webkit-box，避免破坏表格布局） */ .ap-clamp { line-height: 1.5; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .btn-detail { border-color: #93b4f8; color: var(--primary); background: var(--primary-light); } .btn-detail:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* 侧栏底部「同事访问」提示已于 2026-10-20 上云后移除（系统改为统一公网地址访问， 本机局域网地址对使用者已无意义）。原来的 .sidebar-footer / .lan-tip 一并删除， 侧栏底部一区现在就是「系统设置 + 使用说明书」，直接贴着侧栏底边。 */ .user-chip { font-size: 12px; color: #94a3b8; margin-bottom: 10px; line-height: 1.6; } .user-chip b { color: #e2e8f0; } .main { flex: 1; padding: 24px 28px; min-width: 0; } /* ============ 全局顶栏（跑马灯 + 消息中心，2026-10-03） ============ */ /* min-height:0（2026-10-20）：不加的话子项（.pages-wrap）的 min-height 默认按内容算， 内容一高就把主列顶高 —— 竖排 flex 里必须显式允许收缩。 */ .app-main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .topbar { height: 50px; flex: none; background: var(--card-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 18px; position: relative; z-index: 20; } /* 跑马灯：内容不足一屏时复制一份实现无缝衔接；悬停暂停方便阅读 */ .marquee { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 30px; background: var(--primary-light); border: 1px solid #dbeafe; border-radius: 20px; padding: 0 12px; overflow: hidden; } .marquee-label { flex: none; font-size: 11.5px; font-weight: 600; color: var(--primary); } .marquee-track { flex: 1; min-width: 0; overflow: hidden; height: 30px; display: flex; align-items: center; } .marquee-items { display: flex; gap: 44px; white-space: nowrap; animation: mqScroll 28s linear infinite; padding-left: 100%; } .marquee:hover .marquee-items { animation-play-state: paused; } @keyframes mqScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } .marquee-item { font-size: 12.5px; color: var(--text-2); } .marquee-item b { color: var(--text); font-weight: 600; } .marquee-empty { font-size: 12.5px; color: var(--text-3); } .topbar-right { flex: none; display: flex; align-items: center; gap: 12px; } .bell { position: relative; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #f8fafc; border: 1px solid var(--border); cursor: pointer; } .bell:hover { background: var(--primary-light); border-color: #bfdbfe; } .bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; line-height: 16px; padding: 0 5px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 9px; text-align: center; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); } /* 右上角用户按钮 + 下拉菜单（侧栏底部的用户信息与退出按钮已移到这里，2026-10-03） */ .topbar-user { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 20px; cursor: pointer; border: 1px solid transparent; flex: none; } .topbar-user:hover { background: #f8fafc; border-color: var(--border); } .topbar-user.on { background: #f8fafc; border-color: var(--border); } .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; color: #fff; background: linear-gradient(135deg, #2563eb, #38bdf8); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; } .tu-text { line-height: 1.25; } .tu-text b { display: block; font-size: 12.5px; color: var(--text); font-weight: 600; } .tu-text span { font-size: 11px; color: var(--text-3); } .tu-caret { color: var(--text-3); transition: transform .15s; flex: none; } .topbar-user.on .tu-caret { transform: rotate(180deg); } .user-menu { position: absolute; top: 56px; right: 16px; width: 232px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 70; overflow: hidden; } .um-head { padding: 13px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; background: #f8fafc; } .um-info { min-width: 0; } .um-info b { display: block; font-size: 13.5px; } .um-info span { font-size: 11.5px; color: var(--text-3); } .um-item { display: flex; align-items: center; gap: 9px; padding: 9px 14px; font-size: 12.5px; color: var(--text-2); cursor: pointer; } .um-item:hover { background: #f8fbff; color: var(--text); } .um-item svg { width: 15px; height: 15px; flex: none; opacity: .8; } .um-item.danger { color: var(--danger); } .um-item.danger:hover { background: var(--danger-light); } .um-sep { height: 1px; background: var(--border); } /* 修改密码弹窗：强度条 + 错误提示 注意：.form-field 是 flex 布局，强度条/提示必须包在 .pwd-wrap 里独占一行， 否则会被当成并列的 flex item 挤到输入框右侧。 */ .pwd-wrap { width: calc(100% - 114px); margin: -6px 0 10px 114px; } /* 必填校验失败时的输入框红框反馈 */ .input.is-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .1); } .pwd-err { background: var(--danger-light); border: 1px solid #fecaca; color: #b91c1c; border-radius: 8px; padding: 8px 11px; font-size: 12px; margin-bottom: 12px; } .pwd-strength { display: flex; gap: 5px; margin-top: 7px; } .pwd-strength i { height: 4px; flex: 1; border-radius: 2px; background: var(--border); transition: background .2s; } .pwd-strength.s1 i:nth-child(1) { background: var(--danger); } .pwd-strength.s2 i:nth-child(-n+2) { background: var(--warn); } .pwd-strength.s3 i:nth-child(-n+3) { background: #0d9488; } .pwd-strength.s4 i { background: var(--success); } .pwd-hint { font-size: 11.5px; color: var(--text-3); margin-top: 4px; } /* 消息中心下拉 */ .msg-pop { position: absolute; top: 56px; right: 16px; width: 420px; max-width: calc(100vw - 40px); background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden; } .msg-pop-head { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .msg-pop-head b { font-size: 13.5px; } .msg-pop-mark { margin-left: auto; font-size: 12px; color: var(--primary); cursor: pointer; } .msg-tabs { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #f8fafc; } .msg-tab { font-size: 12px; padding: 4px 10px; border-radius: 14px; background: #fff; border: 1px solid var(--border); color: var(--text-2); cursor: pointer; } .msg-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; } .msg-list { max-height: 340px; overflow: auto; } .msg-sec { padding: 7px 14px; background: #f8fafc; font-size: 11.5px; color: var(--text-3); border-bottom: 1px solid #f1f5f9; } .msg-row { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #f1f5f9; cursor: pointer; align-items: flex-start; } .msg-row:hover { background: #f8fbff; } .msg-row.unread { background: #fcfdff; } .msg-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; flex: none; } .msg-main { flex: 1; min-width: 0; } .msg-title { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .msg-row.unread .msg-title { font-weight: 600; } .msg-newdot { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); flex: none; } .msg-body { font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.5; } .msg-meta { font-size: 11px; color: var(--text-3); margin-top: 3px; } .msg-go { font-size: 11.5px; color: var(--primary); flex: none; align-self: center; } .msg-pop-foot { padding: 9px 14px; text-align: center; background: #f8fafc; font-size: 12px; color: var(--text-3); } .msg-lv { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; font-weight: 600; } .msg-lv.info { background: var(--primary-light); color: var(--primary); } .msg-lv.warn { background: var(--warn-light); color: var(--warn); } .msg-lv.urgent { background: var(--danger); color: #fff; } /* 公告查看弹窗 */ .notice-view { line-height: 1.85; } .notice-view h4 { margin: 0 0 8px; font-size: 15px; } .notice-view .nv-meta { font-size: 12px; color: var(--text-3); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .notice-view .nv-body { font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; } /* ============ 页面头部 ============ */ .page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .page-title { font-size: 20px; font-weight: 700; } .page-title small { display: block; font-size: 12px; color: var(--text-3); font-weight: 400; margin-top: 4px; } /* 页头动作按钮：grid + 1fr 让同排按钮**等宽**（基准=最宽那个），不再随文字长短参差； 收缩适应容器下 1fr 会按最大内容均分（Chrome 按规范实现）。锁定高度，emoji 行盒不再影响。 ⚠️ grid 不换行：按钮极多或窗口极窄时可能溢出，目前各页 ≤4 个、总和 <600px，够用。 */ .page-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; } .page-actions .btn { height: 32px; padding: 0 12px; } /* ============ 卡片 ============ */ .card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px; } .card-title { font-size: 14px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } /* ============ 搜索 / 筛选区 ============ */ .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } /* 筛选条里的按钮与控件同高（36px），否则「查询/重置」比旁边的下拉/日期矮一截 */ .filter-bar .btn { height: 36px; padding-top: 0; padding-bottom: 0; } .search-input { position: relative; flex: 0 1 220px; min-width: 170px; max-width: 260px; } .search-input input { width: 100%; height: 36px; padding: 0 12px 0 32px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; transition: border .15s; background: var(--card-bg); } .search-input::before { content: '🔍'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .55; pointer-events: none; } .search-input input:focus { border-color: var(--primary); } /* 筛选条内文本筛选（片区/楼层等）：弹性伸缩自适应，保证提示文案完整可见 */ .filter-bar > .filter-item.filter-text { flex: 1 1 215px; min-width: 215px; max-width: 300px; } /* 资质照片上传（证书 / 保险类字段） */ .cert-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; } .cert-thumb { position: relative; width: 54px; height: 54px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); flex: 0 0 auto; } .cert-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; } .cert-del { position: absolute; top: 0; right: 0; width: 17px; height: 17px; line-height: 15px; text-align: center; background: rgba(15,23,42,.6); color: #fff; border: none; border-radius: 0 0 0 6px; cursor: pointer; font-size: 12px; padding: 0; } .cert-del:hover { background: var(--danger); } .cert-add { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 1px dashed var(--border); border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text-2); text-align: center; user-select: none; } .cert-add:hover { border-color: var(--primary); color: var(--primary); } /* 报销「发票 / 凭证」上传区（2026-10-03 二次调整）：与详情展示同尺寸 —— 一排 3 张大图，最多 5 张 */ .cert-thumbs.ex-inv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; margin-top: 8px; } .cert-thumbs.ex-inv .cert-thumb { width: 100%; height: 320px; border-radius: 8px; background: #fff; } .cert-thumbs.ex-inv .cert-thumb img { cursor: zoom-in; object-fit: contain; } .cert-thumbs.ex-inv .cert-del { width: 24px; height: 24px; line-height: 22px; font-size: 15px; border-radius: 0 0 0 8px; } .cert-thumbs.ex-inv .cert-add { width: 100%; height: 320px; border-radius: 8px; font-size: 15px; flex-direction: column; gap: 4px; line-height: 1.5; padding: 8px; } .cert-thumbs.ex-inv .cert-add em { font-style: normal; font-size: 12px; color: var(--text-3); } .cert-thumbs.ex-inv .cert-add em { font-style: normal; font-size: 11px; color: var(--text-3); } .cert-thumbs.ex-inv .cert-add.is-full { border-style: solid; color: var(--text-3); cursor: default; } .cert-thumbs.ex-inv .cert-add.is-full:hover { border-color: var(--border); color: var(--text-3); } .ex-inv-count { margin-left: 8px; color: var(--text-3); font-variant-numeric: tabular-nums; } /* 报销发票 / 凭证：理赔式「点选 + 拖拽 + 粘贴」上传区（与 .ins-upbox 同一套语汇） */ .ex-inv-drop { margin: 10px 0 0; padding: 14px 10px; text-align: center; font-size: 12.5px; color: var(--text-3); border: 1px dashed var(--border); border-radius: 8px; background: var(--bg-2, #f7f8fa); user-select: none; } .ex-inv-drop b { color: var(--text-2); } .ex-inv-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .ex-inv-bar .btn { white-space: nowrap; } #exInvSec.drop-on .ex-inv-drop { border-color: var(--primary); border-style: solid; color: var(--primary); } #exInvSec.drop-on .ex-inv-drop::after { content: '（松手即上传）'; color: var(--primary); } .detail-certs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: middle; } .detail-cert { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in; display: block; } .filter-toggle { color: var(--text-2); } .filter-toggle .arrow { display: inline-block; transition: transform .2s; } .filter-toggle.open .arrow { transform: rotate(180deg); } .more-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px; padding: 14px 4px 4px; border-top: 1px dashed var(--border); overflow: hidden; } .more-filters .filter-item label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; } .anim-collapse { transition: grid-template-rows .25s ease, opacity .2s ease; display: grid; } .anim-collapse.closed { grid-template-rows: 0fr; opacity: 0; pointer-events: none; } .anim-collapse > * { overflow: hidden; min-height: 0; } /* ============ 统一表单控件（输入框/下拉/日期） ============ */ .ctrl { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text); background: var(--card-bg); outline: none; transition: border .15s, box-shadow .15s; font-family: inherit; line-height: 1.5; } .ctrl:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); } .ctrl.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220,38,38,.08); } select.ctrl { appearance: none; background-image: 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='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; } textarea.ctrl { resize: vertical; min-height: 70px; } /* 单行控件统一高度（2026-10-13）：Chrome 里 select 内容盒比 input 矮 ~4px、date 的日历件又比 input 偏高， 同一排筛选控件高矮不一 —— text / select / date 显式锁同一高度（36px），内容由浏览器垂直居中 */ select.ctrl, input.ctrl { height: 36px; padding-top: 0; padding-bottom: 0; } /* ============ 折叠分组面板（两个窗体完全一致） ============ */ .form-panel { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; border: 1px solid transparent; } .form-panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; cursor: pointer; user-select: none; transition: background .15s; } .form-panel-head:hover { background: #f8fafc; } .form-panel-head .p-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } .form-panel-head .p-title { font-size: 14px; font-weight: 600; flex: 1; } .form-panel-head .p-chev { color: var(--text-3); transition: transform .25s; font-size: 12px; } .form-panel.open .p-chev { transform: rotate(180deg); } .form-panel-body-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease; } .form-panel:not(.open) .form-panel-body-wrap { grid-template-rows: 0fr; } .form-panel-body { overflow: hidden; min-height: 0; } .form-panel-inner { padding: 4px 20px 20px; } /* ============ 表单字段网格 ============ */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 32px; } .form-field { display: flex; align-items: flex-start; padding: 7px 0; min-height: 46px; } .form-field > label { width: 128px; flex-shrink: 0; font-size: 13px; color: var(--text-2); line-height: 32px; text-align: right; padding-right: 14px; } .form-field > label .req { color: var(--danger); margin-left: 2px; } .form-field .field-ctrl { flex: 1; min-width: 0; } .form-field .field-ctrl .ctrl { line-height: 1.5; } .form-field.full { grid-column: 1 / -1; } .form-field .field-err { color: var(--danger); font-size: 12px; margin-top: 4px; display: none; } .form-field.has-err .field-err { display: block; } .field-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; } /* 多选 chips */ .chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; } .chip { border: 1px solid var(--border); border-radius: 16px; padding: 4px 14px; font-size: 13px; cursor: pointer; user-select: none; transition: all .15s; background: var(--card-bg); color: var(--text-2); } .chip:hover { border-color: var(--primary); color: var(--primary); } .chip.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500; } .chip.on::before { content: '✓ '; } .chip.on:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; } /* 联动显隐动画（两个窗体一致） */ .linked-field { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .25s ease, opacity .2s ease; } .linked-field.hidden-link { grid-template-rows: 0fr; opacity: 0; pointer-events: none; height: 0; overflow: hidden; } .linked-field > .lf-inner { overflow: hidden; min-height: 0; } /* 表单底部 */ .form-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 20px; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; bottom: 12px; border: 1px solid var(--border); } /* ============ 数据表格 ============ */ /* 财务表格容器：宽屏不滚动，列多时可横向滚动（配合操作列右侧固定） */ .table-wrap { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; overflow-y: hidden; } table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th { text-align: left; padding: 11px 14px; background: #f8fafc; color: var(--text-2); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; } .data-table tbody tr { transition: background .12s; } .data-table tbody tr:hover { background: #f8fbff; } .data-table .cell-id { color: var(--text-3); font-size: 12px; } /* 同理：操作列禁止换行（否则窄窗口/浏览器缩放时会折行） */ .data-table .cell-actions { white-space: nowrap; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .data-table .empty-row td { text-align: center; color: var(--text-3); padding: 40px 0; } /* 列表内品类标签：紧凑换行，便于一行内看全师傅可安装能力 */ .data-table .cell-cats-col { min-width: 240px; } /* 特殊标签列：比品类列窄一些（通常 1~3 个标签），同样紧凑换行 */ .data-table .cell-tags-col { min-width: 150px; } .data-table .cell-tags-col .cell-cats { max-width: 260px; } .data-table .cell-cats { display: flex; flex-wrap: wrap; gap: 3px; max-width: 320px; } .data-table .cell-cats .tag { font-size: 11px; padding: 1px 8px; border-radius: 10px; } .data-table .cell-cats .tag + .tag { margin-left: 0; } .data-table .cell-none { color: var(--text-3); } /* 长文本列（面试备注，2026-10-10）：限宽 + 最多 3 行截断 + 悬停浮层看全文 —— 与报销列表「说明」列同款。 ⚠️ 表格铁律：td/th 不能改 display（所以不用 -webkit-line-clamp，它要 display:-webkit-box）， 限高只能落在内层 div 上；td 保持 table-cell，列宽仍由浏览器自适应。 ⚠️ 选择器必须带 `.data-table td` 前缀 —— `.data-table td{padding:11px 14px;vertical-align:middle}` 是 (0,1,1)，裸类名 (0,1,0) 压不过它（与数字列 / 操作列同一个坑）。 */ .data-table td.cell-desc { width: 240px; min-width: 200px; max-width: 320px; white-space: normal; vertical-align: top; } .data-table th.cell-desc-h { min-width: 200px; } .data-table td.cell-desc > .cell-desc-in { font-size: 12.5px; color: var(--text-2); line-height: 1.55; max-height: 58px; /* 约 3 行（12.5 × 1.55 ≈ 19.4px） */ overflow: hidden; word-break: break-word; overflow-wrap: anywhere; cursor: default; } /* 只有被截断的单元格才加 is-hoverable（JS 判定），悬停给一点反馈 */ .data-table td.cell-desc.is-hoverable > .cell-desc-in:hover { color: var(--text); text-decoration: underline dotted; } /* 时间列（创建日期 / 修改日期）：日期时间不能折行 */ .data-table .cell-time { white-space: nowrap; color: var(--text-2); font-size: 12.5px; } /* 备注悬停浮层：显示全文；由 JS 定位到单元格上方，鼠标移出即消失。 这是 appendChild 到 body 的独立浮层元素（不落在 tr/td/th 上），所以用裸类名，与 .fin-desc-pop 保持一致。 */ .cell-desc-pop { position: fixed; z-index: 340; max-width: 420px; min-width: 180px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); padding: 11px 13px; font-size: 12.5px; line-height: 1.7; color: var(--text); white-space: normal; word-break: break-word; pointer-events: none; /* 鼠标移出单元格即隐藏，不阻塞 */ } .cell-desc-pop b { display: block; font-size: 12px; color: var(--text-2); font-weight: 600; margin-bottom: 4px; } /* ============ 列表横向滚动 + 冻结前三列（ID / 姓名 / 手机号） ============ */ .table-scroll { overflow-x: auto; } /* --fc3 = 手机号列宽。显示层按 3-4-4 分段（177 5349 6183），座机更宽： "0531-88888888" 实测约 102px + 左右内边距 28px ≈ 130px，128px 会折行 → 取 140px（余量 10px）。 11 位手机号分段后约 91px，同样放得下。仅影响冻结列宽，不动表格结构。 */ .data-table.frozen-cols { min-width: 1180px; --fc1: 76px; --fc2: 100px; --fc3: 140px; } .data-table.frozen-cols th:nth-child(1), .data-table.frozen-cols td:nth-child(1) { position: sticky; left: 0; width: var(--fc1); min-width: var(--fc1); } .data-table.frozen-cols th:nth-child(2), .data-table.frozen-cols td:nth-child(2) { position: sticky; left: var(--fc1); width: var(--fc2); min-width: var(--fc2); } .data-table.frozen-cols th:nth-child(3), .data-table.frozen-cols td:nth-child(3) { position: sticky; left: calc(var(--fc1) + var(--fc2)); width: var(--fc3); min-width: var(--fc3); } .data-table.frozen-cols th:nth-child(-n+3) { z-index: 3; background: #f8fafc; } .data-table.frozen-cols td:nth-child(-n+3) { z-index: 2; background: var(--card-bg); } .data-table.frozen-cols tbody tr:hover td:nth-child(-n+3) { background: #f8fbff; } /* 冻结区右缘阴影，滚动时区分固定列与滚动内容 */ .data-table.frozen-cols th:nth-child(3), .data-table.frozen-cols td:nth-child(3) { box-shadow: 8px 0 10px -10px rgba(15, 23, 42, .45); } /* 奖励台账第 1 列是「事迹日期」（nowrap，实际 99px），比通用的 ID 列 76px 宽。 不单独声明，第 2/3 列的吸顶偏移会各少 23px，横向滚动时三列互相压叠。 */ .data-table.frozen-cols.rw-ledger { --fc1: 99px; } .tag { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; line-height: 1.6; white-space: nowrap; } .tag + .tag { margin-left: 4px; } .tag-gray { background: #f1f5f9; color: #64748b; } .tag-blue { background: var(--primary-light); color: var(--primary); } .tag-green { background: var(--success-light); color: var(--success); } .tag-amber { background: var(--warn-light); color: var(--warn); } .tag-red { background: var(--danger-light); color: var(--danger); } .tag-purple{ background: #f5f3ff; color: #7c3aed; } /* 特殊标签：金色系，与状态标签（蓝/绿/琥珀/红/紫）区分开，一眼可辨「特殊达标」 */ .tag-star { background: #fef3c7; color: #a16207; } /* 分页 */ .pager { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; flex-wrap: wrap; gap: 10px; } /* 左侧计数：**永不折行**（「共 7 条记录 · 第 1 / 1 页」折成两行比控件换行更丑）， 容器真挤不下时省略号收尾，右侧控件保持原样 */ .pager .pager-info { color: var(--text-3); font-size: 12px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pager .pager-btns { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; } .pager-btn { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text-2); transition: all .15s; } .pager-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .pager-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; } .pager-btn:disabled { opacity: .4; cursor: not-allowed; } /* 每页条数：与翻页键**同高同圆角**（30px / 8px）—— 别在分页条里突然出现一个 36px 的筛选级大控件，那是「两行」的另一个诱因 */ .pager select.ctrl { width: auto; min-width: 92px; height: 30px; padding: 0 26px 0 10px; font-size: 12px; border-radius: 8px; color: var(--text-2); } /* ============ 弹窗 ============ */ .modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn .18s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---------- 报销明细弹窗：深蓝标题栏 + 状态胶囊（2026-10-04） ---------- 替代原先顶部那条黄色提示条（内容已上移到标题栏第二行）。 胶囊颜色跟随单据状态：待审批=琥珀 / 待付款·已通过=绿 / 已驳回=红。 */ .ex-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; background: linear-gradient(135deg, #0b2a4d 0%, #154a80 100%); border-bottom: none; flex-shrink: 0; } .ex-detail-head .mh-l { min-width: 0; } .ex-detail-head .mh-title { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .2px; } .ex-detail-head .mh-sub { margin-top: 3px; font-size: 12.5px; color: #c7dbf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ex-detail-head .mh-r { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .mh-status { font-size: 13px; font-weight: 600; color: #7ff0c0; background: rgba(22, 163, 74, .16); border: 1.5px solid #34d399; border-radius: 20px; padding: 4px 16px; white-space: nowrap; } .mh-status.is-amber { color: #fcd34d; background: rgba(245, 158, 11, .16); border-color: #fbbf24; } .mh-status.is-red { color: #fca5a5; background: rgba(220, 38, 38, .16); border-color: #f87171; } .ex-detail-head .modal-close { border: none; background: rgba(255, 255, 255, .1); font-size: 18px; cursor: pointer; color: #c7dbf0; padding: 3px 9px; border-radius: 6px; line-height: 1; } .ex-detail-head .modal-close:hover { background: rgba(255, 255, 255, .2); color: #fff; } /* ---------- 报销明细弹窗：单据信息表（2026-10-04） ---------- 把提交时填写的表头字段全部列出来（原来只有顶部黄条一句话，等于看不见）。 用 colgroup 固定四列（88 / 292 / 88 / 其余）：标签与它的值之间只隔 292px， 视线不用横跨整行；第 1 列值再长也压不到第 2 列标签，每行字段名竖成一列。 */ .ap-info { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 4px; table-layout: fixed; } .ap-info col.c1, .ap-info col.c3 { width: 88px; } .ap-info col.c2 { width: 292px; } .ap-info th, .ap-info td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; word-break: break-word; } .ap-info th { color: var(--text-2); font-weight: 500; background: var(--gray-bg); white-space: nowrap; } .ap-info td { color: var(--text); } .ap-info tr:hover td, .ap-info tr:hover th { background: #f8fafc; } /* 「说明」整行浅黄底：审批的主要依据，单独占一行不挤在单元格里 */ .ap-info th.key-note-lb { background: #fef3c7; color: #92400e; } .ap-info td.key-note { background: #fffbeb; color: var(--text); line-height: 1.65; } .modal { background: var(--card-bg); border-radius: 14px; box-shadow: var(--shadow-lg); max-width: 880px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; animation: popIn .2s ease; /* ★ 必须有 overflow:hidden —— 否则深色标题栏/深色页脚这类"满宽"子元素 会顶穿 border-radius，表现为「顶部是直角、底部是圆角」不对称。 圆角要靠 overflow 裁切子元素才能生效（背景色本身不会被裁）。 */ overflow: hidden; } .modal.wide { max-width: 1180px; } /* tall：内容多的表单（新增报销）。表单字段一多，88vh 就开始逼用户拉滚动条 —— 这里把窗体顶到接近全屏高度，同时 mask 内边距收窄（否则 max-height 再大也用不满）。 */ .modal.tall { max-height: calc(100vh - 20px); } .modal-mask.tight { padding: 10px; } /* tall 表单的头/尾/合计条再收一点 —— 差十几像素就够把「要拉滚动条」变成「一屏看完」 */ .modal.tall .modal-head { padding: 12px 22px; } .modal.tall .modal-foot { padding: 11px 22px; } .modal.tall .ex-total { margin-top: 10px; padding: 8px 12px; } @keyframes popIn { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); } .modal-head h3 { font-size: 16px; } .modal-close { border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--text-3); padding: 4px 8px; border-radius: 6px; } .modal-close:hover { background: var(--gray-bg); color: var(--text); } .modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; min-height: 0; } /* 内容超出时滚动条保持可见，避免「看不出还能往下滚」 */ .modal-body::-webkit-scrollbar { width: 10px; } .modal-body::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 6px; } .modal-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; border: 2px solid #f1f5f9; } .modal-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; } /* 详情查看（分组折叠，与录入窗体一致风格） */ .detail-group { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; } .detail-group-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #f8fafc; cursor: pointer; font-size: 13px; font-weight: 600; user-select: none; } .detail-group-head .d-chev { margin-left: auto; color: var(--text-3); transition: transform .2s; font-size: 12px; } .detail-group.open .d-chev { transform: rotate(180deg); } .detail-group-body-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; } .detail-group:not(.open) .detail-group-body-wrap { grid-template-rows: 0fr; } .detail-group-body { overflow: hidden; min-height: 0; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 10px 16px 14px; } .detail-item { display: flex; padding: 6px 0; border-bottom: 1px dashed #f1f5f9; font-size: 13px; } .detail-item .d-label { width: 130px; flex-shrink: 0; color: var(--text-3); } .detail-item .d-value { flex: 1; color: var(--text); word-break: break-all; } /* 详情页派生信息（年龄）：灰字小号说明，跟在主值后面不抢视线 */ .detail-item .d-hint { margin-left: 6px; font-size: 12px; color: var(--text-3); } .detail-item .d-none { color: var(--text-3); } .detail-item.full { grid-column: 1 / -1; } /* 导入报告 */ .import-report { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; } .import-row { display: flex; gap: 10px; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid #f1f5f9; align-items: flex-start; } .import-row:last-child { border-bottom: none; } .import-row .r-no { color: var(--text-3); width: 44px; flex-shrink: 0; } .import-row.ok .r-msg { color: var(--success); } .import-row.fail .r-msg { color: var(--danger); } /* Toast */ .toast-box { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 950; display: flex; flex-direction: column; gap: 10px; align-items: center; } .toast { background: #0f172a; color: #fff; padding: 10px 20px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow-lg); animation: toastIn .25s ease; max-width: 480px; } .toast.success { background: #14532d; } .toast.error { background: #7f1d1d; } .toast.warn { background: #78350f; } @keyframes toastIn { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } } /* 空状态 */ .empty-state { text-align: center; padding: 50px 20px; color: var(--text-3); } .empty-state .icon { font-size: 40px; margin-bottom: 10px; } /* ============ 主页大屏 ============ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; } .stat-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); } .stat-card.green::before { background: var(--success); } .stat-card.amber::before { background: var(--warn); } .stat-card.purple::before { background: #7c3aed; } .stat-card.teal::before { background: #0d9488; } .stat-card.cyan::before { background: #0891b2; } .stat-card .s-num { font-size: 30px; font-weight: 700; line-height: 1.2; } .stat-card.blue .s-num { color: var(--primary); } .stat-card.green .s-num { color: var(--success); } .stat-card.amber .s-num { color: var(--warn); } .stat-card.purple .s-num { color: #7c3aed; } .stat-card.teal .s-num { color: #0d9488; } .stat-card.cyan .s-num { color: #0891b2; } .stat-card .s-label { font-size: 12px; color: var(--text-3); margin-top: 5px; } .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } @media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } } .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; } .bar-row:last-child { margin-bottom: 0; } .bar-label { width: 118px; flex-shrink: 0; font-size: 12px; color: var(--text-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-track { flex: 1; height: 16px; background: var(--gray-bg); border-radius: 8px; overflow: hidden; } .bar-fill { height: 100%; background: linear-gradient(90deg, #60a5fa, #2563eb); border-radius: 8px; min-width: 3px; transition: width .5s ease; } .bar-fill.fill-green { background: linear-gradient(90deg, #4ade80, #16a34a); } .bar-fill.fill-purple { background: linear-gradient(90deg, #a78bfa, #7c3aed); } .bar-fill.fill-amber { background: linear-gradient(90deg, #fbbf24, #d97706); } .bar-num { width: 28px; flex-shrink: 0; font-size: 12px; color: var(--text-2); font-weight: 600; } .empty-hint { color: var(--text-3); font-size: 13px; text-align: center; padding: 16px 0; } /* ---------- 顶部：人才供给链路（招聘需求 → 意向人员 → 在职人员） ---------- */ .flow { display: flex; align-items: stretch; } .flow-stage { flex: 1; min-width: 0; border-radius: 10px; padding: 14px 18px; border: 1px solid var(--border); position: relative; } .flow-stage.s1 { background: #f5f3ff; border-color: #ddd6fe; } .flow-stage.s2 { background: #eff6ff; border-color: #bfdbfe; } .flow-stage.s3 { background: #f0fdf4; border-color: #bbf7d0; } .flow-stage .fs-head { font-size: 13px; font-weight: 700; color: var(--text-2); } .flow-stage .fs-num { font-size: 32px; font-weight: 700; line-height: 1.15; margin-top: 4px; } .flow-stage .fs-num small { font-size: 13px; font-weight: 500; color: var(--text-3); margin-left: 3px; } .flow-stage.s1 .fs-num { color: #7c3aed; } .flow-stage.s2 .fs-num { color: #2563eb; } .flow-stage.s3 .fs-num { color: #16a34a; } .flow-stage .fs-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; } .flow-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; color: var(--text-3); flex-shrink: 0; } .flow-arrow span { font-size: 11px; margin-bottom: 2px; } .flow-arrow b { font-size: 18px; line-height: 1; } @media (max-width: 900px) { .flow { flex-direction: column; gap: 10px; } .flow-arrow { padding: 4px 0; } .flow-arrow b { transform: rotate(90deg); } } /* ---------- 三大业务模块 ---------- */ .dash-module { --mc: var(--primary); --mc-soft: #eff6ff; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px; } .dash-module.m1 { --mc: #7c3aed; --mc-soft: #f5f3ff; } .dash-module.m2 { --mc: #2563eb; --mc-soft: #eff6ff; } .dash-module.m3 { --mc: #16a34a; --mc-soft: #f0fdf4; } .mod-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .mod-index { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--mc); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .mod-head-text { min-width: 0; } .mod-title { font-size: 15px; font-weight: 700; } .mod-desc { font-size: 12px; color: var(--text-3); margin-top: 3px; } .mod-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 10px; margin: 14px 0; } .mod-stat { background: var(--mc-soft); border-left: 3px solid var(--mc); border-radius: 8px; padding: 10px 12px; } .mod-stat .ms-num { font-size: 22px; font-weight: 700; color: var(--mc); line-height: 1.2; } .mod-stat .ms-label { font-size: 12px; color: var(--text-2); margin-top: 2px; } .mod-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; } .mini-card { align-self: start; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: #fff; } .mini-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .mini-sub { font-size: 11px; color: var(--text-3); font-weight: 400; } .mini-body { flex: 1; display: flex; flex-direction: column; justify-content: center; } .mini-card .bar-label { width: 86px; } .mod-list { margin-top: 16px; } .mod-list-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* ---------- 请假计划（待生效）与请假记录 ---------- */ .leave-list { display: flex; flex-direction: column; } .leave-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px dashed #f1f5f9; font-size: 13px; cursor: pointer; } .leave-row:last-child { border-bottom: none; } .leave-row:hover { background: #f8fbff; } .leave-row .lv-name { min-width: 104px; font-weight: 600; display: flex; flex-direction: column; line-height: 1.25; } .leave-row .lv-name small { font-size: 11px; font-weight: 400; color: var(--text-3); } .leave-row .lv-area { min-width: 92px; color: var(--text-2); } .leave-row .lv-cats { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; min-width: 126px; } .leave-row .lv-reason { min-width: 72px; } .leave-row .lv-range { min-width: 176px; font-size: 12px; color: var(--text-3); } .leave-row .lv-state { min-width: 132px; text-align: right; } @media (max-width: 900px) { .leave-row { flex-wrap: wrap; } .leave-row .lv-state { text-align: left; } } .leave-history { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; } .lh-title { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; } .lh-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 4px; border-bottom: 1px dashed #f1f5f9; font-size: 13px; } .lh-row:last-child { border-bottom: none; } .lh-range { font-weight: 600; min-width: 168px; } .lh-by { font-size: 11px; color: var(--text-3); margin-left: auto; } /* 请假记录行上的操作按钮（提前销假 / 撤销）：有按钮时按钮靠右，提交人信息让位 */ .lh-ops { display: inline-flex; gap: 6px; margin-left: auto; } .lh-row:has(.lh-ops) .lh-by { margin-left: 0; } /* 可搜索人员选择（请假弹窗等）：输入模糊过滤 + 姓名/区域/身份证脱敏引导 */ .searchable { position: relative; } .searchable .ctrl { width: 100%; } .searchable-list { display: none; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 248px; overflow-y: auto; background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); } .searchable-list.open { display: block; } .searchable-item { padding: 8px 12px; cursor: pointer; } .searchable-item:hover { background: #f8fbff; } .searchable-item.on { background: var(--primary-light); } .si-name { font-size: 13px; font-weight: 600; color: var(--text); } .si-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; font-variant-numeric: tabular-nums; } .searchable-empty { padding: 12px; font-size: 13px; color: var(--text-2); text-align: center; } .ring-wrap { position: relative; width: 168px; height: 168px; margin: 6px auto 10px; } .ring { width: 168px; height: 168px; transform: rotate(-90deg); } .ring-bg { fill: none; stroke: var(--gray-bg); stroke-width: 9; } .ring-fg { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .6s ease; } .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ring-center b { font-size: 34px; font-weight: 700; line-height: 1.1; } .ring-center small { font-size: 13px; color: var(--text-3); margin-top: 4px; } .expiring-item { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px dashed #f1f5f9; font-size: 13px; } .expiring-item:last-child { border-bottom: none; } .expiring-item:hover { background: #f8fbff; } .exp-name { font-weight: 600; min-width: 70px; } .exp-item { color: var(--text-2); flex: 1; } .exp-date { color: var(--text-3); font-size: 12px; } .card-title-sub { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 4px; } .ctrl-row { display: flex; gap: 6px; align-items: flex-start; } .ctrl-row .ctrl { flex: 1; min-width: 0; } .ctrl-row .chips { flex: 1; padding-top: 0; } .ctrl-row .add-dict { flex-shrink: 0; } /* ============ 数据字典 ============ */ .dict-add-row { display: flex; gap: 8px; margin-bottom: 14px; } .dict-add-row .ctrl { max-width: 280px; } .dict-list { border-top: 1px solid var(--border); } /* 允许换行：字典卡片内容是「名称 + 使用计数 + 承担徽标 + 操作按钮」， 卡片宽度由 .dict-group-body 的 grid（minmax(430px,1fr)）决定，视口一变就变窄。 附加费类型那行多一个徽标 + 多一个「承担设置」按钮 → 卡在 430~570px 时被撑破卡片 （2026-10-07 实测：1280 宽下每行溢出 168px、1440 宽下溢出 88px，"字段外溢"）。 flex-wrap 之后：放得下仍是一行（操作列靠右，与改动前完全一致），放不下就让操作列 整体落到第二行并右对齐 —— 任何宽度都不再横向挤出卡片。 */ .dict-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 4px; border-bottom: 1px dashed #f1f5f9; } .dict-row:last-child { border-bottom: none; } .dict-row:hover { background: #f8fbff; } .dict-name { font-weight: 500; min-width: 150px; } .dict-usage { font-size: 12px; color: var(--text-3); flex: 1 1 auto; min-width: 0; } .dict-usage b { color: var(--warn); } /* margin-left:auto 只在「操作列被挤到第二行」时才起作用（同一行时 usage 已经把右侧占满）—— 保证换行后操作列依然贴右，不会孤零零缩在左边 */ .dict-ops { display: flex; gap: 6px; margin-left: auto; } /* 增 / 改 / 删后定位到的字典卡片高亮一次，帮助视觉定位 */ .dict-flash { animation: dictFlash 1.2s ease-out; } @keyframes dictFlash { 0% { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); } 100% { box-shadow: var(--shadow); } } /* ============ 字典分组折叠（二期地基） ============ */ .dict-group { margin-bottom: 20px; } .dict-group-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f1f5f9; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; user-select: none; transition: background .15s; } .dict-group-head:hover { background: #e9eff8; } .dict-group-caret { font-size: 12px; color: var(--text-3); transition: transform .18s; display: inline-block; } .dict-group.is-collapsed .dict-group-caret { transform: rotate(-90deg); } .dict-group-icon { font-size: 16px; } .dict-group-label { font-weight: 600; font-size: 14px; } .dict-group-count { font-size: 12px; color: var(--primary); background: rgba(37, 99, 235, .09); border-radius: 20px; padding: 2px 9px; } .dict-group-desc { font-size: 12px; color: var(--text-3); margin-left: auto; } .dict-group-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 14px; margin-top: 14px; align-items: start; } .dict-group.is-collapsed .dict-group-body { display: none; } .dict-group-body .card { margin-bottom: 0; } @media (max-width: 1000px) { .dict-group-body { grid-template-columns: 1fr; } .dict-group-desc { display: none; } } /* ============ 版本管理（二期地基） ============ */ .ver-current { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(180deg, #eff6ff, #fff); border: 1px solid #bfdbfe; } .ver-current-icon { font-size: 22px; line-height: 1.2; } .ver-current-title { font-size: 15px; font-weight: 600; margin-bottom: 5px; } .ver-current-name { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: 8px; } .ver-current-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.7; } .ver-count { font-size: 13px; color: var(--text-3); margin: 18px 4px 10px; } .ver-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .ver-badge { font-size: 15px; } .ver-title { font-weight: 600; font-size: 14px; word-break: break-all; } .ver-meta { font-size: 12px; color: var(--text-3); margin-bottom: 5px; } .ver-note { font-size: 13px; color: var(--text-2); margin-bottom: 13px; } .ver-ops { display: flex; gap: 8px; flex-wrap: wrap; } .ver-steps { padding-left: 20px; margin: 8px 0; } .ver-steps li { margin-bottom: 2px; } .ver-form-row { margin-bottom: 14px; } .ver-form-row label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; } .ver-form-row .ctrl { width: 100%; } .ver-form-hint { font-size: 12.5px; color: var(--text-3); line-height: 1.7; margin-top: 4px; } /* ============ 招聘需求：缺口与关联人员 ============ */ .linked-stat { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); margin-bottom: 8px; } .linked-stat .ls-item b { font-size: 15px; } .ls-ok { color: var(--success); } .ls-warn { color: var(--danger); } .linked-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .linked-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 16px; padding: 3px 8px 3px 4px; font-size: 13px; background: var(--card-bg); } .linked-chip .lc-type { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--gray-bg); color: var(--text-2); } .linked-chip .lc-type.formal { background: var(--success-light); color: var(--success); } .linked-chip .lc-type.intention { background: var(--primary-light); color: var(--primary); } .lc-del { border: none; background: transparent; color: var(--text-3); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; } .lc-del:hover { color: var(--danger); } /* 关联人员选择弹窗 */ .picker-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .picker-bar .ctrl { flex: 0 1 260px; } .picker-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .picker-list { max-height: 42vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; } .picker-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid #f1f5f9; cursor: pointer; } .picker-item:last-child { border-bottom: none; } .picker-item:hover { background: #f8fbff; } .picker-item.on { background: var(--primary-light); } .picker-item input { flex: 0 0 auto; } .pi-type { font-size: 11px; padding: 1px 7px; border-radius: 8px; background: var(--gray-bg); color: var(--text-2); flex: 0 0 auto; } .pi-type.formal { background: var(--success-light); color: var(--success); } .pi-type.intention { background: var(--primary-light); color: var(--primary); } .pi-name { font-weight: 600; min-width: 70px; } .pi-meta { color: var(--text-2); min-width: 96px; } .pi-area { flex: 1; min-width: 120px; color: var(--text-3); } .pi-status { color: var(--text-3); font-size: 12px; } .picker-tip { margin-top: 12px; font-size: 13px; color: var(--text-2); } /* 列表：需求缺口进度单元格 */ .gap-cell { display: flex; align-items: center; gap: 8px; min-width: 170px; } .gap-bar { flex: 1; height: 8px; background: var(--gray-bg); border-radius: 5px; overflow: hidden; min-width: 50px; } .gap-bar-fill { height: 100%; background: linear-gradient(90deg, #4ade80, #16a34a); border-radius: 5px; transition: width .4s ease; } .gap-pct { font-size: 12px; color: var(--text-2); font-weight: 600; } /* 大屏：招聘需求到岗进度 */ .recruit-list { display: flex; flex-direction: column; } .recruit-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px dashed #f1f5f9; font-size: 13px; cursor: pointer; } .recruit-row:last-child { border-bottom: none; } .recruit-row:hover { background: #f8fbff; } .recruit-row .rc-area { min-width: 118px; font-weight: 600; } .recruit-row .rc-cats { display: flex; flex-wrap: wrap; gap: 3px; min-width: 120px; } .recruit-row .rc-track { flex: 1; height: 14px; background: var(--gray-bg); border-radius: 7px; overflow: hidden; min-width: 70px; } .recruit-row .rc-fill { height: 100%; background: linear-gradient(90deg, #60a5fa, #2563eb); border-radius: 7px; transition: width .4s ease; } .recruit-row .rc-num { font-size: 12px; font-weight: 600; color: var(--text-2); min-width: 46px; text-align: right; } .recruit-row .rc-gap { min-width: 76px; } .recruit-row .rc-date { font-size: 12px; color: var(--text-3); min-width: 108px; text-align: right; } .recruit-row .rc-date.rc-overdue { color: var(--danger); font-weight: 600; } /* ============ 暂停接单（大屏时间轴 + 登记弹窗） ============ */ .pause-list { display: flex; flex-direction: column; } .pause-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px dashed #f1f5f9; font-size: 13px; cursor: pointer; } .pause-row:last-child { border-bottom: none; } .pause-row:hover { background: #f8fbff; } .pause-row .ps-name { min-width: 104px; font-weight: 600; display: flex; flex-direction: column; line-height: 1.25; } .pause-row .ps-name small { font-size: 11px; font-weight: 400; color: var(--text-3); } .pause-row .ps-area { min-width: 92px; color: var(--text-2); } .pause-row .ps-cats { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; min-width: 126px; } .pause-row .ps-reason { min-width: 72px; } .pause-row .ps-range { min-width: 166px; font-size: 12px; color: var(--text-3); } .pause-row .ps-track { flex: none; width: 190px; height: 14px; background: var(--gray-bg); border-radius: 7px; overflow: hidden; } .pause-row .ps-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, #fcd34d, #f59e0b); transition: width .4s ease; } .pause-row.upcoming .ps-fill { background: linear-gradient(90deg, #93c5fd, #3b82f6); } .pause-row.open .ps-fill { background: linear-gradient(90deg, #fcd34d, #f97316); } .pause-row.ended .ps-fill { background: linear-gradient(90deg, #fca5a5, #ef4444); } .pause-row .ps-state { min-width: 188px; text-align: right; } .pause-row.upcoming { background: #f5f9ff; } .pause-row.ended { opacity: .8; } .pause-row.unknown { background: #fff7ed; } .pause-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; } .pause-form label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .pf-err { display: none; margin-top: 12px; color: var(--danger); font-size: 13px; font-weight: 600; } /* 响应式 */ @media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: 1fr; } .pause-form { grid-template-columns: 1fr; } .pause-row { flex-wrap: wrap; } .pause-row .ps-state { text-align: left; } .pause-row .ps-track { flex: 1 1 160px; width: auto; } .sidebar { width: 64px; } .sidebar-brand { padding: 18px 0; justify-content: center; } .sidebar-brand .brand-text { display: none; } /* 窄屏只剩图标条：文字、分组头、角标一律收起，子项强制展开 */ .nav-label, .nav-badge, .nav-group-head { display: none; } .nav-item, .nav-group-body .nav-item { justify-content: center; padding: 10px 0; } .nav-group { margin-top: 8px; } .nav-group-body { display: flex !important; margin: 0; padding: 0; } .nav-group-body::before, .nav-group-body .nav-item.active::before { display: none; } .user-chip { display: none; } .main { padding: 16px; } } /* ============================================================ * 师傅贡献奖励台账 * ============================================================ */ /* 发放弹窗表单 */ .rw-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } .rw-form .pf-item.full { grid-column: 1 / -1; } .rw-form label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .rw-form label small { font-weight: 400; color: var(--text-3); margin-left: 6px; } .rw-form .ctrl-row { display: flex; gap: 8px; align-items: center; } .rw-form .ctrl-row .ctrl { flex: 1; } .rw-form textarea.ctrl { resize: vertical; line-height: 1.6; font-family: inherit; } .rw-form .pf-item.req-on label { color: var(--danger); } .rw-points-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rw-points-row .ctrl { width: 96px; flex: none; } .rw-quick { display: flex; gap: 6px; flex-wrap: wrap; } /* 台账统计卡（auto-fit：有「待审批」第 6 张卡时自动重排，不会挤成两行参差） */ .rw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin: 14px 0; } .rw-stat { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .rw-stat-label { font-size: 12px; color: var(--text-3); } .rw-stat-value { font-size: 24px; font-weight: 700; color: var(--text); margin: 4px 0 2px; letter-spacing: -.5px; } .rw-stat-note { font-size: 11px; color: var(--text-3); } /* 待审批：琥珀色提醒（这些记录尚未计入积分） */ .rw-stat-warn { border-color: var(--warn); background: var(--warn-light); } .rw-stat-warn .rw-stat-value { color: var(--warn); } /* 视图切换 */ .rw-viewtabs { display: flex; gap: 8px; margin: 0 0 12px; } .rw-tab { border: 1px solid var(--border); background: var(--card-bg); color: var(--text-2); border-radius: 18px; padding: 6px 16px; font-size: 13px; cursor: pointer; transition: all .15s; } .rw-tab:hover { border-color: var(--primary); color: var(--primary); } .rw-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500; } /* 筛选：日期区间 */ .rw-daterange { display: flex; align-items: center; gap: 6px; } .rw-daterange .ctrl { width: 150px; } .rw-dash { color: var(--text-3); } /* 台账表格列 */ .cell-date { white-space: nowrap; font-size: 12px; color: var(--text-2); } .cell-person { min-width: 96px; } .cell-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; } /* 数字列（积分 / 金额）表头与内容统一右对齐。 必须带 `.data-table` 前缀：全局的 `.data-table th { text-align: left }` 特异性 (0,1,1) 高于单个类名 (0,1,0)，不加前缀会让表头被强制左对齐、而内容仍右对齐 → 视觉上"错位"。 */ .data-table .cell-points { text-align: right; white-space: nowrap; } .data-table .cell-money { text-align: right; white-space: nowrap; } .cell-reward { min-width: 130px; } .cell-title { min-width: 220px; max-width: 340px; } .cell-no { white-space: nowrap; } .cell-last { min-width: 190px; } .rw-person { color: var(--primary); cursor: pointer; font-weight: 500; } .rw-person:hover { text-decoration: underline; } .rw-points { color: #7c3aed; font-weight: 700; } .rw-money { color: var(--warn); font-weight: 600; } .rw-title { font-size: 13px; color: var(--text); } .rw-note { font-size: 12px; color: var(--text-3); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rw-no { display: inline-flex; align-items: center; gap: 4px; } .rw-no-txt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-2); } .rw-copy { border: none; background: transparent; color: var(--text-3); font-size: 11px; cursor: pointer; padding: 0 2px; } .rw-copy:hover { color: var(--primary); text-decoration: underline; } .rw-credit-cell { display: inline-flex; align-items: baseline; gap: 2px; color: #b45309; font-weight: 600; } .rw-credit-cell b { font-size: 15px; } .rw-credit-cell small { font-size: 11px; color: var(--text-3); font-weight: 400; } .rw-credit-times { margin-left: 4px; } .rw-revoked { opacity: .55; } .rw-revoked-tip { color: var(--danger); font-size: 11px; } /* 档案上的贡献汇总徽章 */ .credit-badge { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; } .cb-main { display: flex; align-items: baseline; gap: 8px; } .cb-star { font-size: 18px; } .cb-score { font-size: 30px; font-weight: 700; color: #b45309; letter-spacing: -1px; } .cb-unit { font-size: 13px; color: var(--text-2); } .cb-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); } .cb-meta b { color: var(--text); } /* 详情里的「奖励积分卡」 */ .rw-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .rw-card-head .credit-badge { margin-bottom: 0; flex: 1 1 auto; } .rw-card-none { font-size: 13px; color: var(--text-3); } .rw-type-sum { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .rw-list { display: flex; flex-direction: column; gap: 10px; } .rw-card-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .rw-card-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rw-date { font-size: 12px; color: var(--text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } .rw-card-title { font-weight: 600; font-size: 13px; } .rw-card-op { margin-left: auto; } .rw-card-note { font-size: 12px; color: var(--text-2); margin-top: 6px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rw-card-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-3); margin-top: 6px; } .rw-meta-item { display: inline-flex; align-items: center; gap: 4px; } /* 服务单号关联提示 */ .rw-related { margin-top: 12px; } .rw-rel-ok { font-size: 12px; color: var(--text-3); } .rw-rel { border: 1px solid #fde68a; background: #fffbeb; border-radius: 8px; padding: 10px 12px; } .rw-rel-title { font-size: 13px; font-weight: 600; color: #b45309; margin-bottom: 6px; } .rw-rel-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; padding: 3px 0; } .rw-rel-name { font-weight: 600; } .rw-rel-pt { color: #7c3aed; font-weight: 600; } .rw-rel-warn { margin-top: 6px; font-size: 12px; color: var(--danger); font-weight: 600; } .rw-rel-tip { margin-top: 6px; font-size: 11px; color: var(--text-3); } /* 排行榜 */ .rw-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .rw-board-title { font-size: 15px; font-weight: 600; } .rw-board-title small { display: block; font-weight: 400; font-size: 12px; color: var(--text-3); margin-top: 3px; } .rw-win { display: flex; gap: 8px; } .rw-rank { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gray-bg); color: var(--text-2); font-size: 12px; font-weight: 600; flex: none; } .rw-rank.top1 { background: #fef3c7; color: #b45309; } .rw-rank.top2 { background: #e2e8f0; color: #475569; } .rw-rank.top3 { background: #fde8d7; color: #c2410c; } /* 按服务单号反查 */ .rw-lookup-bar { display: flex; gap: 8px; margin: 12px 0; } .rw-lookup-bar .ctrl { flex: 1; } .rw-lookup-sum { font-size: 13px; color: var(--text-2); margin-bottom: 10px; } .rw-lookup-list { display: flex; flex-direction: column; gap: 8px; } .rw-lookup-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; } .rw-lk-title { font-weight: 600; } /* 大屏：贡献积分榜 */ .reward-list { display: flex; flex-direction: column; gap: 6px; } .reward-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; cursor: pointer; } .reward-row:hover { background: #f8fafc; } .rw-board-pt { font-weight: 700; color: #b45309; font-size: 16px; margin-left: auto; white-space: nowrap; } .rw-board-pt small { font-size: 11px; font-weight: 400; margin-left: 2px; } .rw-board-cnt { font-size: 12px; color: var(--text-2); white-space: nowrap; } .rw-board-last { font-size: 12px; color: var(--text-3); flex: 1 1 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1100px) { .rw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .rw-form { grid-template-columns: 1fr; } .rw-stats { grid-template-columns: 1fr; } .rw-daterange .ctrl { width: 130px; } } /* ============================================================ * 账号角色多选（2026-10-09 重做）：一个人可兼多岗 * * 原来是「一个角色占一整行」的纵向列表 —— 角色加到第 5 个就把弹窗撑满， * 再加角色只会更长。改成**自适应网格卡片**：按最小卡宽自动换行、每行 1~N 张， * 以后新增角色只改 ROLE_TIPS 文案，**样式一行都不用动**。 * * ⚠️ 布局规则一律带 `.role-cards` 作用域前缀 —— 卡片类名长在