diff --git a/frontend/paper-trading.html b/frontend/paper-trading.html index 724fbcf..773ae74 100644 --- a/frontend/paper-trading.html +++ b/frontend/paper-trading.html @@ -301,6 +301,52 @@ color: #ff4444; } + /* 核心指标网格 - 突出显示 */ + .core-metrics-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + margin-bottom: 30px; + } + + .core-metric-card { + background: var(--bg-secondary); + border: 2px solid var(--border); + border-radius: 12px; + padding: 24px 20px; + text-align: center; + transition: all 0.3s ease; + } + + .core-metric-card:hover { + border-color: var(--accent); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(0, 255, 65, 0.15); + } + + .core-metric-label { + font-size: 13px; + color: var(--text-secondary); + margin-bottom: 12px; + text-transform: uppercase; + letter-spacing: 1px; + } + + .core-metric-value { + font-size: 32px; + font-weight: 700; + font-feature-settings: 'tnum'; + font-variant-numeric: tabular-nums; + } + + .core-metric-value.positive { + color: var(--accent); + } + + .core-metric-value.negative { + color: #ff4444; + } + /* 按等级统计 - 优化样式 */ .grade-stats { display: grid; @@ -698,6 +744,15 @@ min-width: calc(50% - 8px); } + .core-metrics-grid { + grid-template-columns: repeat(2, 1fr); + gap: 12px; + } + + .core-metric-value { + font-size: 24px; + } + .grade-stats { grid-template-columns: 1fr; } @@ -1322,11 +1377,35 @@