From 7c4c20e67c9eb8dcbd43845dbe683872f040309a Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Wed, 19 Nov 2025 13:17:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=9F=E8=AE=A1=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E7=BB=9F=E4=B8=80ui=E4=BC=98=E5=8C=96=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/statisticBtn/statisticBtn.vue  |  76 +++
 src/pages.json                                |  39 +-
 .../accounts/accountDealAnalysis/index.vue    | 557 ++++++++++++---
 .../accounts/accountsBalance/index.vue        | 528 ++++++++++----
 .../accounts/creditCardDealAnalysis/index.vue | 536 ++++++++++++---
 .../accounts/dailyExpensesAnalysis/index.vue  | 534 +++++++++++----
 .../accounts/dailyLiabilities/index.vue       | 403 +++++++----
 .../accounts/debitCardAnalysis/index.vue      | 645 +++++++++++++-----
 .../accounts/debitDealAnalysis/index.vue      | 536 ++++++++++++---
 .../accounts/investDealAnalysis/index.vue     | 529 +++++++++++---
 .../accounts/openCardStatics/index.vue        | 617 +++++++++++++----
 .../statistic/accounts/posAnalysis/index.vue  | 628 +++++++++++++----
 .../statistic/accounts/posStatics/index.vue   | 521 ++++++++++----
 .../accounts/sleepAccounts/index.vue          | 467 +++++++------
 .../bill/creditBillAnalysis/index.vue         | 537 ++++++++++++---
 .../bill/creditInstallmentAnalysis/index.vue  | 528 +++++++++++---
 .../index.vue                                 | 524 +++++++++++---
 .../bill/creditRecordAnalysis/index.vue       | 515 +++++++++++---
 .../statistic/bill/futuresAnalysis/index.vue  | 527 +++++++++++---
 .../statistic/bill/investAnalysis/index.vue   | 529 +++++++++++---
 .../bill/onlineLendAnalysis/index.vue         | 533 ++++++++++++---
 .../bill/onlineLendSettledAnalysis/index.vue  | 513 +++++++++++---
 .../statistic/bill/stocksAnalysis/index.vue   | 527 +++++++++++---
 src/pages/work/bill/creditCardBill/list.vue   |   2 +-
 24 files changed, 8762 insertions(+), 2589 deletions(-)
 create mode 100644 src/components/statisticBtn/statisticBtn.vue

diff --git a/src/components/statisticBtn/statisticBtn.vue b/src/components/statisticBtn/statisticBtn.vue
new file mode 100644
index 0000000..3177390
--- /dev/null
+++ b/src/components/statisticBtn/statisticBtn.vue
@@ -0,0 +1,76 @@
+<template>
+	<view>
+	  <movable-area class="movable-area">
+		<movable-view class="movable-view" :x="x" :y="y" direction="all" :style="{opacity: showButton ? 1 : 0}">
+		  <view class="newProblem" @click="newProblem">
+			<uni-icons type="map-pin-ellipse" size="32" color="#667eea"></uni-icons>
+		  </view>
+		</movable-view>
+	  </movable-area>
+	</view>
+  </template>
+
+  <script>
+  export default {
+	data() {
+	  return {
+		x: 600,
+		y: 800,
+		showButton: false
+	  };
+	},
+	mounted() {
+	  setTimeout(() => {
+		this.showButton = true;
+	  }, 100);
+	},
+	computed: {
+
+	},
+	methods: {
+	  // 意见反馈
+	  newProblem() {
+		uni.switchTab({url: `/pages/statistic/index`})
+	  }
+	}
+  };
+  </script>
+
+  <style lang="less">
+  .movable-area {
+	// 保持在右下角
+	margin-top: 230rpx;
+	margin-left: 100rpx;
+	height: calc(100vh - 300rpx);
+	width: calc(100vw - 150rpx);
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	position: fixed;
+	z-index: 99999999;
+	pointer-events: none; //此处要加，鼠标事件可以渗透
+	.movable-view {
+	  width: 88rpx;
+	  height: 88rpx;
+	  pointer-events: auto; //恢复鼠标事件
+	  .newProblem {
+		width: 88rpx;
+		height: 88rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: #ffffff;
+		border-radius: 50%;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);
+		transition: transform 0.3s ease, box-shadow 0.3s ease;
+		
+		&:active {
+		  transform: scale(0.92);
+		  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+		}
+	  }
+	}
+  }
+  </style>
+
diff --git a/src/pages.json b/src/pages.json
index 37dc23e..42e4c38 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -7,7 +7,8 @@
       "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
       "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
       "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue",
-      "qiun-(.*)": "@/components/qiun-data-charts/components/qiun-$1/qiun-$1.vue"
+      "qiun-(.*)": "@/components/qiun-data-charts/components/qiun-$1/qiun-$1.vue",
+      "statisticBtn": "@/components/statisticBtn/statisticBtn.vue"
     }
   },
   "pages": [
@@ -87,13 +88,15 @@
     {
       "path": "pages/statistic/accounts/debitCardAnalysis/index",
       "style": {
-        "navigationBarTitleText": "结算卡统计"
+        "navigationBarTitleText": "结算卡统计",
+        "disableScroll": true
       }
     } ,
     {
       "path": "pages/statistic/accounts/posStatics/index",
       "style": {
-        "navigationBarTitleText": "POS机统计"
+        "navigationBarTitleText": "POS机统计",
+        "disableScroll": true
       }
     } ,
     {
@@ -105,30 +108,35 @@
     {
       "path": "pages/statistic/accounts/posAnalysis/index",
       "style": {
-        "navigationBarTitleText": "POS机刷卡统计"
+        "navigationBarTitleText": "POS机刷卡统计",
+        "disableScroll": true
       }
     },
     {
       "path": "pages/statistic/accounts/debitDealAnalysis/index",
       "style": {
-        "navigationBarTitleText": "储蓄账户统计"
+        "navigationBarTitleText": "储蓄账户统计",
+        "disableScroll": true
       }
     },
     {
       "path": "pages/statistic/accounts/creditCardDealAnalysis/index",
       "style": {
-        "navigationBarTitleText": "信用卡收支统计"
+        "navigationBarTitleText": "信用卡收支统计",
+        "disableScroll": true
       }
     },{
       "path": "pages/statistic/accounts/dailyExpensesAnalysis/index",
       "style": {
-        "navigationBarTitleText": "日常支出统计"
+        "navigationBarTitleText": "日常支出统计",
+        "disableScroll": true
       }
     },
     {
       "path": "pages/statistic/bill/onlineLendAnalysis/index",
       "style": {
-        "navigationBarTitleText": "贷款待还统计"
+        "navigationBarTitleText": "贷款待还统计",
+        "disableScroll": true
       }
     },{
       "path": "pages/statistic/bill/onlineLendSettledAnalysis/index",
@@ -139,19 +147,22 @@
     {
       "path": "pages/statistic/bill/futuresAnalysis/index",
       "style": {
-        "navigationBarTitleText": "期货统计分析"
+        "navigationBarTitleText": "期货统计分析",
+        "disableScroll": true
       }
     },
     {
       "path": "pages/statistic/bill/stocksAnalysis/index",
       "style": {
-        "navigationBarTitleText": "股票统计分析"
+        "navigationBarTitleText": "股票统计分析",
+        "disableScroll": true
       }
     },
     {
       "path": "pages/statistic/bill/investAnalysis/index",
       "style": {
-        "navigationBarTitleText": "收益统计分析"
+        "navigationBarTitleText": "收益统计分析",
+        "disableScroll": true
       }
     },
     {
@@ -174,7 +185,8 @@
     {
       "path": "pages/statistic/accounts/investDealAnalysis/index",
       "style": {
-        "navigationBarTitleText": "投资收益统计"
+        "navigationBarTitleText": "投资收益统计",
+        "disableScroll": true
       }
     }
     ,
@@ -200,7 +212,8 @@
     {
       "path": "pages/statistic/accounts/accountDealAnalysis/index",
       "style": {
-        "navigationBarTitleText": "账户收支统计"
+        "navigationBarTitleText": "账户收支统计",
+        "disableScroll": true
       }
     }
     ,
diff --git a/src/pages/statistic/accounts/accountDealAnalysis/index.vue b/src/pages/statistic/accounts/accountDealAnalysis/index.vue
index ccd2288..7759022 100644
--- a/src/pages/statistic/accounts/accountDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/accountDealAnalysis/index.vue
@@ -5,8 +5,10 @@
           <u-input v-model="queryParams.time" border="false" type="select"   placeholder="" suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">  
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -60,7 +62,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -69,7 +71,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -80,7 +82,7 @@
     </div>
     <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, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -89,7 +91,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
           <uni-icons type="arrow-down" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -100,7 +102,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
           <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -109,7 +111,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #ec4899 100%);">
           <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -120,7 +122,7 @@
     </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')">
-        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
           <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -129,7 +131,7 @@
         </div>
       </div>
       <div class="item" v-show="auth.hasPermi('invest:creditCard')">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
           <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -141,7 +143,7 @@
     </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')">
-        <view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="shop-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -150,7 +152,7 @@
         </div>
       </div>
       <div class="item" v-show="auth.hasPermi('invest:onlineLend')">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);">
           <uni-icons type="upload-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -161,29 +163,89 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>账户收支统计</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">账户收支统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="accountDealLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="accountDealColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 收支金额：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">收支金额：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>收支明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">收支明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
         </view>
       </u-list>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -202,6 +264,7 @@
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list' 或 'line' 或 'column'
   const account = ref({
     amount: '',
   income: '',
@@ -230,6 +293,161 @@
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 50, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showXAxisLine: true,
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        if (val <= -10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      }
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 30, 50, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: true,
+      axisLineColor: '#CCCCCC',
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showXAxisLine: true,
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        if (val <= -10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      }
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        barBorderCircle: true,
+        seriesGap: 2,
+        categoryGap: 3,
+        colorStop: 0
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    
+    // 曲线图使用单一数据系列
+    if (viewMode.value === 'line') {
+      return {
+        categories: reversedData.map(item => item.time || ''),
+        series: [
+          {
+            name: '收支金额',
+            data: reversedData.map(item => {
+              const value = parseFloat(item.value)
+              return isNaN(value) ? 0 : value
+            }),
+            color: '#667eea'
+          }
+        ]
+      }
+    }
+    
+    // 柱状图使用单一数据系列，每个柱子根据正负设置颜色
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '收支金额',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            const val = isNaN(value) ? 0 : value
+            return {
+              value: val,
+              color: val < 0 ? '#ef4444' : '#667eea'
+            }
+          })
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -387,6 +605,80 @@ function searchSubmit() {
         text-align: center;
       }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
@@ -394,11 +686,46 @@ function searchSubmit() {
     justify-content: space-between;
     align-items: center;
     position: relative;
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -409,14 +736,28 @@ function searchSubmit() {
       background-color: rgba(0, 0, 0, 0.5);
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -445,6 +786,7 @@ function searchSubmit() {
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -453,98 +795,89 @@ function searchSubmit() {
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6rpx;
+          padding: 4rpx 12rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 28rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/statistic/accounts/accountsBalance/index.vue b/src/pages/statistic/accounts/accountsBalance/index.vue
index a2cdb39..0652955 100644
--- a/src/pages/statistic/accounts/accountsBalance/index.vue
+++ b/src/pages/statistic/accounts/accountsBalance/index.vue
@@ -10,7 +10,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -30,7 +30,7 @@
     </div>
           <div class="header-con" ref="searchHeightRef">
             <div class="item">
-              <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+              <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <div class="info-sum">
@@ -39,7 +39,7 @@
               </div>
             </div>
             <div class="item">
-              <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+              <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
                 <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
               </view>
               <div class="info-sum">
@@ -50,7 +50,7 @@
           </div>
           <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
             <div class="item">
-              <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+              <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
                 <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <div class="info-sum">
@@ -59,7 +59,7 @@
               </div>
             </div>
             <div class="item">
-              <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+              <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #ec4899 100%);">
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <div class="info-sum">
@@ -70,7 +70,7 @@
           </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
           <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -79,7 +79,7 @@
         </div>
       </div>
       <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
           <uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -90,7 +90,7 @@
     </div>
           <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
             <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
-              <view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
+              <view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
                 <uni-icons type="navigate" size="20" color="#ffffff"></uni-icons>
               </view>
               <div class="info-sum">
@@ -99,7 +99,7 @@
               </div>
             </div>
             <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
-              <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+              <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
                 <uni-icons type="flag" size="20" color="#ffffff"></uni-icons>
               </view>
               <div class="info-sum">
@@ -112,44 +112,119 @@
 
 
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button :type="firstType" style="margin-right:5px" size=mini @click="btFirstClick">账户余额</button>
-    <button :type="secondType" type="primary"  size=mini  @click="btSecondClick">信用卡可用余额</button>
-  </div>
-      <u-list v-show="!tabShow"  @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
-        <u-list-item v-for="(item, index) in listData" :key="index">
-          <view class="list-item">
-            <view class="item-header">
-              <u--text  lines="2"
-                :text="item.account+'：'+item.availableLimit+' 元'" size="30rpx" color="#333333" ></u--text>
-            </view>
-
-          </view>
-        </u-list-item>
-        <view>
+  
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">余额统计</text>
+    <view class="title-actions">
+      <view class="view-switch">
+        <view 
+          :class="['switch-item', { 'active': viewMode === 'list' }]" 
+          @click="viewMode = 'list'"
+        >
+          <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+          <text>储蓄账户</text>
         </view>
-      </u-list>
-      <u-list v-show="tabShow"  @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
-        <u-list-item v-for="(item, index) in secondListData" :key="index">
-          <view class="list-item">
-            <view class="item-header">
-              <u--text  lines="2"
-                :text="item.account+'：'+item.availableLimit+' 元'" size="30rpx" color="#333333" ></u--text>
-            </view>
-
-          </view>
-        </u-list-item>
-        <view>
+         <view 
+          :class="['switch-item', { 'active': viewMode === 'credit' }]" 
+          @click="viewMode = 'credit'"
+          v-if="secondListData.length>0"
+        >
+          <uni-icons type="star-filled" size="16" :color="viewMode === 'credit' ? '#667eea' : '#999'"></uni-icons>
+          <text>信用卡</text>
         </view>
-      </u-list>
+        <view 
+          :class="['switch-item', { 'active': viewMode === 'line' }]" 
+          @click="viewMode = 'line'"
+        >
+          <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+          <text>曲线图</text>
+        </view>
+        <view 
+          :class="['switch-item', { 'active': viewMode === 'column' }]" 
+          @click="viewMode = 'column'"
+        >
+          <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+          <text>柱状图</text>
+        </view>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 图表布局 -->
+  <view class="balance-display-container" v-if="listData.length>0 && (viewMode === 'line' || viewMode === 'column')">
+    <!-- 图表区域 -->
+    <view class="chart-wrapper">
+      <!-- 曲线图展示 -->
+      <view class="chart-container" v-if="viewMode === 'line'">
+        <qiun-data-charts 
+          type="line"
+          canvasId="accountBalanceLineChart"
+          :chartData="chartData"
+          :opts="lineChartOpts"
+          :loadingType="1"
+        />
+      </view>
+      
+      <!-- 柱状图展示 -->
+      <view class="chart-container" v-if="viewMode === 'column'">
+        <qiun-data-charts 
+          type="column"
+          canvasId="accountBalanceColumnChart"
+          :chartData="chartData"
+          :opts="columnChartOpts"
+          :loadingType="1"
+        />
+      </view>
+    </view>
+  </view>
+  
+  <!-- 储蓄账户列表展示 -->
+  <u-list v-show="viewMode === 'list'"  @scrolltolower="loadmore" :spaceHeight="200" lowerThreshold="100">
+    <u-list-item v-for="(item, index) in listData" :key="index">
+      <view class="list-item">
+        <view class="item-header">
+          <view class="header-left">
+            <view class="account-badge">
+              <uni-icons type="wallet" size="16" color="#ffffff"></uni-icons>
+              <text>{{ item.account }}</text>
+            </view>
+          </view>
+          <view class="header-right">
+            <text class="amount-label">余额：</text>
+            <text class="amount-value">{{ item.availableLimit }}元</text>
+          </view>
+        </view>
+      </view>
+    </u-list-item>
+  </u-list>
+  
+  <!-- 信用卡余额列表展示 -->
+  <u-list v-show="viewMode === 'credit'" :spaceHeight="200">
+    <u-list-item v-for="(item, index) in secondListData" :key="index">
+      <view class="list-item">
+        <view class="item-header">
+          <view class="header-left">
+            <view class="account-badge">
+              <uni-icons type="star-filled" size="16" color="#ffffff"></uni-icons>
+              <text>{{ item.account }}</text>
+            </view>
+          </view>
+          <view class="header-right">
+            <text class="amount-label">可用额度：</text>
+            <text class="amount-value">{{ item.availableLimit }}元</text>
+          </view>
+        </view>
+      </view>
+    </u-list-item>
+  </u-list>
       <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
         @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
         <u-picker itemHeight="88" :show="showAccount" :columns="accountTypeList" keyName="dictLabel" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
 
   <script setup>
@@ -172,6 +247,7 @@
   const secondListData = ref([])
   const firstType = ref("primary")
   const secondType = ref("default")
+  const viewMode = ref('list') // 'list' 或 'credit' 或 'line' 或 'column'
 
   const accountsBalance = ref({
   debetBalance: '',
@@ -191,6 +267,122 @@
      }
   })
   const { filterPanel, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 50, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disabled: true
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 50, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disabled: true
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 账户余额图表数据（只包含储蓄账户）
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    return {
+      categories: listData.value.map(item => item.account || ''),
+      series: [
+        {
+          name: '余额',
+          data: listData.value.map(item => {
+            const value = parseFloat(item.availableLimit)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })
@@ -212,7 +404,12 @@
             accountsBalance.value = { ...res.data }
             secondListData.value=[]
             listData.value=[]
-          listData.value = listData.value.concat(res.data.accountsBalancesList)
+          // 只保留账户名称中包含"储蓄账户"的数据
+          const filteredData = res.data.accountsBalancesList ? 
+            res.data.accountsBalancesList.filter(item => 
+              item.account && item.account.includes('储蓄账户')
+            ) : []
+          listData.value = listData.value.concat(filteredData)
           secondListData.value = secondListData.value.concat(res.data.creditBalancesList)
         }).catch(() => {
         })
@@ -359,6 +556,92 @@
         text-align: center;
       }
 
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .title-actions {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .balance-display-container {
+    padding: 16rpx 24rpx 0;
+  }
+  
+  .chart-wrapper {
+    width: 100%;
+  }
+  
+  .chart-container {
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
@@ -366,11 +649,19 @@
     justify-content: space-between;
     align-items: center;
     position: relative;
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
     }
 
     .filter-panel {
@@ -381,14 +672,28 @@
       background-color: rgba(0, 0, 0, 0.5);
 
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
 
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
 
         .state-list {
@@ -417,6 +722,7 @@
 
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -425,99 +731,59 @@
   }
 
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 20rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .account-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 8rpx;
+          padding: 8rpx 16rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 30rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
-    }
 
-    .item-row {
-      padding: 16rpx 0;
-
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
-      }
-
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
-      }
     }
   }
   </style>
diff --git a/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue b/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue
index f23c2fe..85b540f 100644
--- a/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue
@@ -13,8 +13,10 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -68,7 +70,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -77,7 +79,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -88,7 +90,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -97,7 +99,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -108,7 +110,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -117,7 +119,7 @@
         </div>
       </div>
       <div class="item" v-show="auth.hasPermi('invest:posmachine:list')">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);">
           <uni-icons type="gift" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -128,7 +130,7 @@
     </div>
     <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
           <uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -137,7 +139,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
           <uni-icons type="reload" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -148,7 +150,7 @@
     </div>
     <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
           <uni-icons type="heart" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -157,7 +159,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
           <uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -168,20 +170,81 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>信用卡收支统计</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">信用卡收支统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="creditCardDealLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="creditCardDealColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 交易金额：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">交易金额：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>交易明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">交易明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -192,9 +255,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -218,6 +280,7 @@
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list' 或 'line' 或 'column'
   const account = ref({
     amount: '',
   income: '',
@@ -248,6 +311,139 @@
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 60, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: true,
+      axisLineColor: '#CCCCCC',
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showXAxisLine: true,
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        if (val <= -10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      }
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'none',
+        onShadow: false,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 60, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: true,
+      axisLineColor: '#CCCCCC',
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showXAxisLine: true,
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        if (val <= -10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      }
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '交易金额',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -449,6 +645,80 @@ function searchSubmit() {
         text-align: center;
       }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 700rpx;
+    overflow: visible;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
@@ -456,12 +726,46 @@ function searchSubmit() {
     justify-content: space-between;
     align-items: center;
     position: relative;
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
-  
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -472,14 +776,28 @@ function searchSubmit() {
       background-color: rgba(0, 0, 0, 0.5);
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -508,6 +826,7 @@ function searchSubmit() {
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -516,98 +835,89 @@ function searchSubmit() {
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6rpx;
+          padding: 4rpx 12rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 28rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue b/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
index a5619f3..840c56e 100644
--- a/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
+++ b/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
@@ -13,8 +13,10 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -68,7 +70,7 @@
         <div class="app-container">
           <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -77,7 +79,7 @@
         </div>
       </div>
       <div class="item" v-show="account.top1Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="star" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -88,7 +90,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top2Name != null">
       <div class="item" v-show="account.top2Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -97,7 +99,7 @@
         </div>
       </div>
       <div class="item" v-show="account.top3Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="cart" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -108,7 +110,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top4Name != null">
       <div class="item" v-show="account.top4Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
           <uni-icons type="home" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -117,7 +119,7 @@
         </div>
       </div>
       <div class="item" v-show="account.top5Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);">
           <uni-icons type="gift" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -128,7 +130,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top6Name != null">
       <div class="item" v-show="account.top6Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
           <uni-icons type="car" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -137,7 +139,7 @@
         </div>
       </div>
       <div class="item" v-show="account.top7Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
           <uni-icons type="heart" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -148,7 +150,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top8Name != null">
       <div class="item" v-show="account.top8Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
           <uni-icons type="book" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -157,7 +159,7 @@
         </div>
       </div>
       <div class="item" v-show="account.top9Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
           <uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -168,7 +170,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top10Name != null">
       <div class="item" v-show="account.top10Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);">
           <uni-icons type="phone" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -177,7 +179,7 @@
         </div>
       </div>
       <div class="item" v-show="account.top11Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #047857 0%, #065f46 100%);">
           <uni-icons type="bag" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -188,7 +190,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top12Name != null">
       <div class="item" v-show="account.top12Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #3b82f6 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #ec4899 100%);">
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -197,7 +199,7 @@
         </div>
       </div>
       <div class="item" v-show="account.top13Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #a445b2 0%, #d41872 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);">
           <uni-icons type="navigate" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -208,7 +210,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef" v-show="account.top14Name != null">
       <div class="item" v-show="account.top14Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f46b45 0%, #eea849 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);">
           <uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -217,7 +219,7 @@
         </div>
       </div>
       <div class="item" v-show="account.top15Name != null">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);">
           <uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -228,29 +230,98 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button :type="classType" type="primary"  size=mini  @click="btClassClick">日期统计</button>
-    <button :type="dayType" style="margin-right:5px" size=mini @click="btDayClick">分类统计</button>
-   
-  </div>
-      <u-list  v-show="!tabShow"  :spaceHeight="116" lowerThreshold="100">
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">日常支出统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'date' }]" 
+        @click="viewMode = 'date'; btClassClick()"
+      >
+        <uni-icons type="calendar" size="16" :color="viewMode === 'date' ? '#667eea' : '#999'"></uni-icons>
+        <text>日期</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'category' }]" 
+        @click="viewMode = 'category'; btDayClick()"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'category' ? '#667eea' : '#999'"></uni-icons>
+        <text>分类</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="dailyExpensesLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="dailyExpensesColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list  v-show="viewMode === 'date'"  :spaceHeight="200" lowerThreshold="100">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 支出金额 '+item.value+' 元'" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">支出金额：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
             </view>
           </view>
         </u-list-item>
         <view>
         </view>
       </u-list>
-      <u-list  v-show="tabShow"  :spaceHeight="116" lowerThreshold="100">
+      <u-list  v-show="viewMode === 'category'"  :spaceHeight="200" lowerThreshold="100">
         <u-list-item v-for="(item, index) in secondListData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 支出金额 '+item.value+' 元'" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="list" size="16" color="#667eea"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">支出金额：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
             </view>
           </view>
         </u-list-item>
@@ -263,9 +334,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="typeNameCodeAvailableLimit" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -292,6 +362,7 @@
   const tabShow = ref(false)
   const classType = ref("primary")
   const dayType = ref("default")
+  const viewMode = ref('date') // 'date' 或 'category' 或 'line' 或 'column'
 
   const account = ref({
     amount: '',
@@ -322,6 +393,141 @@
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据 - 根据当前视图模式决定使用哪个数据源
+  const chartData = computed(() => {
+    const currentData = viewMode.value === 'category' ? secondListData.value : listData.value
+    if (!currentData || currentData.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...currentData].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '支出金额',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -532,6 +738,80 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
         text-align: center;
       }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
@@ -539,12 +819,46 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
     justify-content: space-between;
     align-items: center;
     position: relative;
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
-  
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -555,14 +869,28 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
       background-color: rgba(0, 0, 0, 0.5);
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -591,6 +919,7 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -599,98 +928,57 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6rpx;
+          padding: 4rpx 12rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
+        
+        .amount-value {
+          font-size: 28rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
-        }
-      }
-    }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
-      }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
       }
     }
   }
diff --git a/src/pages/statistic/accounts/dailyLiabilities/index.vue b/src/pages/statistic/accounts/dailyLiabilities/index.vue
index d908ce8..bfe4239 100644
--- a/src/pages/statistic/accounts/dailyLiabilities/index.vue
+++ b/src/pages/statistic/accounts/dailyLiabilities/index.vue
@@ -1,12 +1,14 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
         <view class="search-view">
           <u-input v-model="queryParams.time" border="false" type="select"   placeholder="" suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">  
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -40,8 +42,14 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -61,36 +69,45 @@
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item">
           <view class="item-header">
-            <u--text  lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.name+'：'+item.totalBalance" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.name }}</text>
+              </view>
+            </view>
+            <view class="balance-section">
+              <text class="balance-label"></text>
+              <text class="balance-value">{{ item.totalBalance }}元</text>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">账户类型：</text>
-            <text class="row-value">{{ dictStr(item.type, accountType) }}</text>
-          </view> -->
-          <!-- <view class="item-row">
-            <text class="row-label">净资产：</text>
-            <text class="row-value">{{ item.totalBalance }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">信用卡余额：</text>
-            <text class="row-value">{{ item.creditBalance }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">投资账户余额：</text>
-            <text class="row-value">{{ item.investBalance }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">储蓄账户余额：</text>
-            <text class="row-value">{{ item.debitBalance }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">借贷账户余额：</text>
-            <text class="row-value">{{ item.lendingBalance }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">记录时间：</text>
-            <text class="row-value">{{ item.recordDate }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+               <view class="info-item">
+                <text class="info-label">储蓄账户余额</text>
+                <text class="info-value balance-highlight">{{ item.debitBalance || '0' }}元</text>
+              </view>
+               <view class="info-item">
+                <text class="info-label">投资账户余额</text>
+                <text class="info-value balance-highlight">{{ item.investBalance || '0' }}元</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">信用卡余额</text>
+                <text class="info-value balance-highlight">{{ item.creditBalance || '0' }}元</text>
+              </view>
+             
+             
+              <view class="info-item">
+                <text class="info-label">借贷账户余额</text>
+                <text class="info-value balance-highlight">{{ item.lendingBalance || '0' }}元</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">记录时间</text>
+                <text class="info-value">{{ item.recordDate || '--' }}</text>
+              </view>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -133,6 +150,7 @@ const windowHeight = computed(() => {
 			uni.getSystemInfoSync().windowHeight - 50
 		})	
 onLoad(() => {
+    getDict()
     getList()
   });
 
@@ -199,24 +217,28 @@ function settingCancel() {
 
 
     function resetQuery() {
-      queryParams.value.startTime = ''
-        queryParams.value.time = ''
-      queryParams.value.endTime =  ''
+      let formatValue = 'YYYY-MM-DD'
+      const today = new Date()
+      const end = dayjs(today).format(formatValue)
+      const start = dayjs(today).add(-6, 'days').format(formatValue)
+      queryParams.value.startTime = start
+      queryParams.value.endTime = end
+      queryParams.value.time = start + '-' + end
     }
- 
+
+function getDict() {
+  let formatValue = 'YYYY-MM-DD'
+  const today = new Date()
+  const end = dayjs(today).format(formatValue)
+  const start = dayjs(today).add(-6, 'days').format(formatValue)
+  queryParams.value.startTime = start
+  queryParams.value.endTime = end
+  queryParams.value.time = start + '-' + end
+}
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
-
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -224,12 +246,46 @@ function settingCancel() {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
+  z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #F5F5F5;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
+  }
+  
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    
+    uni-icons {
+      color: #667eea;
+    }
   }
 
   .filter-panel {
@@ -238,16 +294,31 @@ function settingCancel() {
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
+        }
       }
 
       .state-list {
@@ -276,106 +347,180 @@ function settingCancel() {
 
     .btn-box {
       display: flex;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
       box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
+      .btn-reset,
+      .btn-confirm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
+        text {
+          line-height: 1;
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
+      }
+      
+      .btn-confirm {
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
+      }
     }
   }
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
-  padding: 32rpx;
+  margin: 10rpx 24rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.2s ease;
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
-
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      margin-right: 16rpx;
+    }
+    
+    .card-icon {
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 12rpx;
+      flex-shrink: 0;
+    }
+    
+    .card-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 28rpx;
+        font-weight: 600;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+    }
+    
+    .balance-section {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8rpx;
+      flex-shrink: 0;
+      white-space: nowrap;
+      
+      .balance-label {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 22rpx;
+        font-weight: 400;
+        line-height: 1;
       }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+      
+      .balance-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
-
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
-    }
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
   }
 
-  .operate {
+  .info-row {
     display: flex;
-    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
-    }
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
-    }
+      .info-label {
+        font-size: 24rpx;
+        color: #667eea;
+        font-weight: 500;
+        background: rgba(102, 126, 234, 0.08);
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        align-self: flex-start;
+      }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        
+        &.balance-highlight {
+          color: #fa8c16;
+          font-weight: 700;
+        }
+      }
     }
   }
 }
diff --git a/src/pages/statistic/accounts/debitCardAnalysis/index.vue b/src/pages/statistic/accounts/debitCardAnalysis/index.vue
index 640fcf2..03d07b6 100644
--- a/src/pages/statistic/accounts/debitCardAnalysis/index.vue
+++ b/src/pages/statistic/accounts/debitCardAnalysis/index.vue
@@ -3,7 +3,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -12,7 +12,7 @@
         </div>
       </div>
       <div class="item" >
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -23,7 +23,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -32,7 +32,7 @@
         </div>
       </div>
       <div class="item" >
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -43,7 +43,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -52,7 +52,7 @@
         </div>
       </div>
       <div class="item" >
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -63,7 +63,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -72,7 +72,7 @@
         </div>
       </div>
       <div class="item" >
-        <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -83,7 +83,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -92,7 +92,7 @@
         </div>
       </div>
       <div class="item" >
-        <view class="item-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #047857 0%, #065f46 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -103,7 +103,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -112,7 +112,7 @@
         </div>
       </div>
       <div class="item" >
-        <view class="item-icon" style="background: linear-gradient(135deg, #a445b2 0%, #d41872 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -123,7 +123,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f46b45 0%, #eea849 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);">
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -132,7 +132,7 @@
         </div>
       </div>
       <div class="item" >
-        <view class="item-icon" style="background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -143,7 +143,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #ffeaa7 0%, #fd79a8 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);">
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -152,7 +152,7 @@
         </div>
       </div>
       <div class="item" >
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #3b82f6 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -163,7 +163,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);">
           <uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -172,7 +172,7 @@
         </div>
       </div>
       <div class="item" >
-        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -185,102 +185,172 @@
 
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button :type="firstType" style="margin-right:5px" size=mini @click="btFirstClick">结算卡统计</button>
-    <button :type="secondType" type="primary"  size=mini  @click="btSecondClick">近6月收款金额统计</button>
-  </div>
-      <u-list v-show="!tabShow" @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
+  
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">结算卡统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'cardList' }]" 
+        @click="viewMode = 'cardList'; btFirstClick()"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'cardList' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'amountList' }]" 
+        @click="viewMode = 'amountList'; btSecondClick()"
+      >
+        <uni-icons type="star" size="16" :color="viewMode === 'amountList' ? '#667eea' : '#999'"></uni-icons>
+        <text>收款</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="debitCardLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="debitCardColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 结算卡列表展示 -->
+      <u-list v-show="viewMode === 'cardList'" @scrolltolower="loadmore" :spaceHeight="200" lowerThreshold="100">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2"
-                :text="item.name+'-'+item.code" size="30rpx" color="#333333" :bold="true"></u--text>
+              <view class="header-left">
+                <view class="card-badge">
+                  <uni-icons type="wallet" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.name }}-{{ item.code }}</text>
+                </view>
+              </view>
+            </view>
+            <view class="item-body">
+                <view class="item-row">
+                <text class="row-label">今日结算次数：</text>
+                <text class="row-value">{{ item.todayCount }} 次</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">今日收款金额：</text>
+                <text class="row-value">{{ item.todayAmount }} 元</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近7日结算次数：</text>
+                <text class="row-value">{{ item.sevenDayCount }} 次</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近7日收款金额：</text>
+                <text class="row-value">{{ item.sevenDayAmount }} 元</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近1月结算次数：</text>
+                <text class="row-value">{{ item.oneMonthCount }} 次</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近1月收款金额：</text>
+                <text class="row-value">{{ item.oneMonthAmount }} 元</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近3月结算次数：</text>
+                <text class="row-value">{{ item.threeMonthCount }} 次</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近3月收款金额：</text>
+                <text class="row-value">{{ item.threeMonthAmount }} 元</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近6月结算次数：</text>
+                <text class="row-value">{{ item.sixMonthCount }} 次</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近6月收款金额：</text>
+                <text class="row-value">{{ item.sixMonthAmount }} 元</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近1年结算次数：</text>
+                <text class="row-value">{{ item.oneYearCount }} 次</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近1年收款金额：</text>
+                <text class="row-value">{{ item.oneYearAmount }} 元</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近2年结算次数：</text>
+                <text class="row-value">{{ item.twoYearCount }} 次</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近2年收款金额：</text>
+                <text class="row-value">{{ item.twoYearAmount }} 元</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近5年结算次数：</text>
+                <text class="row-value">{{ item.fiveYearCount }} 次</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">近5年收款金额：</text>
+                <text class="row-value">{{ item.fiveYearAmount }} 元</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">总结算次数：</text>
+                <text class="row-value">{{ item.totalCount }} 次</text>
+              </view>
+              <view class="item-row">
+                <text class="row-label">总收款金额：</text>
+                <text class="row-value">{{ item.totalAmount }} 元</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">今日结算次数：</text>
-            <text class="row-value">{{ item.todayCount }} 次</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">今日收款金额：</text>
-            <text class="row-value">{{ item.todayAmount }} 元</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近7日结算次数：</text>
-            <text class="row-value">{{ item.sevenDayCount }} 次</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近7日收款金额：</text>
-            <text class="row-value">{{ item.sevenDayAmount }} 元</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近1月结算次数：</text>
-            <text class="row-value">{{ item.oneMonthCount }} 次</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近1月收款金额：</text>
-            <text class="row-value">{{ item.oneMonthAmount }} 元</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近3月结算次数：</text>
-            <text class="row-value">{{ item.threeMonthCount }} 次</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近3月收款金额：</text>
-            <text class="row-value">{{ item.threeMonthAmount }} 元</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近6月结算次数：</text>
-            <text class="row-value">{{ item.sixMonthCount }} 次</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近6月收款金额：</text>
-            <text class="row-value">{{ item.sixMonthAmount }} 元</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近1年结算次数：</text>
-            <text class="row-value">{{ item.oneYearCount }} 次</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近1年收款金额：</text>
-            <text class="row-value">{{ item.oneYearAmount }} 元</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近2年结算次数：</text>
-            <text class="row-value">{{ item.twoYearCount }} 次</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近2年收款金额：</text>
-            <text class="row-value">{{ item.twoYearAmount }} 元</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近5年结算次数：</text>
-            <text class="row-value">{{ item.fiveYearCount }} 次</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近5年收款金额：</text>
-            <text class="row-value">{{ item.fiveYearAmount }} 元</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">总结算次数：</text>
-            <text class="row-value">{{ item.totalCount }} 次</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">总收款金额：</text>
-            <text class="row-value">{{ item.totalAmount }} 元</text>
-          </view>
           </view>
         </u-list-item>
         <view>
         </view>
       </u-list>
-      <u-list v-show="tabShow"  @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
+      
+      <!-- 近6月收款金额列表展示 -->
+      <u-list v-show="viewMode === 'amountList'"  @scrolltolower="loadmore" :spaceHeight="200" lowerThreshold="100">
         <u-list-item v-for="(item, index) in secondListData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.debitCard+' 收款 '+item.amount+' 元'" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="card-badge">
+                  <uni-icons type="wallet" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.debitCard }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">收款金额：</text>
+                <text class="amount-value">{{ item.amount }}元</text>
+              </view>
             </view>
-
           </view>
         </u-list-item>
         <view>
@@ -289,9 +359,8 @@
       <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
         @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -310,6 +379,7 @@
 const firstType = ref("primary")
 const secondType = ref("default")
 const secondListData = ref([])
+const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 'column'
 
   const debitCardAnalysis = ref({})
   const data = reactive({
@@ -322,6 +392,144 @@ const secondListData = ref([])
      } 
   })
   const { filterPanel, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 60, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: true,
+      axisLineColor: '#CCCCCC',
+      scrollShow: true,
+      itemCount: 5,
+      disabled: true,
+      fontSize: 0,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showXAxisLine: true,
+      data: [{ min: null, max: null }],
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        if (val <= -10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      }
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'none',
+        onShadow: false,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 60, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: true,
+      axisLineColor: '#CCCCCC',
+      scrollShow: true,
+      itemCount: 5,
+      disabled: true,
+      fontSize: 0,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showXAxisLine: true,
+      data: [{ min: null, max: null }],
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        if (val <= -10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      }
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!secondListData.value || secondListData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使数据从前往后排序
+    const reversedData = [...secondListData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.debitCard || ''),
+      series: [
+        {
+          name: '收款金额',
+          index: 0,
+          data: reversedData.map(item => {
+            const value = parseFloat(item.amount)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -342,14 +550,15 @@ const secondListData = ref([])
     tabShow.value=false
     firstType.value="primary"
     secondType.value="default"
-
-      }
-      function  btSecondClick() {
-        secondType.value="primary"
-         firstType.value="default"
-        tabShow.value=true
-        
-    }
+    viewMode.value = 'cardList'
+  }
+  
+  function  btSecondClick() {
+    secondType.value="primary"
+    firstType.value="default"
+    tabShow.value=true
+    viewMode.value = 'amountList'
+  }
 
   function getList() {
         getDebitCardAnalysis({...queryParams.value }).then(res => {
@@ -525,99 +734,159 @@ const secondListData = ref([])
     }
   }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 10rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 700rpx;
+    overflow: visible;
+    position: relative;
+  }
+  
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
-          font-size: 24rpx;
-        }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .card-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6rpx;
+          padding: 4rpx 12rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 24rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
         }
       }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4rpx;
+        
+        .amount-label {
+          font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
+        }
+        
+        .amount-value {
+          font-size: 28rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
+        }
+      }
+    }
+    
+    .item-body {
+      padding: 24rpx;
     }
   
     .item-row {
-      padding: 16rpx 0;
+      padding: 12rpx 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1rpx solid #f0f0f0;
+      
+      &:last-child {
+        border-bottom: none;
+      }
   
       .row-label {
-        color: rgba(0, 0, 0, 0.55);
+        color: #7f8c8d;
+        font-size: 26rpx;
       }
   
       .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+        color: #2c3e50;
+        font-size: 26rpx;
+        font-weight: 600;
       }
     }
   }
diff --git a/src/pages/statistic/accounts/debitDealAnalysis/index.vue b/src/pages/statistic/accounts/debitDealAnalysis/index.vue
index eb81d84..c19bf83 100644
--- a/src/pages/statistic/accounts/debitDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/debitDealAnalysis/index.vue
@@ -13,8 +13,10 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -68,7 +70,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -77,7 +79,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -88,7 +90,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -97,7 +99,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -108,7 +110,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -117,7 +119,7 @@
         </div>
       </div>
       <div class="item" v-show="auth.hasPermi('invest:posmachine:list')">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);">
           <uni-icons type="gift" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -128,7 +130,7 @@
     </div>
     <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
           <uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -137,7 +139,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
           <uni-icons type="reload" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -148,7 +150,7 @@
     </div>
     <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
           <uni-icons type="heart" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -157,7 +159,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
           <uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -168,20 +170,82 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>储蓄账户统计</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">储蓄账户统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="debitDealLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="debitDealColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 交易金额：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">交易金额：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>交易明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">交易明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -192,9 +256,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -218,6 +281,7 @@
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list' 或 'line' 或 'column'
   const account = ref({
     amount: '',
   income: '',
@@ -243,6 +307,139 @@
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 60, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: true,
+      axisLineColor: '#CCCCCC',
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showXAxisLine: true,
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        if (val <= -10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      }
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'none',
+        onShadow: false,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 60, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: true,
+      axisLineColor: '#CCCCCC',
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showXAxisLine: true,
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        if (val <= -10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      }
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '交易金额',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -444,6 +641,80 @@ function searchSubmit() {
         text-align: center;
       }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
@@ -451,11 +722,46 @@ function searchSubmit() {
     justify-content: space-between;
     align-items: center;
     position: relative;
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -466,14 +772,28 @@ function searchSubmit() {
       background-color: rgba(0, 0, 0, 0.5);
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -502,6 +822,7 @@ function searchSubmit() {
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -510,98 +831,89 @@ function searchSubmit() {
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6rpx;
+          padding: 4rpx 12rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 24rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 28rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/statistic/accounts/investDealAnalysis/index.vue b/src/pages/statistic/accounts/investDealAnalysis/index.vue
index 617e26b..0fe502e 100644
--- a/src/pages/statistic/accounts/investDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/investDealAnalysis/index.vue
@@ -13,8 +13,10 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -68,7 +70,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -77,7 +79,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -88,7 +90,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="reload" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -97,7 +99,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -109,7 +111,7 @@
     <div class="header-con" ref="searchHeightRef">
 
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
           <uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -118,7 +120,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);">
           <uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -129,7 +131,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
           <uni-icons type="arrow-down" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -138,7 +140,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
           <uni-icons type="closeempty" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -151,20 +153,82 @@
     
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>投资收益统计</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">投资收益统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="investDealLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="investDealColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 收益金额：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">收益金额：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>收益明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">收益明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -175,9 +239,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -200,6 +263,7 @@
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list' 或 'line' 或 'column'
   const account = ref({
     amount: '',
   income: '',
@@ -226,6 +290,136 @@
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+       
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+      
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '收益金额',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -426,6 +620,80 @@ function searchSubmit() {
         text-align: center;
       }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
@@ -433,11 +701,46 @@ function searchSubmit() {
     justify-content: space-between;
     align-items: center;
     position: relative;
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -448,14 +751,28 @@ function searchSubmit() {
       background-color: rgba(0, 0, 0, 0.5);
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -484,6 +801,7 @@ function searchSubmit() {
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -492,98 +810,89 @@ function searchSubmit() {
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6rpx;
+          padding: 4rpx 12rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 28rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/statistic/accounts/openCardStatics/index.vue b/src/pages/statistic/accounts/openCardStatics/index.vue
index 17782e3..1cec405 100644
--- a/src/pages/statistic/accounts/openCardStatics/index.vue
+++ b/src/pages/statistic/accounts/openCardStatics/index.vue
@@ -1,12 +1,14 @@
 <template>
     <view class="container">
-        <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-        <view class="search-view">
-          <u-input v-model="queryParams.time" border="false" type="select"   placeholder="" suffixIcon="calendar"
-          suffixIconStyle="color: #909399" class="search-input">  
-          </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
+      <view class="search-view">
+        <u-input v-model="queryParams.time" border="false" type="select"  placeholder="" suffixIcon="calendar"
+        suffixIconStyle="color: #909399" class="search-input">  
+        </u-input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -40,8 +42,14 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -112,29 +120,89 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>储蓄卡开卡统计</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">储蓄卡开卡统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="openCardLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="openCardColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list  :spaceHeight="116" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 开卡：'+item.value+' 张 '" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">开卡：</text>
+                <text class="amount-value">{{ item.value }}张</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>开卡明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">开卡明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
         </view>
       </u-list>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -149,6 +217,7 @@
   const isShow = ref(false)
   const accountsList = ref([])
   const timeShow= ref(false)
+  const viewMode = ref('list') // 'list', 'line', 'column'
   const oneName= ref("")
   const oneCount= ref(0)
   const twoName= ref("")
@@ -189,11 +258,141 @@
   })
 
   const { filterPanel, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '开卡数量',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
   onLoad(() => {
+      getDict()
       getList()
+      console.log('页面加载完成')
     });
   
    onShow(() => {
@@ -236,11 +435,18 @@ function searchSubmit() {
     function resetQuery() {
         queryParams.value.id = ''
         queryParams.value.type = '2'
+        let formatValue = 'YYYY-MM'
+        const today = new Date()
+        const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
+        const start = dayjs(end).add(-23, 'months')
+        queryParams.value.startTime = dayjs(start).format(formatValue)
+        queryParams.value.endTime = dayjs(end).format(formatValue)
+        queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
        queryParams.value.startTime = ''
         queryParams.value.time = ''
       queryParams.value.endTime =  ''
     }
-  function getList() {
+function getList() {
     getOpenCardList({...queryParams.value }).then(res => {
             account.value = { ...res.data }
           listData.value = listData.value.concat(res.data.tableDebitList)
@@ -261,39 +467,53 @@ function searchSubmit() {
            fourName.value= accountsList.value[3].name
            fourCount.value= accountsList.value[3].count
           }
-          
+          console.log('listData:', listData.value)
+          console.log('chartData:', chartData.value)
         }).catch(() => {
         })
       }
+  function getDict() {
+      let formatValue = 'YYYY-MM'
+      const today = new Date()
+      const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
+      const start = dayjs(end).add(-23, 'months')
+      queryParams.value.startTime = dayjs(start).format(formatValue)
+      queryParams.value.endTime = dayjs(end).format(formatValue)
+      queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
+  }
   </script>
   
   <style lang="scss" scoped>
 
 .app-container {
   background-color: #f5f7fa;
-  padding: 8rpx 0;
+  padding: 0;
+  overflow: visible;
 
   .header-con {
     width: calc(100% - 32rpx);
-    margin: 0 16rpx 12rpx 16rpx;
+    margin: 0 16rpx 8rpx 16rpx;
     background-color: transparent;
     display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    padding: 0;
     gap: 12rpx;
     
     .item {
       flex: 1;
       display: flex;
       align-items: center;
-      padding: 24rpx 20rpx;
+      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 4rpx 16rpx rgba(0, 0, 0, 0.06);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
       
       &:active {
         transform: scale(0.98);
-        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+        opacity: 0.9;
       }
       
       .item-icon {
@@ -303,8 +523,8 @@ function searchSubmit() {
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-right: 20rpx;
-        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
         flex-shrink: 0;
       }
       
@@ -347,6 +567,80 @@ function searchSubmit() {
         text-align: center;
       }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
@@ -354,11 +648,46 @@ function searchSubmit() {
     justify-content: space-between;
     align-items: center;
     position: relative;
-  
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -367,16 +696,31 @@ function searchSubmit() {
       left: 0;
       top: 96rpx;
       background-color: rgba(0, 0, 0, 0.5);
+      z-index: 999;
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -405,106 +749,141 @@ function searchSubmit() {
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+        
+        .btn-reset,
+        .btn-confirm {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8rpx;
+          height: 88rpx;
+          border-radius: 12rpx;
+          font-size: 30rpx;
+          font-weight: 600;
+          transition: all 0.3s ease;
+          
+          &:active {
+            transform: scale(0.98);
+            opacity: 0.9;
+          }
+          
+          text {
+            line-height: 1;
+          }
+        }
+        
+        .btn-reset {
+          flex: 1;
+          background: #f5f7fa;
+          border: 2rpx solid #dcdfe6;
+          
+          text {
+            color: #606266;
+          }
+        }
+        
+        .btn-confirm {
+          flex: 1;
+          background: #667eea;
+          box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+          border: none;
+          
+          text {
+            color: #ffffff;
+          }
+        }
       }
     }
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 20rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 8rpx;
+          padding: 8rpx 16rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 30rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/statistic/accounts/posAnalysis/index.vue b/src/pages/statistic/accounts/posAnalysis/index.vue
index b7f288d..3e9dca9 100644
--- a/src/pages/statistic/accounts/posAnalysis/index.vue
+++ b/src/pages/statistic/accounts/posAnalysis/index.vue
@@ -13,8 +13,10 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -65,17 +67,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, #5b51d8 0%, #6b21a8 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">刷卡金额</div>
           <div class="num">{{ pos.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, #c026d3 0%, #dc2626 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">刷卡手续费</div>
           <div class="num">{{ pos.commission }}<span>元</span></div>
@@ -84,14 +90,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, #0284c7 0%, #0891b2 100%);">
+          <uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">入账金额</div>
           <div class="num">{{ pos.actualAmount }}<span>元</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="@/static/images/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">刷卡次数</div>
           <div class="num">{{ pos.count }}<span>次</span></div>
@@ -100,21 +110,82 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>POS机刷卡统计
-    </button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">POS机刷卡统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="posAnalysisLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="posAnalysisColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 刷卡金额：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">刷卡金额：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>刷卡明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">刷卡明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -125,9 +196,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -150,6 +220,7 @@
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list' 或 'line' 或 'column'
   const pos = ref({
     amount: '',
   commission: '',
@@ -174,6 +245,140 @@
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '刷卡金额',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -290,47 +495,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 {
@@ -342,18 +572,126 @@ function searchSubmit() {
         text-align: center;
       }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
     display: flex;
     align-items: center;
     position: relative;
-
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -364,14 +702,28 @@ function searchSubmit() {
       background-color: rgba(0, 0, 0, 0.5);
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -400,6 +752,7 @@ function searchSubmit() {
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -408,98 +761,89 @@ function searchSubmit() {
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6rpx;
+          padding: 4rpx 12rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 28rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/statistic/accounts/posStatics/index.vue b/src/pages/statistic/accounts/posStatics/index.vue
index 3c2a747..2e48c1d 100644
--- a/src/pages/statistic/accounts/posStatics/index.vue
+++ b/src/pages/statistic/accounts/posStatics/index.vue
@@ -3,7 +3,7 @@
       <div class="app-container">
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
         <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -12,7 +12,7 @@
       </div>
     </div>
     <div class="item" >
-      <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
         <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -23,7 +23,7 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
         <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -32,7 +32,7 @@
       </div>
     </div>
     <div class="item" >
-      <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
         <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -43,7 +43,7 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
         <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -52,7 +52,7 @@
       </div>
     </div>
     <div class="item" >
-      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);">
         <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -63,7 +63,7 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
         <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -72,7 +72,7 @@
       </div>
     </div>
     <div class="item" >
-      <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);">
         <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -83,7 +83,7 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);">
         <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -92,7 +92,7 @@
       </div>
     </div>
     <div class="item" >
-      <view class="item-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #047857 0%, #065f46 100%);">
         <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -103,7 +103,7 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);">
         <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -112,7 +112,7 @@
       </div>
     </div>
     <div class="item" >
-      <view class="item-icon" style="background: linear-gradient(135deg, #a445b2 0%, #d41872 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #831843 0%, #881337 100%);">
         <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -123,7 +123,7 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <view class="item-icon" style="background: linear-gradient(135deg, #f46b45 0%, #eea849 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);">
         <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -132,7 +132,7 @@
       </div>
     </div>
     <div class="item" >
-      <view class="item-icon" style="background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #9f1239 0%, #be123c 100%);">
         <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -143,7 +143,7 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <view class="item-icon" style="background: linear-gradient(135deg, #ffeaa7 0%, #fd79a8 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%);">
         <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -152,7 +152,7 @@
       </div>
     </div>
     <div class="item" >
-      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #3b82f6 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #4338ca 0%, #1e40af 100%);">
         <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -163,7 +163,7 @@
   </div>
   <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
         <uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -172,7 +172,7 @@
       </div>
     </div>
     <div class="item" >
-      <view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
+      <view class="item-icon" style="background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);">
         <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
@@ -185,17 +185,77 @@
 
   <div></div>
 </div>
-<div style="margin:8px" v-show="listData.length>0">
-    <button :type="firstType" style="margin-right:5px" size=mini @click="btFirstClick">POS机统计</button>
-    <button :type="secondType" type="primary"  size=mini  @click="btSecondClick">近6月刷卡金额统计</button>
-  </div>
-    <u-list  v-show="!tabShow" @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
+
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">POS机统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'posList' }]" 
+        @click="viewMode = 'posList'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'posList' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'amountList' }]" 
+        @click="viewMode = 'amountList'"
+      >
+        <uni-icons type="wallet" size="16" :color="viewMode === 'amountList' ? '#667eea' : '#999'"></uni-icons>
+        <text>近6月刷卡金额</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="posStaticsLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="posStaticsColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- POS机列表展示 -->
+    <u-list v-show="viewMode === 'posList'" @scrolltolower="loadmore" :spaceHeight="200" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item">
           <view class="item-header">
-            <u--text  lines="2" 
-              :text="item.nameCode" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="header-left">
+              <view class="pos-badge">
+                <uni-icons type="wallet" size="16" color="#ffffff"></uni-icons>
+                <text>{{ item.nameCode }}</text>
+              </view>
+            </view>
           </view>
+          <view class="item-body">
           <view class="item-row">
           <text class="row-label">今日交易次数：</text>
           <text class="row-value">{{ item.todayCount }} 次</text>
@@ -268,19 +328,29 @@
           <text class="row-label">总刷卡金额：</text>
           <text class="row-value">{{ item.totalAmount }} 元</text>
         </view>
+          </view>
         </view>
       </u-list-item>
       <view>
       </view>
     </u-list>
-    <u-list v-show="tabShow"  @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
+    
+    <!-- 近6月刷卡金额统计列表展示 -->
+    <u-list v-show="viewMode === 'amountList'" @scrolltolower="loadmore" :spaceHeight="200" lowerThreshold="100">
         <u-list-item v-for="(item, index) in secondListData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.pos+' 刷卡 '+item.amount+' 元'" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="pos-badge">
+                  <uni-icons type="wallet" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.pos }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">刷卡金额：</text>
+                <text class="amount-value">{{ item.amount }}元</text>
+              </view>
             </view>
-
           </view>
         </u-list-item>
         <view>
@@ -289,9 +359,8 @@
     <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
       @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
   </view>
-  <!-- 悬停按钮返回工作台-->
-    <suspend></suspend>
-    <refresh></refresh>
+  <!-- 悬停按钮返回统计分析-->
+    <statisticBtn></statisticBtn>
 </template>
 
 <script setup>
@@ -310,6 +379,7 @@ const tabShow = ref(false)
 const firstType = ref("primary")
 const secondType = ref("default")
 const secondListData = ref([])
+const viewMode = ref('posList') // 'posList' 或 'amountList' 或 'line' 或 'column'
 
 const debitCardAnalysis = ref({})
 const data = reactive({
@@ -322,6 +392,142 @@ const data = reactive({
    } 
 })
 const { filterPanel, queryParams} = toRefs(data)
+
+// 曲线图配置
+const lineChartOpts = ref({
+  color: ['#667eea'],
+  padding: [20, 15, 35, 5],
+  enableScroll: false,
+  enableMarkLine: true,
+  dataLabel: false,
+  dataPointShape: true,
+  legend: {
+    show: false
+  },
+  xAxis: {
+    disableGrid: true,
+    boundaryGap: 'justify',
+    axisLine: false,
+    scrollShow: true,
+    itemCount: 5,
+    disabled: true,
+    fontSize: 0,
+    fontColor: '#999999',
+    rotateLabel: true,
+    rotateAngle: 30
+  },
+  yAxis: {
+    gridType: 'dash',
+    dashLength: 4,
+    gridColor: '#EEEEEE',
+    splitNumber: 5,
+    fontSize: 10,
+    fontColor: '#999999',
+    format: (val) => {
+      if (val >= 10000) {
+        return (val / 10000).toFixed(1) + 'w'
+      }
+      return val.toFixed(0)
+    },
+    data: [
+      {
+        min: 0
+      }
+    ]
+  },
+  extra: {
+    line: {
+      type: 'curve',
+      width: 3,
+      activeType: 'hollow',
+      linearType: 'custom',
+      linearOpacity: 0.2,
+      onShadow: true,
+      animation: true
+    }
+  }
+})
+
+// 柱状图配置
+const columnChartOpts = ref({
+  color: ['#667eea'],
+  padding: [20, 15, 35, 5],
+  enableScroll: false,
+  dataLabel: false,
+  legend: {
+    show: false
+  },
+  xAxis: {
+    disableGrid: true,
+    boundaryGap: 'center',
+    axisLine: false,
+    scrollShow: true,
+    itemCount: 5,
+    disabled: true,
+    fontSize: 0,
+    fontColor: '#999999',
+    rotateLabel: true,
+    rotateAngle: 30
+  },
+  yAxis: {
+    gridType: 'dash',
+    dashLength: 4,
+    gridColor: '#EEEEEE',
+    splitNumber: 5,
+    fontSize: 10,
+    fontColor: '#999999',
+    format: (val) => {
+      if (val >= 10000) {
+        return (val / 10000).toFixed(1) + 'w'
+      }
+      return val.toFixed(0)
+    },
+    data: [
+      {
+        min: 0
+      }
+    ]
+  },
+  extra: {
+    column: {
+      type: 'group',
+      width: 20,
+      activeBgColor: '#764ba2',
+      activeBgOpacity: 0.08,
+      linearType: 'custom',
+      linearOpacity: 0.6,
+      barBorderCircle: true,
+      seriesGap: 2
+    }
+  }
+})
+
+// 图表数据 - 基于 secondListData（近6月刷卡金额统计）
+const chartData = computed(() => {
+  if (!secondListData.value || secondListData.value.length === 0) {
+    return {
+      categories: [],
+      series: []
+    }
+  }
+  // 创建副本并反转数组，使时间从前往后排序
+  const reversedData = [...secondListData.value].reverse()
+  return {
+    categories: reversedData.map(item => item.pos || ''),
+    series: [
+      {
+        name: '刷卡金额',
+        data: reversedData.map(item => {
+          const value = parseFloat(item.amount)
+          return isNaN(value) ? 0 : value
+        }),
+        linearIndex: 0,
+        color: '#667eea'
+      }
+    ]
+  }
+})
+
 const windowHeight = computed(() => {
             uni.getSystemInfoSync().windowHeight - 50
         })	
@@ -458,11 +664,19 @@ function settingCancel() {
   justify-content: space-between;
   align-items: center;
   position: relative;
+  z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #F5F5F5;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
   }
 
   .filter-panel {
@@ -473,14 +687,28 @@ function settingCancel() {
     background-color: rgba(0, 0, 0, 0.5);
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
+        }
       }
 
       .state-list {
@@ -509,6 +737,7 @@ function settingCancel() {
 
     .btn-box {
       display: flex;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
       box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -516,99 +745,161 @@ function settingCancel() {
   }
 }
 
+.section-title {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 32rpx 16rpx;
+  background-color: #f5f7fa;
+  
+  .title-decorator {
+    width: 6rpx;
+    height: 32rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 3rpx;
+    margin-right: 12rpx;
+  }
+  
+  .title-text {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #2c3e50;
+    line-height: 1;
+    flex: 1;
+  }
+  
+  .view-switch {
+    display: flex;
+    align-items: center;
+    gap: 4rpx;
+    background: #ffffff;
+    border-radius: 12rpx;
+    padding: 4rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+    
+    .switch-item {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      padding: 6rpx 10rpx;
+      border-radius: 8rpx;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      
+      text {
+        font-size: 20rpx;
+        color: #999999;
+        line-height: 1;
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+        
+        text {
+          color: #667eea;
+          font-weight: 600;
+        }
+      }
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
+}
+
+.chart-container {
+  margin: 16rpx 24rpx 160rpx;
+  padding: 16rpx 16rpx 0;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  width: calc(100% - 48rpx);
+  height: 600rpx;
+  overflow: hidden;
+  position: relative;
+}
+
 .list-item {
-  margin: 0 24rpx 24rpx;
-  padding: 32rpx;
+  margin: 0 24rpx 16rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
-
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .header-left {
+      flex: 1;
+      
+      .pos-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 6rpx;
+        padding: 4rpx 12rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 12rpx;
+        
+        text {
+          font-size: 20rpx;
+          color: #ffffff;
+          font-weight: 600;
+          line-height: 1;
+        }
       }
     }
+    
+    .header-right {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 4rpx;
+      
+      .amount-label {
+        font-size: 22rpx;
+        color: rgba(255, 255, 255, 0.85);
+        line-height: 1;
+      }
+      
+      .amount-value {
+        font-size: 28rpx;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1;
+      }
+    }
+  }
+  
+  .item-body {
+    padding: 20rpx 24rpx;
   }
 
   .item-row {
-    padding: 16rpx 0;
+    padding: 12rpx 0;
+    display: flex;
+    align-items: center;
+    border-bottom: 1rpx solid #f0f0f0;
+
+    &:last-child {
+      border-bottom: none;
+    }
 
     .row-label {
-      color: rgba(0, 0, 0, 0.55);
+      color: #7f8c8d;
+      font-size: 26rpx;
+      min-width: 220rpx;
+      font-weight: 500;
     }
 
     .row-value {
-      color: rgba(0, 0, 0, 0.85)
-    }
-  }
-
-  .operate {
-    display: flex;
-    justify-content: flex-end;
-
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
-    }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
-    }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+      color: #2c3e50;
+      font-size: 28rpx;
+      font-weight: 600;
+      flex: 1;
     }
   }
 }
diff --git a/src/pages/statistic/accounts/sleepAccounts/index.vue b/src/pages/statistic/accounts/sleepAccounts/index.vue
index 5fdab09..ce6aa15 100644
--- a/src/pages/statistic/accounts/sleepAccounts/index.vue
+++ b/src/pages/statistic/accounts/sleepAccounts/index.vue
@@ -1,98 +1,44 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择记账账户" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
-          <!-- <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon> -->
-        <u-transition :show="filterPanel" mode="fade">
-          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-            <view class="filter-panel-content">
-              <view class="filter-title">账户类型</view>
-              <view class="state-list">
-                <view v-for="item in accountType" :key="item.id" class="state-item"
-                  :class="item.selected ? 'active' : ''" @click="selectType(item)">{{ item.dictLabel }}</view>
-              </view>
-              <view class="filter-title">账户状态</view>
-              <view class="state-list">
-                <view v-for="item in accountStatus" :key="item.id" class="state-item"
-                  :class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
-              </view>
-            </view>
-            <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
-            </view>
-          </view>
-        </u-transition>
-      </view>
-    </u-sticky>
+
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item">
           <view class="item-header">
-            <u--text  lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.name+' ：睡眠时长 '+item.duration" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.nameCode }}</text>
+              </view>
+            </view>
+            <view class="duration-section">
+              <text class="duration-value">{{ item.duration }}</text>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">账户类型：</text>
-            <text class="row-value">{{ dictStr(item.type, accountType) }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">账号：</text>
-            <text class="row-value">{{ item.code }}</text>
-          </view>
-          <!-- <view class="item-row">
-            <text class="row-label">可用额度：</text>
-            <text class="row-value">{{ item.availableLimit }}</text>
-          </view> -->
-          <view class="item-row" v-if="item.type=='1'">
-            <text class="row-label">储蓄卡类型：</text>
-            <text class="row-value">{{ dictStr(item.debitType, debitType) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">余额：</text>
-            <text class="row-value">{{ item.balance }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">最近一次交易时间：</text>
-            <text class="row-value">{{ item.recentDealTime }}</text>
-          </view>
-          <!-- <view class="item-row">
-            <text class="row-label">余额：</text>
-            <text class="row-value">{{ item.duration }}</text>
-          </view> -->
-           <!--
-          <view class="item-row" v-if="item.type=='2'">
-            <text class="row-label">信用卡额度：</text>
-            <text class="row-value">{{ item.creditLimit }}</text>
-          </view>
-          <view class="item-row" v-if="item.type=='2'">
-            <text class="row-label">账单日：</text>
-            <text class="row-value">{{ item.billDateName }}</text>
-          </view>
-          <view class="item-row" v-if="item.type=='2'">
-            <text class="row-label">还款日：</text>
-            <text class="row-value">{{ item.payDateName }}</text>
-          </view> -->
-        
-          <!-- <view class="item-row">
-            <text class="row-label">账户状态：</text>
-            <text class="row-value">{{ dictStr(item.status, accountStatus) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view> -->
+          
+          <view class="card-body">
+            <view class="info-row">
+                     <view class="info-item" v-if="item.type=='1'">
+                <text class="info-label">储蓄卡类型</text>
+                <text class="info-value">{{ dictStr(item.debitType, debitType) || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">余额</text>
+                <text class="info-value balance-highlight">{{ item.balance || '0' }}元</text>
+              </view>
 
-          <view class="operate" >
-            <!-- <view class="btn filling" @click="enterDetails(item)">查看</view > -->
-               <!-- <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view> -->
+              <view class="info-item">
+                <text class="info-label">账号</text>
+                <text class="info-value">{{ item.code || '--' }}</text>
+              </view>
+       
+              <view class="info-item ">
+                <text class="info-label">最近交易时间</text>
+                <text class="info-value">{{ item.recentDealTime || '--' }}</text>
+              </view>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -105,9 +51,8 @@
       <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="typeNameCodeAvailableLimit" @cancel="handleAccountCancel"
         @confirm="handleAccountConfirm"></u-picker>
   </view>
-  <!-- 悬停按钮返回工作台-->
-  <suspend></suspend>
-  <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
 </template>
 
 <script setup>
@@ -305,15 +250,6 @@ function selectType(item) {
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
-
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -321,12 +257,46 @@ function selectType(item) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
+  z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #F5F5F5;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
+  }
+  
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    
+    uni-icons {
+      color: #667eea;
+    }
   }
 
   .filter-panel {
@@ -335,144 +305,261 @@ function selectType(item) {
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
+        }
       }
 
       .state-list {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
+        gap: 16rpx;
 
         .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
           text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
+          line-height: 68rpx;
           font-size: 28rpx;
-          color: #000000;
+          color: #666666;
+          transition: all 0.3s ease;
+          background: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+          
+          &:active {
+            transform: scale(0.95);
+          }
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
       box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
+      .btn-reset,
+      .btn-confirm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
+        text {
+          line-height: 1;
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
+      }
+      
+      .btn-confirm {
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
+      }
     }
   }
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
-  padding: 32rpx;
+  margin: 10rpx 24rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.2s ease;
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
-
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      margin-right: 16rpx;
+    }
+    
+    .card-icon {
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 12rpx;
+      flex-shrink: 0;
+    }
+    
+    .card-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 28rpx;
+        font-weight: 600;
+        line-height: 1.2;
+        flex-shrink: 0;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+    }
+    
+    .duration-section {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      
+      .duration-value {
+        color: #ff4d4f;
+        font-size: 28rpx;
+        font-weight: 600;
+        line-height: 1.2;
+        white-space: nowrap;
       }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+    }
+    
+    .balance-section {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      white-space: nowrap;
+      
+      .balance-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        
+        .balance-label {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 22rpx;
+          font-weight: 400;
+          margin-right: 8rpx;
+        }
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
-
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
-    }
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
   }
 
-  .operate {
+  .info-row {
     display: flex;
-    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
-    }
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
+      
+      &.info-item-full {
+        flex: 0 0 100%;
+      }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
-    }
+      .info-label {
+        font-size: 24rpx;
+        color: #667eea;
+        font-weight: 500;
+        background: rgba(102, 126, 234, 0.08);
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        align-self: flex-start;
+      }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+        
+        &.balance-highlight {
+          color: #fa8c16;
+          font-weight: 700;
+        }
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 }
diff --git a/src/pages/statistic/bill/creditBillAnalysis/index.vue b/src/pages/statistic/bill/creditBillAnalysis/index.vue
index e127450..a3800d2 100644
--- a/src/pages/statistic/bill/creditBillAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditBillAnalysis/index.vue
@@ -14,8 +14,10 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -68,7 +70,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -77,7 +79,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -88,7 +90,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -97,7 +99,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -108,7 +110,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
           <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -117,7 +119,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #ec4899 100%);">
           <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -128,7 +130,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
           <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -139,20 +141,81 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>信用卡账单统计</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">信用卡账单统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="creditBillLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="creditBillColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 账单金额：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">账单金额：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>账单明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">账单明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -163,9 +226,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -188,6 +250,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list' 或 'chart'
   const creditObj = ref({
     clearedCount: '',
   clearedPrincipal: '',
@@ -210,12 +273,146 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '账单金额',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
   onLoad(() => {
       getDict()
       getList()
+      console.log('页面加载完成')
     });
   
    onShow(() => {
@@ -267,9 +464,10 @@ function searchSubmit() {
         queryParams.value.accountName = ''
     }
   function getList() {
-    getCreditAnalysis({...queryParams.value }).then(res => {
-            creditObj.value = { ...res.data }
+    getCreditAnalysis({...queryParams.value }).then(res => { creditObj.value = { ...res.data }
           listData.value = listData.value.concat(res.data.tableCreditBillList)
+          console.log('listData:', listData.value)
+          console.log('chartData:', chartData.value)
         }).catch(() => {
         })
       }
@@ -404,6 +602,80 @@ const start = dayjs(end).add(-11, 'months')
         display:float;
         text-align: center;
       }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
   
   .search-view {
     padding: 12rpx 32rpx;
@@ -412,12 +684,46 @@ const start = dayjs(end).add(-11, 'months')
     justify-content: space-between;
     align-items: center;
     position: relative;
-
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -426,16 +732,31 @@ const start = dayjs(end).add(-11, 'months')
       left: 0;
       top: 96rpx;
       background-color: rgba(0, 0, 0, 0.5);
+      z-index: 999;
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -464,6 +785,7 @@ const start = dayjs(end).add(-11, 'months')
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -472,98 +794,89 @@ const start = dayjs(end).add(-11, 'months')
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 20rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 8rpx;
+          padding: 8rpx 16rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 30rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue b/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
index 1af3816..ecb9909 100644
--- a/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
@@ -14,13 +14,15 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
              
-              <view class="select-header">还款日期</view>
+              <view class="filter-title">还款日期</view>
             <view class="selcet-content" style="padding: 0 24rpx">
               <u-input
                 :disabled="true"
@@ -69,7 +71,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -78,7 +80,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -89,7 +91,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -98,7 +100,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -109,7 +111,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
           <uni-icons type="upload-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -118,7 +120,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #ec4899 100%);">
           <uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -129,7 +131,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
           <uni-icons type="loop" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -138,7 +140,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
           <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -149,20 +151,81 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>信用卡分期待还</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">信用卡分期待还</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="installmentLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="installmentColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 待还款金额：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">待还款金额：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>待还款明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">待还款明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -173,9 +236,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -198,6 +260,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list', 'line' 或 'column'
   const historyObj = ref({
     unclearedDetailCount: '',
   unClearedDetail: '',
@@ -223,6 +286,140 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '待还款金额',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -421,6 +618,80 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
         display:float;
         text-align: center;
       }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+  }
+  
+  .view-switch {
+    display: flex;
+    align-items: center;
+    gap: 4rpx;
+    background: #ffffff;
+    border-radius: 12rpx;
+    padding: 4rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+    
+    .switch-item {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      padding: 6rpx 12rpx;
+      border-radius: 8rpx;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      
+      text {
+        font-size: 22rpx;
+        color: #999999;
+        line-height: 1;
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+        
+        text {
+          color: #667eea;
+          font-weight: 600;
+        }
+      }
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
   
   .search-view {
     padding: 12rpx 32rpx;
@@ -432,9 +703,42 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
 
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -449,10 +753,23 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
         padding: 0 30rpx 30rpx;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -489,98 +806,89 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+      .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 8rpx;
+          padding: 8rpx 16rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 30rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue b/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
index c74f6e0..44165e4 100644
--- a/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
@@ -14,13 +14,15 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
              
-              <view class="select-header">分期时间</view>
+              <view class="filter-title">分期时间</view>
             <view class="selcet-content" style="padding: 0 24rpx">
               <u-input
                 :disabled="true"
@@ -68,7 +70,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -77,7 +79,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -88,7 +90,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -97,7 +99,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -108,20 +110,81 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>信用卡分期已还</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">信用卡分期已还</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="settledLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="settledColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 分期金额（本息）：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">分期金额（本息）：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>分期金额明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">分期金额明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -132,9 +195,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -157,6 +219,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list', 'line' 或 'column'
   const historyObj = ref({
     clearedCount: '',
   clearedPrincipal: '',
@@ -180,6 +243,140 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '分期金额',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -230,7 +427,7 @@ function searchSubmit() {
         let formatValue = 'YYYY-MM'
         const today = new Date()
       const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-      const start = dayjs(end).add(-239, 'months')
+      const start = dayjs(end).add(-24, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -247,7 +444,7 @@ function searchSubmit() {
       let formatValue = 'YYYY-MM'
       const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-const start = dayjs(end).add(-239, 'months')
+const start = dayjs(end).add(-24, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -374,6 +571,80 @@ const start = dayjs(end).add(-239, 'months')
         display:float;
         text-align: center;
       }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+  }
+  
+  .view-switch {
+    display: flex;
+    align-items: center;
+    gap: 4rpx;
+    background: #ffffff;
+    border-radius: 12rpx;
+    padding: 4rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+    
+    .switch-item {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      padding: 6rpx 12rpx;
+      border-radius: 8rpx;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      
+      text {
+        font-size: 22rpx;
+        color: #999999;
+        line-height: 1;
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+        
+        text {
+          color: #667eea;
+          font-weight: 600;
+        }
+      }
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
   
   .search-view {
     padding: 12rpx 32rpx;
@@ -385,9 +656,42 @@ const start = dayjs(end).add(-239, 'months')
 
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -402,10 +706,23 @@ const start = dayjs(end).add(-239, 'months')
         padding: 0 30rpx 30rpx;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -442,98 +759,89 @@ const start = dayjs(end).add(-239, 'months')
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 20rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 8rpx;
+          padding: 8rpx 16rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 30rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/statistic/bill/creditRecordAnalysis/index.vue b/src/pages/statistic/bill/creditRecordAnalysis/index.vue
index 1c2a67e..64cff3d 100644
--- a/src/pages/statistic/bill/creditRecordAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditRecordAnalysis/index.vue
@@ -5,13 +5,15 @@
           <u-input v-model="queryParams.time" border="false" type="select"   placeholder="请选择查询日期" suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
              
-              <view class="select-header">查询日期</view>
+              <view class="filter-title">查询日期</view>
             <view class="selcet-content" style="padding: 0 24rpx">
               <u-input
                 :disabled="true"
@@ -60,7 +62,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -69,7 +71,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -80,7 +82,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -89,7 +91,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -100,7 +102,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
           <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -109,7 +111,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #ec4899 100%);">
           <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -120,7 +122,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
           <uni-icons type="person" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -129,7 +131,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
           <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -140,7 +142,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -149,7 +151,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -160,29 +162,87 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>征信查询统计</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">征信查询统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="creditRecordLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="creditRecordColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 查询次数：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">查询次数：</text>
+                <text class="amount-value">{{ item.value }}次</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="info" size="14" color="#667eea"></uni-icons>
+                <text>查询明细</text>
+              </view>
+              <view class="detail-value">{{ formatMultiLineData(item.detail) }}</view>
             </view>
-            <view class="item-row">
-            <text class="row-label">查询明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
         </view>
       </u-list>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -200,6 +260,7 @@
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list', 'line' 或 'column'
   const creditRecord = ref({
     amount: '',
   income: '',
@@ -228,6 +289,134 @@
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '查询次数',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -383,6 +572,80 @@ function searchSubmit() {
         display:float;
         text-align: center;
       }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+  }
+  
+  .view-switch {
+    display: flex;
+    align-items: center;
+    gap: 4rpx;
+    background: #ffffff;
+    border-radius: 12rpx;
+    padding: 4rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+    
+    .switch-item {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      padding: 6rpx 12rpx;
+      border-radius: 8rpx;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      
+      text {
+        font-size: 22rpx;
+        color: #999999;
+        line-height: 1;
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+        
+        text {
+          color: #667eea;
+          font-weight: 600;
+        }
+      }
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 24rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
   
   .search-view {
     padding: 12rpx 32rpx;
@@ -393,9 +656,39 @@ function searchSubmit() {
     position: relative;
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 1;
+      }
     }
   
     .filter-panel {
@@ -410,10 +703,23 @@ function searchSubmit() {
         padding: 0 30rpx 30rpx;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -450,98 +756,83 @@ function searchSubmit() {
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 20rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 8rpx;
+          padding: 8rpx 16rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 30rpx;
+          color: #ffffff;
+          font-weight: 700;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 20rpx 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 24rpx;
+          color: #667eea;
+          font-weight: 600;
+          line-height: 1;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-value {
+        font-size: 26rpx;
+        color: #2c3e50;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        word-break: break-all;
       }
     }
   }
diff --git a/src/pages/statistic/bill/futuresAnalysis/index.vue b/src/pages/statistic/bill/futuresAnalysis/index.vue
index 56c0dee..1f864d7 100644
--- a/src/pages/statistic/bill/futuresAnalysis/index.vue
+++ b/src/pages/statistic/bill/futuresAnalysis/index.vue
@@ -14,8 +14,10 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -68,7 +70,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -77,7 +79,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -88,7 +90,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -97,7 +99,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
           <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -108,20 +110,82 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>期货统计分析</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">期货统计分析</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="futuresAnalysisLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="futuresAnalysisColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 收益：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">收益：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>收益明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">收益明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -132,9 +196,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -158,6 +221,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list' 或 'line' 或 'column'
   const futuresStock = ref({
     maxRevenue: '',
   maxLoss: '',
@@ -181,6 +245,136 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   })
 
   const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+      
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+       
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '收益',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -231,7 +425,7 @@ function searchSubmit() {
         let formatValue = 'YYYY-MM'
         const today = new Date()
       const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-      const start = dayjs(end).add(-59, 'months')
+      const start = dayjs(end).add(-12, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -248,7 +442,7 @@ function searchSubmit() {
       let formatValue = 'YYYY-MM'
       const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-const start = dayjs(end).add(-59, 'months')
+const start = dayjs(end).add(-12, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -375,19 +569,126 @@ const start = dayjs(end).add(-59, 'months')
         text-align: center;
       }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
     display: flex;
-    justify-content: space-between;
     align-items: center;
     position: relative;
-
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -398,14 +699,28 @@ const start = dayjs(end).add(-59, 'months')
       background-color: rgba(0, 0, 0, 0.5);
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -434,6 +749,7 @@ const start = dayjs(end).add(-59, 'months')
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -442,98 +758,89 @@ const start = dayjs(end).add(-59, 'months')
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6rpx;
+          padding: 4rpx 12rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 28rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/statistic/bill/investAnalysis/index.vue b/src/pages/statistic/bill/investAnalysis/index.vue
index 44fe56a..57d3d49 100644
--- a/src/pages/statistic/bill/investAnalysis/index.vue
+++ b/src/pages/statistic/bill/investAnalysis/index.vue
@@ -6,8 +6,10 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -60,7 +62,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -69,7 +71,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="star" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -80,7 +82,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -89,7 +91,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -100,7 +102,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ffc371 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
           <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -111,20 +113,82 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>收益统计分析</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">收益统计分析</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="investAnalysisLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="investAnalysisColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 收益：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">收益：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>收益明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">收益明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -135,9 +199,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -161,6 +224,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list' 或 'line' 或 'column'
   const futuresStock = ref({
     maxRevenue: '',
   maxLoss: '',
@@ -183,6 +247,136 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   })
 
   const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+       
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '收益',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -232,7 +426,7 @@ function searchSubmit() {
         let formatValue = 'YYYY-MM'
         const today = new Date()
       const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-      const start = dayjs(end).add(-59, 'months')
+      const start = dayjs(end).add(-12, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -249,7 +443,7 @@ function searchSubmit() {
       let formatValue = 'YYYY-MM'
       const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-const start = dayjs(end).add(-59, 'months')
+const start = dayjs(end).add(-12, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -376,19 +570,126 @@ const start = dayjs(end).add(-59, 'months')
         text-align: center;
       }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
     display: flex;
-    justify-content: space-between;
     align-items: center;
     position: relative;
-
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -399,14 +700,28 @@ const start = dayjs(end).add(-59, 'months')
       background-color: rgba(0, 0, 0, 0.5);
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -435,6 +750,7 @@ const start = dayjs(end).add(-59, 'months')
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -443,98 +759,89 @@ const start = dayjs(end).add(-59, 'months')
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6rpx;
+          padding: 4rpx 12rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 28rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/statistic/bill/onlineLendAnalysis/index.vue b/src/pages/statistic/bill/onlineLendAnalysis/index.vue
index 6357ac2..46a1387 100644
--- a/src/pages/statistic/bill/onlineLendAnalysis/index.vue
+++ b/src/pages/statistic/bill/onlineLendAnalysis/index.vue
@@ -14,8 +14,10 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -69,7 +71,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="upload-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -78,7 +80,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -89,7 +91,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -98,7 +100,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -109,7 +111,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
           <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -118,7 +120,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #ec4899 100%);">
           <uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -129,7 +131,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
           <uni-icons type="loop" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -138,7 +140,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
           <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -149,20 +151,81 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>贷款待还统计</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">贷款待还统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="onlineLendLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="onlineLendColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 待还款金额：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">待还款金额：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>待还款明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">待还款明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -173,9 +236,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -198,6 +260,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list' 或 'line' 或 'column'
   const historyObj = ref({
     unclearedDetailCount: '',
   unClearedDetail: '',
@@ -224,6 +287,139 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '待还款金额',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -423,6 +619,80 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
         text-align: center;
       }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
@@ -430,12 +700,46 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
     justify-content: space-between;
     align-items: center;
     position: relative;
-
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -446,14 +750,28 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
       background-color: rgba(0, 0, 0, 0.5);
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -482,6 +800,7 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -490,99 +809,93 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 20rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 8rpx;
+          padding: 8rpx 16rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
+        
+        .amount-value {
+          font-size: 30rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
+      }
   
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
+    }
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
         }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+      }
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
         }
       }
     }
   
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
-      }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
-      }
-    }
+
   }
   </style>
\ No newline at end of file
diff --git a/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue b/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
index e3b197f..52ae06b 100644
--- a/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
+++ b/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
@@ -14,13 +14,15 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
              
-              <view class="select-header">还款时间</view>
+              <view class="filter-title">还款时间</view>
             <view class="selcet-content" style="padding: 0 24rpx">
               <u-input
                 :disabled="true"
@@ -68,7 +70,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -77,7 +79,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -88,7 +90,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -97,7 +99,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
           <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -108,20 +110,79 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>贷款已还统计</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">贷款已还统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="lendSettledLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="lendSettledColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 借款金额（本息）：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">借款金额（本息）：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="info" size="14" color="#667eea"></uni-icons>
+                <text>借款金额明细</text>
+              </view>
+              <view class="detail-value">{{ formatMultiLineData(item.detail) }}</view>
             </view>
-            <view class="item-row">
-            <text class="row-label">借款金额明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -132,9 +193,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -157,6 +217,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list', 'line' 或 'column'
   const historyObj = ref({
     clearedCount: '',
   clearedPrincipal: '',
@@ -181,6 +242,140 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   })
 
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '借款金额',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -231,7 +426,7 @@ function searchSubmit() {
         let formatValue = 'YYYY-MM'
         const today = new Date()
       const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-      const start = dayjs(end).add(-239, 'months')
+      const start = dayjs(end).add(-60, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -248,7 +443,7 @@ function searchSubmit() {
       let formatValue = 'YYYY-MM'
       const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-const start = dayjs(end).add(-239, 'months')
+const start = dayjs(end).add(-60, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -375,6 +570,80 @@ const start = dayjs(end).add(-239, 'months')
         display:float;
         text-align: center;
       }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+  }
+  
+  .view-switch {
+    display: flex;
+    align-items: center;
+    gap: 4rpx;
+    background: #ffffff;
+    border-radius: 12rpx;
+    padding: 4rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+    
+    .switch-item {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      padding: 6rpx 12rpx;
+      border-radius: 8rpx;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      
+      text {
+        font-size: 22rpx;
+        color: #999999;
+        line-height: 1;
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+        
+        text {
+          color: #667eea;
+          font-weight: 600;
+        }
+      }
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 24rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
   
   .search-view {
     padding: 12rpx 32rpx;
@@ -386,9 +655,39 @@ const start = dayjs(end).add(-239, 'months')
 
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 1;
+      }
     }
   
     .filter-panel {
@@ -403,10 +702,23 @@ const start = dayjs(end).add(-239, 'months')
         padding: 0 30rpx 30rpx;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -443,98 +755,83 @@ const start = dayjs(end).add(-239, 'months')
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 20rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 8rpx;
+          padding: 8rpx 16rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 30rpx;
+          color: #ffffff;
+          font-weight: 700;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 20rpx 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 24rpx;
+          color: #667eea;
+          font-weight: 600;
+          line-height: 1;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-value {
+        font-size: 26rpx;
+        color: #2c3e50;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        word-break: break-all;
       }
     }
   }
diff --git a/src/pages/statistic/bill/stocksAnalysis/index.vue b/src/pages/statistic/bill/stocksAnalysis/index.vue
index 4b89f15..982fae2 100644
--- a/src/pages/statistic/bill/stocksAnalysis/index.vue
+++ b/src/pages/statistic/bill/stocksAnalysis/index.vue
@@ -14,8 +14,10 @@
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -68,7 +70,7 @@
         <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
           <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -77,7 +79,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
           <uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -88,7 +90,7 @@
     </div>
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
           <uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -97,7 +99,7 @@
         </div>
       </div>
       <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
           <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
         </view>
         <div class="info-sum">
@@ -108,20 +110,82 @@
     </div>
     <div></div>
   </div>
-  <div style="margin:8px" v-show="listData.length>0">
-    <button type="primary" style="margin-right:5px" size=mini>股票统计分析</button>
-  </div>
-      <u-list  :spaceHeight="116" lowerThreshold="100">
+  
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">股票统计分析</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="stocksAnalysisLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="stocksAnalysisColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.time+' 收益：'+item.value" size="30rpx" color="#333333" ></u--text>
+              <view class="header-left">
+                <view class="time-badge">
+                  <uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
+                  <text>{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="header-right">
+                <text class="amount-label">收益：</text>
+                <text class="amount-value">{{ item.value }}元</text>
+              </view>
+            </view>
+            <view class="item-body">
+              <view class="detail-label">
+                <uni-icons type="list" size="14" color="#667eea"></uni-icons>
+                <text>收益明细</text>
+              </view>
+              <view class="detail-content">
+                <text>{{ formatMultiLineData(item.detail) || '-' }}</text>
+              </view>
             </view>
-            <view class="item-row">
-            <text class="row-label">收益明细：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
-          </view>
           </view>
         </u-list-item>
         <view>
@@ -132,9 +196,8 @@
         <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
           @confirm="handleAccountConfirm"></u-picker>
     </view>
-    <!-- 悬停按钮返回工作台-->
-      <suspend></suspend>
-      <refresh></refresh>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
   </template>
   
   <script setup>
@@ -158,6 +221,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   const timeShow= ref(false)
   const time =ref( Number(new Date()))
   const  flag= ref(true)
+  const viewMode = ref('list') // 'list' 或 'line' 或 'column'
   const futuresStock = ref({
     maxRevenue: '',
   maxLoss: '',
@@ -181,6 +245,136 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   })
 
   const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+      
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  })
+  
+  // 柱状图配置
+  const columnChartOpts = ref({
+    color: ['#667eea'],
+    padding: [20, 15, 35, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      rotateLabel: true,
+      rotateAngle: 30
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        if (val >= 10000) {
+          return (val / 10000).toFixed(1) + 'w'
+        }
+        return val.toFixed(0)
+      },
+      data: [
+       
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        linearOpacity: 0.6,
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  })
+  
+  // 图表数据
+  const chartData = computed(() => {
+    if (!listData.value || listData.value.length === 0) {
+      return {
+        categories: [],
+        series: []
+      }
+    }
+    // 创建副本并反转数组，使时间从前往后排序
+    const reversedData = [...listData.value].reverse()
+    return {
+      categories: reversedData.map(item => item.time || ''),
+      series: [
+        {
+          name: '收益',
+          data: reversedData.map(item => {
+            const value = parseFloat(item.value)
+            return isNaN(value) ? 0 : value
+          }),
+          linearIndex: 0,
+          color: '#667eea'
+        }
+      ]
+    }
+  })
+  
   const windowHeight = computed(() => {
               uni.getSystemInfoSync().windowHeight - 50
           })	
@@ -231,7 +425,7 @@ function searchSubmit() {
         let formatValue = 'YYYY-MM'
         const today = new Date()
       const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-      const start = dayjs(end).add(-59, 'months')
+      const start = dayjs(end).add(-12, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -248,7 +442,7 @@ function searchSubmit() {
       let formatValue = 'YYYY-MM'
       const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-const start = dayjs(end).add(-59, 'months')
+const start = dayjs(end).add(-12, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -375,19 +569,126 @@ const start = dayjs(end).add(-59, 'months')
         text-align: center;
       }
   
+  .section-title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx 16rpx;
+    background-color: #f5f7fa;
+    
+    .title-decorator {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1;
+      flex: 1;
+    }
+    
+    .view-switch {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      background: #ffffff;
+      border-radius: 12rpx;
+      padding: 4rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .switch-item {
+        display: flex;
+        align-items: center;
+        gap: 4rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        text {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1;
+        }
+        
+        &.active {
+          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+          
+          text {
+            color: #667eea;
+            font-weight: 600;
+          }
+        }
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+  
+  .chart-container {
+    margin: 16rpx 24rpx 160rpx;
+    padding: 16rpx 16rpx 0;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    width: calc(100% - 48rpx);
+    height: 600rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  
   .search-view {
     padding: 12rpx 32rpx;
     background-color: #ffffff;
     display: flex;
-    justify-content: space-between;
     align-items: center;
     position: relative;
-
+    z-index: 100;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
   
     .search-input {
-      background: #F5F5F5;
+      background: rgba(102, 126, 234, 0.08);
       color: #333333;
-      margin-right: 36rpx;
+      flex: 1;
+      margin-right: 16rpx;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      
+      uni-icons {
+        color: #667eea;
+      }
     }
   
     .filter-panel {
@@ -398,14 +699,28 @@ const start = dayjs(end).add(-59, 'months')
       background-color: rgba(0, 0, 0, 0.5);
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
-          color: #000000;
-          font-size: 30rpx;
-          font-weight: 500;
-          padding: 30rpx 0;
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          padding: 32rpx 0 24rpx 20rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          
+          &::before {
+            content: '';
+            width: 6rpx;
+            height: 32rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 3rpx;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
         }
   
         .state-list {
@@ -434,6 +749,7 @@ const start = dayjs(end).add(-59, 'months')
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -442,98 +758,89 @@ const start = dayjs(end).add(-59, 'months')
   }
   
   .list-item {
-    margin: 0 24rpx 24rpx;
-    padding: 32rpx;
+    margin: 0 24rpx 16rpx;
     background-color: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 16rpx;
-  
-      .status {
-        .status-item {
-          width: 120rpx;
-          height: 44rpx;
-          text-align: center;
-          line-height: 44rpx;
-          border-radius: 4rpx;
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-left {
+        flex: 1;
+        
+        .time-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6rpx;
+          padding: 4rpx 12rpx;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12rpx;
+          
+          text {
+            font-size: 28rpx;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: 1;
+          }
+        }
+      }
+      
+      .header-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4rpx;
+        
+        .amount-label {
           font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.85);
+          line-height: 1;
         }
-  
-        .status1 {
-          background: #F0F0F0;
-          color: #8C8C8C;
-        }
-  
-        .status2 {
-          background: rgba(38, 129, 255, 0.2);
-          color: #2681FF;
-        }
-  
-        .status3 {
-          background: #F7F7F7;
-          color: #2681FF;
-        }
-  
-        .status4 {
-          background: rgba(255, 85, 51, 0.2);
-          color: #FF5533;
-        }
-  
-        .status5 {
-          background: #F7F7F7;
-          color: rgba(0, 0, 0, 0.85);
-        }
-  
-        .status7 {
-          background: rgba(255, 129, 51, 0.2);
-          color: #FF8133;
-        }
-  
-        .status8 {
-          background: rgba(65, 217, 165, 0.2);
-          color: #41D9A5;
+        
+        .amount-value {
+          font-size: 28rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
         }
       }
     }
-  
-    .item-row {
-      padding: 16rpx 0;
-  
-      .row-label {
-        color: rgba(0, 0, 0, 0.55);
+    
+    .item-body {
+      padding: 24rpx;
+      
+      .detail-label {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        margin-bottom: 12rpx;
+        
+        text {
+          font-size: 26rpx;
+          color: #667eea;
+          font-weight: 600;
+        }
       }
-  
-      .row-value {
-        color: rgba(0, 0, 0, 0.85)
-      }
-    }
-  
-    .operate {
-      display: flex;
-      justify-content: flex-end;
-  
-      .btn {
-        width: 146rpx;
-        height: 56rpx;
-        line-height: 56rpx;
-        border-radius: 8rpx;
-        margin-left: 5rpx;
-        text-align: center;
-      }
-  
-      .circulation {
-        background: rgba(0, 0, 0, 0.04);
-        margin-right: 24rpx;
-        color: rgba(0, 0, 0, 0.85);
-      }
-  
-      .filling {
-        background: #2681FF;
-        border-radius: 8rpx;
-        color: #FFFFFF;
+      
+      .detail-content {
+        padding: 16rpx;
+        background: #f8f9fb;
+        border-radius: 12rpx;
+        border-left: 4rpx solid #667eea;
+        
+        text {
+          font-size: 26rpx;
+          color: #333333;
+          line-height: 1.8;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
       }
     }
   }
diff --git a/src/pages/work/bill/creditCardBill/list.vue b/src/pages/work/bill/creditCardBill/list.vue
index a9fa28f..1a8db93 100644
--- a/src/pages/work/bill/creditCardBill/list.vue
+++ b/src/pages/work/bill/creditCardBill/list.vue
@@ -62,7 +62,7 @@
           
           <view class="last-trans-section" v-if="auth.hasPermi('invest:posmachine:list')">
             <view class="info-item">
-              <text class="info-label">最近交易</text>
+              <text class="info-label">最近交易时间</text>
               <text class="info-value">{{ item.recentDealTime || '-' }}</text>
             </view>
           </view>