/* ========================================================= 报价管理系统 - 全局样式 支持日间/夜间主题：通过 切换 ========================================================= */ :root, [data-bs-theme="light"] { --sidebar-w: 248px; --sidebar-w-collapsed: 72px; --topbar-h: 60px; --primary: #2563eb; --primary-dark: #1d4ed8; --sidebar-bg: #0f172a; --sidebar-bg-2: #1e293b; --bg: #f1f5f9; --card-bg: #ffffff; --card-border: #e2e8f0; --text: #0f172a; --text-muted: #64748b; --thead-bg: #f8fafc; --hover-bg: #f8fafc; --topbar-bg: #ffffff; --footer-bg: #ffffff; --input-bg: #f8fafc; --label-text: #334155; --preview-bg: #eff6ff; --preview-border: #93c5fd; --preview-text: #1d4ed8; --shadow-sm: 0 1px 3px rgba(15,23,42,.06); --shadow-md: 0 8px 24px rgba(15,23,42,.15); } /* 夜间模式：纯黑白配色 */ [data-bs-theme="dark"] { --primary: #ffffff; --sidebar-bg: #000000; --sidebar-bg-2: #0a0a0a; --bg: #000000; --card-bg: #141414; --card-border: #2a2a2a; --text: #ffffff; --text-muted: #888888; --thead-bg: #1a1a1a; --hover-bg: #222222; --topbar-bg: #141414; --footer-bg: #141414; --input-bg: #0d0d0d; --label-text: #cccccc; --preview-bg: #1a1a1a; --preview-border: #555555; --preview-text: #ffffff; --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 8px 24px rgba(0,0,0,.6); color-scheme: dark; } * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } /* ---------------- 布局骨架 ---------------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%); color: #cbd5e1; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; display: flex; flex-direction: column; transition: transform .32s cubic-bezier(.4,0,.2,1), box-shadow .32s ease; overflow: hidden; box-shadow: 2px 0 16px rgba(15,23,42,.14); } .sidebar-header { height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 18px; color: #fff; font-weight: 700; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; flex-shrink: 0; } .sidebar-header i { font-size: 22px; color: #60a5fa; } .sidebar .nav { padding: 12px 10px; flex: 1; overflow-y: auto; overflow-x: hidden; } .sidebar .nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 8px; color: #cbd5e1; margin-bottom: 4px; white-space: nowrap; text-decoration: none; font-size: 14px; transition: background .15s ease, color .15s ease; } .sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; } .sidebar .nav-link.active { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,.35); } .sidebar .nav-link i { font-size: 18px; min-width: 20px; text-align: center; } .sidebar .nav-divider { height: 1px; background: rgba(255,255,255,.1); margin: 10px 6px; } /* 侧边栏底部「折叠/展开」图标按钮（不显示文字） */ .sidebar .nav-item-collapse .nav-link { justify-content: center; padding: 11px 0; } /* ---------------- 侧边栏宽度拖拽手柄 ---------------- */ .sidebar-resizer { position: fixed; top: 0; bottom: 0; left: var(--sidebar-w); width: 6px; cursor: col-resize; z-index: 1050; background: transparent; transition: background .15s ease; } .sidebar-resizer:hover, body.resizing .sidebar-resizer { background: rgba(37,99,235,.35); } body.resizing, body.resizing * { user-select: none !important; cursor: col-resize !important; } body.resizing .sidebar, body.resizing .main { transition: none !important; } body.sidebar-collapsed .sidebar-resizer { display: none; } /* ---------------- 侧边栏分组子菜单（系统设置） ---------------- */ .sidebar .nav-group .submenu-arrow { font-size: 13px; transition: transform .2s ease; } .sidebar .nav-group.open .submenu-arrow { transform: rotate(180deg); } .sidebar .nav-group.has-active > .nav-group-toggle { background: rgba(37,99,235,.18); color: #fff; } .sidebar .nav-submenu { max-height: 0; overflow: hidden; list-style: none; padding: 0; margin: 0 0 4px; opacity: 0; transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .24s ease; } .sidebar .nav-group.open .nav-submenu { max-height: 640px; opacity: 1; } .sidebar .nav-submenu .nav-link { padding: 9px 14px 9px 40px; font-size: 13.5px; margin-bottom: 2px; } .sidebar .nav-submenu .nav-link i { font-size: 16px; } /* 二级子菜单（报价历史 嵌套） */ .sidebar .nav-group-inner > .nav-group-toggle { font-size: 13px; padding-left: 40px; } .sidebar .nav-submenu .nav-submenu { margin-left: 14px; border-left: 1px solid rgba(128,128,128,.18); padding-left: 6px; } .sidebar .nav-submenu .nav-submenu .nav-link { padding-left: 26px; } /* 折叠模式：二级子菜单垂直展开，仅显示图标（文字由全局规则隐藏，hover 有 title 提示） */ body.sidebar-collapsed .sidebar .nav-group.has-active > .nav-group-toggle { background: rgba(37,99,235,.18); } .sidebar-footer { padding: 14px 20px; font-size: 12px; color: #64748b; border-top: 1px solid rgba(255,255,255,.08); white-space: nowrap; } /* 抽屉式折叠（桌面端）：整个侧边栏平滑滑出收起 */ body.sidebar-collapsed .sidebar { transform: translateX(-105%); box-shadow: none; } body.sidebar-collapsed .main { margin-left: 0; } /* ---------------- 主区域 ---------------- */ .main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; transition: margin-left .32s cubic-bezier(.4,0,.2,1); } .topbar { height: var(--topbar-h); background: var(--topbar-bg); border-bottom: 1px solid var(--card-border); display: flex; align-items: center; gap: 12px; padding: 0 20px; position: sticky; top: 0; z-index: 1030; } .topbar-title { font-size: 16px; font-weight: 600; } .btn-icon { border: 1px solid var(--card-border); background: var(--card-bg); border-radius: 8px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); } .btn-icon:hover { background: var(--bg); } /* 登录页等未认证页面的浮动主题切换按钮 */ .theme-toggle-floating { position: fixed; top: 16px; right: 16px; z-index: 1030; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .btn-user { border: 1px solid var(--card-border); background: var(--card-bg); border-radius: 8px; padding: 6px 12px; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; } .role-badge { font-size: 12px; font-weight: 500; } /* 用户头像（顶栏 / 个人设置页） */ .user-avatar-sm { width: 28px; height: 28px; object-fit: cover; } .avatar-preview-wrap { width: 96px; height: 96px; flex-shrink: 0; } .avatar-preview { width: 96px; height: 96px; object-fit: cover; border: 2px solid var(--card-border); } .avatar-placeholder { font-size: 84px; line-height: 1; } .content { padding: 24px; flex: 1; min-width: 0; } .footer { padding: 14px 24px; color: var(--text-muted); font-size: 12px; border-top: 1px solid var(--card-border); background: var(--footer-bg); } /* ---------------- 移动端遮罩 ---------------- */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1035; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .sidebar-overlay.show { opacity: 1; visibility: visible; } /* ---------------- 通用组件 ---------------- */ .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--shadow-sm); } .card-header { background: var(--card-bg); border-bottom: 1px solid var(--card-border); border-radius: 12px 12px 0 0 !important; padding: 14px 20px; font-weight: 600; } .stat-card { transition: transform .15s ease, box-shadow .15s ease; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(15,23,42,.1); } .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; } .stat-value { font-size: 26px; font-weight: 700; line-height: 1.2; } .stat-label { color: var(--text-muted); font-size: 13px; } .badge { font-weight: 500; padding: .42em .65em; } .status-badge { min-width: 58px; } .table > :not(caption) > * > * { padding: .6rem .75rem; vertical-align: middle; } .table thead th { background: var(--thead-bg); font-size: 13px; color: var(--text-muted); font-weight: 600; white-space: nowrap; } .table tbody tr:hover { background: var(--hover-bg); } .table .sort-link { text-decoration: none; color: var(--text-muted); white-space: nowrap; } .table .sort-link:hover { color: var(--primary); } .table .sort-link .bi { font-size: 11px; } /* 夜间模式：停用行（.table-light）改用深色底，避免刺眼 */ [data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table > :not(caption) > *.table-light > * { background-color: var(--hover-bg) !important; color: var(--text); } /* ---------------- 报价单：采购关联高亮 ---------------- */ /* 已关联采购的报价单行：浅绿底 + 左侧绿条，一眼识别 */ .row-linked { background-color: #ecfdf5 !important; border-left: 4px solid #10b981; } .row-linked:hover { background-color: #d1fae5 !important; } .row-linked td:first-child { border-left: 4px solid #10b981; } .linked-star { color: #059669; font-size: 14px; margin-left: 2px; cursor: help; } .linked-legend { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; } /* 夜间模式：纯黑白标识，保持视觉区分但不引入彩色 */ [data-bs-theme="dark"] .row-linked { background-color: #222222 !important; border-left: 4px solid #ffffff; } [data-bs-theme="dark"] .row-linked:hover { background-color: #2a2a2a !important; } [data-bs-theme="dark"] .row-linked td:first-child { border-left: 4px solid #ffffff; } [data-bs-theme="dark"] .linked-star { color: #ffffff; } [data-bs-theme="dark"] .linked-legend { background: #222222; border-color: #555555; color: #ffffff; } /* 价格涨跌标识：涨红跌绿（中国市场习惯），夜间转为黑白 */ .trend-up { color: #dc3545; font-weight: 600; white-space: nowrap; } .trend-down { color: #198754; font-weight: 600; white-space: nowrap; } [data-bs-theme="dark"] .trend-up { color: #ffffff; } [data-bs-theme="dark"] .trend-down { color: #9a9a9a; } /* 报价明细表格：输入控件填满列宽 */ #itemsTable > thead > tr > th, #itemsTable > tbody > tr > td { padding: .35rem .4rem; font-size: 13px; } #itemsTable .form-control, #itemsTable .form-select { width: 100%; min-width: 0; } #itemsTable .item-qty, #itemsTable .item-price { text-align: right; padding-right: .45rem; /* 给浏览器的 number 上下箭头留出空间，避免数字被遮挡 */ } /* Firefox 隐藏原生箭头，Chrome 用 appearance: none 风险较高，改用 padding 方案即可 */ #itemsTable input[type=number]::-webkit-outer-spin-button, #itemsTable input[type=number]::-webkit-inner-spin-button { opacity: 1; } #itemsTable .line-total { white-space: nowrap; padding-right: .25rem; } .pagination { margin-bottom: 0; } .page-item .page-link { color: var(--primary); } .page-item.active .page-link { background: var(--primary); border-color: var(--primary); } .filter-bar { background: var(--card-bg); } .filter-bar label { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; } .empty-tip { color: var(--text-muted); text-align: center; padding: 40px 0; } .empty-tip i { font-size: 40px; color: var(--text-muted); } /* ---------------- 登录页 ---------------- */ .login-body { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; } .login-wrapper { width: 100%; max-width: 420px; } .login-card { border: none; border-radius: 16px; } .login-logo { width: 64px; height: 64px; margin: 0 auto; border-radius: 16px; background: linear-gradient(135deg, #2563eb, #60a5fa); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(37,99,235,.35); } .login-card .form-control { padding: 10px 12px; } .login-card .input-group-text { background: var(--input-bg); } /* ---------------- 滑块拼图验证码 ---------------- */ .slider-captcha { margin-bottom: 16px; user-select: none; -webkit-user-select: none; } .captcha-img-wrap { position: relative; width: 100%; max-width: 300px; margin: 0 auto 8px; border-radius: 8px; overflow: hidden; background: #f1f5f9; border: 1px solid var(--card-border); aspect-ratio: 300 / 150; } .captcha-bg { display: block; width: 100%; height: 100%; object-fit: cover; } .captcha-piece { position: absolute; top: 0; left: 0; width: 44px; height: 44px; pointer-events: none; transform: translate3d(0, 0, 0); will-change: transform; } .captcha-refresh { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 6px; background: rgba(255, 255, 255, .85); color: #475569; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: background .15s; } .captcha-refresh:hover { background: #fff; color: var(--primary); } .slider-track { position: relative; width: 100%; max-width: 300px; height: 36px; margin: 0 auto; background: #e2e8f0; border-radius: 18px; overflow: hidden; } .slider-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: linear-gradient(90deg, #2563eb, #60a5fa); transition: width .2s; } .slider-handle { position: absolute; top: 3px; left: 0; width: 44px; height: 30px; border: none; border-radius: 15px; background: #fff; color: #94a3b8; font-size: 16px; cursor: grab; box-shadow: 0 2px 6px rgba(15, 23, 42, .15); display: flex; align-items: center; justify-content: center; transition: box-shadow .15s, color .15s; z-index: 2; } .slider-handle:hover:not(:disabled) { color: var(--primary); } .slider-handle:disabled { cursor: not-allowed; opacity: .6; } .slider-handle.dragging { cursor: grabbing; box-shadow: 0 4px 10px rgba(37, 99, 235, .25); } .slider-handle.verified { background: #10b981; color: #fff; } .slider-tip { position: absolute; top: 0; left: 0; right: 0; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #64748b; pointer-events: none; z-index: 1; transition: color .2s; } .slider-captcha[data-state="success"] .slider-tip { color: #fff; } .slider-captcha[data-state="error"] .slider-tip { color: #b91c1c; } /* 抖动 */ .slider-captcha.shake .captcha-img-wrap { animation: captcha-shake .5s; } @keyframes captcha-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } /* 禁用登录按钮 */ button#loginSubmit:disabled { opacity: .55; cursor: not-allowed; } /* ---------------- 表单 ---------------- */ .form-label { font-size: 13px; font-weight: 500; color: var(--label-text); } .form-control, .form-select { border-radius: 8px; } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(37,99,235,.12); } .total-preview { background: var(--preview-bg); border: 1px dashed var(--preview-border); border-radius: 10px; padding: 14px 18px; font-weight: 600; color: var(--preview-text); } /* ---------------- 详情页 ---------------- */ .detail-grid dt { color: var(--text-muted); font-weight: 500; font-size: 13px; } .detail-grid dd { font-size: 14px; margin-bottom: .75rem; word-break: break-all; } /* ---------------- 消息 ---------------- */ .messages { position: fixed; top: 70px; right: 20px; z-index: 2000; max-width: 380px; } .messages .alert { box-shadow: var(--shadow-md); border-radius: 10px; } /* ---------------- 响应式 ---------------- */ @media (max-width: 991.98px) { .sidebar { transform: translateX(-105%); width: var(--sidebar-w) !important; transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease; } body.sidebar-open .sidebar { transform: translateX(0); } /* 移动端忽略桌面折叠态：统一用抽屉（sidebar-open）控制 */ body.sidebar-collapsed .sidebar { transform: translateX(-105%); } .main, body.sidebar-collapsed .main { margin-left: 0; } .content { padding: 16px; } .topbar { padding: 0 12px; } } @media (max-width: 575.98px) { .stat-value { font-size: 22px; } .content { padding: 12px; } .table-responsive { border: 0; } } /* ---------------- 导出样式管理 ---------------- */ .color-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; } .style-card { box-shadow: 0 1px 3px rgba(0,0,0,.05); } .style-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.09); } input[type="color"].form-control-color { width: 3.2rem; height: 2.4rem; padding: .2rem; cursor: pointer; } /* ========================================================= 夜间模式组件级覆盖：纯黑白灰，无任何彩色 ========================================================= */ /* 侧边栏 */ [data-bs-theme="dark"] .sidebar { color: #999; } [data-bs-theme="dark"] .sidebar-header { color: #fff; border-bottom-color: rgba(255,255,255,.1); } [data-bs-theme="dark"] .sidebar-header i { color: #fff; } [data-bs-theme="dark"] .sidebar .nav-link { color: #999; } [data-bs-theme="dark"] .sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; } [data-bs-theme="dark"] .sidebar .nav-link.active { background: #2a2a2a; color: #fff; box-shadow: none; } [data-bs-theme="dark"] .sidebar .nav-group.has-active > .nav-group-toggle { background: #2a2a2a; color: #fff; } [data-bs-theme="dark"] .sidebar-divider { background: rgba(255,255,255,.1); } [data-bs-theme="dark"] .sidebar-footer { color: #666; border-top-color: rgba(255,255,255,.08); } /* 遮罩层 */ [data-bs-theme="dark"] .sidebar-overlay { background: rgba(0,0,0,.65); } /* 统计卡 hover */ [data-bs-theme="dark"] .stat-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.3); } /* 表单聚焦：灰边 + 白色微光 */ [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { border-color: #666; box-shadow: 0 0 0 .2rem rgba(255,255,255,.08); } /* 排序链接 hover */ [data-bs-theme="dark"] .table .sort-link:hover { color: #fff; } /* 分页 */ [data-bs-theme="dark"] .page-item .page-link { color: #fff; } [data-bs-theme="dark"] .page-item.active .page-link { background: #fff; border-color: #fff; color: #000; } [data-bs-theme="dark"] .page-item.disabled .page-link { color: #555; } /* Bootstrap 主色按钮 → 白底黑字 */ [data-bs-theme="dark"] .btn-primary { background-color: #fff; border-color: #fff; color: #000; } [data-bs-theme="dark"] .btn-primary:hover { background-color: #ddd; border-color: #ddd; color: #000; } [data-bs-theme="dark"] .btn-outline-primary { color: #fff; border-color: #555; } [data-bs-theme="dark"] .btn-outline-primary:hover { background-color: #fff; border-color: #fff; color: #000; } [data-bs-theme="dark"] .text-primary { color: #fff !important; } [data-bs-theme="dark"] .link-primary { color: #fff !important; } [data-bs-theme="dark"] .border-primary { border-color: #555 !important; } /* 登录页：纯黑渐变 + 灰色 logo */ [data-bs-theme="dark"] .login-body { background: linear-gradient(135deg, #000 0%, #1a1a1a 55%, #000 100%); } [data-bs-theme="dark"] .login-logo { background: #222; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.5); } /* 滑块验证码：灰度配色 */ [data-bs-theme="dark"] .captcha-img-wrap { background: #1a1a1a; } [data-bs-theme="dark"] .captcha-refresh { background: rgba(255,255,255,.85); color: #333; } [data-bs-theme="dark"] .captcha-refresh:hover { background: #fff; color: #000; } [data-bs-theme="dark"] .slider-track { background: #2a2a2a; } [data-bs-theme="dark"] .slider-progress { background: linear-gradient(90deg, #555, #999); } [data-bs-theme="dark"] .slider-handle { background: #fff; color: #888; box-shadow: 0 2px 6px rgba(0,0,0,.3); } [data-bs-theme="dark"] .slider-handle:hover:not(:disabled) { color: #000; } [data-bs-theme="dark"] .slider-handle.dragging { box-shadow: 0 4px 10px rgba(255,255,255,.15); } [data-bs-theme="dark"] .slider-handle.verified { background: #fff; color: #000; } [data-bs-theme="dark"] .slider-tip { color: #888; } [data-bs-theme="dark"] .slider-captcha[data-state="error"] .slider-tip { color: #aaa; } /* 浮动主题按钮阴影 */ [data-bs-theme="dark"] .theme-toggle-floating { box-shadow: 0 2px 8px rgba(0,0,0,.4); } /* 下拉菜单适配 */ [data-bs-theme="dark"] .dropdown-menu { background: var(--card-bg); border-color: var(--card-border); } [data-bs-theme="dark"] .dropdown-item { color: var(--text); } [data-bs-theme="dark"] .dropdown-item:hover { background: var(--hover-bg); } [data-bs-theme="dark"] .dropdown-divider { border-color: var(--card-border); } [data-bs-theme="dark"] .dropdown-header { color: var(--text-muted); } [data-bs-theme="dark"] .dropdown-item-text { color: var(--text-muted); } /* ============ 表格列宽拖拽 ============ */ body.resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; } table.table thead th .col-resize-grip { opacity: 0; transition: opacity .15s; } table.table thead th:hover .col-resize-grip { opacity: 1; } table.table thead th .col-resize-grip:hover { opacity: 1; } /* ========================================================= 全局搜索（顶栏） ========================================================= */ .global-search { max-width: 340px; } .global-search-box { border: 1px solid var(--card-border); border-radius: 20px; background: var(--input-bg); transition: box-shadow .15s ease, border-color .15s ease; } .global-search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(37,99,235,.12); } .global-search-input { background: transparent; font-size: 13px; } .global-search-input:focus { box-shadow: none; } /* 下拉建议面板 */ .global-search-wrap { position: relative; max-width: 340px; flex: 1; margin-right: 2cm; } .global-search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1080; max-height: 420px; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); } .gs-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text-color); text-decoration: none; cursor: pointer; } .gs-item:hover, .gs-item.active { background: var(--hover-bg); } .gs-icon { color: var(--primary); flex-shrink: 0; } .gs-text { flex-grow: 1; min-width: 0; } .gs-title { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs-sub { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs-tag { flex-shrink: 0; font-size: 11px; color: var(--text-muted); background: var(--hover-bg); border-radius: 4px; padding: 1px 6px; } .gs-footer { border-top: 1px solid var(--card-border); padding: 6px 12px; text-align: center; } .gs-footer a { font-size: 12px; color: var(--primary); text-decoration: none; } .gs-empty { color: var(--text-muted); } /* ========================================================= 消息通知中心（顶栏铃铛 + 下拉面板） ========================================================= */ .notif-badge { font-size: 10px; line-height: 1; } .notif-menu { max-height: 440px; } .notif-list { max-height: 300px; overflow-y: auto; } .notif-item { white-space: normal; border-bottom: 1px solid var(--card-border); } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--hover-bg); } .notif-item .min-w-0 { min-width: 0; } [data-bs-theme="dark"] .notif-item { border-bottom-color: var(--card-border); } /* ========================================================= 列表页通用优化 ========================================================= */ /* 列表卡片头部统计条 */ .list-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); } /* 分页信息 + 每页条数 */ .pager-info { color: var(--text-muted); font-size: 12.5px; } /* 表格空状态 */ .table-empty { padding: 48px 0; text-align: center; color: var(--text-muted); } /* 表格行内快捷操作按钮（图标按钮等宽，统一大小） */ .row-actions .btn { padding: 0 .45rem; font-size: 13px; } /* 列表筛选卡片可折叠 */ .filter-toggle { cursor: pointer; user-select: none; } /* ========================================================= 表单页通用优化 ========================================================= */ /* 必填星号统一样式 */ .form-label .required-star { color: #dc3545; margin-left: 2px; } /* 表单分区标题 */ .form-section-title { font-size: 14px; font-weight: 600; color: var(--primary); padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--card-border); display: flex; align-items: center; gap: 8px; } /* 提交按钮加载态 */ .btn-loading { pointer-events: none; opacity: .8; } /* 表单底部操作栏吸底（移动端） */ .form-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ========================================================= 移动端增强适配 ========================================================= */ @media (max-width: 767.98px) { /* 顶栏搜索框移动端占满剩余宽度，缩小占位文字 */ .global-search { max-width: none; flex: 1; } .global-search-wrap { max-width: none; } .global-search-input { min-width: 0; } .global-search-input::placeholder { font-size: 12px; } /* 顶栏隐藏用户名，保留头像 */ .topbar .btn-user span:not(.role-badge) { display: none; } /* 统计卡片 2 列 */ .stat-card { } /* 表格默认横向滚动 + 最小宽度保证可读 */ .table-responsive { -webkit-overflow-scrolling: touch; } /* 详情页字段布局更紧凑 */ .detail-grid dd { word-break: break-all; } /* 内容区边距收紧 */ .content { padding: 12px; } .card-body { padding: 16px; } /* 按钮组换行 */ .d-flex.gap-2 { flex-wrap: wrap; } /* 表单输入框字号不小于16px 防 iOS 缩放 */ .form-control, .form-select { font-size: 16px; } } @media (max-width: 575.98px) { /* 小屏隐藏角色徽标 */ .topbar .role-badge { display: none; } /* 通知下拉菜单全宽 */ .notif-menu { width: 300px !important; } /* 全局搜索结果表头在小屏隐藏部分次要列 */ .card-header { padding: 12px 16px; } } /* ===== 侧边菜单个性化排序 ===== */ .sidebar-menu-sort-btn { margin-left: auto; color: rgba(255,255,255,.75); width: 20px; height: 20px; font-size: 10px; padding: 0; border-radius: 5px; flex-shrink: 0; background: transparent; border: none; } .sidebar-menu-sort-btn:hover, .sidebar-menu-sort-btn.active { color: #fff; background: rgba(255,255,255,.14); } .sidebar .nav-item.menu-sort-draggable { cursor: grab; border-radius: 8px; } .sidebar .nav-item.menu-sort-draggable:hover { outline: 1px dashed rgba(96,165,250,.7); } .sidebar .nav-item.menu-sort-dragging { opacity: .45; } .sidebar .nav-item.menu-sort-over { outline: 2px dashed #60a5fa; outline-offset: -2px; border-radius: 8px; } /* 排序模式下每个菜单项的上下微调按钮 */ .sidebar .nav-item.menu-sort-draggable { position: relative; } .menu-sort-arrows { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; z-index: 7; } .sidebar .nav-item.menu-sort-draggable .menu-sort-arrows { display: inline-flex; } .menu-sort-btn { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; border-radius: 4px; line-height: 1; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .menu-sort-btn:hover:not(:disabled) { background: rgba(255,255,255,.25); } .menu-sort-btn:disabled { opacity: .3; cursor: not-allowed; } [data-bs-theme=dark] .menu-sort-btn { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); } .sidebar .nav-item.menu-sort-draggable .nav-link { padding-right: 52px; }