/** * v5-theme.css — v5.3 深色主题统一样式系统 * * 视觉设计：v5.3 深色主题 * - 主色: #3b82f6 渐变 * - 背景: #0d1f35（深海军蓝） * - 卡片: #111827，微阴影 * - 文字: #f1f5f9 / #cbd5e1 * * 使用方法： * 1. 页面需在 中先引入此文件 * 2. 页面特定样式覆盖 v5 变量和通用组件 */ /* ============================================ CSS 自定义属性（v5.3 深色主题变量） ============================================ */ :root { /* 主色渐变 */ --v5-primary: #2a3a5c; --v5-primary-light: #4a90d9; --v5-primary-lighter: #8ab4e0; --v5-primary-dark: #1a2d4a; /* 背景色 - 深色主题 */ --v5-bg: #0d1f35; --v5-card-bg: #111827; --v5-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --v5-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4); --v5-card-radius: 0.75rem; /* 文字颜色 */ --v5-text: #f1f5f9; --v5-text-secondary: #cbd5e1; --v5-text-muted: #94a3b8; /* 边框颜色 */ --v5-border: #334155; --v5-border-hover: #475569; /* 语义颜色 */ --v5-success: #22c55e; --v5-success-bg: rgba(34, 197, 94, 0.15); --v5-success-text: #86efac; --v5-warning: #f59e0b; --v5-warning-bg: rgba(245, 158, 11, 0.15); --v5-warning-text: #fcd34d; --v5-danger: #ef4444; --v5-danger-bg: rgba(239, 68, 68, 0.15); --v5-danger-text: #fca5a5; --v5-info: #3b82f6; --v5-info-bg: rgba(59, 130, 246, 0.15); --v5-info-text: #93c5fd; /* 涨跌颜色（中国惯例：涨红跌绿） */ --v5-up: #ef4444; --v5-down: #22c55e; /* 特殊颜色 */ --v5-purple: #a78bfa; --v5-purple-bg: rgba(167, 139, 250, 0.15); --v5-table-border: #374151; --v5-table-hover: rgba(59, 130, 246, 0.08); } /* ============================================ 通用卡片组件 ============================================ */ .v5-card { background: var(--v5-card-bg); border-radius: var(--v5-card-radius); box-shadow: var(--v5-card-shadow); padding: 20px; margin-bottom: 16px; transition: box-shadow 0.2s ease; } .v5-card:hover { box-shadow: var(--v5-card-shadow-hover); } .v5-card-flat { background: var(--v5-card-bg); border-radius: var(--v5-card-radius); padding: 20px; margin-bottom: 16px; } /* ============================================ 通用 Section 标题 ============================================ */ .v5-section-header { font-size: 1rem; font-weight: 600; color: var(--v5-text); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .v5-section-header i { color: var(--v5-primary-light); } .v5-section-subtitle { font-size: 0.875rem; color: var(--v5-text-secondary); margin-top: 4px; } /* ============================================ 通用 KPI 卡片网格 ============================================ */ .v5-kpi-grid { display: grid; gap: 16px; margin-bottom: 20px; } .v5-kpi-grid-2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .v5-kpi-grid-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .v5-kpi-grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .v5-kpi-grid-5 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } @media (max-width: 1200px) { .v5-kpi-grid-4, .v5-kpi-grid-5 { grid-template-columns: repeat(2, 1fr); } .v5-kpi-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .v5-kpi-grid-2, .v5-kpi-grid-3, .v5-kpi-grid-4, .v5-kpi-grid-5 { grid-template-columns: 1fr; } } /* ============================================ KPI 指标卡片 ============================================ */ .v5-metric-card { display: flex; align-items: flex-start; gap: 16px; } .v5-metric-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.25rem; flex-shrink: 0; } .v5-metric-icon.primary { background: linear-gradient(135deg, var(--v5-primary), var(--v5-primary-light)); } .v5-metric-icon.success { background: linear-gradient(135deg, #059669, #10b981); } .v5-metric-icon.warning { background: linear-gradient(135deg, #f59e0b, #fbbf24); } .v5-metric-icon.danger { background: linear-gradient(135deg, #dc2626, #ef4444); } .v5-metric-icon.info { background: linear-gradient(135deg, #0891b2, #06b6d4); } .v5-metric-icon.purple { background: linear-gradient(135deg, #7c3aed, #a78bfa); } .v5-metric-content { flex: 1; } .v5-metric-label { font-size: 0.75rem; font-weight: 500; color: var(--v5-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .v5-metric-value { font-size: 1.5rem; font-weight: 700; color: var(--v5-text); line-height: 1.2; } .v5-metric-value.up, .v5-metric-value.positive { color: var(--v5-up); } .v5-metric-value.down, .v5-metric-value.negative { color: var(--v5-down); } .v5-metric-value.success { color: var(--v5-success); } .v5-metric-value.warning { color: var(--v5-warning); } .v5-metric-value.danger { color: var(--v5-danger); } .v5-metric-sub { font-size: 0.75rem; color: var(--v5-text-muted); margin-top: 4px; } /* ============================================ 通用表格样式 ============================================ */ .v5-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .v5-table th { text-align: left; padding: 12px 16px; background: var(--v5-bg); color: var(--v5-text-secondary); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--v5-border); } .v5-table td { padding: 14px 16px; border-bottom: 1px solid var(--v5-table-border, #374151); color: var(--v5-text-secondary); } .v5-table tbody tr:hover { background: var(--v5-bg); } .v5-table-amount { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-weight: 500; } /* ============================================ 通用按钮样式 ============================================ */ .v5-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .v5-btn:hover { transform: translateY(-1px); } .v5-btn:active { transform: translateY(0); } .v5-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .v5-btn-primary { background: linear-gradient(135deg, var(--v5-primary), var(--v5-primary-light)); color: #ffffff; } .v5-btn-primary:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .v5-btn-secondary { background: var(--v5-border); color: var(--v5-text); } .v5-btn-secondary:hover { background: var(--v5-border-hover); } .v5-btn-success { background: var(--v5-success); color: #ffffff; } .v5-btn-danger { background: var(--v5-danger); color: #ffffff; } .v5-btn-sm { padding: 6px 12px; border: 1px solid var(--v5-border); border-radius: 6px; background: var(--v5-card-bg); color: var(--v5-primary-light); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .v5-btn-sm:hover { background: var(--v5-bg); border-color: var(--v5-primary-light); } /* ============================================ 通用徽章样式 ============================================ */ .v5-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; } .v5-badge-success, .v5-badge-success { background: var(--v5-success-bg); color: var(--v5-success-text); } .v5-badge-warning, .v5-badge-warn { background: var(--v5-warning-bg); color: var(--v5-warning-text); } .v5-badge-danger, .v5-badge-error { background: var(--v5-danger-bg); color: var(--v5-danger-text); } .v5-badge-info { background: var(--v5-info-bg); color: var(--v5-info-text); } .v5-badge-primary { background: var(--v5-info-bg); color: var(--v5-primary); } .v5-badge-purple { background: var(--v5-purple-bg); color: var(--v5-purple); } /* ============================================ 通用状态指示器 ============================================ */ .v5-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; } .v5-status-dot { width: 8px; height: 8px; border-radius: 50%; } .v5-status-dot.success { background: var(--v5-success); } .v5-status-dot.warning { background: var(--v5-warning); } .v5-status-dot.danger { background: var(--v5-danger); } .v5-status-dot.info { background: var(--v5-info); } /* ============================================ 通用进度条 ============================================ */ .v5-progress-bar { height: 8px; background: var(--v5-border); border-radius: 4px; overflow: hidden; } .v5-progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; } .v5-progress-fill.success { background: var(--v5-success); } .v5-progress-fill.warning { background: var(--v5-warning); } .v5-progress-fill.danger { background: var(--v5-danger); } .v5-progress-fill.primary { background: linear-gradient(90deg, var(--v5-primary), var(--v5-primary-light)); } /* ============================================ 通用告警框 ============================================ */ .v5-alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; margin-bottom: 16px; } .v5-alert-danger { background: var(--v5-danger-bg); border: 1px solid rgba(239,68,68,.25); color: var(--v5-danger-text); } .v5-alert-warning { background: var(--v5-warning-bg); border: 1px solid rgba(245,158,11,.25); color: var(--v5-warning-text); } .v5-alert-success { background: var(--v5-success-bg); border: 1px solid rgba(34,197,94,.25); color: var(--v5-success-text); } .v5-alert-info { background: var(--v5-info-bg); border: 1px solid rgba(59,130,246,.25); color: var(--v5-info-text); } /* ============================================ 通用空状态 ============================================ */ .v5-empty { text-align: center; padding: 40px 20px; color: var(--v5-text-muted); } .v5-empty i { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5; } .v5-empty p { margin: 0; font-size: 0.875rem; } /* ============================================ 通用 Toast 通知 ============================================ */ .v5-toast { position: fixed; top: 100px; right: 20px; padding: 12px 20px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; z-index: 9999; opacity: 0; transform: translateX(20px); transition: all 0.3s ease; } .v5-toast.show { opacity: 1; transform: translateX(0); } .v5-toast.error { background: var(--v5-danger-bg); color: var(--v5-danger-text); border: 1px solid rgba(239,68,68,.25); } .v5-toast.success { background: var(--v5-success-bg); color: var(--v5-success-text); border: 1px solid rgba(34,197,94,.25); } .v5-toast.warning { background: var(--v5-warning-bg); color: var(--v5-warning-text); border: 1px solid rgba(245,158,11,.25); } /* ============================================ 通用筛选器 ============================================ */ .v5-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 16px; background: var(--v5-card-bg); border-radius: var(--v5-card-radius); box-shadow: var(--v5-card-shadow); } .v5-filter-item { display: flex; flex-direction: column; gap: 4px; } .v5-filter-label { font-size: 0.7rem; font-weight: 500; color: var(--v5-text-secondary); text-transform: uppercase; } .v5-filter-select, .v5-filter-input { padding: 8px 12px; border: 1px solid var(--v5-border); border-radius: 6px; font-size: 0.875rem; color: var(--v5-text-secondary); background: var(--v5-card-bg); min-width: 120px; transition: border-color 0.2s ease; } .v5-filter-select:focus, .v5-filter-input:focus { outline: none; border-color: var(--v5-primary-light); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } /* ============================================ 通用工作流步骤 ============================================ */ .v5-workflow-steps { display: flex; align-items: center; justify-content: flex-start; overflow-x: auto; padding: 10px 0; } .v5-step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 80px; } .v5-step-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; background: var(--v5-border); color: var(--v5-text-secondary); transition: all 0.3s ease; } .v5-step.active .v5-step-dot { background: linear-gradient(135deg, var(--v5-primary), var(--v5-primary-light)); color: #ffffff; } .v5-step.completed .v5-step-dot { background: var(--v5-success); color: #ffffff; } .v5-step-name { font-size: 0.75rem; color: var(--v5-text-secondary); text-align: center; white-space: nowrap; } .v5-step.active .v5-step-name { color: var(--v5-primary); font-weight: 600; } .v5-step.completed .v5-step-name { color: var(--v5-success); } .v5-step-line { flex: 1; height: 3px; background: var(--v5-border); min-width: 30px; max-width: 60px; } /* ============================================ 通用页面布局 ============================================ */ .v5-page { background: var(--v5-bg); padding: 16px 20px; min-height: calc(100vh - var(--header-h, 92px)); overflow-y: auto; } .v5-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--v5-border); } .v5-page-title { font-size: 1.5rem; font-weight: 600; color: var(--v5-text); margin: 0; } .v5-page-subtitle { font-size: 0.875rem; color: var(--v5-text-secondary); margin-top: 4px; } /* ============================================ 通用图表容器 ============================================ */ .v5-chart-container { background: var(--v5-card-bg); border-radius: var(--v5-card-radius); box-shadow: var(--v5-card-shadow); padding: 20px; margin-bottom: 16px; } /* ============================================ 响应式工具类 ============================================ */ @media (max-width: 768px) { .v5-page { padding: 12px; } .v5-page-header { flex-direction: column; align-items: flex-start; gap: 12px; } .v5-workflow-steps { justify-content: flex-start; padding-left: 10px; } .v5-step { min-width: 60px; } .v5-step-name { font-size: 0.65rem; } .v5-filters { flex-direction: column; } .v5-filter-select, .v5-filter-input { min-width: 100%; } } /* ============================================ v5.1 新增：骨架屏加载动画 ============================================ */ .v5-skeleton { background: linear-gradient(90deg, #111827 25%, var(--v5-border) 50%, #111827 75%); background-size: 200% 100%; animation: v5-skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 4px; } .v5-skeleton-text { height: 14px; margin-bottom: 8px; width: 100%; } .v5-skeleton-text.short { width: 60%; } .v5-skeleton-text.medium { width: 80%; } .v5-skeleton-title { height: 20px; width: 40%; margin-bottom: 16px; } .v5-skeleton-card { height: 120px; border-radius: var(--v5-card-radius); margin-bottom: 12px; } .v5-skeleton-row { height: 48px; margin-bottom: 4px; border-radius: 4px; } @keyframes v5-skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ============================================ v5.1 新增：趋势指示器 ============================================ */ .v5-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; } .v5-trend-up { color: var(--v5-danger); } .v5-trend-down { color: var(--v5-success); } .v5-trend-flat { color: var(--v5-text-muted); } .v5-trend-arrow { font-size: 0.7rem; line-height: 1; } .v5-trend-up .v5-trend-arrow::before { content: "▲"; } .v5-trend-down .v5-trend-arrow::before { content: "▼"; } .v5-trend-flat .v5-trend-arrow::before { content: "─"; } /* ============================================ v5.1 新增：风险等级徽章 ============================================ */ .v5-risk-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.3px; } .v5-risk-badge.low { background: var(--v5-success-bg); color: var(--v5-success-text); border: 1px solid rgba(34,197,94,.25); } .v5-risk-badge.moderate { background: var(--v5-warning-bg); color: var(--v5-warning-text); border: 1px solid rgba(245,158,11,.25); } .v5-risk-badge.elevated { background: rgba(249,115,22,.15); color: #fdba74; border: 1px solid rgba(249,115,22,.25); } .v5-risk-badge.high { background: var(--v5-danger-bg); color: var(--v5-danger-text); border: 1px solid rgba(239,68,68,.25); } .v5-risk-badge.critical { background: rgba(220,38,38,.18); color: #fca5a5; border: 1px solid rgba(220,38,38,.35); } /* ============================================ v5.1 新增：风险仪表盘容器 ============================================ */ .v5-gauge-container { position: relative; display: flex; align-items: center; justify-content: center; min-height: 200px; } .v5-gauge-container .gauge-value { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 1.75rem; font-weight: 700; color: var(--v5-text); } .v5-gauge-container .gauge-label { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 0.7rem; color: var(--v5-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* ============================================ v5.1 新增：脉冲动画（实时数据闪烁） ============================================ */ @keyframes v5-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .v5-pulse { animation: v5-pulse 2s ease-in-out infinite; } .v5-pulse-fast { animation: v5-pulse 1s ease-in-out infinite; } .v5-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--v5-success); margin-right: 4px; animation: v5-pulse 2s ease-in-out infinite; } /* ============================================ v5.1 新增：压力测试场景徽章 ============================================ */ .v5-scenario-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--v5-border); border-radius: 8px; background: var(--v5-card-bg); color: var(--v5-text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .v5-scenario-btn:hover { border-color: var(--v5-primary-light); color: var(--v5-primary); background: rgba(59,130,246,.12); } .v5-scenario-btn.active { border-color: var(--v5-primary-light); background: rgba(59,130,246,.12); color: var(--v5-primary); font-weight: 600; } .v5-scenario-btn .severity-dot { width: 8px; height: 8px; border-radius: 50%; } .v5-scenario-btn .severity-dot.mild { background: var(--v5-warning); } .v5-scenario-btn .severity-dot.moderate { background: #f97316; } .v5-scenario-btn .severity-dot.severe { background: var(--v5-danger); } .v5-scenario-btn .severity-dot.extreme { background: #7f1d1d; } /* ============================================ v5.1 新增：可折叠面板切换 ============================================ */ .v5-collapse-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; background: transparent; color: var(--v5-text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: color 0.2s ease; } .v5-collapse-toggle:hover { color: var(--v5-primary); } .v5-collapse-toggle .toggle-icon { transition: transform 0.3s ease; font-size: 0.7rem; } .v5-collapse-toggle.expanded .toggle-icon { transform: rotate(90deg); } .v5-collapsible-content { overflow: hidden; transition: max-height 0.35s ease, opacity 0.2s ease; } .v5-collapsible-content.collapsed { max-height: 0; opacity: 0; } .v5-collapsible-content.expanded { max-height: 2000px; opacity: 1; } /* ============================================ v5.1 新增：数据对比视图（before/after） ============================================ */ .v5-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .v5-compare-col { padding: 16px; border-radius: 8px; background: var(--v5-bg); } .v5-compare-col .col-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--v5-text-muted); margin-bottom: 12px; } .v5-compare-col .col-value { font-size: 1.25rem; font-weight: 700; color: var(--v5-text); } .v5-compare-col.before .col-value { color: var(--v5-text-secondary); } .v5-compare-col.after .col-value { color: var(--v5-danger); } .v5-compare-col.after.safe .col-value { color: var(--v5-success); } /* ============================================ v5.1 新增：工具栏操作区 ============================================ */ .v5-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .v5-toolbar-left, .v5-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ============================================ v5.1 新增：表格排序指示器 ============================================ */ .v5-sortable { cursor: pointer; user-select: none; } .v5-sortable:hover { color: var(--v5-primary-light); } .v5-sort-indicator { display: inline-block; margin-left: 4px; font-size: 0.65rem; color: var(--v5-text-muted); } .v5-sortable.asc .v5-sort-indicator::after { content: "▲"; color: var(--v5-primary-light); } .v5-sortable.desc .v5-sort-indicator::after { content: "▼"; color: var(--v5-primary-light); } /* ============================================ v5.1 新增：搜索框 ============================================ */ .v5-search-box { position: relative; } .v5-search-box input { padding: 8px 14px 8px 36px; border: 1px solid var(--v5-border); border-radius: 8px; background: var(--v5-card-bg); font-size: 0.875rem; color: var(--v5-text); width: 220px; transition: all 0.2s ease; } .v5-search-box input:focus { outline: none; border-color: var(--v5-primary-light); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); width: 280px; } .v5-search-box::before { content: "🔍"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.8rem; pointer-events: none; } @media (max-width: 768px) { .v5-compare-grid { grid-template-columns: 1fr; } .v5-search-box input { width: 160px; } .v5-search-box input:focus { width: 200px; } } /* ====== 卡片最大化/最小化 ====== */ .card{position:relative} .card .card-zoom-btn{position:absolute;top:8px;right:8px;z-index:10;background:#111827;border:1px solid #1a2332;border-radius:6px;color:#8a8270;cursor:pointer;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s;opacity:0;line-height:1} .card:hover .card-zoom-btn{opacity:1} .card-zoom-btn:hover{color:#c8a84e;border-color:#c8a84e} .card.maximized{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:1000000!important;border-radius:0!important;margin:0!important;padding:24px!important;overflow:auto!important;background:#0d1f35!important} .card.maximized .card-zoom-btn{opacity:1}