1

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;
+            border-radius: 8px;
-            padding: 16px;
+            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-size: 15px;
-            font-weight: 500;
+            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 {