style(admin): 优化分账订单统计卡片样式

- 调整统计项布局间距和对齐方式
- 增加统计项悬停动画效果
- 为不同统计项添加渐变背景色
- 统一数值和标签文字颜色及阴影效果
- 卡片整体增加圆角和阴影提升视觉层次
- 移除旧的颜色分类样式，统一为白色背景
- 增强统计项的视觉反馈和交互体验

resource/admin/ProfitShareOrder.vue

@@ -31,35 +31,35 @@
 
     <!-- 统计数据 -->
     <el-card class="stats-card" v-if="statsData">
-      <el-row justify="space-between">
-        <el-col  :span="4">
-          <div class="stat-item">
+      <el-row :gutter="20" justify="space-between">
+        <el-col :span="4">
+          <div class="stat-item total">
             <div class="stat-label">总分账金额</div>
             <div class="stat-value">¥{{ formatAmountToYuan(statsData.total_amount) }}</div>
           </div>
         </el-col>
-        <el-col  :span="4">
-          <div class="stat-item">
+        <el-col :span="4">
+          <div class="stat-item merchant">
             <div class="stat-label">商户最低分账</div>
-            <div class="stat-value merchant">¥{{ formatAmountToYuan(statsData.merchant_total_amount) }}</div>
+            <div class="stat-value">¥{{ formatAmountToYuan(statsData.merchant_total_amount) }}</div>
           </div>
         </el-col>
-        <el-col  :span="4">
-          <div class="stat-item">
+        <el-col :span="4">
+          <div class="stat-item balance">
             <div class="stat-label">分账账户余额</div>
-            <div class="stat-value merchant">¥{{statsData.profit_share_balance}}</div>
+            <div class="stat-value">¥{{statsData.profit_share_balance}}</div>
           </div>
         </el-col>
-        <el-col  :span="4">
-          <div class="stat-item">
+        <el-col :span="4">
+          <div class="stat-item user">
             <div class="stat-label">用户成功分账</div>
-            <div class="stat-value user">¥{{ formatAmountToYuan(statsData.user_total_amount) }}</div>
+            <div class="stat-value">¥{{ formatAmountToYuan(statsData.user_total_amount) }}</div>
           </div>
         </el-col>
-        <el-col  :span="4">
-          <div class="stat-item">
+        <el-col :span="4">
+          <div class="stat-item pending">
             <div class="stat-label">用户待分账</div>
-            <div class="stat-value pending">¥{{ formatAmountToYuan(statsData.user_pending_amount) }}</div>
+            <div class="stat-value">¥{{ formatAmountToYuan(statsData.user_pending_amount) }}</div>
           </div>
         </el-col>
       </el-row>
@@ -564,8 +564,11 @@ export default {
 
 .stats-card {
   margin-bottom: 20px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  background: linear-gradient(120deg, #f8f9fa 0%, #e9ecef 100%) !important;
+  border: none;
+  overflow: hidden;
 }
 
 .stat-item {
@@ -573,32 +576,52 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 20px 0;
+  padding: 25px 10px;
   text-align: center;
+  border-radius: 10px;
+  transition: all 0.3s ease;
+  background: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
-.stat-label {
-  font-size: 14px;
-  color: #606266;
-  margin-bottom: 8px;
+.stat-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
-.stat-value {
-  font-size: 20px;
-  font-weight: 600;
-  color: #303133;
+.stat-item.total {
+  background: linear-gradient(135deg, #8eefe8 0%, #4db6ac 100%) !important;
 }
 
-.stat-value.merchant {
-  color: #409eff;
+.stat-item.merchant {
+  background: linear-gradient(135deg, #a8d8ff 0%, #4da6ff 100%) !important;
 }
 
-.stat-value.user {
-  color: #67c23a;
+.stat-item.balance {
+  background: linear-gradient(135deg, #c1bfff 0%, #7e5bff 100%) !important;
+}
+
+.stat-item.user {
+  background: linear-gradient(135deg, #bafca2 0%, #6fd649 100%) !important;
 }
 
-.stat-value.pending {
-  color: #e6a23c;
+.stat-item.pending {
+  background: linear-gradient(135deg, #ffd54f 0%, #ffb300 100%) !important;
+}
+
+.stat-label {
+  font-size: 16px;
+  font-weight: 500;
+  color: #ffffff !important;
+  margin-bottom: 10px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.stat-value {
+  font-size: 22px;
+  font-weight: 700;
+  color: #ffffff !important;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .table-card {