/* ============================================ 主控出勤管理程序 - 视觉样式表 独立子系统，不依赖 website 顶层 CSS 设计：UI Designer ============================================ */ /* ---------- 0. v2.6 登录门禁 ---------- 后台页面 ，首帧即隐藏整个页面； common.js 登录校验通过后移除该类再显示（先登录、后显示，不闪现后台） */ html.auth-pending body { visibility: hidden; } /* ---------- 1. CSS 变量（便于主题切换） ---------- */ :root { /* 背景色 */ --bg: #f5f7fa; --surface: #ffffff; --card: #ffffff; /* 边框 */ --border: #e4e7eb; --border-strong: #cbd2d9; /* 主色（蓝色系） */ --primary: #2563EB; --primary-dark: #1D4ED8; --primary-light: #DBEAFE; --primary-glow: rgba(37, 99, 235, 0.10); /* 状态色 */ --formal: #16A34A; /* 正式 - 绿 */ --formal-bg: #DCFCE7; --reserve: #EA580C; /* 备用 - 橙 */ --reserve-bg: #FFEDD5; --trainee: #0891B2; /* 实习 - 青蓝（与主色区分） */ --trainee-bg: #CFFAFE; /* 功能色 */ --danger: #e04040; --danger-bg: #FEE2E2; --success: #16A34A; --warning: #F59E0B; --warning-bg: #FEF3C7; /* 文字 */ --text: #2c3e50; --text-muted: #7f8c8d; --text-dim: #b0b7bd; --text-on-primary: #ffffff; /* 间距 */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* 圆角 */ --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-xl: 12px; /* 字体 */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-mono: 'SF Mono', 'Cascadia Code', Consolas, 'Courier New', monospace; /* 字号 */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow: 0 2px 8px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); /* 过渡 */ --transition: all 0.2s ease; /* 布局 */ --nav-height: 56px; --content-max: 1920px; } /* ---------- 2. 重置 ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } ul, ol { list-style: none; } /* ---------- 3. 通用工具类 ---------- */ .hidden { display: none !important; } .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--text-muted); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-success { color: var(--success); } /* ---------- 4. 顶部导航栏 ---------- */ .navbar { height: var(--nav-height); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; display: flex; align-items: center; padding: 0 var(--space-lg); } .navbar-brand { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-right: var(--space-xl); white-space: nowrap; } .navbar-brand .logo-icon { font-size: 22px; } .navbar-brand .brand-text .accent { color: var(--primary); } .navbar-menu { display: flex; align-items: center; justify-content: center; /* v2.46: 导航标签整体居中对齐 */ gap: var(--space-xs); flex: 1; } /* v2.46: "← 前往官网"外链（导航最左侧，跳转公示页站点根，新窗口打开） */ .navbar-menu a.nav-external { color: var(--primary); font-weight: 600; } .navbar-menu a { padding: 8px 14px; border-radius: var(--radius); color: var(--text-muted); font-size: var(--fs-base); font-weight: 500; transition: var(--transition); display: flex; align-items: center; gap: 6px; white-space: nowrap; } .navbar-menu a:hover { color: var(--primary); background: var(--primary-light); } .navbar-menu a.active { color: var(--primary); background: var(--primary-light); font-weight: 600; } .navbar-right { display: flex; align-items: center; gap: var(--space-md); } .navbar-user { color: var(--text-muted); font-size: var(--fs-sm); } .navbar-logout { color: var(--danger); padding: 6px 12px; border-radius: var(--radius); font-size: var(--fs-sm); transition: var(--transition); } .navbar-logout:hover { background: var(--danger-bg); color: var(--danger); } /* ---------- 5. 主容器 ---------- */ .container { max-width: var(--content-max); margin: 0 auto; padding: var(--space-lg); } .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); } .page-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text); } .page-subtitle { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 4px; } /* ---------- 6. 栅格布局 ---------- */ .grid { display: grid; gap: var(--space-lg); } .grid-1-2 { grid-template-columns: 1fr 2fr; } /* v2.33: 主页左表单/右列表占比 28/72（原 1fr 2fr ≈ 33/67，表单调小 5%） */ .grid-form-list { grid-template-columns: 28fr 72fr; } /* ---------- 7. 卡片 ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .card-header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .card-header-actions { display: flex; align-items: center; gap: var(--space-sm); } .card-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: var(--space-sm); } .card-body { padding: var(--space-lg); } /* ---------- 8. 表单 ---------- */ .form-group { margin-bottom: var(--space-md); } .form-group:last-child { margin-bottom: 0; } .form-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: 6px; } .form-label .required { color: var(--danger); margin-left: 2px; } .form-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; } .form-control { width: 100%; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: var(--fs-base); transition: var(--transition); outline: none; } .form-control:hover { border-color: var(--text-muted); } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .form-control::placeholder { color: var(--text-dim); } textarea.form-control { resize: vertical; min-height: 80px; font-family: inherit; } select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237f8c8d' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .form-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; margin-top: var(--space-md); } /* ---------- 9. 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius); font-size: var(--fs-base); font-weight: 500; cursor: pointer; transition: var(--transition); white-space: nowrap; user-select: none; line-height: 1.4; } .btn-primary { background: var(--primary); color: var(--text-on-primary); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 2px 8px var(--primary-glow); } .btn-primary:active { transform: translateY(1px); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg); border-color: var(--text-muted); } .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover { background: #c53030; border-color: #c53030; } .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .btn-ghost:hover { background: var(--bg); color: var(--text); } .btn-sm { padding: 4px 10px; font-size: var(--fs-sm); } .btn-lg { padding: 12px 24px; font-size: var(--fs-md); } .btn-block { width: 100%; } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ---------- 10. 表格 ---------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; flex-wrap: wrap; } .pagination-info { font-size: var(--fs-sm); color: var(--text-muted); } .pagination-btns { display: flex; gap: 4px; flex-wrap: wrap; } .pagination-btns .btn-sm { min-width: 36px; padding: 4px 8px; font-size: var(--fs-sm); } .data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .data-table thead th { background: var(--bg); padding: 10px 14px; text-align: left; color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm); border-bottom: 2px solid var(--border); white-space: nowrap; } .data-table thead th.sortable { cursor: pointer; user-select: none; transition: var(--transition); } .data-table thead th.sortable:hover { color: var(--primary); background: var(--primary-light); } .data-table thead th .sort-icon { margin-left: 4px; opacity: 0.3; font-size: 10px; } .data-table thead th.sort-asc .sort-icon, .data-table thead th.sort-desc .sort-icon { opacity: 1; color: var(--primary); } .data-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .data-table tbody tr { transition: var(--transition); } .data-table tbody tr:hover { background: var(--primary-glow); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table .col-actions { text-align: right; white-space: nowrap; } .data-table .empty-row td { text-align: center; color: var(--text-muted); padding: 40px 0; } /* ---------- v2.28: 活动分组折叠行（v2.29: 浅色填充 + 固定列宽防表头闪烁） ---------- */ /* 固定表格布局：表头按列宽分配，折叠/展开切换不再引起列宽重算（防闪烁） */ /* v2.31: 5 列——呼号/点名人数/备注/操作/创建人·创建时间（合并列右对齐） */ /* v2.37: 混合列宽——呼号+人数固定 280px、创建人·创建时间固定 200px， 中间（备注+操作）自适应；表最小 900px 保证中间区 ≥ 420px，窄窗出横向滚动 */ #recordTable { table-layout: fixed; min-width: 900px; } #recordTable thead th:nth-child(1) { width: 140px; } /* 呼号（+人数合计 280） */ #recordTable thead th:nth-child(2) { width: 140px; } /* 点名人数 */ #recordTable thead th:nth-child(5) { width: 200px; } /* 创建人·创建时间 */ /* 第3列备注、第4列操作不设宽，自动平分剩余空间（合计 ≥ 420px） */ #recordTable td { word-break: break-word; } /* v2.31: 呼号列前预留 50px 空白（表头与子行一致，不显示内容） */ #recordTable thead th:first-child { padding-left: 50px; } /* v2.31: 合并列"创建人·创建时间"右对齐（表头与子行一致） */ #recordTable thead th.th-meta, #recordTable td.cell-meta { text-align: right; } /* v2.29: 活动组头行填充色（v2.32: 常态再加深一档，悬停改为更浅色） */ .data-table tr.group-header-row td { padding: 0; border-bottom: 1px solid var(--border); background: #C7D6EB; } .data-table tr.group-header-row:hover td { background: #E6EEF9; } /* v2.32: 组头作为固定定位锚点，右侧预留 meta(≈200px)+按钮区(220px锚点+按钮宽) 空间 */ .group-header { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-right: 350px; cursor: pointer; user-select: none; min-width: 0; } .group-arrow { flex-shrink: 0; font-size: 12px; color: var(--text-muted); transition: transform 0.2s ease; } /* v2.29: 活动名不再使用深蓝色，普通文字色 */ /* v2.31: flex:1 吸收剩余空间，条数徽章/操作按钮/meta 稳定靠右 */ .group-title { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* v2.32: 组头 meta 直接贴右侧对齐（取消 25px 左移），绝对定位不受标题长度影响 */ .group-meta { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; } /* v2.32: 操作按钮组绝对定位——固定距右侧 220px，不随创建人/时间宽度变化错位 */ .group-actions { position: absolute; right: 220px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 6px; } .group-actions .btn { padding: 4px 10px; font-size: var(--fs-sm); } /* v2.31: 呼号列前 50px 空白缩进（与表头一致） */ .data-table tr.group-child-row td:first-child { padding-left: 50px; } /* v2.29: 点击记录行打开详情弹窗（v2.32: 悬停高亮加深更明显） */ .data-table tr.group-child-row { cursor: pointer; } .data-table tr.group-child-row:hover td { background: #D6E4F8; } /* ---------- v2.33: 活动记录列表两列布局（左活动导航 + 右详情/出勤列表） ---------- v2.34: 左栏加宽（250→275px）；两栏 stretch 延伸到容器底部（不随记录数塌缩）， 右栏内部独立滚动，左右边界清晰可辨 v2.35: 左栏再加宽 10%（275→302px）；分栏高度自动跟随视口——calc(视口高 - 顶部导航 - 页边距) */ .activity-split { display: grid; grid-template-columns: 302px minmax(0, 1fr); gap: 14px; align-items: stretch; height: calc(100vh - 150px); /* v2.35: 撑满视口剩余高度（导航+页边距约 150px），随窗口变化 */ min-height: 480px; } /* 左侧：活动条目导航（撑满分栏高度，内容独立滚动） */ .activity-nav { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); height: 100%; overflow-y: auto; } /* v2.34: 右栏撑满同高（660px），详情头固定 + 出勤表格内部滚动 */ .activity-detail { min-width: 0; display: flex; flex-direction: column; height: 100%; } /* v2.34: 右栏出勤表格独立滚动，详情头固定 */ .activity-detail .table-wrap { flex: 1; min-height: 0; overflow-y: auto; } .activity-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.15s; } .activity-nav-item:last-child { border-bottom: none; } .activity-nav-item:hover { background: #EDF3FC; } /* 选中高亮，未选中保持白底 */ .activity-nav-item.active { background: #C7D6EB; font-weight: 600; } .activity-nav-item .nav-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .activity-nav-empty { padding: 32px 12px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); } /* 右侧：活动详情 + 出勤列表 */ .activity-detail { min-width: 0; } .activity-detail-head { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; } .act-head-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .act-head-label { font-size: var(--fs-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .activity-detail-head .form-control { width: auto; } .activity-detail-head .act-name-input { min-width: 180px; } /* 创建人·创建时间贴右 */ .act-head-meta { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; } /* v2.33: 删除活动长按按钮（防误触，长按 1.5s 生效） */ .lp-delete { position: relative; overflow: hidden; user-select: none; touch-action: none; } .lp-delete .lp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: rgba(255, 255, 255, 0.45); pointer-events: none; } .lp-delete.holding { filter: brightness(0.92); } @media (max-width: 1200px) { .activity-split { grid-template-columns: 240px minmax(0, 1fr); } } @media (max-width: 768px) { .grid-form-list { grid-template-columns: 1fr; } /* v2.34: 窄屏取消固定分栏高度，恢复自适应 */ .activity-split { grid-template-columns: 1fr; height: auto; min-height: 0; } .activity-nav { height: auto; max-height: 260px; } .activity-detail { height: auto; max-height: none; } } /* v2.29: 子行创建人/创建时间与活动组头 meta 同款字号与颜色，视觉统一 v2.34: 右对齐基础上左移 20px（与详情头 meta 对齐补偿） */ .data-table td.cell-meta { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: calc(var(--space-md) + 20px); } /* v2.32: 附件展开区宽度 90%，右侧对齐 */ .files-expansion .files-wrap { width: 90%; min-width: 0; margin-left: auto; } /* v2.29: 编辑弹窗顶部只读信息条 */ .edit-record-info { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 12px; margin-bottom: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: var(--fs-xs); color: var(--text-muted); } .edit-record-info .eri-item strong { color: var(--text); font-weight: 600; } /* v2.29: 编辑弹窗底部"删除记录"按钮靠左，与取消/保存分隔 */ .edit-record-modal .modal-footer .btn-danger { margin-right: auto; } /* ---------- 11. 徽章 ---------- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 100px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; background: var(--bg); color: var(--text-muted); } .badge-formal { background: var(--formal-bg); color: var(--formal); } .badge-reserve { background: var(--reserve-bg); color: var(--reserve); } .badge-trainee { background: var(--trainee-bg); color: var(--trainee); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-success { background: var(--formal-bg); color: var(--formal); } /* v2.15: 公告"未公示"状态徽章（弱化灰） */ .badge-muted { background: #EEF1F5; color: var(--text-muted); } .badge-primary { background: var(--primary-light); color: var(--primary); } /* v2.28: 活动组头"N 条"计数徽章 */ .badge-secondary { background: #EEF1F5; color: var(--text-muted); } .badge-dot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ---------- 12. 模态框 ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-lg); animation: fadeIn 0.2s ease; } .modal { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); max-width: 500px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; animation: slideUp 0.25s ease; } .modal.modal-lg { max-width: 720px; } .modal.modal-sm { max-width: 400px; } .modal-header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: var(--space-sm); } .modal-close { background: transparent; border: none; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; width: 28px; height: 28px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .modal-close:hover { background: var(--bg); color: var(--text); } .modal-body { padding: var(--space-lg); overflow-y: auto; flex: 1; } .modal-footer { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border); background: var(--bg); display: flex; justify-content: flex-end; gap: var(--space-sm); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ---------- 13. Toast 消息 ---------- */ .toast-container { position: fixed; top: calc(var(--nav-height) + var(--space-md)); right: var(--space-lg); z-index: 2000; display: flex; flex-direction: column; gap: var(--space-sm); pointer-events: none; } .toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-lg); min-width: 280px; max-width: 360px; display: flex; align-items: flex-start; gap: var(--space-sm); pointer-events: auto; animation: slideInRight 0.25s ease; } .toast-success { border-left-color: var(--success); } .toast-error { border-left-color: var(--danger); } .toast-warning { border-left-color: var(--warning); } .toast-info { border-left-color: var(--primary); } .toast-icon { font-size: 18px; flex-shrink: 0; } .toast-content { flex: 1; } .toast-title { font-weight: 600; font-size: var(--fs-base); color: var(--text); margin-bottom: 2px; } .toast-message { font-size: var(--fs-sm); color: var(--text-muted); } .toast-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; width: 20px; height: 20px; } @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } /* ---------- 14. 登录页 ---------- */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f5f7fa 0%, #e4ecf7 100%); padding: var(--space-lg); position: relative; overflow: hidden; } .login-page::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%); pointer-events: none; } .login-page::after { content: ''; position: absolute; bottom: -150px; left: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(8, 145, 178, 0.08) 0%, transparent 70%); pointer-events: none; } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-xl); width: 100%; max-width: 400px; position: relative; z-index: 1; } .login-logo { text-align: center; margin-bottom: var(--space-lg); } .login-logo .logo-icon { font-size: 48px; display: block; margin-bottom: var(--space-sm); } .login-logo h1 { font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin-bottom: 4px; } .login-logo p { color: var(--text-muted); font-size: var(--fs-sm); } .login-form .form-control { padding: 10px 14px; } .login-error { background: var(--danger-bg); color: var(--danger); padding: 10px 14px; border-radius: var(--radius); font-size: var(--fs-sm); margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); } /* v2.8 登录页维护模式横幅 */ .login-maintenance { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 12px 14px; border-radius: var(--radius); font-size: var(--fs-sm); margin-bottom: var(--space-md); display: flex; align-items: flex-start; gap: var(--space-sm); } /* v2.21 导航"留言管理"未处理角标（v2.24 拆分为两个独立角标：橙=普通留言，红=日志勘误） */ .nav-msg-badge, .nav-msg-badge-erratum { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #F59E0B; color: #fff; font-size: 11px; font-weight: 600; text-align: center; vertical-align: middle; } .nav-msg-badge-erratum { background: #DC2626; } /* v2.23 后台全局维护模式横幅（common.js 动态注入到 body 首部，吸顶显示；红色醒目） */ .global-maintenance-banner { position: sticky; top: 0; z-index: 1200; background: #DC2626; color: #FFFFFF; padding: 16px 28px; font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 14px; border-bottom: 3px solid #B91C1C; box-shadow: 0 3px 10px rgba(185, 28, 28, 0.35); } .global-maintenance-banner .gmb-icon { flex-shrink: 0; font-size: 22px; line-height: 1; } .global-maintenance-banner .gmb-text { line-height: 1.6; } .login-maintenance strong { display: block; font-size: 15px; margin-bottom: 4px; } .login-maintenance p { margin: 0 0 2px; line-height: 1.5; } .login-maintenance-admin { font-size: 12px; opacity: 0.8; } /* ---------- 15. 消息播放模态框 ---------- */ .message-player { text-align: center; } .message-player .message-progress { display: flex; justify-content: center; gap: 6px; margin-bottom: var(--space-md); } .message-player .progress-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: var(--transition); } .message-player .progress-dot.active { background: var(--primary); width: 24px; border-radius: 4px; } .message-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: left; min-height: 160px; display: flex; flex-direction: column; gap: var(--space-sm); transition: opacity 0.3s ease; } .message-card .msg-type { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); margin-bottom: 4px; } .message-card .msg-callsign { font-size: var(--fs-xl); font-weight: 700; color: var(--text); font-family: var(--font-mono); } .message-card .msg-desc { color: var(--text); font-size: var(--fs-base); line-height: 1.6; } .message-card .msg-meta { display: flex; justify-content: space-between; margin-top: auto; padding-top: var(--space-sm); border-top: 1px dashed var(--border); font-size: var(--fs-xs); color: var(--text-muted); } .message-empty { text-align: center; padding: var(--space-xl); color: var(--text-muted); } .message-empty .empty-icon { font-size: 48px; margin-bottom: var(--space-sm); opacity: 0.5; } /* ---------- 16. 统计页 ---------- */ /* v2.14: 搜索工具栏（高级搜索默认折叠，点击"搜索"展开面板） */ .stats-toolbar { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); } /* 启用高级搜索后的筛选徽章（点击清除） */ .badge-filter { background: var(--primary-light); color: var(--primary); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge-filter:hover { background: var(--primary); color: var(--text-on-primary); } /* v2.15.1: 公告公示按钮与编辑按钮之间的稍大间距（公示在编辑左侧） */ .btn-public-gap { margin-right: 10px; } /* v2.15.1: 公告上移/下移按钮（SVG 三角箭头，加大点击区域与悬停反馈） */ .ann-move-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; } .ann-move-btn svg { display: block; } .ann-move-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); } .stats-filters { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); display: flex; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; } .stats-filters .form-group { margin-bottom: 0; flex: 1; min-width: 180px; } .stats-filters .form-group.btn-group { flex: 0 0 auto; } .stats-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); } .stat-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow); } .stat-item .stat-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .stat-item .stat-value { font-size: var(--fs-2xl); font-weight: 700; color: var(--text); font-family: var(--font-mono); } /* 可点击统计卡片 */ .stat-item.stat-clickable { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s; } .stat-item.stat-clickable:hover { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15); } .stat-item.stat-clickable:active { transform: scale(0.98); } /* 当前激活的筛选卡片 */ .stat-item.stat-active { border-color: var(--primary); background: rgba(0, 123, 255, 0.06); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } /* ---------- 17. 行内操作元素 ---------- */ .inline-select { padding: 4px 24px 4px 8px; font-size: var(--fs-sm); border: 1px solid var(--border-strong); border-radius: var(--radius); background-color: var(--surface); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%237f8c8d' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; transition: var(--transition); } .inline-select:hover { border-color: var(--primary); } .inline-select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-glow); } .row-actions { display: inline-flex; gap: 6px; align-items: center; } .icon-btn { background: transparent; border: 1px solid transparent; border-radius: var(--radius); padding: 4px 8px; cursor: pointer; color: var(--text-muted); font-size: var(--fs-sm); transition: var(--transition); display: inline-flex; align-items: center; gap: 4px; } .icon-btn:hover { background: var(--bg); color: var(--text); } .icon-btn.icon-danger:hover { background: var(--danger-bg); color: var(--danger); } /* ---------- 18. Skeleton 加载占位 ---------- */ .skeleton { background: linear-gradient(90deg, #f0f2f5 25%, #e4e7eb 50%, #f0f2f5 75%); background-size: 200% 100%; animation: skeleton-loading 1.4s ease-in-out infinite; border-radius: var(--radius); } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 14px; margin-bottom: 6px; } .skeleton-text:last-child { margin-bottom: 0; width: 80%; } /* ---------- 19. 空状态 ---------- */ .empty-state { text-align: center; padding: var(--space-xl) var(--space-lg); color: var(--text-muted); } .empty-state .empty-icon { font-size: 56px; margin-bottom: var(--space-md); opacity: 0.4; } .empty-state .empty-title { font-size: var(--fs-lg); color: var(--text); margin-bottom: 6px; } .empty-state .empty-desc { font-size: var(--fs-sm); } /* ---------- 20. 辅助类 ---------- */ .callsign { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.03em; } .days-counter { font-family: var(--font-mono); font-weight: 600; } .days-danger { color: var(--danger); } .days-warning { color: var(--warning); } .days-ok { color: var(--success); } /* ---------- 21. 响应式 ---------- */ @media (max-width: 1024px) { :root { --space-lg: 16px; --space-xl: 20px; } .navbar { padding: 0 var(--space-md); overflow-x: auto; } .navbar-menu { gap: 0; } .navbar-menu a { padding: 8px 10px; font-size: var(--fs-sm); white-space: nowrap; } .container { padding: var(--space-md); } .grid-1-2 { grid-template-columns: 1fr; } .stats-summary { grid-template-columns: repeat(2, 1fr); } .page-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .toast-container { left: var(--space-md); right: var(--space-md); top: calc(var(--nav-height) + var(--space-sm)); } .toast { min-width: 0; max-width: 100%; } } @media (max-width: 640px) { .stats-summary { grid-template-columns: 1fr; } .modal { max-width: 100%; margin: var(--space-md); } .stats-filters { flex-direction: column; align-items: stretch; } .stats-filters .form-group { min-width: 0; } .stats-filters .form-group.btn-group { width: 100%; } .stats-filters .form-group.btn-group .btn { width: 100%; } } /* ============================================================ v2.0 扩展样式（ui-designer 设计方案实现） 追加于文件末尾，不修改既有样式；复用已有 modal/badge/card 等 ============================================================ */ /* ---------- v2.0-1. 新增 CSS 变量（计划/过期/确认/停职） ---------- */ :root { /* 计划标志（黄色系） */ --color-plan: #FEF9E7; /* 计划未到期行背景（浅黄） */ --color-plan-border: #F59E0B; /* 计划未到期行左边框（黄） */ /* 过期未确认（红色系） */ --color-overdue: #FEE2E2; /* 计划已过期未确认行背景（浅红） */ --color-overdue-border: #DC2626; /* 计划已过期未确认行左边框（红） */ /* 已确认（绿色系，与 formal 复用） */ --color-confirmed: #DCFCE7; /* 停职状态（紫色系） */ --color-suspended: #7C3AED; /* 停职主色 */ --color-suspended-bg: #EDE9FE; /* 停职行背景（浅紫） */ } /* ---------- v2.0-2. 计划标志行高亮 ---------- */ /* 行高亮优先级：覆盖 .data-table tbody tr:hover 的 var(--primary-glow) */ .data-table tbody tr.row-plan-unconfirmed, .data-table tbody tr.row-plan-overdue, .data-table tbody tr.row-plan-confirmed, .data-table tbody tr.row-suspended { border-left: 3px solid transparent; box-shadow: inset 3px 0 0 var(--border); } /* 计划未到期：浅黄背景 + 黄色左边框 */ .data-table tbody tr.row-plan-unconfirmed { background: var(--color-plan) !important; box-shadow: inset 3px 0 0 var(--color-plan-border); } /* 计划已过期未确认：浅红背景 + 红色左边框 + 闪烁动画 */ .data-table tbody tr.row-plan-overdue { background: var(--color-overdue) !important; box-shadow: inset 3px 0 0 var(--color-overdue-border); animation: row-overdue-blink 1.6s ease-in-out infinite; } /* 计划已确认：正常背景（与普通行一致），保留细左边框作为视觉标识 */ .data-table tbody tr.row-plan-confirmed { background: var(--color-confirmed) !important; box-shadow: inset 3px 0 0 var(--formal); } /* 行高亮时 hover 仍保持主色辉光（叠加在背景之上） */ .data-table tbody tr.row-plan-unconfirmed:hover, .data-table tbody tr.row-plan-overdue:hover, .data-table tbody tr.row-plan-confirmed:hover { filter: brightness(0.98); } @keyframes row-overdue-blink { 0%, 100% { background: var(--color-overdue); } 50% { background: #FECACA; } } /* ---------- v2.0-3. 停职状态行高亮 ---------- */ .data-table tbody tr.row-suspended { background: var(--color-suspended-bg) !important; box-shadow: inset 3px 0 0 var(--color-suspended); } .data-table tbody tr.row-suspended:hover { filter: brightness(0.98); } /* ---------- v2.0-4. 状态标签 badge ---------- */ .badge-plan { background: var(--warning-bg); color: var(--warning); } .badge-overdue { background: var(--danger-bg); color: var(--danger); } .badge-confirmed { background: var(--formal-bg); color: var(--formal); } .badge-suspended { background: var(--color-suspended-bg); color: var(--color-suspended); } /* ---------- v2.16/v2.19: 仅抄录/备用开关 / 徽章 ---------- */ .transcript-toggle { float: right; display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); cursor: pointer; user-select: none; } /* v2.19: 备用 + 仅抄录 并排容器（右浮动的父级，内部不再浮动） */ .roll-toggles { float: right; display: inline-flex; align-items: center; gap: 10px; } .roll-toggles .transcript-toggle { float: none; } .transcript-toggle input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: #0D3E82; } .badge-transcript-rec { background: rgba(13, 62, 130, 0.1); color: #0D3E82; } /* v2.19: 备用徽章 */ .badge-reserve-rec { background: rgba(184, 134, 11, 0.12); color: #8a6208; } /* ---------- v2.0-5. 文件上传组件 ---------- */ .upload-area { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg); padding: var(--space-lg) var(--space-md); text-align: center; cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); color: var(--text-muted); } /* v2.34: 紧凑上传区——图标与"点击或拖拽文件到此处"同行，整体更矮 */ .upload-area.upload-area-compact { flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 8px var(--space-md); gap: 8px; } .upload-area.upload-area-compact .upload-icon { font-size: 16px; line-height: 1; } .upload-area.upload-area-compact .upload-text { font-size: var(--fs-sm); } .upload-area.upload-area-compact .upload-hint { flex-basis: 100%; } .upload-area:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); } .upload-area.dragover { border-color: var(--primary); background: var(--primary-light); border-style: solid; transform: scale(1.005); } .upload-area .upload-icon { font-size: 28px; line-height: 1; } .upload-area .upload-text { font-size: var(--fs-base); font-weight: 600; color: var(--text); } .upload-area .upload-hint { font-size: var(--fs-xs); color: var(--text-muted); } .upload-area input[type="file"] { display: none; } /* v2.18: 附件列表上方上传进度条 */ .upload-progress { margin-top: var(--space-md); display: flex; flex-direction: column; gap: 4px; } .upload-progress.hidden { display: none; } .upload-progress-info { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--text-muted); } .upload-progress-info #uploadProgressPct { font-variant-numeric: tabular-nums; } .upload-progress-track { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; } .upload-progress-fill { height: 100%; width: 0%; background: var(--primary); border-radius: 4px; transition: width 0.15s ease; } /* 处理阶段（波形生成等无确定进度）：条纹动画 */ .upload-progress-fill.indeterminate { width: 100%; background: repeating-linear-gradient(45deg, var(--primary) 0 10px, #7ea3f0 10px 20px); background-size: 28px 100%; animation: upload-progress-slide 1s linear infinite; } @keyframes upload-progress-slide { from { background-position: 0 0; } to { background-position: 28px 0; } } /* 已选文件列表 */ .file-list { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); } .file-list:empty { display: none; } .file-item { display: flex; align-items: center; gap: var(--space-sm); padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-sm); cursor: default; transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s; } .file-item:active { cursor: grabbing; } /* 待上传文件拖动手柄 */ .file-item .file-drag-handle { color: var(--text-muted); font-size: 14px; cursor: grab; flex-shrink: 0; opacity: 0.5; transition: opacity 0.2s; } .file-item:hover .file-drag-handle { opacity: 1; } .file-item.dragging { opacity: 0.4; border-color: var(--primary); } .file-item.drag-over { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); } /* 文件类型图标：按扩展名区分（见 attendance.js getFileIcon） */ .file-item .file-icon { font-size: 1.4em; line-height: 1; flex-shrink: 0; } .file-item .file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .file-item .file-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-item .file-meta { font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: var(--space-sm); flex-wrap: wrap; } .file-item .file-meta .file-type { font-family: var(--font-mono); text-transform: uppercase; } .file-item .file-remove { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: var(--radius); transition: var(--transition); flex-shrink: 0; } .file-item .file-remove:hover { background: var(--danger-bg); color: var(--danger); } /* 上传进度条（编辑/查看场景使用） */ .file-progress { width: 100%; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 4px; } .file-progress-bar { height: 100%; background: var(--primary); transition: width 0.2s ease; } /* ---------- v2.0-6. 通用模态框（复用 .modal-overlay/.modal 等） ---------- */ /* 既有 .modal-overlay/.modal/.modal-header/.modal-body/.modal-footer 已存在，此处仅补全专用类 */ /* 编辑记录弹窗专用 */ .edit-record-modal .modal { max-width: 560px; } .edit-record-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-md); } .edit-record-modal .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .edit-record-modal .form-grid .full { grid-column: 1 / -1; } /* 停职设置弹窗专用 */ .suspend-modal .modal { max-width: 520px; } .suspend-modal .suspend-read-only { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-family: var(--font-mono); font-weight: 600; color: var(--text); } .suspend-modal .suspend-warn { background: var(--warning-bg); color: var(--warning); border-radius: var(--radius); padding: 8px 12px; font-size: var(--fs-xs); display: flex; align-items: center; gap: 6px; } /* ---------- v2.0-7. 高级搜索面板 ---------- */ /* advanced-search-toggle 仅作为状态标记类，视觉样式继承自 .btn .btn-primary */ .advanced-search-toggle .toggle-arrow { transition: transform 0.2s ease; font-size: 10px; } .advanced-search-toggle.is-open .toggle-arrow { transform: rotate(180deg); } .advanced-search-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px 30px; /* 上下 20px，左右 30px（用户要求左右至少 30px） */ margin: var(--space-md) 30px 0 30px; /* 外边距左右也 30px，确保不顶头 */ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); animation: fadeIn 0.2s ease; } .advanced-search-panel.hidden { display: none; } .advanced-search-panel .form-group { margin-bottom: 0; padding: 4px 0; /* 每个表单项上下留点空白 */ } .advanced-search-panel .checkbox-group { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); padding-top: 4px; } .advanced-search-panel .checkbox-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text); cursor: pointer; } .advanced-search-panel .checkbox-item input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } /* ---------- v2.0-8. 审计日志页样式 ---------- */ .audit-filters { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); align-items: flex-end; } .audit-filters .form-group { margin-bottom: 0; } .audit-filters .audit-actions { display: flex; gap: var(--space-sm); grid-column: 1 / -1; justify-content: flex-end; } /* 审计表格 */ .audit-table .data-table tbody td { font-size: var(--fs-sm); vertical-align: top; } .audit-table .col-time { white-space: nowrap; } .audit-table .col-detail { min-width: 240px; } .audit-table .col-ip { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); } /* v2.13: 留言ID列（等宽字体，与操作记录目标ID对照） */ .data-table .col-msg-id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; } /* 操作类型标签（按颜色区分） */ .action-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; white-space: nowrap; } .action-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* create=绿 / update=蓝 / delete=红 / suspend=紫 / resume=青 / confirm=黄绿 / login/logout=灰 / upload=橙 / file_delete=深红 / promote/demote=黄 */ .action-tag-create { background: var(--formal-bg); color: var(--formal); } .action-tag-update { background: var(--primary-light); color: var(--primary); } .action-tag-delete { background: var(--danger-bg); color: var(--danger); } .action-tag-suspend { background: var(--color-suspended-bg); color: var(--color-suspended); } .action-tag-resume { background: var(--trainee-bg); color: var(--trainee); } .action-tag-confirm { background: #ECFCCB; color: #4D7C0F; } .action-tag-login { background: var(--bg); color: var(--text-muted); } .action-tag-logout { background: var(--bg); color: var(--text-muted); } .action-tag-upload { background: var(--reserve-bg); color: var(--reserve); } .action-tag-file_delete { background: #FECACA; color: #991B1B; } .action-tag-promote { background: var(--warning-bg); color: var(--warning); } .action-tag-demote { background: var(--warning-bg); color: #B45309; } /* JSON 详情展开/收起 */ .audit-detail-toggle { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 2px 8px; border-radius: var(--radius); font-size: var(--fs-xs); cursor: pointer; transition: var(--transition); margin-bottom: 4px; } .audit-detail-toggle:hover { color: var(--primary); border-color: var(--primary); } .audit-detail-json { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text); white-space: pre-wrap; word-break: break-all; max-height: 280px; overflow-y: auto; line-height: 1.5; } /* 审计分页 */ .audit-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); flex-wrap: wrap; } .audit-pagination .page-btn { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: var(--radius); cursor: pointer; font-size: var(--fs-sm); transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; } .audit-pagination .page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .audit-pagination .page-btn.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-primary); } .audit-pagination .page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .audit-pagination .page-info { font-size: var(--fs-sm); color: var(--text-muted); padding: 0 var(--space-sm); } /* ---------- v2.0-9. 文件列表展开（出勤记录行下方） ---------- */ /* v2.34: 展开区背景加深，与主控出勤行明显区分 */ .files-expansion { background: #E8EDF5; border-bottom: 1px solid var(--border); } .files-expansion > td { padding: var(--space-md) var(--space-lg); } .files-expansion .files-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); } .files-expansion .files-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 6px; } .files-expansion .files-grid { display: flex; flex-direction: column; gap: 0; } /* v2.4: 附件列表横排单行布局 拖动手柄 | 图标 | 文件名 | 大小 | （右侧固定区：操作按钮 | 创建人·上传时间） v2.32: 创建人与上传时间合并为 fg-meta 贴右；操作按钮绝对定位固定距右 220px */ .files-expansion .files-grid-item { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 0; border-top: none; padding: 6px var(--space-md); padding-right: 460px; /* v2.32: 预留按钮区(220px 锚点+按钮宽)+meta 区 */ display: flex; align-items: center; gap: var(--space-md); font-size: var(--fs-sm); transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s, background 0.15s; } /* v2.32: operator 无操作按钮，仅预留 meta 区 */ .files-expansion .files-wrap.files-operator .files-grid-item { padding-right: 240px; } .files-expansion .files-grid-item:first-child { border-top: 1px solid var(--border); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .files-expansion .files-grid-item:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } .files-expansion .files-grid-item:hover { background: #f8fafc; } /* 拖动手柄 */ .files-expansion .files-grid-item .fg-drag-handle { color: var(--text-muted); font-size: 14px; cursor: grab; flex-shrink: 0; opacity: 0.4; transition: opacity 0.2s; line-height: 1; } .files-expansion .files-grid-item:hover .fg-drag-handle { opacity: 1; } .files-expansion .files-grid-item:active .fg-drag-handle { cursor: grabbing; } .files-expansion .files-grid-item.dragging { opacity: 0.4; border-color: var(--primary); } .files-expansion .files-grid-item.drag-over { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); } /* 文件类型图标 */ .files-expansion .files-grid-item .fg-icon { font-size: 1.3em; flex-shrink: 0; line-height: 1; } /* 文件名（可截断） */ .files-expansion .files-grid-item .fg-name-text { font-weight: 600; color: var(--text); flex: 1; min-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 大小 / 创建人·上传时间（v2.32: fg-uploaded+fg-uploader 合并为 fg-meta） */ .files-expansion .files-grid-item .fg-size, .files-expansion .files-grid-item .fg-meta { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .files-expansion .files-grid-item .fg-size { min-width: 80px; } /* v2.32: 合并后的 创建人·上传时间，绝对定位贴右对齐 */ .files-expansion .files-grid-item .fg-meta { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); } /* 操作按钮区（v2.32: 绝对定位固定距右 220px，与活动条目按钮对齐） */ .files-expansion .files-grid-item .fg-actions { position: absolute; right: 220px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; } /* 已过期标签 */ .file-expired-tag { display: inline-flex; align-items: center; padding: 1px 6px; background: var(--danger-bg); color: var(--danger); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; } /* ---------- v2.6. 附件公示开关 ---------- */ /* 公示中：绿色实底（醒目，表示正在公示） */ .btn-public-on { background: var(--success); color: #fff; border-color: var(--success); } .btn-public-on:hover { background: #15803D; border-color: #15803D; } /* 未公示：灰绿色（弱化，表示未在公示） */ .btn-public-off { background: #a7c4b5; color: #fff; border-color: #a7c4b5; } .btn-public-off:hover { background: #8fb3a1; border-color: #8fb3a1; } .btn-public-on:disabled, .btn-public-off:disabled { opacity: 0.6; cursor: not-allowed; } /* 公示状态标签（operator 视图，无按钮权限时展示） */ .file-public-tag { display: inline-flex; align-items: center; padding: 1px 6px; background: #ECFDF5; color: #059669; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; } /* ---------- v2.6 主控个人详情弹窗 ---------- */ /* 弹窗加宽：80vw × 85vh，容纳多区块内容 */ .modal.profile-modal { width: 80vw; max-width: 80vw; height: 85vh; max-height: 85vh; } /* 主体：纵向滚动 */ .profile-body { overflow-y: auto; min-height: 0; } /* 区块 */ .profile-section { margin-bottom: var(--space-lg); } /* 详情弹窗顶部：基本信息 + 账号与登录 左右两栏 */ .profile-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-xl); align-items: start; } .profile-top-grid .profile-section { min-width: 0; } @media (max-width: 768px) { .profile-top-grid { grid-template-columns: 1fr; } } /* v2.13: 备注行内编辑（详情弹窗） */ .profile-kv-remark { /* v2.14: 备注位于三栏布局的中栏，不再跨整行 */ } /* v2.14: 基本信息三栏布局（左=呼号/创建时间/最近更新，中=创建人/状态/备注，右=状态变更记录） */ .profile-info-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: var(--space-md) var(--space-lg); align-items: start; } .profile-info-col { min-width: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .profile-history-col { padding-left: var(--space-md); border-left: 1px solid var(--border); } /* 状态变更记录列表（时间 → 状态迁移） */ .profile-history-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; } .profile-history-list li { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; background: var(--bg); border-radius: var(--radius); border-left: 3px solid var(--primary); } .ph-time { color: var(--text-muted); font-size: 11px; } .ph-transition { font-weight: 500; font-size: var(--fs-sm); } .ph-operator { color: var(--text-muted); font-size: 11px; } @media (max-width: 900px) { .profile-info-grid { grid-template-columns: 1fr; } .profile-history-col { padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: var(--space-sm); } } /* 备注行：值与保存按钮横向排列 */ .profile-remark-row { display: flex; align-items: flex-start; gap: 6px; } .profile-remark-row .profile-remark-editable { flex: 1; min-width: 0; } .profile-remark-editable { min-height: 1.5em; padding: 2px 6px; border: 1px dashed transparent; border-radius: 4px; outline: none; cursor: text; word-break: break-all; transition: border-color 0.15s, background 0.15s; } .profile-remark-editable:hover { border-color: var(--border); background: rgba(0, 0, 0, 0.02); } .profile-remark-editable:focus { border-color: var(--primary); background: rgba(59, 130, 246, 0.04); } /* 空内容时显示占位符（CSS attr 选择器） */ .profile-remark-editable:empty::before { content: attr(data-placeholder); color: var(--text-tertiary, #94a3b8); pointer-events: none; } .profile-remark-save { flex-shrink: 0; align-self: flex-start; margin-left: var(--space-xs, 8px); } /* 账号与登录区内部两栏：账号信息左 / 最近登录记录右 */ .profile-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-lg); align-items: start; } .profile-account-grid .profile-account-left { grid-template-columns: 1fr; } .profile-account-right { min-width: 0; } .profile-account-right .profile-sub-title { margin-top: 0; } .profile-account-right .profile-empty { padding: var(--space-xs); } @media (max-width: 768px) { .profile-account-grid { grid-template-columns: 1fr; } } .profile-section-title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); font-weight: 600; color: var(--text); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); border-bottom: 1px solid var(--border); } /* 上传按钮（附件区标题行右侧） */ .profile-upload-btn { margin-left: auto; cursor: pointer; } /* 键值对网格 */ .profile-kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-sm) var(--space-lg); } .profile-kv { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); } .profile-k { color: var(--text-muted); font-size: var(--fs-xs); } .profile-v { color: var(--text); font-weight: 500; word-break: break-all; } .profile-callsign { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md); color: var(--primary); } .profile-remark { font-weight: 400; white-space: pre-wrap; } /* 登录记录 */ .profile-sub-title { margin-top: var(--space-md); margin-bottom: var(--space-xs); font-size: var(--fs-xs); color: var(--text-muted); } .profile-login-list { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--text); display: flex; flex-direction: column; gap: 2px; } /* 空数据提示 */ .profile-empty { padding: var(--space-md); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); background: var(--bg); border-radius: var(--radius); } /* 出勤统计卡片 */ .profile-stats { display: flex; flex-wrap: wrap; gap: var(--space-md); } .profile-stat { flex: 1; min-width: 120px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-md); display: flex; flex-direction: column; align-items: center; gap: 4px; } .profile-stat-num { font-size: 1.5em; font-weight: 700; color: var(--primary); line-height: 1.2; } .profile-stat-num.profile-stat-date { font-size: 1.05em; font-weight: 600; font-family: var(--font-mono); } .profile-stat-label { font-size: var(--fs-xs); color: var(--text-muted); } /* 最近出勤记录表（复用 preview.css 表格样式，限制高度独立滚动） */ .profile-records-wrap { max-height: 320px; } /* 附件列表（横排单行，与出勤附件列表风格一致） */ .profile-files-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .profile-file-item { background: var(--surface); padding: 6px var(--space-md); display: flex; align-items: center; gap: var(--space-md); font-size: var(--fs-sm); transition: background 0.15s; } .profile-file-item + .profile-file-item { border-top: 1px solid var(--border); } .profile-file-item:hover { background: #f8fafc; } .profile-file-item .fg-icon { font-size: 1.3em; flex-shrink: 0; line-height: 1; } .profile-file-item .fg-name-text { font-weight: 600; color: var(--text); flex: 1; min-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-file-item .fg-size, .profile-file-item .fg-uploaded, .profile-file-item .fg-uploader { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .profile-file-item .fg-size { min-width: 80px; } .profile-file-item .fg-uploaded { min-width: 120px; } .profile-file-item .fg-uploader { min-width: 60px; } .profile-file-item .fg-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; } /* ---------- v2.0-10. 出勤录入页：计划日期提示 ---------- */ .plan-hint { margin-top: 6px; padding: 6px 10px; background: var(--color-plan); border-left: 3px solid var(--color-plan-border); border-radius: var(--radius); font-size: var(--fs-xs); color: #92400E; display: flex; align-items: center; gap: 6px; } .plan-hint.hidden { display: none; } /* ---------- v2.0-11. 出勤列表筛选区 ---------- */ .record-filters { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); align-items: flex-end; } .record-filters .form-group { margin-bottom: 0; } .record-filters .filter-actions { display: flex; gap: var(--space-sm); grid-column: 1 / -1; justify-content: flex-end; } /* ---------- v2.0-12. 状态/操作列内联按钮组 ---------- */ /* 停职按钮：橙色（任务6 要求） */ .btn-suspend { background: #f59e0b; color: #fff; border-color: #f59e0b; } .btn-suspend:hover { background: #d97706; border-color: #d97706; } .btn-resume { background: var(--success); color: #fff; border-color: var(--success); } .btn-resume:hover { background: #15803D; border-color: #15803D; } .btn-edit { background: var(--primary); color: #fff; border-color: var(--primary); } .btn-edit:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .btn-confirm { background: var(--success); color: #fff; border-color: var(--success); } .btn-confirm:hover { background: #15803D; border-color: #15803D; } .btn-confirm:disabled { background: var(--border-strong); border-color: var(--border-strong); color: var(--text-muted); cursor: not-allowed; } /* 行内按钮间距紧凑 */ .row-actions .btn { padding: 4px 10px; font-size: var(--fs-sm); } /* ---------- v2.0-13. 响应式适配（v2.0 新增组件） ---------- */ @media (max-width: 768px) { .edit-record-modal .form-grid { grid-template-columns: 1fr; } .audit-filters { grid-template-columns: 1fr; } .advanced-search-panel { grid-template-columns: 1fr; } .record-filters { grid-template-columns: 1fr; } .files-expansion .files-grid { grid-template-columns: 1fr; } .audit-pagination { flex-direction: column; gap: var(--space-sm); } } @media (max-width: 640px) { /* 状态标签在小屏紧凑显示 */ .badge { font-size: 11px; padding: 1px 8px; } .action-tag { font-size: 11px; padding: 1px 6px; } .row-actions { flex-wrap: wrap; } } /* ===== 消息列表（登录后变动通知，列表形式展现） ===== */ .message-list { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; padding: 4px; } .message-item { padding: 12px 16px; border-radius: var(--radius-md); border-left: 4px solid var(--border); background: var(--bg); transition: var(--transition); } .message-item:hover { background: var(--surface); box-shadow: var(--shadow); } /* 消息类型左边框颜色（同时兼容 type-xxx 与 type_xxx 命名） */ .message-item.message-type-promote { border-left-color: #16a34a; } .message-item.message-type-demote { border-left-color: #dc2626; } .message-item.message-type-suspend { border-left-color: #9333ea; } .message-item.message-type-resume { border-left-color: #2563eb; } .message-item.message-type-manual { border-left-color: #F59E0B; } .message-item.message_type_promote { border-left-color: #16a34a; } .message-item.message_type_demote { border-left-color: #dc2626; } .message-item.message_type_suspend { border-left-color: #9333ea; } .message-item.message_type_resume { border-left-color: #2563eb; } .message-item.message_type_manual { border-left-color: #F59E0B; } .message-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .message-icon { font-size: 1.2em; line-height: 1; } .message-title { font-weight: 600; flex: 1; color: var(--text); font-family: var(--font-mono, inherit); } .message-time { color: var(--text-muted); font-size: 0.85em; white-space: nowrap; } .message-content { color: var(--text); line-height: 1.5; word-break: break-word; font-size: var(--fs-base); } .message-operator { color: var(--text-muted); font-size: 0.85em; margin-top: 4px; } /* 小屏适配：消息列表头部堆叠 */ @media (max-width: 640px) { .message-item-header { flex-wrap: wrap; } .message-time { width: 100%; font-size: 0.8em; } .message-list { max-height: 70vh; } } /* ===== v2.2 编辑弹窗附件管理 ===== */ .edit-files-section { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; background: var(--bg); } .edit-file-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .edit-file-loading, .edit-file-empty { padding: 8px; text-align: center; color: var(--text-muted); font-size: 0.9em; } .edit-file-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9em; } .edit-file-item .file-icon { font-size: 1.2em; flex-shrink: 0; } .edit-file-item .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .edit-file-item .file-size { color: var(--text-muted); font-size: 0.85em; flex-shrink: 0; } .edit-file-item .btn-download-file, .edit-file-item .btn-remove-file { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; padding: 2px 8px; font-size: 0.9em; line-height: 1; } .edit-file-item .btn-download-file:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .edit-file-item .btn-remove-file:hover { background: var(--danger, #dc2626); color: #fff; border-color: var(--danger, #dc2626); } .edit-upload-area { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--border); } .edit-pending-files { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } /* v2.37: 编辑弹窗附件区拖拽上传悬停高亮（拖入整个附件管理区时边框高亮） */ .edit-files-section.edit-files-dragover { border-color: var(--primary); background: var(--primary-glow); outline: 2px dashed var(--primary); outline-offset: -4px; } .edit-pending-item { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: rgba(245, 158, 11, 0.08); border: 1px dashed #f59e0b; border-radius: var(--radius-sm); font-size: 0.9em; } .edit-pending-item .file-badge { background: #f59e0b; color: #fff; font-size: 0.75em; padding: 1px 6px; border-radius: var(--radius-sm); } .edit-pending-item .btn-remove-pending { background: none; border: none; color: var(--danger, #dc2626); cursor: pointer; font-size: 1em; } /* ---------- 使用说明按钮与模态框 ---------- */ /* 导航栏"使用说明"按钮（动态注入到 .navbar-right） */ .navbar-help { color: var(--text-muted); padding: 6px 12px; border-radius: var(--radius); font-size: var(--fs-sm); transition: var(--transition); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .navbar-help:hover { color: var(--primary); background: var(--primary-light); } /* 使用说明模态框：加宽至 780px，内容区限高 75vh 可滚动 */ #helpModal .modal { max-width: 780px; } #helpModal .modal-body { max-height: 75vh; } /* 使用说明内容容器 */ .help-container { padding: 0 8px; } /* 章节标题（带主色下边框） */ .help-section-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--primary-light); } .help-section-title:first-child { margin-top: 0; } /* 章节内容（左缩进 + 行高） */ .help-content { margin-left: 12px; font-size: 14px; line-height: 1.8; color: var(--text); } /* 子标题（h4，主色） */ .help-content h4 { font-size: 14px; font-weight: 600; margin: 12px 0 6px; color: var(--primary); } .help-content ol, .help-content ul { margin-left: 20px; margin-bottom: 8px; } .help-content li { margin-bottom: 4px; } .help-content p { margin-bottom: 8px; } /* 权限对照表 */ .help-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; } .help-table th, .help-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; } .help-table th { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; } .help-table tbody tr:nth-child(even) { background: var(--bg); } /* 小屏适配：使用说明表格横向滚动，避免溢出 */ @media (max-width: 640px) { #helpModal .modal-body { max-height: 70vh; } .help-content { margin-left: 4px; } .help-table { font-size: 12px; } .help-table th, .help-table td { padding: 4px 6px; } }