From 6231c2494fc50a06cfc27c8119dd5b3c2229b340 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Thu, 13 Nov 2025 00:01:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=9F=E8=AE=A1=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E7=BB=9F=E4=B8=80ui=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=AE=8C=E5=96=84=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.vue                           |  11 +-
 src/pages/mine.vue                            | 418 ++++++++++++++----
 .../accounts/accountDealAnalysis/index.vue    | 132 ++++--
 .../accounts/accountsBalance/index.vue        | 172 ++++---
 .../accounts/creditCardDealAnalysis/index.vue | 141 ++++--
 .../accounts/dailyExpensesAnalysis/index.vue  | 157 ++++---
 .../accounts/debitCardAnalysis/index.vue      | 173 +++++---
 .../accounts/debitDealAnalysis/index.vue      | 141 ++++--
 .../accounts/investDealAnalysis/index.vue     | 124 ++++--
 .../accounts/openCardStatics/index.vue        | 113 +++--
 .../statistic/accounts/posStatics/index.vue   | 177 +++++---
 .../bill/creditBillAnalysis/index.vue         | 120 +++--
 .../bill/creditInstallmentAnalysis/index.vue  | 124 ++++--
 .../index.vue                                 | 108 +++--
 .../bill/creditRecordAnalysis/index.vue       | 133 ++++--
 .../statistic/bill/futuresAnalysis/index.vue  | 109 +++--
 .../statistic/bill/investAnalysis/index.vue   | 113 +++--
 .../bill/onlineLendAnalysis/index.vue         | 124 ++++--
 .../bill/onlineLendSettledAnalysis/index.vue  | 108 +++--
 .../statistic/bill/stocksAnalysis/index.vue   | 109 +++--
 src/store/modules/user.ts                     |   3 +
 21 files changed, 1917 insertions(+), 893 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 904cf0c..3f25b6a 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -15,7 +15,7 @@
         </view>
         <div class="info-sum">
           <div class="title">净资产</div>
-          <div class="num">{{ (parseFloat(debitTotalBalance)+parseFloat(investBalance)-parseFloat(unClearedOnlineDebt)-parseFloat(creditBalance)- parseFloat(peopleLendHistory)).toFixed(2) }}<span>元</span></div>
+          <div class="num">{{ ((parseFloat(debitTotalBalance)+parseFloat(investBalance)-parseFloat(unClearedOnlineDebt)-parseFloat(creditBalance)- parseFloat(peopleLendHistory)).toFixed(2) * 1).toFixed(2) }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
@@ -24,7 +24,7 @@
         </view>
         <div class="info-sum">
           <div class="title">总负债</div>
-          <div class="num">{{ (parseFloat(unClearedOnlineDebt)+ parseFloat(creditBalance)+ parseFloat(peopleLendHistory)).toFixed(2)}}<span>元</span></div>
+          <div class="num">{{ ((parseFloat(unClearedOnlineDebt)+ parseFloat(creditBalance)+ parseFloat(peopleLendHistory)).toFixed(2) * 1).toFixed(2)}}<span>元</span></div>
         </div>
       </div>
     </div>
@@ -35,7 +35,7 @@
         </view>
         <div class="info-sum">
           <div class="title">人情欠款</div>
-          <div class="num">{{ peopleLendHistory  }}<span>元</span></div>
+          <div class="num">{{ (parseFloat(peopleLendHistory) || 0) === 0 ? '0.00' : peopleLendHistory }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
@@ -504,7 +504,7 @@
         </view>
         <div class="info-sum">
           <div class="title">人情欠款</div>
-          <div class="num">{{ peopleLendHistory }}<span>元</span></div>
+          <div class="num">{{ (parseFloat(peopleLendHistory) || 0) === 0 ? '0.00' : peopleLendHistory }}<span>元</span></div>
         </div>
       </div>
     </div>
@@ -750,7 +750,7 @@
     <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
       <div class="item">
         <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
-          <uni-icons type="checkmark" size="20" color="#ffffff"></uni-icons>
+          <uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
           <div class="title">本月投资盈利</div>
@@ -1148,6 +1148,7 @@ onMounted(() => {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       border-radius: 3rpx;
       margin-right: 12rpx;
+      flex-shrink: 0;
     }
     
     .title-text {
diff --git a/src/pages/mine.vue b/src/pages/mine.vue
index 675f332..9061fed 100644
--- a/src/pages/mine.vue
+++ b/src/pages/mine.vue
@@ -2,72 +2,107 @@
   <view class="mine-container" :style="{ height: `${windowHeight}px` }">
     <!--顶部个人信息栏-->
     <view class="header-section">
-      <view class="flex padding justify-between">
-        <view class="flex align-center">
-          <view v-if="!avatar" class="cu-avatar xl round bg-white">
-            <view class="iconfont icon-people text-gray icon"></view>
-          </view>
-          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
-          </image>
-          <view v-if="!name" @click="handleToLogin" class="login-tip">
-            点击登录
-          </view>
-          <view v-if="name" @click="handleToInfo" class="user-info">
-            <view class="u_title">
-              用户名：{{ name }}
+      <view class="header-content">
+        <view class="user-section">
+          <view class="avatar-wrapper" @click="handleToAvatar">
+            <view v-if="!avatar" class="avatar-placeholder">
+              <uni-icons type="person-filled" size="40" color="#ffffff"></uni-icons>
             </view>
+            <image v-if="avatar" :src="avatar" class="user-avatar" mode="aspectFill"></image>
+            <view class="avatar-badge"></view>
+          </view>
+          <view class="user-details">
+            <view v-if="!name" @click="handleToLogin" class="login-prompt">
+              <text class="login-text">点击登录</text>
+              <uni-icons type="right" size="16" color="#ffffff"></uni-icons>
+            </view>
+            <view v-if="name" class="user-name-section">
+              <text class="user-name">{{ name }}</text>
+              <view class="user-tag">会员</view>
+            </view>
+            <view v-if="name" class="user-id">ID: {{ userId }}</view>
           </view>
         </view>
-        <view @click="handleToInfo" class="flex align-center">
-          <text>个人信息</text>
-          <view class="iconfont icon-right"></view>
+        <view @click="handleToInfo" class="settings-btn">
+          <uni-icons type="gear-filled" size="24" color="#ffffff"></uni-icons>
         </view>
       </view>
     </view>
 
     <view class="content-section">
-      <view class="mine-actions grid col-4 text-center">
-        <view class="action-item" @click="handleJiaoLiuQun">
-          <view class="iconfont icon-friendfill text-pink icon"></view>
-          <text class="text">官方公众号</text>
+      <view class="quick-actions">
+        <view class="action-card" @click="handleJiaoLiuQun">
+          <view class="action-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+            <uni-icons type="chat-filled" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <text class="action-text">官方公众号</text>
         </view>
-        <view class="action-item" @click="handleService">
-          <view class="iconfont icon-service text-blue icon"></view>
-          <text class="text">在线客服</text>
+        <view class="action-card" @click="handleService">
+          <view class="action-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+            <uni-icons type="email-filled" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <text class="action-text">在线客服</text>
         </view>
-        <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-community text-mauve icon"></view>
-          <text class="text">反馈社区</text>
+        <view class="action-card" @click="handleBuilding">
+          <view class="action-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+            <uni-icons type="chatbubble-filled" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <text class="action-text">反馈社区</text>
         </view>
-        <view class="action-item" @click="handleUs">
-          <view class="iconfont icon-dianzan text-green icon"></view>
-          <text class="text">点赞我们</text>
+        <view class="action-card" @click="handleUs">
+          <view class="action-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+            <uni-icons type="heart-filled" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <text class="action-text">点赞我们</text>
         </view>
       </view>
 
-      <view class="menu-list">
-        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
-          <view class="menu-item-box">
-            <view class="iconfont icon-user menu-icon"></view>
-            <view>编辑资料</view>
+      <view class="menu-section">
+        <view class="section-title">账户管理</view>
+        <view class="menu-card">
+          <view class="menu-item" @click="handleToEditInfo">
+            <view class="item-left">
+              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+                <uni-icons type="person" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="menu-text">编辑资料</text>
+            </view>
+            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
+          </view>
+          <view class="menu-divider"></view>
+          <view class="menu-item" @click="handleToSetting">
+            <view class="item-left">
+              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+                <uni-icons type="gear" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="menu-text">应用设置</text>
+            </view>
+            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
           </view>
         </view>
-        <view class="list-cell list-cell-arrow" @click="handleHelp">
-          <view class="menu-item-box">
-            <view class="iconfont icon-help menu-icon"></view>
-            <view>常见问题</view>
+      </view>
+
+      <view class="menu-section">
+        <view class="section-title">帮助与支持</view>
+        <view class="menu-card">
+          <view class="menu-item" @click="handleHelp">
+            <view class="item-left">
+              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+                <uni-icons type="help" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="menu-text">常见问题</text>
+            </view>
+            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
           </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleAbout">
-          <view class="menu-item-box">
-            <view class="iconfont icon-aixin menu-icon"></view>
-            <view>关于我们</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleToSetting">
-          <view class="menu-item-box">
-            <view class="iconfont icon-setting menu-icon"></view>
-            <view>应用设置</view>
+          <view class="menu-divider"></view>
+          <view class="menu-item" @click="handleAbout">
+            <view class="item-left">
+              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+                <uni-icons type="info" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="menu-text">关于我们</text>
+            </view>
+            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
           </view>
         </view>
       </view>
@@ -86,20 +121,24 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import config from '@/config.js'
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore()
 const name = userStore.name;
+const userId = computed(() => userStore.userId || '');
 const version = config.appInfo.version;
+const baseUrl = config.baseUrl;
 
-const avatar = ref(window.location.protocol + '//' + window.location.hostname + ':' + window.location.port+userStore.avatar);
+const avatar = computed(() => {
+  if (!userStore.avatar) return '';
+  // 如果头像路径已经是完整URL，直接返回
+  if (userStore.avatar.startsWith('http')) return userStore.avatar;
+  // 否则拼接baseUrl
+  return baseUrl + userStore.avatar;
+});
 const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
 const popup = ref(null);
-
-uni.$on('refresh', () => {
-  avatar.value = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port+userStore.avatar;
-})
 function handleToInfo() {
   uni.navigateTo({
     url: '/pages_mine/pages/info/index'
@@ -186,64 +225,255 @@ function handleUs() {
 
 <style lang="scss">
 page {
-  background-color: #f5f6f7;
+  background-color: #f5f7fa;
 }
 
 .mine-container {
   width: 100%;
-  height: 100%;
-
+  min-height: 100vh;
+  background-color: #f5f7fa;
 
   .header-section {
-    padding: 15px 15px 45px 15px;
-    background-color: #3c96f3;
-    color: white;
-
-    .login-tip {
-      font-size: 18px;
-      margin-left: 10px;
+    padding: 60rpx 32rpx 120rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    position: relative;
+    overflow: hidden;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      right: -20%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+      animation: pulse 15s infinite;
     }
-
-    .cu-avatar {
-      border: 2px solid #eaeaea;
-
-      .icon {
-        font-size: 40px;
+    
+    .header-content {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      
+      .user-section {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        
+        .avatar-wrapper {
+          position: relative;
+          margin-right: 24rpx;
+          
+          .avatar-placeholder {
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 60rpx;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
+            border: 4rpx solid rgba(255, 255, 255, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+          }
+          
+          .user-avatar {
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 60rpx;
+            border: 4rpx solid rgba(255, 255, 255, 0.5);
+            box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+          }
+          
+          .avatar-badge {
+            position: absolute;
+            bottom: 4rpx;
+            right: 4rpx;
+            width: 24rpx;
+            height: 24rpx;
+            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+            border-radius: 12rpx;
+            border: 3rpx solid #ffffff;
+          }
+        }
+        
+        .user-details {
+          flex: 1;
+          
+          .login-prompt {
+            display: flex;
+            align-items: center;
+            padding: 16rpx 24rpx;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 40rpx;
+            backdrop-filter: blur(10rpx);
+            
+            .login-text {
+              color: #ffffff;
+              font-size: 28rpx;
+              margin-right: 8rpx;
+            }
+          }
+          
+          .user-name-section {
+            display: flex;
+            align-items: center;
+            margin-bottom: 12rpx;
+            
+            .user-name {
+              color: #ffffff;
+              font-size: 36rpx;
+              font-weight: 600;
+              margin-right: 12rpx;
+            }
+            
+            .user-tag {
+              padding: 4rpx 16rpx;
+              background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
+              border-radius: 20rpx;
+              color: #ffffff;
+              font-size: 20rpx;
+            }
+          }
+          
+          .user-id {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 24rpx;
+          }
+        }
       }
-    }
-
-    .user-info {
-      margin-left: 15px;
-
-      .u_title {
-        font-size: 18px;
-        line-height: 30px;
+      
+      .settings-btn {
+        padding: 16rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 50%;
+        backdrop-filter: blur(10rpx);
       }
     }
   }
 
   .content-section {
+    margin-top: -80rpx;
+    padding: 0 32rpx 32rpx;
     position: relative;
-    top: -50px;
+    z-index: 2;
 
-    .mine-actions {
-      margin: 15px 15px;
-      padding: 20px 0px;
-      border-radius: 8px;
-      background-color: white;
-
-      .action-item {
-        .icon {
-          font-size: 28px;
+    .quick-actions {
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      border-radius: 24rpx;
+      padding: 32rpx 24rpx;
+      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+      display: flex;
+      justify-content: space-around;
+      margin-bottom: 32rpx;
+      
+      .action-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        
+        .action-icon {
+          width: 96rpx;
+          height: 96rpx;
+          border-radius: 24rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 16rpx;
+          box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.12);
+          transition: all 0.3s ease;
+          
+          &:active {
+            transform: scale(0.95);
+          }
         }
-
-        .text {
-          display: block;
-          font-size: 13px;
-          margin: 8px 0px;
+        
+        .action-text {
+          color: #2c3e50;
+          font-size: 24rpx;
+        }
+      }
+    }
+    
+    .menu-section {
+      margin-bottom: 32rpx;
+      
+      .section-title {
+        color: #7f8c8d;
+        font-size: 28rpx;
+        padding: 0 0 20rpx 0;
+        margin-left: 16rpx;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 28rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
+        }
+      }
+      
+      .menu-card {
+        background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+        border-radius: 24rpx;
+        overflow: hidden;
+        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+        
+        .menu-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 32rpx 24rpx;
+          transition: background-color 0.3s ease;
+          
+          &:active {
+            background-color: rgba(0, 0, 0, 0.02);
+          }
+          
+          .item-left {
+            display: flex;
+            align-items: center;
+            
+            .menu-icon-wrapper {
+              width: 64rpx;
+              height: 64rpx;
+              border-radius: 16rpx;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-right: 24rpx;
+              box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+            }
+            
+            .menu-text {
+              color: #2c3e50;
+              font-size: 28rpx;
+            }
+          }
+        }
+        
+        .menu-divider {
+          height: 1rpx;
+          background-color: #e8edf3;
+          margin: 0 24rpx;
         }
       }
     }
   }
 }
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    transform: scale(1.1) rotate(180deg);
+  }
+}
 </style>
diff --git a/src/pages/statistic/accounts/accountDealAnalysis/index.vue b/src/pages/statistic/accounts/accountDealAnalysis/index.vue
index 65cfda7..ccd2288 100644
--- a/src/pages/statistic/accounts/accountDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/accountDealAnalysis/index.vue
@@ -57,17 +57,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">收支差额</div>
           <div class="num">{{ account.balance }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">工资收益</div>
           <div class="num">{{  account.salaryIncome }}<span>元</span></div>
@@ -76,14 +80,18 @@
     </div>
     <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">投资盈利</div>
           <div class="num">{{ account.investIncome}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="arrow-down" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">投资亏损</div>
           <div class="num">{{ account.investOutcome }}<span>元</span></div>
@@ -92,14 +100,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">支出总额</div>
           <div class="num">{{ account.totalOutcome}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">日常支出</div>
           <div class="num">{{  account.dailyExpenses }}<span>元</span></div>
@@ -108,14 +120,18 @@
     </div>
     <div class="header-con" v-show="auth.hasPermi('invest:creditCard','invest:posmachine:list','invest:onlineLend')" ref="searchHeightRef">
       <div class="item" v-show="auth.hasPermi('invest:creditCard','invest:posmachine:list','invest:onlineLend')">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">手续费利息合计</div>
           <div class="num">{{ account.notDailyExpenses}}<span>元</span></div>
         </div>
       </div>
       <div class="item" v-show="auth.hasPermi('invest:creditCard')">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">信用卡分期利息</div>
           <div class="num">{{ account.creditInterest}}<span>元</span></div>
@@ -125,14 +141,18 @@
     </div>
     <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list','invest:onlineLend')" ref="searchHeightRef">
       <div class="item" v-show="auth.hasPermi('invest:posmachine:list')">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
+          <uni-icons type="shop-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">POS机手续费</div>
           <div class="num">{{ account.posExpenses }}<span>元</span></div>
         </div>
       </div>
       <div class="item" v-show="auth.hasPermi('invest:onlineLend')">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="upload-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">贷款利息</div>
           <div class="num">{{  account.onLineInterest }}<span>元</span></div>
@@ -289,47 +309,73 @@ function searchSubmit() {
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 8rpx 16rpx;
+    background-color: transparent;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
+    padding: 0;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/accounts/accountsBalance/index.vue b/src/pages/statistic/accounts/accountsBalance/index.vue
index 63015cd..a2cdb39 100644
--- a/src/pages/statistic/accounts/accountsBalance/index.vue
+++ b/src/pages/statistic/accounts/accountsBalance/index.vue
@@ -7,68 +7,81 @@
           </u-input>
         </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">储蓄账户余额</div>
           <div class="num">{{ accountsBalance.debitAllBalance }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">储蓄卡余额</div>
           <div class="num">{{ accountsBalance.debitBalance }}<span>元</span></div>
         </div>
       </div>
-
     </div>
           <div class="header-con" ref="searchHeightRef">
             <div class="item">
-              <img src="@/static/images/one.png" alt="" />
+              <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
               <div class="info-sum">
                 <div class="title">I类储蓄卡余额</div>
                 <div class="num">{{ accountsBalance.idebitBalance }}<span>元</span></div>
               </div>
             </div>
             <div class="item">
-              <img src="@/static/images/ticketSum.png" alt="" />
+              <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+                <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+              </view>
               <div class="info-sum">
                 <div class="title">II类储蓄卡余额</div>
                 <div class="num">{{ accountsBalance.iidebitBalance }}<span>元</span></div>
               </div>
             </div>
-
           </div>
           <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
-          
-            <div class="item" >
-              <img src="@/static/images/one.png" alt="" />
+            <div class="item">
+              <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+                <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
               <div class="info-sum">
                 <div class="title">信用卡可用额度</div>
                 <div class="num">{{ accountsBalance.creditAvailableLimit }}<span>元</span></div>
               </div>
             </div>
             <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">信用卡已用额度</div>
-          <div class="num">{{ accountsBalance.creditBalance }}<span>元</span></div>
-        </div>
-      </div>
+              <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <div class="info-sum">
+                <div class="title">信用卡已用额度</div>
+                <div class="num">{{ accountsBalance.creditBalance }}<span>元</span></div>
+              </div>
+            </div>
           </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-              <img src="@/static/images/one.png" alt="" />
-              <div class="info-sum">
-                <div class="title">借贷账户余额</div>
-                <div class="num">{{ accountsBalance.lendAccountBalance }}<span>元</span></div>
-              </div>
-            </div>
+        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">借贷账户余额</div>
+          <div class="num">{{ accountsBalance.lendAccountBalance }}<span>元</span></div>
+        </div>
+      </div>
       <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+          <uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">投资账户余额</div>
           <div class="num">{{ accountsBalance.investBalance }}<span>元</span></div>
@@ -77,14 +90,18 @@
     </div>
           <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
             <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
-              <img src="@/static/images/one.png" alt="" />
+              <view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
+                <uni-icons type="navigate" size="20" color="#ffffff"></uni-icons>
+              </view>
               <div class="info-sum">
                 <div class="title">期货账户余额</div>
                 <div class="num">{{ accountsBalance.futuresBalance }}<span>元</span></div>
               </div>
             </div>
             <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
-              <img src="@/static/images/ticketSum.png" alt="" />
+              <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+                <uni-icons type="flag" size="20" color="#ffffff"></uni-icons>
+              </view>
               <div class="info-sum">
                 <div class="title">股票账户余额</div>
                 <div class="num">{{ accountsBalance.stocksBalance }}<span>元</span></div>
@@ -259,59 +276,78 @@
   <style lang="scss" scoped>
 
 .app-container {
-
-/* 在App.vue的<style>中或者单独的style文件中 */
-.btn-normal {
-    background-color: #f0f0f0;
-    color: #333;
-}
-
-.btn-selected {
-    background-color: #007AFF;
-    color: #fff;
-}
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
 
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 8rpx 16rpx;
+    background-color: transparent;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
+    padding: 0;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:hover {
+        border-color: #d0d7de;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
+      }
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue b/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue
index e6ae47d..f23c2fe 100644
--- a/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue
@@ -65,17 +65,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">交易金额</div>
           <div class="num">{{ account.amount }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">收入金额</div>
           <div class="num">{{  account.income }}<span>元</span></div>
@@ -84,14 +88,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">支出金额</div>
           <div class="num">{{ account.expenses}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">收入笔数</div>
           <div class="num">{{ account.incomeCount }}<span>笔</span></div>
@@ -100,14 +108,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">支出笔数</div>
           <div class="num">{{ account.expensesCount}}<span>笔</span></div>
         </div>
       </div>
       <div class="item" v-show="auth.hasPermi('invest:posmachine:list')">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
+          <uni-icons type="gift" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">POS刷卡支出</div>
           <div class="num">{{  account.posExpenses }}<span>元</span></div>
@@ -116,14 +128,18 @@
     </div>
     <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
+          <uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">真实消费支出</div>
           <div class="num">{{ account.realExpenses}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+          <uni-icons type="reload" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">POS刷卡笔数</div>
           <div class="num">{{ account.posExpensesCount }}<span>笔</span></div>
@@ -132,14 +148,18 @@
     </div>
     <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
+          <uni-icons type="heart" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">真实消费笔数</div>
           <div class="num">{{ account.realExpensesCount}}<span>笔</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
+          <uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">其他支出笔数</div>
           <div class="num">{{  account.otherExpensesCount }}<span>笔</span></div>
@@ -344,47 +364,80 @@ function searchSubmit() {
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 8rpx 0;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 12rpx 16rpx;
+    background-color: transparent;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 24rpx 20rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+        flex-shrink: 0;
+      }
+      
+      img {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        margin-right: 16rpx;
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+          line-height: 1.4;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+            font-weight: normal;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue b/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
index 74cd815..a5619f3 100644
--- a/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
+++ b/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
@@ -65,17 +65,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
           <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">支出总额</div>
           <div class="num">{{ account.dailyExpenses }}<span>元</span></div>
         </div>
       </div>
       <div class="item" v-show="account.top1Name != null">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="star" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top1Name }}</div>
           <div class="num">{{ account.top1 }}<span>元</span></div>
@@ -84,14 +88,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top2Name != null">
       <div class="item" v-show="account.top2Name != null">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top2Name }}</div>
           <div class="num">{{ account.top2 }}<span>元</span></div>
         </div>
       </div>
       <div class="item" v-show="account.top3Name != null">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="cart" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top3Name }}</div>
           <div class="num">{{ account.top3 }}<span>元</span></div>
@@ -100,14 +108,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top4Name != null">
       <div class="item" v-show="account.top4Name != null">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+          <uni-icons type="home" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top4Name }}</div>
           <div class="num">{{ account.top4 }}<span>元</span></div>
         </div>
       </div>
       <div class="item" v-show="account.top5Name != null">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
+          <uni-icons type="gift" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top5Name }}</div>
           <div class="num">{{ account.top5 }}<span>元</span></div>
@@ -116,14 +128,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top6Name != null">
       <div class="item" v-show="account.top6Name != null">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
+          <uni-icons type="car" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top6Name }}</div>
           <div class="num">{{ account.top6 }}<span>元</span></div>
         </div>
       </div>
       <div class="item" v-show="account.top7Name != null">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+          <uni-icons type="heart" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top7Name }}</div>
           <div class="num">{{ account.top7 }}<span>元</span></div>
@@ -132,14 +148,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top8Name != null">
       <div class="item" v-show="account.top8Name != null">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
+          <uni-icons type="book" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top8Name }}</div>
           <div class="num">{{ account.top8 }}<span>元</span></div>
         </div>
       </div>
       <div class="item" v-show="account.top9Name != null">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
+          <uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top9Name }}</div>
           <div class="num">{{ account.top9 }}<span>元</span></div>
@@ -148,14 +168,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top10Name != null">
       <div class="item" v-show="account.top10Name != null">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="phone" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top10Name }}</div>
           <div class="num">{{ account.top10 }}<span>元</span></div>
         </div>
       </div>
       <div class="item" v-show="account.top11Name != null">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
+          <uni-icons type="bag" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top11Name }}</div>
           <div class="num">{{ account.top11 }}<span>元</span></div>
@@ -164,14 +188,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top12Name != null">
       <div class="item" v-show="account.top12Name != null">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #3b82f6 100%);">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top12Name }}</div>
           <div class="num">{{ account.top12 }}<span>元</span></div>
         </div>
       </div>
       <div class="item" v-show="account.top13Name != null">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #a445b2 0%, #d41872 100%);">
+          <uni-icons type="navigate" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top13Name }}</div>
           <div class="num">{{ account.top13 }}<span>元</span></div>
@@ -180,14 +208,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top14Name != null">
       <div class="item" v-show="account.top14Name != null">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f46b45 0%, #eea849 100%);">
+          <uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top14Name }}</div>
           <div class="num">{{ account.top14 }}<span>元</span></div>
         </div>
       </div>
       <div class="item" v-show="account.top15Name != null">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ account.top15Name }}</div>
           <div class="num">{{ account.top15 }}<span>元</span></div>
@@ -423,47 +455,72 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 8rpx 0;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 12rpx 16rpx;
+    background-color: transparent;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 24rpx 20rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+          line-height: 1.4;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+            font-weight: normal;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/accounts/debitCardAnalysis/index.vue b/src/pages/statistic/accounts/debitCardAnalysis/index.vue
index 527d485..640fcf2 100644
--- a/src/pages/statistic/accounts/debitCardAnalysis/index.vue
+++ b/src/pages/statistic/accounts/debitCardAnalysis/index.vue
@@ -1,16 +1,20 @@
 <template>
     <view class="container">
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">今日结算次数</div>
           <div class="num">{{ debitCardAnalysis.todayCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item" >
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">今日收款金额</div>
           <div class="num">{{ debitCardAnalysis.todayAmount }}<span>元</span></div>
@@ -19,14 +23,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近7日结算次数</div>
           <div class="num">{{ debitCardAnalysis.sevenDayCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item" >
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近7日收款金额</div>
           <div class="num">{{ debitCardAnalysis.sevenDayAmount }}<span>元</span></div>
@@ -35,14 +43,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近1月结算次数</div>
           <div class="num">{{ debitCardAnalysis.oneMonthCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item" >
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近1月收款金额</div>
           <div class="num">{{ debitCardAnalysis.oneMonthAmount }}<span>元</span></div>
@@ -51,14 +63,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近3月结算次数</div>
           <div class="num">{{ debitCardAnalysis.threeMonthCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item" >
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近3月收款金额</div>
           <div class="num">{{ debitCardAnalysis.threeMonthAmount }}<span>元</span></div>
@@ -67,14 +83,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近6月结算次数</div>
           <div class="num">{{ debitCardAnalysis.sixMonthCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item" >
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近6月收款金额</div>
           <div class="num">{{ debitCardAnalysis.sixMonthAmount }}<span>元</span></div>
@@ -83,14 +103,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近1年结算次数</div>
           <div class="num">{{ debitCardAnalysis.oneYearCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item" >
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #a445b2 0%, #d41872 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近1年收款金额</div>
           <div class="num">{{ debitCardAnalysis.oneYearAmount }}<span>元</span></div>
@@ -99,14 +123,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f46b45 0%, #eea849 100%);">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近2年结算次数</div>
           <div class="num">{{ debitCardAnalysis.twoYearCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item" >
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近2年收款金额</div>
           <div class="num">{{ debitCardAnalysis.twoYearAmount }}<span>元</span></div>
@@ -115,14 +143,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #ffeaa7 0%, #fd79a8 100%);">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近5年结算次数</div>
           <div class="num">{{ debitCardAnalysis.fiveYearCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item" >
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #3b82f6 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近5年收款金额</div>
           <div class="num">{{ debitCardAnalysis.fiveYearAmount }}<span>元</span></div>
@@ -131,14 +163,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
+          <uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">总结算次数</div>
           <div class="num">{{ debitCardAnalysis.totalCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item" >
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">总收款金额</div>
           <div class="num">{{ debitCardAnalysis.totalAmount }}<span>元</span></div>
@@ -339,47 +375,80 @@ const secondListData = ref([])
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 8rpx 0;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 12rpx 16rpx;
+    background-color: transparent;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 24rpx 20rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+        flex-shrink: 0;
+      }
+      
+      img {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        margin-right: 16rpx;
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+          line-height: 1.4;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+            font-weight: normal;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/accounts/debitDealAnalysis/index.vue b/src/pages/statistic/accounts/debitDealAnalysis/index.vue
index c358c6c..eb81d84 100644
--- a/src/pages/statistic/accounts/debitDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/debitDealAnalysis/index.vue
@@ -65,17 +65,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">交易金额</div>
           <div class="num">{{ account.amount }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">收入金额</div>
           <div class="num">{{  account.income }}<span>元</span></div>
@@ -84,14 +88,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">支出金额</div>
           <div class="num">{{ account.expenses}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">收入笔数</div>
           <div class="num">{{ account.incomeCount }}<span>笔</span></div>
@@ -100,14 +108,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">支出笔数</div>
           <div class="num">{{ account.expensesCount}}<span>笔</span></div>
         </div>
       </div>
       <div class="item" v-show="auth.hasPermi('invest:posmachine:list')">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
+          <uni-icons type="gift" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">POS刷卡收入</div>
           <div class="num">{{  account.posIncome }}<span>元</span></div>
@@ -116,14 +128,18 @@
     </div>
     <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
+          <uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">真实消费支出</div>
           <div class="num">{{ account.realExpenses}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+          <uni-icons type="reload" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">POS收入笔数</div>
           <div class="num">{{ account.posIncomeCount }}<span>笔</span></div>
@@ -132,14 +148,18 @@
     </div>
     <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
+          <uni-icons type="heart" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">真实消费支出笔数</div>
           <div class="num">{{ account.realExpensesCount}}<span>笔</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
+          <uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">支出笔数</div>
           <div class="num">{{  account.otherExpensesCount }}<span>笔</span></div>
@@ -339,47 +359,80 @@ function searchSubmit() {
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 8rpx 0;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 12rpx 16rpx;
+    background-color: transparent;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 24rpx 20rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+        flex-shrink: 0;
+      }
+      
+      img {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        margin-right: 16rpx;
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+          line-height: 1.4;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+            font-weight: normal;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/accounts/investDealAnalysis/index.vue b/src/pages/statistic/accounts/investDealAnalysis/index.vue
index 346ae48..617e26b 100644
--- a/src/pages/statistic/accounts/investDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/investDealAnalysis/index.vue
@@ -65,17 +65,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">收益金额</div>
           <div class="num">{{ account.amount }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">交易笔数</div>
           <div class="num">{{ account.expensesCount+account.incomeCount}}<span>笔</span></div>
@@ -84,14 +88,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="reload" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">交易次数</div>
           <div class="num">{{ account.count }}<span>次</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">平均收益</div>
           <div class="num">{{  account.average }}<span>元</span></div>
@@ -101,14 +109,18 @@
     <div class="header-con" ref="searchHeightRef">
 
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+          <uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">盈利金额</div>
           <div class="num">{{  account.income }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+          <uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">盈利笔数</div>
           <div class="num">{{ account.incomeCount }}<span>笔</span></div>
@@ -117,14 +129,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+          <uni-icons type="arrow-down" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">亏损金额</div>
           <div class="num">{{ account.expenses}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+          <uni-icons type="closeempty" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">亏损笔数</div>
           <div class="num">{{ account.expensesCount}}<span>笔</span></div>
@@ -332,47 +348,73 @@ function searchSubmit() {
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 8rpx 16rpx;
+    background-color: transparent;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
+    padding: 0;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/accounts/openCardStatics/index.vue b/src/pages/statistic/accounts/openCardStatics/index.vue
index ebe37aa..17782e3 100644
--- a/src/pages/statistic/accounts/openCardStatics/index.vue
+++ b/src/pages/statistic/accounts/openCardStatics/index.vue
@@ -57,18 +57,22 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
         
     <div class="header-con" v-show ="oneCount>0" ref="searchHeightRef">
       <div class="item"  v-show ="oneCount>0">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ oneName  }}</div>
           <div class="num">{{ oneCount }}<span>张</span></div>
         </div>
       </div>
       <div class="item" v-show ="twoCount>0">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{  twoName  }}</div>
           <div class="num">{{  twoCount }}<span>张</span></div>
@@ -77,14 +81,18 @@
     </div>
     <div class="header-con" v-show ="threeCount>0" ref="searchHeightRef">
       <div class="item"  v-show ="threeCount>0">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{threeName }}</div>
           <div class="num">{{ threeCount }}<span>张</span></div>
         </div>
       </div>
       <div class="item"   v-show ="fourCount>0">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ fourName  }}</div>
           <div class="num">{{ fourCount }}<span>张</span></div>
@@ -93,7 +101,9 @@
     </div>
     <div class="header-con" v-show ="fiveCount>0" ref="searchHeightRef">
       <div class="item" v-show ="fiveCount>0">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+          <uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">{{ fiveName  }}</div>
           <div class="num">{{ fiveCount }}<span>张</span></div>
@@ -260,47 +270,72 @@ function searchSubmit() {
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 8rpx 0;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 12rpx 16rpx;
+    background-color: transparent;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 24rpx 20rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+          line-height: 1.4;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+            font-weight: normal;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/accounts/posStatics/index.vue b/src/pages/statistic/accounts/posStatics/index.vue
index cf3cc8e..3c2a747 100644
--- a/src/pages/statistic/accounts/posStatics/index.vue
+++ b/src/pages/statistic/accounts/posStatics/index.vue
@@ -1,16 +1,20 @@
 <template>
   <view class="container">
-      <div class="app-container" style="overflow: auto">
+      <div class="app-container">
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <img src="@/static/images/one.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">今日交易次数</div>
         <div class="num">{{ debitCardAnalysis.todayCount }}<span>次</span></div>
       </div>
     </div>
     <div class="item" >
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">今日刷卡金额</div>
         <div class="num">{{ debitCardAnalysis.todayAmount }}<span>元</span></div>
@@ -19,14 +23,18 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <img src="@/static/images/one.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近7日交易次数</div>
         <div class="num">{{ debitCardAnalysis.sevenDayCount }}<span>次</span></div>
       </div>
     </div>
     <div class="item" >
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近7日刷卡金额</div>
         <div class="num">{{ debitCardAnalysis.sevenDayAmount }}<span>元</span></div>
@@ -35,14 +43,18 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <img src="@/static/images/one.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+        <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近1月交易次数</div>
         <div class="num">{{ debitCardAnalysis.oneMonthCount }}<span>次</span></div>
       </div>
     </div>
     <div class="item" >
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
+        <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近1月刷卡金额</div>
         <div class="num">{{ debitCardAnalysis.oneMonthAmount }}<span>元</span></div>
@@ -51,14 +63,18 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <img src="@/static/images/one.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
+        <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近3月交易次数</div>
         <div class="num">{{ debitCardAnalysis.threeMonthCount }}<span>次</span></div>
       </div>
     </div>
     <div class="item" >
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+        <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近3月刷卡金额</div>
         <div class="num">{{ debitCardAnalysis.threeMonthAmount }}<span>元</span></div>
@@ -67,14 +83,18 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <img src="@/static/images/one.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
+        <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近6月交易次数</div>
         <div class="num">{{ debitCardAnalysis.sixMonthCount }}<span>次</span></div>
       </div>
     </div>
     <div class="item" >
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
+        <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近6月刷卡金额</div>
         <div class="num">{{ debitCardAnalysis.sixMonthAmount }}<span>元</span></div>
@@ -83,14 +103,18 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <img src="@/static/images/one.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
+        <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近1年交易次数</div>
         <div class="num">{{ debitCardAnalysis.oneYearCount }}<span>次</span></div>
       </div>
     </div>
     <div class="item" >
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #a445b2 0%, #d41872 100%);">
+        <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近1年刷卡金额</div>
         <div class="num">{{ debitCardAnalysis.oneYearAmount }}<span>元</span></div>
@@ -99,14 +123,18 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <img src="@/static/images/one.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #f46b45 0%, #eea849 100%);">
+        <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近2年交易次数</div>
         <div class="num">{{ debitCardAnalysis.twoYearCount }}<span>次</span></div>
       </div>
     </div>
     <div class="item" >
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%);">
+        <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近2年刷卡金额</div>
         <div class="num">{{ debitCardAnalysis.twoYearAmount }}<span>元</span></div>
@@ -115,14 +143,18 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <img src="@/static/images/one.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #ffeaa7 0%, #fd79a8 100%);">
+        <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近5年交易次数</div>
         <div class="num">{{ debitCardAnalysis.fiveYearCount }}<span>次</span></div>
       </div>
     </div>
     <div class="item" >
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #3b82f6 100%);">
+        <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">近5年刷卡金额</div>
         <div class="num">{{ debitCardAnalysis.fiveYearAmount }}<span>元</span></div>
@@ -131,14 +163,18 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <img src="@/static/images/one.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
+        <uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">总交易次数</div>
         <div class="num">{{ debitCardAnalysis.totalCount }}<span>次</span></div>
       </div>
     </div>
     <div class="item" >
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+        <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">总刷卡金额</div>
         <div class="num">{{ debitCardAnalysis.totalAmount }}<span>元</span></div>
@@ -338,48 +374,73 @@ function settingCancel() {
 <style lang="scss" scoped>
 
 .app-container {
-.header-con {
-  width: 100%;
-  height: 100px;
-  background-color: #ffffff;
-  margin-bottom: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .item {
-    width: 50%;
-    height: 100%;
+  background-color: #f5f7fa;
+  padding: 8rpx 0;
+
+  .header-con {
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 12rpx 16rpx;
+    background-color: transparent;
     display: flex;
-    position: relative;
-    align-items: center;
-    margin: 5px 10px 5px 10px;
-    .title {
-      margin-left: 5px;
-      color: rgb(133, 133, 148);
-      margin-bottom: 5px;
-      font-size: 14px;
-    }
-    .num {
-      margin-left: 5px;
-      font-weight: bold;
-      font-size: 14px;
+    gap: 12rpx;
+    
+    .item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      padding: 24rpx 20rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      }
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+          line-height: 1.4;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+            font-weight: normal;
+          }
+        }
+      }
     }
   }
-  img {
-    height: 30px;
-    width: 30px;
-  }
-}
-.header-title {
-  width: 100%;
-  height: 30px;
-  background-color: #ffffff;
-  margin-bottom: 3px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 16px;
-}
 }
 .btnAdd {
       width: 146rpx;
diff --git a/src/pages/statistic/bill/creditBillAnalysis/index.vue b/src/pages/statistic/bill/creditBillAnalysis/index.vue
index e80bc3c..e127450 100644
--- a/src/pages/statistic/bill/creditBillAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditBillAnalysis/index.vue
@@ -65,17 +65,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">使用率</div>
           <div class="num">{{ creditObj.creditBillRate }}<span>%</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">总额度</div>
           <div class="num">{{  creditObj.creditLimit }}<span>元</span></div>
@@ -84,14 +88,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">已用额度</div>
           <div class="num">{{ creditObj.creditBalance}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">可用额度</div>
           <div class="num">{{ creditObj.creditAvailableLimit }}<span>元</span></div>
@@ -100,14 +108,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">信用卡总数</div>
           <div class="num">{{ creditObj.creditCardCount}}<span>张</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">月平均账单金额</div>
           <div class="num">{{ creditObj.averageCreditBill }}<span>元</span></div>
@@ -116,7 +128,9 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">累计账单金额</div>
           <div class="num">{{ creditObj.actualCreditBill}}<span>元</span></div>
@@ -313,47 +327,73 @@ const start = dayjs(end).add(-11, 'months')
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 8rpx 16rpx;
+    background-color: transparent;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
+    padding: 0;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue b/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
index 7624bb0..1af3816 100644
--- a/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
@@ -66,17 +66,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">未结清分期</div>
           <div class="num">{{ historyObj.unclearedDetailCount }}<span>笔</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">未结清（本息）</div>
           <div class="num">{{  historyObj.unClearedDetail }}<span>元</span></div>
@@ -85,14 +89,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">未结清本金</div>
           <div class="num">{{ historyObj.unClearedPrincipal }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">未结清利息</div>
           <div class="num">{{  historyObj.unClearedInterest }}<span>元</span></div>
@@ -101,14 +109,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+          <uni-icons type="upload-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">当期应还本息</div>
           <div class="num">{{ historyObj.dueDetail}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+          <uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">当期已还本息</div>
           <div class="num">{{ historyObj.repaidDetail }}<span>元</span></div>
@@ -117,14 +129,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+          <uni-icons type="loop" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">当期待还本息</div>
           <div class="num">{{ historyObj.leftDetail}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">当期利息</div>
           <div class="num">{{ historyObj.dueInterest }}<span>元</span></div>
@@ -328,47 +344,73 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 8rpx 16rpx;
+    background-color: transparent;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
+    padding: 0;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue b/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
index ea5f023..c74f6e0 100644
--- a/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
@@ -65,17 +65,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">已结清分期</div>
           <div class="num">{{ historyObj.clearedCount }}<span>笔</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">已结清（本息）</div>
           <div class="num">{{  historyObj.clearedTotal }}<span>元</span></div>
@@ -84,14 +88,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">已结清（本金）</div>
           <div class="num">{{ historyObj.clearedPrincipal}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">已结清利息</div>
           <div class="num">{{ historyObj.totalInterest }}<span>元</span></div>
@@ -289,47 +297,73 @@ const start = dayjs(end).add(-239, 'months')
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 8rpx 16rpx;
+    background-color: transparent;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
+    padding: 0;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/bill/creditRecordAnalysis/index.vue b/src/pages/statistic/bill/creditRecordAnalysis/index.vue
index e17d3fd..1c2a67e 100644
--- a/src/pages/statistic/bill/creditRecordAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditRecordAnalysis/index.vue
@@ -57,17 +57,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近1月硬查询</div>
           <div class="num">{{ creditRecord.lastOneMonths }}<span>次</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近2月硬查询</div>
           <div class="num">{{  creditRecord.lastTwoMonths }}<span>次</span></div>
@@ -76,14 +80,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近3月硬查询</div>
           <div class="num">{{ creditRecord.lastThreeMonths}}<span>次</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近6月硬查询</div>
           <div class="num">{{ creditRecord.lastSixMonths }}<span>次</span></div>
@@ -92,14 +100,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+          <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近1年硬查询</div>
           <div class="num">{{ creditRecord.lastOneYears}}<span>次</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+          <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近2年硬查询</div>
           <div class="num">{{  creditRecord.lastTwoYears }}<span>次</span></div>
@@ -108,14 +120,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+          <uni-icons type="person" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近6月个人查询</div>
           <div class="num">{{ creditRecord.lastSixMonthPersonalCount}}<span>次</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+          <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">个人查询总数</div>
           <div class="num">{{ creditRecord.totalPersonalCount }}<span>次</span></div>
@@ -124,14 +140,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">近2年贷后管理</div>
           <div class="num">{{ creditRecord.lastTwoYearsAfterLoan}}<span>次</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">贷后管理总数</div>
           <div class="num">{{  creditRecord.totalAfterLoan }}<span>次</span></div>
@@ -287,47 +307,72 @@ function searchSubmit() {
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 8rpx 0;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 12rpx 16rpx;
+    background-color: transparent;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 24rpx 20rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+          line-height: 1.4;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+            font-weight: normal;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/bill/futuresAnalysis/index.vue b/src/pages/statistic/bill/futuresAnalysis/index.vue
index 4533b96..56c0dee 100644
--- a/src/pages/statistic/bill/futuresAnalysis/index.vue
+++ b/src/pages/statistic/bill/futuresAnalysis/index.vue
@@ -65,17 +65,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">累计收益</div>
           <div class="num">{{ futuresStock.accumulateIncome }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">平均收益</div>
           <div class="num">{{  futuresStock.averageIncome }}<span>元</span></div>
@@ -84,14 +88,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">最大收益</div>
           <div class="num">{{ futuresStock.maxRevenue}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">最大亏损</div>
           <div class="num">{{ futuresStock.maxLoss }}<span>元</span></div>
@@ -290,47 +298,72 @@ const start = dayjs(end).add(-59, 'months')
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 8rpx 0;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 12rpx 16rpx;
+    background-color: transparent;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 24rpx 20rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+          line-height: 1.4;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+            font-weight: normal;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/bill/investAnalysis/index.vue b/src/pages/statistic/bill/investAnalysis/index.vue
index c12755a..44fe56a 100644
--- a/src/pages/statistic/bill/investAnalysis/index.vue
+++ b/src/pages/statistic/bill/investAnalysis/index.vue
@@ -57,17 +57,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">累计收益</div>
           <div class="num">{{ futuresStock.accumulateIncome }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="star" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">期货累计收益</div>
           <div class="num">{{  futuresStock.accumulateFutures }}<span>元</span></div>
@@ -76,14 +80,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">股票累计收益</div>
           <div class="num">{{ futuresStock.accumulateStocks}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">最大收益</div>
           <div class="num">{{ futuresStock.maxRevenue }}<span>元</span></div>
@@ -92,7 +100,9 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+          <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">最大亏损</div>
           <div class="num">{{ futuresStock.maxLoss}}<span>元</span></div>
@@ -289,47 +299,72 @@ const start = dayjs(end).add(-59, 'months')
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 8rpx 0;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 12rpx 16rpx;
+    background-color: transparent;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 24rpx 20rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+          line-height: 1.4;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+            font-weight: normal;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/bill/onlineLendAnalysis/index.vue b/src/pages/statistic/bill/onlineLendAnalysis/index.vue
index 1a1584e..6357ac2 100644
--- a/src/pages/statistic/bill/onlineLendAnalysis/index.vue
+++ b/src/pages/statistic/bill/onlineLendAnalysis/index.vue
@@ -66,17 +66,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="upload-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">未结清贷款</div>
           <div class="num">{{ historyObj.unclearedDetailCount }}<span>笔</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">未结清（本息）</div>
           <div class="num">{{  historyObj.unClearedDetail }}<span>元</span></div>
@@ -85,14 +89,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">未结清本金</div>
           <div class="num">{{ historyObj.unClearedPrincipal }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">未结清利息</div>
           <div class="num">{{  historyObj.unClearedInterest }}<span>元</span></div>
@@ -101,14 +109,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">当期应还本息</div>
           <div class="num">{{ historyObj.dueDetail}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+          <uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">当期已还本息</div>
           <div class="num">{{ historyObj.repaidDetail }}<span>元</span></div>
@@ -117,14 +129,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+          <uni-icons type="loop" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">当期待还本息</div>
           <div class="num">{{ historyObj.leftDetail}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">当期利息</div>
           <div class="num">{{ historyObj.dueInterest }}<span>元</span></div>
@@ -329,47 +345,73 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 8rpx 16rpx;
+    background-color: transparent;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
+    padding: 0;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue b/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
index 99abbe6..e3b197f 100644
--- a/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
+++ b/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
@@ -65,17 +65,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">已结清贷款</div>
           <div class="num">{{ historyObj.clearedCount }}<span>笔</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">已结清（本息）</div>
           <div class="num">{{  historyObj.clearedTotal }}<span>元</span></div>
@@ -84,14 +88,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">已结清（本金）</div>
           <div class="num">{{ historyObj.clearedPrincipal}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">已结清利息</div>
           <div class="num">{{ historyObj.totalInterest }}<span>元</span></div>
@@ -290,47 +298,73 @@ const start = dayjs(end).add(-239, 'months')
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 8rpx 16rpx;
+    background-color: transparent;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
+    padding: 0;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/pages/statistic/bill/stocksAnalysis/index.vue b/src/pages/statistic/bill/stocksAnalysis/index.vue
index 62e6c9a..4b89f15 100644
--- a/src/pages/statistic/bill/stocksAnalysis/index.vue
+++ b/src/pages/statistic/bill/stocksAnalysis/index.vue
@@ -65,17 +65,21 @@
         </u-transition>
       </view>
       </u-sticky>
-        <div class="app-container" style="overflow: auto">
+        <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">累计收益</div>
           <div class="num">{{ futuresStock.accumulateIncome }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">平均收益</div>
           <div class="num">{{  futuresStock.averageIncome }}<span>元</span></div>
@@ -84,14 +88,18 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="@/static/images/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">最大收益</div>
           <div class="num">{{ futuresStock.maxRevenue}}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">最大亏损</div>
           <div class="num">{{ futuresStock.maxLoss }}<span>元</span></div>
@@ -290,47 +298,72 @@ const start = dayjs(end).add(-59, 'months')
   <style lang="scss" scoped>
 
 .app-container {
+  background-color: #f5f7fa;
+  padding: 8rpx 0;
+
   .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 12rpx 16rpx;
+    background-color: transparent;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    gap: 12rpx;
+    
     .item {
-      width: 50%;
-      height: 100%;
+      flex: 1;
       display: flex;
-      position: relative;
       align-items: center;
-      margin: 5px 10px 5px 10px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
+      padding: 24rpx 20rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
       }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+          line-height: 1.4;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+            font-weight: normal;
+          }
+        }
       }
     }
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
   }
 }
   .btnAdd {
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 1e96fea..b1cf9ff 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -17,6 +17,7 @@ const useUserStore = defineStore("user", {
     avatar: "",
     roles: Array(),
     permissions: [],
+    userId: "",
   }),
   actions: {
     // 登录
@@ -57,6 +58,7 @@ const useUserStore = defineStore("user", {
             }
             this.name = user.userName;
             this.avatar = avatar;
+            this.userId = user.userId || "";
             resolve(res);
           })
           .catch((error) => {
@@ -74,6 +76,7 @@ const useUserStore = defineStore("user", {
             this.permissions = [];
             this.name = "";
             this.avatar = "";
+            this.userId = "";
             removeToken();
             resolve(null);
           })