diff --git a/frontend/paper-trading.html b/frontend/paper-trading.html index 68fbf56..61487f8 100644 --- a/frontend/paper-trading.html +++ b/frontend/paper-trading.html @@ -126,11 +126,26 @@ } .stat-value.positive { - color: #00ff41; + color: #10b981; } .stat-value.negative { - color: #ff4444; + color: #ef4444; + } + + /* 统计卡片内的正值/负值样式 */ + .grade-card-stats .positive { + color: #10b981; + background: rgba(16, 185, 129, 0.1); + padding: 2px 8px; + border-radius: 4px; + } + + .grade-card-stats .negative { + color: #ef4444; + background: rgba(239, 68, 68, 0.1); + padding: 2px 8px; + border-radius: 4px; } /* 标签页 */ @@ -286,10 +301,10 @@ color: #ff4444; } - /* 按等级统计 */ + /* 按等级统计 - 优化样式 */ .grade-stats { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 30px; } @@ -297,36 +312,101 @@ .grade-card { background: var(--bg-secondary); border: 1px solid var(--border); - border-radius: 4px; - padding: 16px; + border-radius: 8px; + padding: 20px; + transition: all 0.2s ease; + } + + .grade-card:hover { + border-color: var(--accent); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .grade-card-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 12px; + margin-bottom: 16px; + padding-bottom: 12px; + border-bottom: 1px solid var(--border); } .grade-card-title { - font-size: 16px; - font-weight: 500; + font-size: 15px; + font-weight: 600; + color: var(--text-primary); + text-transform: uppercase; + letter-spacing: 0.5px; + } + + /* 为不同类型的卡片添加颜色标识 */ + .grade-card:nth-child(1) .grade-card-title { + color: #60a5fa; /* 蓝色 - 交易统计 */ + } + .grade-card:nth-child(2) .grade-card-title { + color: #34d399; /* 绿色 - 盈亏指标 */ + } + .grade-card:nth-child(3) .grade-card-title { + color: #f87171; /* 红色 - 风险指标 */ + } + .grade-card:nth-child(4) .grade-card-title { + color: #fbbf24; /* 黄色 - 收益统计 */ } .grade-card-stats { display: flex; flex-direction: column; - gap: 8px; + gap: 12px; } .grade-stat-row { display: flex; justify-content: space-between; + align-items: center; font-size: 14px; + padding: 4px 0; } .grade-stat-label { color: var(--text-secondary); + font-size: 13px; + } + + /* 数字突出显示 */ + .grade-card-stats span:not(.grade-stat-label) { + font-weight: 600; + font-size: 15px; + font-feature-settings: 'tnum'; + font-variant-numeric: tabular-nums; + } + + /* 添加统计卡片顶部指示条 */ + .grade-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + border-radius: 8px 8px 0 0; + opacity: 0.8; + } + + .grade-card { + position: relative; + } + + .grade-card:nth-child(1)::before { + background: linear-gradient(90deg, #60a5fa, #3b82f6); + } + .grade-card:nth-child(2)::before { + background: linear-gradient(90deg, #34d399, #10b981); + } + .grade-card:nth-child(3)::before { + background: linear-gradient(90deg, #f87171, #ef4444); + } + .grade-card:nth-child(4)::before { + background: linear-gradient(90deg, #fbbf24, #f59e0b); } /* 空状态 */ @@ -2270,7 +2350,7 @@ watch: { // 监听标签页切换,加载收益率数据并渲染图表 activeTab(newTab) { - if (newTab === 'returns') { + if (newTab === 'stats') { if (this.dailyReturns.length === 0) { this.fetchDailyReturns(); } else {