/* ============================================ 光伏电站运维管理系统 — 设计系统 主题: 深空蓝 + 琥珀金 (工业科技风) 字体由各模板 中的 加载 （2026-08-17 移除 @import：阻塞渲染且国内访问不稳定） ============================================ */ /* --- Design Tokens (CSS Variables) --- */ :root { /* 主色调 */ --primary: #1B2A4A; --primary-light: #2A3F6F; --primary-dark: #0F1A30; --primary-rgb: 27, 42, 74; /* 强调色 — 琥珀金 */ --accent: #E8A838; --accent-light: #F2C05E; --accent-dark: #C48A20; --accent-rgb: 232, 168, 56; /* 语义色 */ --success: #10B981; --success-light: #D1FAE5; --success-rgb: 16, 185, 129; --warning: #F59E0B; --warning-light: #FEF3C7; --warning-rgb: 245, 158, 11; --danger: #EF4444; --danger-light: #FEE2E2; --danger-rgb: 239, 68, 68; --info: #3B82F6; --info-light: #DBEAFE; --info-rgb: 59, 130, 246; /* 语义色-深色阶（2026-08-17 UI 系统化第一批：取自全站高频色值审计） 用于需要比基础语义色更深一档的文字/图标/徽标场景 */ --success-dark: #16A34A; --warning-dark: #D97706; --danger-dark: #DC2626; --info-dark: #2563EB; --info-darker: #1E40AF; /* 图表色板（ECharts/内联 SVG 统一取色，禁止各页面自选色） */ --chart-1: #3B82F6; --chart-2: #10B981; --chart-3: #F59E0B; --chart-4: #EF4444; --chart-5: #8B5CF6; --chart-6: #64748B; /* 中性色 */ --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B; --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A; /* 背景 */ --bg-body: #F0F2F5; --bg-card: #FFFFFF; --bg-sidebar: linear-gradient(195deg, #0F1A30 0%, #1B2A4A 40%, #2A3F6F 100%); --bg-header: rgba(255, 255, 255, 0.85); /* 字体 */ --font-display: 'Outfit', 'Noto Sans SC', sans-serif; --font-body: 'Noto Sans SC', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; /* 字号 */ --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-lg: 1rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; /* 圆角 */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* 阴影 */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04); --shadow-glow: 0 0 20px rgba(var(--accent-rgb), 0.3); /* 过渡 */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* 布局 */ --sidebar-width: 260px; --header-height: 64px; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-body); font-size: var(--text-base); color: var(--gray-800); background: var(--bg-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; color: var(--gray-900); line-height: 1.3; } a { color: var(--primary-light); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent); } /* --- Scrollbar --- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } /* ============================================ COMPONENTS ============================================ */ /* --- Buttons --- */ .btn { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.01em; border-radius: var(--radius-md); padding: 0.5rem 1.25rem; transition: all var(--transition-base); border: none; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0); transition: background var(--transition-fast); } .btn:hover::after { background: rgba(255, 255, 255, 0.1); } .btn:active { transform: scale(0.97); } .btn-primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: var(--primary-dark); box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%); color: var(--primary-dark); box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.4); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0) scale(0.97); } .btn-outline-primary { border: 1.5px solid var(--accent); color: var(--accent-dark); background: transparent; } .btn-outline-primary:hover { background: var(--accent); color: var(--primary-dark); border-color: var(--accent); } .btn-success { background: linear-gradient(135deg, var(--success) 0%, #059669 100%); color: white; box-shadow: 0 2px 8px rgba(var(--success-rgb), 0.3); } .btn-success:hover { box-shadow: 0 4px 16px rgba(var(--success-rgb), 0.4); transform: translateY(-1px); color: white; } .btn-warning { background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%); color: white; box-shadow: 0 2px 8px rgba(var(--warning-rgb), 0.3); } .btn-warning:hover { box-shadow: 0 4px 16px rgba(var(--warning-rgb), 0.4); transform: translateY(-1px); color: white; } .btn-danger { background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%); color: white; box-shadow: 0 2px 8px rgba(var(--danger-rgb), 0.3); } .btn-danger:hover { box-shadow: 0 4px 16px rgba(var(--danger-rgb), 0.4); transform: translateY(-1px); color: white; } .btn-outline-secondary { border: 1.5px solid var(--gray-300); color: var(--gray-600); background: transparent; } .btn-outline-secondary:hover { background: var(--gray-100); border-color: var(--gray-400); color: var(--gray-800); } .btn-outline-danger { border: 1.5px solid var(--danger); color: var(--danger); background: transparent; } .btn-outline-danger:hover { background: var(--danger); color: white; border-color: var(--danger); } .btn-sm { font-size: var(--text-xs); padding: 0.35rem 0.85rem; border-radius: var(--radius-sm); } .btn-action { padding: 0.3rem 0.7rem; font-size: var(--text-xs); border-radius: var(--radius-sm); } /* --- Cards --- */ .card { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--bg-card); transition: box-shadow var(--transition-base), transform var(--transition-base); overflow: hidden; } .card:hover { box-shadow: var(--shadow-md); } .card-header { background: var(--bg-card); border-bottom: 1px solid var(--gray-100); padding: 1rem 1.25rem; font-weight: 600; font-family: var(--font-display); } .card-body { padding: 1.25rem; } /* --- Stat Cards --- */ .stat-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: all var(--transition-base); position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); opacity: 0; transition: opacity var(--transition-base); } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .stat-card:hover::before { opacity: 1; } .stat-card .icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .stat-card .icon.bg-blue { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: var(--accent); } .stat-card .icon.bg-green { background: linear-gradient(135deg, #059669 0%, var(--success) 100%); color: white; } .stat-card .icon.bg-orange { background: linear-gradient(135deg, var(--warning-dark) 0%, var(--warning) 100%); color: white; } .stat-card .icon.bg-red { background: linear-gradient(135deg, var(--danger-dark) 0%, var(--danger) 100%); color: white; } .stat-card .icon.bg-purple { background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%); color: white; } .stat-card h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--gray-900); line-height: 1; margin-bottom: 0.25rem; } .stat-card p { color: var(--gray-500); font-size: var(--text-sm); margin: 0; font-weight: 500; } /* --- Tables --- */ .table { margin-bottom: 0; } .table thead th { background: var(--gray-50); border-bottom: 2px solid var(--gray-200); color: var(--gray-600); font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.75rem 1rem; white-space: nowrap; } .table tbody td { padding: 0.875rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--gray-100); font-size: var(--text-sm); color: var(--gray-700); } .table-hover tbody tr { transition: background var(--transition-fast); } .table-hover tbody tr:hover { background: rgba(var(--accent-rgb), 0.04); } /* --- Badges --- */ .badge { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); padding: 0.3rem 0.75rem; border-radius: var(--radius-full); letter-spacing: 0.02em; } /* Bootstrap 5 无 bg-purple，补通用定义（紫底白字）；供状态徽章/角色徽章使用 */ .bg-purple { background-color: #7c3aed; color: #fff; } .badge-status { padding: 0.3rem 0.85rem; border-radius: var(--radius-full); font-weight: 600; font-size: var(--text-xs); } /* --- Forms --- */ .form-control, .form-select { border: 1.5px solid var(--gray-200); border-radius: var(--radius-md); padding: 0.65rem 1rem; font-size: var(--text-sm); font-family: var(--font-body); color: var(--gray-800); background: var(--bg-card); transition: all var(--transition-fast); } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); outline: none; } .form-control::placeholder { color: var(--gray-400); } .form-label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--gray-700); margin-bottom: 0.4rem; } .input-group-text { background: var(--gray-50); border: 1.5px solid var(--gray-200); border-right: none; color: var(--gray-500); font-weight: 600; font-size: var(--text-sm); } /* --- List Items (Mobile) --- */ .list-item { background: var(--bg-card); padding: 1rem 1.15rem; border-radius: var(--radius-md); margin-bottom: 0.625rem; box-shadow: var(--shadow-xs); transition: all var(--transition-base); border: 1px solid var(--gray-100); } .list-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(var(--accent-rgb), 0.2); } /* --- Search Box --- */ .search-box { position: relative; } .search-box input { padding-left: 2.75rem; border-radius: var(--radius-full); border: 1.5px solid var(--gray-200); padding-right: 1rem; } .search-box i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--gray-400); } /* --- Alerts --- */ .alert { border: none; border-radius: var(--radius-md); padding: 0.875rem 1.25rem; font-size: var(--text-sm); font-weight: 500; } .alert-success { background: var(--success-light); color: #065F46; } .alert-warning { background: var(--warning-light); color: #92400E; } .alert-danger { background: var(--danger-light); color: #991B1B; } .alert-info { background: var(--info-light); color: var(--info-darker); } /* --- Modal --- */ .modal-content { border: none; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); } .modal-header { border-bottom: 1px solid var(--gray-100); padding: 1.25rem 1.5rem; } .modal-footer { border-top: 1px solid var(--gray-100); padding: 1rem 1.5rem; } /* --- Dropdown --- */ .dropdown-menu { border: 1px solid var(--gray-100); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 0.5rem; } .dropdown-item { border-radius: var(--radius-sm); padding: 0.5rem 0.85rem; font-size: var(--text-sm); color: var(--gray-700); transition: all var(--transition-fast); } .dropdown-item:hover { background: rgba(var(--accent-rgb), 0.08); color: var(--accent-dark); } /* --- Pagination --- */ .pagination .page-link { border-radius: var(--radius-sm); margin: 0 2px; border: 1px solid var(--gray-200); color: var(--gray-600); font-weight: 500; font-size: var(--text-sm); padding: 0.4rem 0.75rem; transition: all var(--transition-fast); } .pagination .page-link:hover { background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); color: var(--accent-dark); } .pagination .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: var(--primary-dark); font-weight: 700; } /* --- Progress --- */ .progress { height: 6px; border-radius: var(--radius-full); background: var(--gray-100); overflow: hidden; } .progress-bar { background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: var(--radius-full); transition: width var(--transition-slow); } /* --- Toast --- */ .toast { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } /* --- Empty State --- */ .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--gray-400); } .empty-state i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; display: block; } .empty-state p { font-size: var(--text-sm); margin: 0; } /* --- Image Preview --- */ .img-preview { max-width: 100%; border-radius: var(--radius-md); cursor: pointer; transition: transform var(--transition-base); box-shadow: var(--shadow-sm); } .img-preview:hover { transform: scale(1.03); box-shadow: var(--shadow-lg); } /* --- Status Colors --- */ .status-running { color: var(--success); } .status-maintenance { color: var(--warning); } .status-stopped { color: var(--danger); } /* ============================================ ANIMATIONS ============================================ */ /* --- Loading Spinner --- */ .loading { display: inline-block; width: 20px; height: 20px; border: 2.5px solid var(--gray-200); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Fade In Up --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { /* fill-mode 必须用 backwards：both 会在动画结束后永久保留 transform， 使卡片成为 position:fixed 子元素（如 Bootstrap 模态框）的包含块+层叠上下文， 模态框被压在 backdrop 之下 → 页面假死只能刷新（v3.5.72 修复）。 */ animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; } /* Staggered delays */ .delay-1 { animation-delay: 0.05s; } .delay-2 { animation-delay: 0.1s; } .delay-3 { animation-delay: 0.15s; } .delay-4 { animation-delay: 0.2s; } .delay-5 { animation-delay: 0.25s; } .delay-6 { animation-delay: 0.3s; } /* --- Pulse Glow --- */ @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.3); } 50% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); } } .pulse-glow { animation: pulseGlow 2s ease-in-out infinite; } /* --- Count Up (visual placeholder) --- */ @keyframes countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .count-up { animation: countUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ============================================ UTILITY CLASSES ============================================ */ .text-accent { color: var(--accent) !important; } .text-primary-custom { color: var(--primary) !important; } .bg-accent { background-color: var(--accent) !important; } /* Glass morphism */ .glass { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); } /* Gradient text */ .gradient-text { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ RESPONSIVE ============================================ */ /* --- 通用移动端优化工具类 --- */ .mobile-only { display: none !important; } .desktop-only { display: flex !important; } @media (max-width: 767.98px) { .mobile-only { display: flex !important; } .desktop-only { display: none !important; } } /* 安全区域适配 */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* 移动端点击优化 */ @media (max-width: 767.98px) { a, button, .btn, .list-item, .quick-action-item, .nav-item a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; } /* 防止iOS下input放大 */ input, select, textarea { font-size: 16px !important; } } @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); transition: transform var(--transition-slow); } .sidebar.show { transform: translateX(0); } .main-content { margin-left: 0 !important; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 999; } .sidebar-overlay.show { display: block; } } @media (max-width: 767.98px) { .stat-card { padding: 1.15rem; } .stat-card .icon { width: 44px; height: 44px; font-size: 1.2rem; } .stat-card h3 { font-size: var(--text-xl); } .card-body { padding: 1rem; } } /* --- 管理后台移动端适配 --- */ @media (max-width: 767.98px) { /* 内容区域 */ .content-wrapper { padding: 0.75rem !important; } /* 页面头部 */ .page-header { flex-direction: column; align-items: flex-start !important; gap: 0.5rem; margin-bottom: 1rem; } .page-header h4 { font-size: 1.1rem; } .page-header .d-flex.gap-2 { flex-wrap: wrap; width: 100%; } .page-header .d-flex.gap-2 .btn { flex: 1; min-width: 0; font-size: 0.75rem; padding: 0.4rem 0.5rem; white-space: nowrap; } /* 搜索框 */ .card.mb-4 .card-body.py-2 .d-flex.gap-2 { flex-wrap: wrap; } .card.mb-4 .card-body.py-2 .d-flex.gap-2 input.form-control { max-width: 100% !important; flex: 1; min-width: 0; font-size: 0.85rem; } .card.mb-4 .card-body.py-2 .d-flex.gap-2 .btn { font-size: 0.8rem; padding: 0.4rem 0.75rem; white-space: nowrap; } /* 统计卡片 */ .stat-card { padding: 0.85rem; } .stat-card .icon { width: 40px; height: 40px; font-size: 1.1rem; } .stat-card h3 { font-size: 1.25rem; } .stat-card p { font-size: 0.75rem; } /* 表格 - 水平滚动 */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.75rem; padding: 0 0.75rem; } .table { font-size: 0.8rem; white-space: nowrap; } .table thead th { font-size: 0.7rem; padding: 0.5rem 0.4rem; } .table tbody td { padding: 0.5rem 0.4rem; font-size: 0.8rem; } /* 卡片 */ .card-body { padding: 0.85rem; } .card-header { padding: 0.75rem 0.85rem; } .card-header h6 { font-size: 0.85rem; } .card-header .btn { font-size: 0.7rem; padding: 0.3rem 0.6rem; white-space: nowrap; } /* 电站卡片 */ .col-md-4 .card-body .d-flex.gap-2 { flex-wrap: wrap; } .col-md-4 .card-body .d-flex.gap-2 .btn { font-size: 0.75rem; padding: 0.35rem 0.6rem; } .col-md-4 .card-title { font-size: 1rem; } .col-md-4 .card-text { font-size: 0.82rem; } /* 分页 */ .pagination { flex-wrap: wrap; gap: 0.25rem; } .pagination .page-link { font-size: 0.8rem; padding: 0.35rem 0.6rem; } /* 表单 */ .form-label { font-size: 0.82rem; margin-bottom: 0.25rem; } .form-control, .form-select { font-size: 0.9rem; padding: 0.5rem 0.75rem; } .btn { font-size: 0.85rem; padding: 0.45rem 0.85rem; white-space: nowrap; } /* 筛选栏 */ .card.mb-4 .card-body .row .col-md-4, .card.mb-4 .card-body .row .col-md-2 { margin-bottom: 0.5rem; } /* 上传区域 */ .upload-zone { padding: 1.5rem 1rem; } /* 详情页 Hero */ .detail-hero { padding: 1rem !important; border-radius: var(--radius-md) !important; } .detail-hero .station-name { font-size: 1.1rem !important; } .detail-hero .hero-stats { gap: 1rem !important; } .detail-hero .hero-stat-value { font-size: 0.95rem !important; } .detail-hero .hero-badge { font-size: 0.6rem !important; padding: 0.15rem 0.5rem !important; } /* 底部三列变单列 */ .row.g-3 > [class*="col-md-4"] { margin-bottom: 0.5rem; } /* 空状态 */ .empty-hint { padding: 1.5rem 0.5rem !important; } .empty-hint i { font-size: 1.25rem !important; } .empty-hint span { font-size: 0.7rem !important; } /* 信息网格 */ .info-grid { gap: 0 !important; } .info-item { padding: 0.4rem 0 !important; } .info-label { font-size: 0.6rem !important; } .info-value { font-size: 0.8rem !important; } /* Section card */ .section-card-header { padding: 0.6rem 0.75rem !important; } .section-card-header .section-icon { width: 24px !important; height: 24px !important; font-size: 0.75rem !important; } .section-card-header h6 { font-size: 0.8rem !important; } .section-card-body { padding: 0.6rem 0.75rem !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } .section-card-body .table { min-width: 500px; } /* Record card */ .record-card .record-header { padding: 0.5rem 0.75rem !important; } .record-card .record-header h6 { font-size: 0.75rem !important; } .record-card .record-body { padding: 0.4rem 0.75rem !important; } .record-item { padding: 0.35rem 0 !important; } .record-item .record-date { font-size: 0.8rem !important; } .record-item .record-desc { font-size: 0.65rem !important; } /* 模态框优化 */ .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); } .modal-content { border-radius: var(--radius-lg); } .modal-header { padding: 0.85rem 1rem; } .modal-body { padding: 0.85rem 1rem; } .modal-footer { padding: 0.75rem 1rem; } /* Alert优化 */ .alert { padding: 0.65rem 0.85rem; font-size: 0.8rem; } /* 下拉菜单 */ .dropdown-menu { max-width: calc(100vw - 1rem); font-size: 0.85rem; } /* 图片预览 */ .img-preview { max-height: 120px; } /* 徽章 */ .badge { font-size: 0.65rem; padding: 0.2rem 0.55rem; } } /* --- 小屏手机优化 (≤380px) --- */ @media (max-width: 380px) { .stat-card h3 { font-size: 1.1rem; } .stat-card { padding: 0.75rem; } .stat-card .icon { width: 36px; height: 36px; font-size: 1rem; } .btn { font-size: 0.8rem; padding: 0.4rem 0.7rem; } .card-body { padding: 0.75rem; } } /* --- Print --- */ @media print { .sidebar, .bottom-nav, .action-btn, .btn { display: none !important; } .main-content { margin-left: 0 !important; } } /* ============================================================ 移动端适配增强（全局兜底） 目标：让"所有页面"在手机上不崩、好用。 关键修复：未包 .table-responsive 的表格，在自身容器内横向滚动， 而不是把整页撑出横向滚动条（这是"打开用不了"的头号原因）。 —— Senior Developer 2026-07-11 ============================================================ */ /* 1) 任意容器内的表格：在容器内横向滚动，杜绝整页横向溢出 */ @media (max-width: 767.98px) { .card-body:has(table), [class*="col-"]:has(table), .content-wrapper:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 表头保持单行(nowrap)便于扫读，表体允许折行以减少滚动 */ .table tbody td { white-space: normal; word-break: break-word; overflow-wrap: anywhere; } } /* 2) 媒体元素永不超过视口宽度 */ img, svg, canvas, video, iframe { max-width: 100%; height: auto; } /* 3) 触控目标 ≥ 40px（移动端可点性，WCAG 2.1 AA 触控尺寸） */ @media (max-width: 767.98px) { .btn, .dropdown-item, .page-link, .list-group-item, .nav-link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } .btn-sm, .btn-action { min-height: 36px; } /* 按钮组 / 操作栏 / 标题栏在窄屏自动换行，避免溢出 */ .card-header.d-flex, .page-header .d-flex, .d-flex.justify-content-between, .btn-toolbar, .d-flex.gap-2, .d-flex.gap-3 { flex-wrap: wrap; row-gap: 0.5rem; } /* 输入组在窄屏堆叠为整行 */ .input-group { flex-wrap: wrap; } .input-group > .form-control, .input-group > .form-select, .input-group > .btn { flex: 1 1 100%; margin-top: 0.4rem; } .input-group > .input-group-text { flex: 1 1 100%; border-right: 1.5px solid var(--gray-200); border-bottom: none; } } /* 4) Select2 在移动端占满并加高，便于点选 */ @media (max-width: 767.98px) { .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { min-height: 40px; } .select2-container--default .select2-selection__rendered { line-height: 38px; } .select2-dropdown { font-size: 0.9rem; } } /* 5) 模态框在窄屏不超高、可滚动 */ @media (max-width: 767.98px) { .modal-dialog { margin: 0.5rem auto; max-height: calc(100vh - 1rem); } .modal-body { max-height: calc(100vh - 9rem); overflow-y: auto; } } /* 6) 通用栅格兜底：任意栅格列不应超出视口 */ [class*="col-"] { max-width: 100%; } /* 7) 可见焦点环（无障碍） */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* 8) 尊重系统「减少动态效果」偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }