style(index): 美化统计卡片样式并添加悬停效果- 为统计卡片添加鼠标悬停时的背景色变化

- 添加平滑过渡动画和阴影效果
- 设置不同统计项数值的颜色区分
-优化卡片整体视觉层次感
- 提升用户交互体验的视觉反馈

src/views/index.vue

@@ -366,6 +366,14 @@ const navigateToStaticTop = (cardType: string) => {
   border-radius: 8px;
   padding: 20px;
   text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: #e6f7ff;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
 
   .card-header {
     font-size: 14px;
@@ -380,6 +388,27 @@ const navigateToStaticTop = (cardType: string) => {
   }
 }
 
+/* 为不同类型的统计数字设置不同颜色 */
+.stat-card:nth-child(1) .card-value { /* 比赛场次 */
+  color: #409eff; /* 蓝色 */
+}
+
+.stat-card:nth-child(2) .card-value { /* 充值数 */
+  color: #67c23a; /* 绿色 */
+}
+
+.stat-card:nth-child(3) .card-value { /* 充值金额 */
+  color: #e6a23c; /* 橙色 */
+}
+
+.stat-card:nth-child(4) .card-value { /* 三湘杯参赛资格发放数 */
+  color: #f56c6c; /* 红色 */
+}
+
+.stat-card:nth-child(5) .card-value { /* 三湘杯参赛资格核销数 */
+  color: #909399; /* 灰色 */
+}
+
 .chart-container {
   background: #f5f5f5;
   border-radius: 8px;