From aa2b470219d34ee6fe16c96ddd737e98a8089f68 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Wed, 26 Nov 2025 02:19:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=81=A5=E5=BA=B7=E6=A1=A3=E6=A1=88?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=EF=BC=8C=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/refresh/refresh.vue            |   42 +-
 src/components/suspend/suspend.vue            |   44 +-
 src/pages/health/activity/addEdit.vue         |   49 +-
 src/pages/health/activity/list.vue            |  451 ++++--
 src/pages/health/doctorRecord/addEdit.vue     |   53 +-
 src/pages/health/doctorRecord/list.vue        |  661 ++++++---
 src/pages/health/healthRecord/addEdit.vue     |  153 +-
 src/pages/health/healthRecord/list.vue        |  626 +++++---
 .../health/heightWeightRecord/addEdit.vue     |   49 +-
 src/pages/health/heightWeightRecord/list.vue  |  433 ++++--
 src/pages/health/homepage/index.vue           |  271 +++-
 src/pages/health/index.vue                    |  264 ++--
 src/pages/health/marRecord/addEdit.vue        |   49 +-
 src/pages/health/marRecord/list.vue           |  668 ++++++---
 src/pages/health/medicineBasic/addEdit.vue    |   49 +-
 src/pages/health/medicineBasic/details.vue    |  492 +++++--
 src/pages/health/medicineBasic/list.vue       |  591 +++++---
 src/pages/health/medicineStock/list.vue       |  288 ++--
 src/pages/health/medicineStockIn/addEdit.vue  |   49 +-
 src/pages/health/medicineStockIn/details.vue  |  277 +++-
 src/pages/health/medicineStockIn/list.vue     |  590 +++++---
 src/pages/health/milkPowderRecord/addEdit.vue |   49 +-
 src/pages/health/milkPowderRecord/list.vue    |  539 ++++---
 src/pages/health/person/addEdit.vue           |  151 +-
 src/pages/health/person/list.vue              |  434 +++---
 src/pages/health/processRecord/addEdit.vue    |   49 +-
 src/pages/health/processRecord/list.vue       |  557 +++++---
 .../statistic/doctorStatistic/index.vue       | 1142 +++++++++++----
 .../statistic/healthStatistic/index.vue       | 1260 ++++++++++++-----
 src/pages/health/statistic/index.vue          |  232 +--
 .../health/statistic/marStatistic/index.vue   | 1206 +++++++++++-----
 .../statistic/milkPowderStatistic/index.vue   | 1061 ++++++++++----
 .../statistic/temperatureStatistic/index.vue  | 1075 +++++++++-----
 .../health/temperatureRecord/addEdit.vue      |   49 +-
 src/pages/health/temperatureRecord/list.vue   |  605 +++++---
 src/pages/invest/debitCard/addEdit.vue        |  298 ++++
 src/pages/invest/debitCard/adjustLimit.vue    |  470 ++++++
 src/pages/invest/debitCard/details.vue        |  308 ++++
 src/pages/invest/debitCard/limitHistory.vue   |  486 +++++++
 src/pages/invest/debitCard/list.vue           |  688 +++++++++
 src/pages/invest/shouye/index.vue             | 1238 ++++++++++++++++
 .../statics/creditBillAnalysis/index.vue      |  979 +++++++++++++
 src/pages/invest/work/index.vue               |  219 +++
 src/pages/login.vue                           |  265 +++-
 src/pages/mine.vue                            |  462 ++++--
 src/pages/register.vue                        |  241 +++-
 .../bill/creditBillAnalysis/index.vue         |    0
 .../bill/creditInstallmentAnalysis/index.vue  |    0
 .../index.vue                                 |    0
 .../bill/creditRecordAnalysis/index.vue       |    0
 .../statistic/bill/futuresAnalysis/index.vue  |    0
 .../statistic/bill/investAnalysis/index.vue   |    0
 .../bill/onlineLendAnalysis/index.vue         |    0
 .../bill/onlineLendSettledAnalysis/index.vue  |    0
 .../statistic/bill/stocksAnalysis/index.vue   |    0
 src/pages_mine/pages/about/index.vue          |  247 +++-
 src/pages_mine/pages/avatar/index.vue         |  147 +-
 src/pages_mine/pages/help/index.vue           |  178 ++-
 src/pages_mine/pages/info/edit.vue            |   68 +-
 src/pages_mine/pages/info/index.vue           |  116 +-
 src/pages_mine/pages/pwd/index.vue            |  154 +-
 src/pages_mine/pages/setting/index.vue        |  128 +-
 62 files changed, 16320 insertions(+), 4930 deletions(-)
 create mode 100644 src/pages/invest/debitCard/addEdit.vue
 create mode 100644 src/pages/invest/debitCard/adjustLimit.vue
 create mode 100644 src/pages/invest/debitCard/details.vue
 create mode 100644 src/pages/invest/debitCard/limitHistory.vue
 create mode 100644 src/pages/invest/debitCard/list.vue
 create mode 100644 src/pages/invest/shouye/index.vue
 create mode 100644 src/pages/invest/statics/creditBillAnalysis/index.vue
 create mode 100644 src/pages/invest/work/index.vue
 create mode 100644 src/pages/statistic/bill/creditBillAnalysis/index.vue
 create mode 100644 src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
 create mode 100644 src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
 create mode 100644 src/pages/statistic/bill/creditRecordAnalysis/index.vue
 create mode 100644 src/pages/statistic/bill/futuresAnalysis/index.vue
 create mode 100644 src/pages/statistic/bill/investAnalysis/index.vue
 create mode 100644 src/pages/statistic/bill/onlineLendAnalysis/index.vue
 create mode 100644 src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
 create mode 100644 src/pages/statistic/bill/stocksAnalysis/index.vue

diff --git a/src/components/refresh/refresh.vue b/src/components/refresh/refresh.vue
index 7d29f58..2df2a63 100644
--- a/src/components/refresh/refresh.vue
+++ b/src/components/refresh/refresh.vue
@@ -1,10 +1,9 @@
 <template>
 	<view>
 	  <movable-area class="movable-area">
-		<movable-view class="movable-view" :x="x" :y="y" direction="all">
+		<movable-view class="movable-view" :x="x" :y="y" direction="all" :style="{opacity: showButton ? 1 : 0}">
 		  <view class="refreshPages" @click="refreshPages">
-			<image src="../../static/images/tabbar/refresh.png"></image>
-			<!-- <text></text> -->
+			<uni-icons type="reload" size="32" color="#52c41a"></uni-icons>
 		  </view>
 		</movable-view>
 	  </movable-area>
@@ -15,10 +14,16 @@
   export default {
 	data() {
 	  return {
-		x: 1000, // x大于默认的值就会在最右边
-		y: 1000
+		x: 600,
+		y: 800,
+		showButton: false
 	  };
 	},
+	mounted() {
+	  setTimeout(() => {
+		this.showButton = true;
+	  }, 100);
+	},
 	computed: {
 
 	},
@@ -48,30 +53,23 @@
 	z-index: 99999999;
 	pointer-events: none; //此处要加，鼠标事件可以渗透
 	.movable-view {
-	  width: 60rpx;
-	  height: 60rpx;
+	  width: 88rpx;
+	  height: 88rpx;
 	  pointer-events: auto; //恢复鼠标事件
 	  .refreshPages {
-		width: 60rpx;
-		height: 60rpx;
+		width: 88rpx;
+		height: 88rpx;
 		display: flex;
 		justify-content: center;
-		flex-direction: column;
 		align-items: center;
 		background: #ffffff;
 		border-radius: 50%;
-		border: 1px solid #a6a6a6;
-		image {
-		  width: 30rpx;
-		  height: 30rpx;
-		}
-
-		text {
-		  margin-top: 10rpx;
-		  font-size: 16rpx;
-		  font-family: PingFangSC-Semibold, PingFang SC;
-		  font-weight: 600;
-		  color: #000000;
+		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) rotate(180deg);
+		  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 		}
 	  }
 	}
diff --git a/src/components/suspend/suspend.vue b/src/components/suspend/suspend.vue
index 59d57a3..3ebcd92 100644
--- a/src/components/suspend/suspend.vue
+++ b/src/components/suspend/suspend.vue
@@ -1,10 +1,9 @@
 <template>
 	<view>
 	  <movable-area class="movable-area">
-		<movable-view class="movable-view" :x="x" :y="y" direction="all">
+		<movable-view class="movable-view" :x="x" :y="y" direction="all" :style="{opacity: showButton ? 1 : 0}">
 		  <view class="newProblem" @click="newProblem">
-			<image src="../../static/images/tabbar/work.png"></image>
-			<!-- <text></text> -->
+			<uni-icons type="map-pin-ellipse" size="32" color="#667eea"></uni-icons>
 		  </view>
 		</movable-view>
 	  </movable-area>
@@ -15,10 +14,16 @@
   export default {
 	data() {
 	  return {
-		x: 1000, // x大于默认的值就会在最右边
-		y: 1000
+		x: 600,
+		y: 800,
+		showButton: false
 	  };
 	},
+	mounted() {
+	  setTimeout(() => {
+		this.showButton = true;
+	  }, 100);
+	},
 	computed: {
 
 	},
@@ -34,7 +39,7 @@
   <style lang="less">
   .movable-area {
 	// 保持在右下角
-	margin-top: 200rpx;
+	margin-top: 230rpx;
 	margin-left: 100rpx;
 	height: calc(100vh - 300rpx);
 	width: calc(100vw - 150rpx);
@@ -46,30 +51,23 @@
 	z-index: 99999999;
 	pointer-events: none; //此处要加，鼠标事件可以渗透
 	.movable-view {
-	  width: 60rpx;
-	  height: 60rpx;
+	  width: 88rpx;
+	  height: 88rpx;
 	  pointer-events: auto; //恢复鼠标事件
 	  .newProblem {
-		width: 60rpx;
-		height: 60rpx;
+		width: 88rpx;
+		height: 88rpx;
 		display: flex;
 		justify-content: center;
-		flex-direction: column;
 		align-items: center;
 		background: #ffffff;
 		border-radius: 50%;
-		border: 1px solid #a6a6a6;
-		image {
-		  width: 30rpx;
-		  height: 30rpx;
-		}
-
-		text {
-		  margin-top: 10rpx;
-		  font-size: 16rpx;
-		  font-family: PingFangSC-Semibold, PingFang SC;
-		  font-weight: 600;
-		  color: #000000;
+		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);
 		}
 	  }
 	}
diff --git a/src/pages/health/activity/addEdit.vue b/src/pages/health/activity/addEdit.vue
index 83f2a6a..b0df681 100644
--- a/src/pages/health/activity/addEdit.vue
+++ b/src/pages/health/activity/addEdit.vue
@@ -297,25 +297,54 @@ function submit() {
 <style lang="scss" scoped>
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 0;
   background-color: #fff;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 
   .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
   }
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 24rpx;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 16rpx;
     }
   }
 }
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/health/activity/list.vue b/src/pages/health/activity/list.vue
index 5dd2438..078f86b 100644
--- a/src/pages/health/activity/list.vue
+++ b/src/pages/health/activity/list.vue
@@ -1,70 +1,96 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.name" border="false" type="select"   @click="handleSearch" placeholder="请填入活动名称" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <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>
-       </view>
-       </u-sticky>
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-view">
+        <u--input v-model="queryParams.name" border="false" placeholder="请输入活动名称" class="search-input"
+          @blur="handleSearch" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+          <text>新增</text>
+        </view>
+      </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="dictStr(item.type,typeList) +'- 在 '+item.place+' 活动 '+item.exerciseTimeStr" size="30rpx" color="#333333" :bold="true"></u--text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">活动名称：</text>
-            <text class="row-value">{{ item.name }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">成员：</text>
-            <text class="row-value">{{ item.partner }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">开始时间：</text>
-            <text class="row-value">{{ item.startTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">结束时间：</text>
-            <text class="row-value">{{ item.endTime }}</text>
-          </view>
-          <!-- <view class="item-row">
-            <text class="row-label">活动时长：</text>
-            <text class="row-value">{{ item.exerciseTime }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">活动量：</text>
-            <text class="row-value">{{dictStr(item.activityVolume,activityVolumeList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">总费用：</text>
-            <text class="row-value">{{ item.totalCost+' 元' }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">费用明细：</text>
-            <text class="row-value">{{ item.costDetail }}</text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="flag-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="place-info">
+                <text class="place-text">{{ item.place }}</text>
+              </view>
+            </view>
+            <view class="duration-section">
+              <text class="duration-value">{{ item.exerciseTimeStr || '--' }}</text>
+            </view>
+            <view class="name-section">
+              <text class="name-value">{{ item.name }}</text>
+            </view>
           </view>
           
-          <view class="item-row">
-            <text class="row-label">饮食：</text>
-            <text class="row-value">{{ item.foods }}</text>
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">活动类型</text>
+                <text class="info-value">{{ dictStr(item.type,typeList) || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">总费用</text>
+                <text class="info-value cost-value">{{ item.totalCost }} 元</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">成员</text>
+                <text class="info-value">{{ item.partner || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">活动量</text>
+                <text class="info-value">{{ dictStr(item.activityVolume,activityVolumeList) || '--' }}</text>
+              </view>
+              <view class="info-item" style="flex: 0 0 100%;">
+              </view>
+              <view class="info-item">
+                <text class="info-label">开始时间</text>
+                <text class="info-value">{{ item.startTime || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">结束时间</text>
+                <text class="info-value">{{ item.endTime || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.costDetail">
+                <text class="info-label">费用明细</text>
+                <text class="info-value">{{ item.costDetail }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.foods">
+                <text class="info-label">饮食</text>
+                <text class="info-value">{{ item.foods }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.harvest">
+                <text class="info-label">收获</text>
+                <text class="info-value">{{ item.harvest }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">收获：</text>
-            <text class="row-value">{{ item.harvest }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling"  @click="handleCopy(item)">复制</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" @click="handleCopy(item)">
+              <uni-icons type="paperplane" size="16" color="#fa8c16"></uni-icons>
+              <text>复制</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -176,22 +202,35 @@ function getList() {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delActivity(item.id)
-              uni.navigateTo({ url: `/pages/health/activity/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delActivity(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -208,13 +247,48 @@ function getList() {
   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;
   }
-
+  
+  .add-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 {
     width: 100%;
     position: absolute;
@@ -267,98 +341,193 @@ function getList() {
 }
 
 .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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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%);
+    gap: 12rpx;
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .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;
+    }
+    
+    .place-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      
+      .place-text {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 500;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+    }
+    
+    .duration-section {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      
+      .duration-value {
+        color: #fa8c16;
+        font-size: 30rpx;
+        font-weight: 600;
+        line-height: 1.3;
+        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;
+    }
+    
+    .name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      justify-content: flex-end;
+      
+      .name-value {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        letter-spacing: 0.5rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+        
+        &.cost-value {
+          color: #fa8c16;
+          font-weight: 600;
+        }
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-copy {
+      background: rgba(250, 140, 22, 0.1);
+      color: #fa8c16;
+      border: 1rpx solid rgba(250, 140, 22, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/health/doctorRecord/addEdit.vue b/src/pages/health/doctorRecord/addEdit.vue
index fc3f75c..1b6a8aa 100644
--- a/src/pages/health/doctorRecord/addEdit.vue
+++ b/src/pages/health/doctorRecord/addEdit.vue
@@ -341,27 +341,60 @@ function submit() {
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 0;
   background-color: #fff;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 
   .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
   }
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 24rpx;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 16rpx;
     }
   }
 }
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/health/doctorRecord/list.vue b/src/pages/health/doctorRecord/list.vue
index 3d1f1de..9a7cc67 100644
--- a/src/pages/health/doctorRecord/list.vue
+++ b/src/pages/health/doctorRecord/list.vue
@@ -1,33 +1,31 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-          <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-       </view>
-         <view class="search-view">
-          <u-input v-model="queryParams.healthRecordName" border="false" type="select"  @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <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>
-       </view>
-       </u-sticky>
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u-input v-model="queryParams.time" border="false" type="select" readonly 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-transition :show="filterPanel" mode="fade">
-          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-container">
+        <view class="search-row">
+          <u--input v-model="queryParams.personName" border="false" type="select" @click="handlePerson" placeholder="请选择人员" class="search-input"
+            suffixIcon="search" suffixIconStyle="color: #909399">
+          </u--input>
+          <view class="add-btn" @click="handleAdd()">
+            <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+            <text>新增</text>
+          </view>
+        </view>
+        <view class="search-row">
+          <u--input v-model="queryParams.healthRecordName" border="false" type="select" @click="handleHealthRecord" placeholder="请选择健康档案" class="search-input"
+            suffixIcon="search" suffixIconStyle="color: #909399">
+          </u--input>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
+        </view>
+      </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"
@@ -56,8 +54,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"
@@ -69,66 +73,84 @@
               @cancel="openOrCloseDate"
               @confirm="confirm"
             ></u-datetime-picker>
-          </view>
-        </u-transition>
-      </view>
+        </view>
+      </u-transition>
     </u-sticky>
-    <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
+    <u-list @scrolltolower="loadmore" :spaceHeight="170" 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.healthRecordName +'：'+ item.hospitalName" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.healthRecordName }}</text>
+                <text class="card-code">{{ item.hospitalName }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">就医类型：</text>
-            <text class="row-value">{{ dictStr(item.type, typeList) }}</text>
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">就医类型</text>
+                <text class="info-value">{{ dictStr(item.type, typeList) || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">就诊时间</text>
+                <text class="info-value">{{ item.visitingTime || '--' }}</text>
+              </view>
+              <!-- <view class="info-item">
+                <text class="info-label">人员姓名</text>
+                <text class="info-value">{{ item.personName || '--' }}</text>
+              </view> -->
+              <view class="info-item">
+                <text class="info-label">科室</text>
+                <text class="info-value">{{ item.departments || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">大夫</text>
+                <text class="info-value">{{ item.doctor || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">陪同人</text>
+                <text class="info-value">{{ item.partner || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">总费用</text>
+                <text class="info-value">{{ item.totalCost || '--' }} 元</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.diagnosis">
+                <text class="info-label">诊断结果</text>
+                <text class="info-value">{{ item.diagnosis }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.prescribe">
+                <text class="info-label">处理及医嘱</text>
+                <text class="info-value">{{ item.prescribe }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.costDetail">
+                <text class="info-label">费用明细</text>
+                <text class="info-value">{{ item.costDetail }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">就诊时间：</text>
-            <text class="row-value">{{ item.visitingTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">人员姓名：</text>
-            <text class="row-value">{{ item.personName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">科室：</text>
-            <text class="row-value">{{ item.departments }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">大夫：</text>
-            <text class="row-value">{{ item.doctor }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">陪同人：</text>
-            <text class="row-value">{{ item.partner }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">总费用：</text>
-            <text class="row-value">{{ item.totalCost +' 元'}}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">诊断结果：</text>
-            <text class="row-value">{{ item.diagnosis }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">处理及医嘱：</text>
-            <text class="row-value">{{ item.prescribe }}</text>
-          </view>
-   
-          <view class="item-row">
-            <text class="row-label">费用明细：</text>
-            <text class="row-value">{{ item.costDetail }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling"  @click="handleCopy(item)">复制</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" @click="handleCopy(item)">
+              <uni-icons type="copy" size="16" color="#fa8c16"></uni-icons>
+              <text>复制</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -384,188 +406,373 @@ function settingCancel() {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delDoctorRecord(item.id)
-              uni.navigateTo({ url: `/pages/health/doctorRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
-      }
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delDoctorRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
+    }
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
+page {
+  height: 100%;
+  overflow: auto;
+}
+.search-container {
+  background-color: #ffffff;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 100;
+
+  .search-row {
+    padding: 12rpx 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16rpx;
+    
+    &:first-child {
+      padding-bottom: 8rpx;
+    }
+    
+    &:last-child {
+      padding-top: 8rpx;
     }
 
-.search-view {
-  padding: 12rpx 32rpx;
-  background-color: #ffffff;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
+    .search-input {
+      background: rgba(102, 126, 234, 0.08);
+      color: #333333;
+      flex: 1;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn,
+    .add-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;
+      }
+    }
+  }
+}
 
-  .search-input {
-    background: #F5F5F5;
-    color: #333333;
-    margin-right: 36rpx;
+.filter-panel {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 180rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+
+  .filter-panel-content {
+    background-color: #ffffff;
+    padding: 0 30rpx 30rpx;
+    border-radius: 16rpx 16rpx 0 0;
+
+    .filter-title {
+      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;
+      }
+    }
+
+    .select-header {
+      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;
+      }
+    }
+
+    .selcet-content {
+      display: flex;
+      flex-direction: column;
+      gap: 16rpx;
+    }
   }
 
-  .filter-panel {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+  .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;
       }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
+      
+      text {
+        line-height: 1;
       }
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    .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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .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: 12rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex-shrink: 0;
+        letter-spacing: 0.5rpx;
+      }
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.9);
         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;
+        font-weight: 500;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+        min-width: 0;
+        letter-spacing: 0.3rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-copy {
+      background: rgba(250, 140, 22, 0.1);
+      color: #fa8c16;
+      border: 1rpx solid rgba(250, 140, 22, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/health/healthRecord/addEdit.vue b/src/pages/health/healthRecord/addEdit.vue
index 9d7f9af..a69d71d 100644
--- a/src/pages/health/healthRecord/addEdit.vue
+++ b/src/pages/health/healthRecord/addEdit.vue
@@ -6,68 +6,66 @@
     title="健康档案"
   >
   </u-navbar>
-    <view class="section">
-      <view class="section-title">{{ title}}</view>
-      <view class="form-view">
-        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
-          <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
-            <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
+  <view class="section">
+    <view class="section-title">{{ title}}</view>
+    <view class="form-view">
+      <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+        <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
+          <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
+            inputAlign="right" border="none"></u--input>
+          <u-icon slot="right" name="arrow-down"></u-icon>
+        </u-form-item>
+        <u-form-item label="档案名称" prop="name" required >
+            <u--input v-model="form.name"  placeholder="请填写档案名称"
+              inputAlign="right" border="none"></u--input>
+          </u-form-item>
+        <u-form-item label="类型" prop="typeName" required @click="handleType">
+            <u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
               inputAlign="right" border="none"></u--input>
             <u-icon slot="right" name="arrow-down"></u-icon>
           </u-form-item>
-          <u-form-item label="档案名称" prop="name" required >
-              <u--input v-model="form.name"  placeholder="请填写档案名称"
-                inputAlign="right" border="none"></u--input>
-            </u-form-item>
-          <u-form-item label="类型" prop="typeName" required @click="handleType">
-              <u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
-                inputAlign="right" border="none"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
-            </u-form-item>
-            <u-form-item label="档案状态" prop="stateName" required @click="handleState">
-              <u--input v-model="form.stateName" disabled disabledColor="#ffffff" placeholder="请选择档案状态"
-                inputAlign="right" border="none"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
-            </u-form-item>
-            <u-form-item label="发生时间" prop="occurTime" required @click="selectOccurTime()">
-            <u--input v-model="form.occurTime" disabled disabledColor="#ffffff" placeholder="请选择发生时间" inputAlign="right" border="none"></u--input>
-          <u-icon slot="right" name="arrow-right"></u-icon>
+          <u-form-item label="档案状态" prop="stateName" required @click="handleState">
+            <u--input v-model="form.stateName" disabled disabledColor="#ffffff" placeholder="请选择档案状态"
+              inputAlign="right" border="none"></u--input>
+            <u-icon slot="right" name="arrow-down"></u-icon>
           </u-form-item>
-            <u-form-item label="发生原因"  prop="etiologyName" required @click="handleEtiology">
-              <u--input v-model="form.etiologyName" disabled disabledColor="#ffffff" placeholder="请选择发生原因"
-                inputAlign="right" border="none"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
-            </u-form-item>
-            <u-form-item label="康复时间" prop="rehabilitationTime"  @click="selectRehabilitationTime()">
-            <u--input v-model="form.rehabilitationTime" disabled disabledColor="#ffffff" placeholder="请选择康复时间" inputAlign="right" border="none"></u--input>
-          <u-icon slot="right" name="arrow-right"></u-icon>
+          <u-form-item label="发生时间" prop="occurTime" required @click="selectOccurTime()">
+          <u--input v-model="form.occurTime" disabled disabledColor="#ffffff" placeholder="请选择发生时间" inputAlign="right" border="none"></u--input>
+        <u-icon slot="right" name="arrow-right"></u-icon>
+        </u-form-item>
+          <u-form-item label="发生原因"  prop="etiologyName" required @click="handleEtiology">
+            <u--input v-model="form.etiologyName" disabled disabledColor="#ffffff" placeholder="请选择发生原因"
+              inputAlign="right" border="none"></u--input>
+            <u-icon slot="right" name="arrow-down"></u-icon>
           </u-form-item>
-            <u-form-item label="初期症状" prop="initialSymptoms" required >
-                <u--textarea v-model="form.initialSymptoms" placeholder="请填写初期症状" border="none" autoHeight inputAlign="right" count
-                maxlength="2000" style="padding:18rpx 0;"></u--textarea>
-            </u-form-item>
-            <u-form-item label="中期症状" prop="mediumTermSymptoms"  >
-                <u--textarea v-model="form.mediumTermSymptoms" placeholder="请填写中期症状" border="none" autoHeight inputAlign="right" count
-                maxlength="2000" style="padding:18rpx 0;"></u--textarea>
-            </u-form-item>
-            <u-form-item label="后期症状" prop="laterStageSymptoms"  >
-                <u--textarea v-model="form.laterStageSymptoms" placeholder="请填写后期症状" border="none" autoHeight inputAlign="right" count
-                maxlength="2000" style="padding:18rpx 0;"></u--textarea>
-            </u-form-item>
-           
-   
-   
-          <u-form-item label="备注" prop="remark"  labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
+          <u-form-item label="康复时间" prop="rehabilitationTime"  @click="selectRehabilitationTime()">
+          <u--input v-model="form.rehabilitationTime" disabled disabledColor="#ffffff" placeholder="请选择康复时间" inputAlign="right" border="none"></u--input>
+        <u-icon slot="right" name="arrow-right"></u-icon>
+        </u-form-item>
+          <u-form-item label="初期症状" prop="initialSymptoms" required >
+              <u--textarea v-model="form.initialSymptoms" placeholder="请填写初期症状" border="none" autoHeight inputAlign="right" count
               maxlength="2000" style="padding:18rpx 0;"></u--textarea>
           </u-form-item>
-        </u--form>
-        <view class="form-btn">
-          <u-button type="primary" text="提交" @click="submit"></u-button>
-        </view>
+          <u-form-item label="中期症状" prop="mediumTermSymptoms"  >
+              <u--textarea v-model="form.mediumTermSymptoms" placeholder="请填写中期症状" border="none" autoHeight inputAlign="right" count
+              maxlength="2000" style="padding:18rpx 0;"></u--textarea>
+          </u-form-item>
+          <u-form-item label="后期症状" prop="laterStageSymptoms"  >
+              <u--textarea v-model="form.laterStageSymptoms" placeholder="请填写后期症状" border="none" autoHeight inputAlign="right" count
+              maxlength="2000" style="padding:18rpx 0;"></u--textarea>
+          </u-form-item>
+         
+        <!-- <u-form-item label="备注" prop="remark"  labelPosition="top">
+          <u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
+            maxlength="2000" style="padding:18rpx 0;"></u--textarea>
+        </u-form-item> -->
+      </u--form>
+      <view class="form-btn">
+        <u-button type="primary" text="提交" @click="submit"></u-button>
       </view>
     </view>
+  </view>
     <u-toast ref="uToast"></u-toast>
     <u-picker itemHeight="88" :show="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel"
       @confirm="handlePersonConfirm"></u-picker>
@@ -367,25 +365,54 @@ function submit() {
 <style lang="scss" scoped>
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 0;
   background-color: #fff;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 
   .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
   }
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 24rpx;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 16rpx;
     }
   }
 }
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/health/healthRecord/list.vue b/src/pages/health/healthRecord/list.vue
index 89100af..52bc04e 100644
--- a/src/pages/health/healthRecord/list.vue
+++ b/src/pages/health/healthRecord/list.vue
@@ -1,21 +1,18 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <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>
-       </view>
-       </u-sticky>
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
       <view class="search-view">
-        <u-input v-model="queryParams.time" border="false" type="select" readonly 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--input v-model="queryParams.personName" border="false" placeholder="请选择人员" class="search-input"
+          @click="handlePerson" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+          <text>新增</text>
+        </view>
 
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
@@ -25,37 +22,43 @@
                 <view v-for="item in typeList" :key="item.id" class="state-item"
                   :class="item.selected ? 'active' : ''" @click="selectType(item)">{{ item.dictLabel }}</view>
               </view>
-              <view class="select-header">发生日期</view>
-            <view class="selcet-content" style="padding: 0 24rpx">
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.startTime"
-                placeholder="请选择开始时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                </template>
-              </u-input>
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.endTime"
-                placeholder="请选择结束时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-                </template>
-              </u-input>
-            </view>
+              <view class="filter-title">发生日期</view>
+              <view class="date-inputs">
+                <u-input
+                  :disabled="true"
+                  :disabledColor="'#fff'"
+                  class="dateInput"
+                  border="surround"
+                  v-model="queryParams.startTime"
+                  placeholder="请选择开始时间"
+                >
+                  <template v-slot:suffix>
+                    <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+                  </template>
+                </u-input>
+                <u-input
+                  :disabled="true"
+                  :disabledColor="'#fff'"
+                  class="dateInput"
+                  border="surround"
+                  v-model="queryParams.endTime"
+                  placeholder="请选择结束时间"
+                >
+                  <template v-slot:suffix>
+                    <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+                  </template>
+                </u-input>
+              </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"
@@ -71,60 +74,73 @@
         </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+'-'+dictStr(item.type,typeList)+'-'+dictStr(item.state, stateList) " size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.name }}</text>
+                <text class="card-code">{{ dictStr(item.type, typeList) }} · {{ dictStr(item.state, stateList) }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">人员名称：</text>
-            <text class="row-value">{{ item.personName }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">人员名称</text>
+                <text class="info-value">{{ item.personName || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="item.occurTime">
+                <text class="info-label">发生时间</text>
+                <text class="info-value">{{ item.occurTime }}</text>
+              </view>
+              <view class="info-item" v-if="item.rehabilitationTime">
+                <text class="info-label">康复时间</text>
+                <text class="info-value">{{ item.rehabilitationTime }}</text>
+              </view>
+              <view class="info-item" v-if="item.duration">
+                <text class="info-label">康复周期</text>
+                <text class="info-value">{{ item.duration }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.etiology">
+                <text class="info-label">发生原因</text>
+                <text class="info-value">{{ dictStr(item.etiology, etiologyList) }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.initialSymptoms">
+                <text class="info-label">初期症状</text>
+                <text class="info-value">{{ item.initialSymptoms }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.mediumTermSymptoms">
+                <text class="info-label">中期症状</text>
+                <text class="info-value">{{ item.mediumTermSymptoms }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.laterStageSymptoms">
+                <text class="info-label">后期症状</text>
+                <text class="info-value">{{ item.laterStageSymptoms }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">类型：</text>
-            <text class="row-value">{{ dictStr(item.type,typeList) }}</text>
-          </view> -->
-          <!-- <view class="item-row">
-            <text class="row-label">档案状态：</text>
-            <text class="row-value">{{ dictStr(item.state, stateList) }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">发生时间：</text>
-            <text class="row-value">{{ item.occurTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">康复时间：</text>
-            <text class="row-value">{{ item.rehabilitationTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">康复周期：</text>
-            <text class="row-value">{{ item.duration }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">发生原因：</text>
-            <text class="row-value">{{ dictStr(item.etiology, etiologyList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">初期症状：</text>
-            <text class="row-value">{{ item.initialSymptoms }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">中期症状：</text>
-            <text class="row-value">{{ item.mediumTermSymptoms }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">后期症状：</text>
-            <text class="row-value">{{ item.laterStageSymptoms }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -340,30 +356,35 @@ function settingCancel() {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delHealthRecord(item.id)
-              uni.navigateTo({ url: `/pages/health/healthRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delHealthRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
+page {
+  height: 100%;
+  overflow: auto;
+}
 
 .search-view {
   padding: 12rpx 32rpx;
@@ -372,157 +393,366 @@ 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-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;
+    }
+  }
+  
+  .add-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;
+    margin-left: 10rpx;
+    
+    &: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 {
     width: 100%;
     position: absolute;
     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;
+        margin-bottom: 24rpx;
 
         .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;
+        }
+      }
+      
+      .date-inputs {
+        display: flex;
+        flex-direction: column;
+        gap: 16rpx;
+        
+        .dateInput {
+          border-radius: 12rpx;
+          border: 2rpx solid #e8edf3;
         }
       }
     }
 
     .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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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;
+    }
+    
+    .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: 12rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-shrink: 0;
+        letter-spacing: 0.5rpx;
       }
-
-      .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;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        min-width: 0;
+        letter-spacing: 0.3rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/health/heightWeightRecord/addEdit.vue b/src/pages/health/heightWeightRecord/addEdit.vue
index fa6116d..72aee1d 100644
--- a/src/pages/health/heightWeightRecord/addEdit.vue
+++ b/src/pages/health/heightWeightRecord/addEdit.vue
@@ -193,25 +193,54 @@ function submit() {
 <style lang="scss" scoped>
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 0;
   background-color: #fff;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 
   .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
   }
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 24rpx;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 16rpx;
     }
   }
 }
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/health/heightWeightRecord/list.vue b/src/pages/health/heightWeightRecord/list.vue
index c0b5c5b..1089248 100644
--- a/src/pages/health/heightWeightRecord/list.vue
+++ b/src/pages/health/heightWeightRecord/list.vue
@@ -1,21 +1,18 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <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>
-       </view>
-       </u-sticky>
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
       <view class="search-view">
-        <u-input v-model="queryParams.time" border="false" type="select" readonly 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--input v-model="queryParams.personName" border="false" placeholder="请输入人员姓名" class="search-input"
+          @click="handlePerson" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+          <text>新增</text>
+        </view>
 
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
@@ -70,20 +67,39 @@
       <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.personName+'，身高：'+item.height +'CM'+'，体重：'+item.weight +'KG'" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.personName }}</text>
+                <text class="card-time">{{ item.measureTime }}</text>
+              </view>
+            </view>
+            <view class="stats-section">
+              <text class="stats-item">{{ item.height }}<text class="stats-label">CM</text></text>
+              <text class="stats-item"> {{ item.weight }}<text class="stats-label">KG</text></text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">测量时间：</text>
-            <text class="row-value">{{ item.measureTime }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -251,22 +267,35 @@ function settingCancel() {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delHeightWeightRecord(item.id)
-              uni.navigateTo({ url: `/pages/health/heightWeightRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delHeightWeightRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -283,11 +312,74 @@ 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-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;
+    }
+  }
+  
+  .add-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;
+    margin-left: 10rpx;
+    
+    &: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 {
@@ -298,14 +390,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;
+      .select-header {
+        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 {
@@ -334,106 +440,203 @@ function settingCancel() {
 
     .btn-box {
       display: flex;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
       box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
+      .u-button {
+        flex: 1;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+      }
     }
   }
 }
 
 .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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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: 12rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-shrink: 0;
+        letter-spacing: 0.5rpx;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+      
+      .card-time {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 26rpx;
+        font-weight: 500;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+        min-width: 0;
+        letter-spacing: 0.3rpx;
       }
-
-      .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;
+    }
+    
+    .stats-section {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+      flex-shrink: 0;
+      
+      .stats-item {
+        color: #fa8c16;
+        font-size: 28rpx;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        
+        .stats-label {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 20rpx;
+          font-weight: 400;
+          margin-left: 4rpx;
+        }
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/health/homepage/index.vue b/src/pages/health/homepage/index.vue
index 1dac327..d118454 100644
--- a/src/pages/health/homepage/index.vue
+++ b/src/pages/health/homepage/index.vue
@@ -1,20 +1,25 @@
 <template>
   <view class="content">
-    <view class="text-area">
-      <text class="title"></text>
-    </view>
-    <div class="app-container" style="overflow: auto">
-    <div class="header-title" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;健康总览</div>
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <div class="header-title-sticky">
+        <text class="title-text">健康总览</text>
+      </div>
+    </u-sticky>
+    <div class="app-container">
     <div class="header-con" ref="searchHeightRef">
       <div class="item">
-        <img src="../../assets/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">成员总数</div>
           <div class="num">{{ personCount }}<span>人</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="../../assets/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
+          <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">档案数量</div>
           <div class="num">{{ healthRecordCount }}<span>份</span></div>
@@ -24,14 +29,18 @@
     
     <div class="header-con"  ref="searchHeightRef">
       <div class="item">
-        <img src="../../assets/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59a23 0%, #f57c00 100%);">
+          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">活动次数</div>
           <div class="num">{{ activityCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="../../assets/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">活动费用</div>
           <div class="num">{{ activityCost }}<span>元</span></div>
@@ -39,16 +48,19 @@
       </div>
     </div>
     <div class="header-con"  ref="searchHeightRef">
-
       <div class="item">
-        <img src="../../assets/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
+          <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">就医医院</div>
           <div class="num">{{ hospitalCount }}<span>个</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="../../assets/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
+          <uni-icons type="person" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">就诊大夫</div>
           <div class="num">{{ doctorTotalCount }}<span>个</span></div>
@@ -57,14 +69,18 @@
     </div>
 <div class="header-con"  ref="searchHeightRef">
   <div class="item">
-        <img src="../../assets/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">就医次数</div>
           <div class="num">{{ doctorCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="../../assets/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">就医费用</div>
           <div class="num">{{ doctorCost }}<span>元</span></div>
@@ -74,14 +90,18 @@
 
 <div class="header-con"  ref="searchHeightRef">
   <div class="item">
-        <img src="../../assets/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
+          <uni-icons type="calendar" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">用药天数</div>
           <div class="num">{{ marDayCount }}<span>天</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="../../assets/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
+          <uni-icons type="gear-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">用药次数</div>
           <div class="num">{{ marCount }}<span>次</span></div>
@@ -91,14 +111,18 @@
 
 <div class="header-con"  ref="searchHeightRef">
   <div class="item">
-        <img src="../../assets/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="medal" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">用药种类</div>
           <div class="num">{{ medicalTypeCount }}<span>种</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="../../assets/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="flag" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">测量体温次数</div>
           <div class="num">{{ temperatureTotalCount }}<span>次</span></div>
@@ -108,14 +132,18 @@
 
 <div class="header-con"  ref="searchHeightRef">
   <div class="item">
-        <img src="../../assets/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="fire" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">发烧天数（>=37℃）</div>
           <div class="num">{{ feverDayCount }}<span>天</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="../../assets/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59a23 0%, #f57c00 100%);">
+          <uni-icons type="notification" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">低烧（36.9~37.5℃）</div>
           <div class="num">{{ lowerTempCount }}<span>次</span></div>
@@ -125,14 +153,18 @@
 
 <div class="header-con"  ref="searchHeightRef">
   <div class="item">
-        <img src="../../assets/one.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
+          <uni-icons type="eye" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">中烧（37.5~38.5℃）</div>
           <div class="num">{{ middleTempCount }}<span>次</span></div>
         </div>
       </div>
       <div class="item">
-        <img src="../../assets/ticketSum.png" alt="" />
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="fire-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
         <div class="info-sum">
           <div class="title">高烧（>=38.5℃）</div>
           <div class="num">{{ higherTempCount }}<span>次</span></div>
@@ -140,17 +172,24 @@
       </div>
 </div>
 <div v-for="(item, index) in personList" :key="index">
-      <div class="header-title" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;{{ item.personName + '-健康档案概览' }}</div>
+      <div class="header-title" ref="searchHeightRef">
+        <view class="title-line"></view>
+        <text class="title-text">{{ item.personName + '-健康档案概览' }}</text>
+      </div>
       <div class="header-con" ref="searchHeightRef">
         <div class="item">
-          <img src="../../assets/one.png" alt="" />
+          <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
+            <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
+          </view>
           <div class="info-sum">
             <div class="title">档案数量</div>
             <div class="num">{{ item.healthRecordCount }}<span>份</span></div>
           </div>
         </div>
         <div class="item">
-          <img src="../../assets/ticketSum.png" alt="" />
+          <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
+            <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
+          </view>
           <div class="info-sum">
             <div class="title">就医医院</div>
             <div class="num">{{ item.hospitalCount }}<span>个</span></div>
@@ -159,14 +198,18 @@
       </div>
       <div class="header-con" ref="searchHeightRef">
         <div class="item">
-          <img src="../..//assets/one.png" alt="" />
+          <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
+            <uni-icons type="person" size="20" color="#ffffff"></uni-icons>
+          </view>
           <div class="info-sum">
             <div class="title">就诊大夫</div>
             <div class="num">{{ item.doctorTotalCount }}<span>个</span></div>
           </div>
         </div>
         <div class="item">
-          <img src="../../assets/ticketSum.png" alt="" />
+          <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+            <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+          </view>
           <div class="info-sum">
             <div class="title">就医次数</div>
             <div class="num">{{ item.doctorCount }}<span>次</span></div>
@@ -175,14 +218,18 @@
       </div>
       <div class="header-con" ref="searchHeightRef">
         <div class="item">
-          <img src="../../assets/one.png" alt="" />
+          <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+            <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+          </view>
           <div class="info-sum">
             <div class="title">就医费用</div>
             <div class="num">{{ item.doctorCost }}<span>元</span></div>
           </div>
         </div>
         <div class="item">
-          <img src="../../assets/ticketSum.png" alt="" />
+          <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
+            <uni-icons type="calendar" size="20" color="#ffffff"></uni-icons>
+          </view>
           <div class="info-sum">
             <div class="title">用药天数</div>
             <div class="num">{{ item.marDayCount }}<span>天</span></div>
@@ -191,14 +238,18 @@
       </div>
       <div class="header-con" ref="searchHeightRef">
         <div class="item">
-          <img src="../..//assets/one.png" alt="" />
+          <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
+            <uni-icons type="gear-filled" size="20" color="#ffffff"></uni-icons>
+          </view>
           <div class="info-sum">
             <div class="title">用药次数</div>
             <div class="num">{{ item.marCount }}<span>次</span></div>
           </div>
         </div>
         <div class="item">
-          <img src="../../assets/ticketSum.png" alt="" />
+          <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+            <uni-icons type="fire" size="20" color="#ffffff"></uni-icons>
+          </view>
           <div class="info-sum">
             <div class="title">发烧天数（>=37℃）</div>
             <div class="num">{{ item.feverDayCount }}<span>天</span></div>
@@ -262,48 +313,138 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+  padding: 0;
+  margin: 0;
+}
+
+.content {
+  background-color: #f5f7fa;
+  min-height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.header-title-sticky {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 24rpx;
+  margin: 0;
+  background-color: #ffffff;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+  position: relative;
+  z-index: 999;
+  
+  .title-text {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #2c3e50;
+  }
+}
+
 .app-container {
-  .header-con {
-    width: 100%;
-    height: 100px;
-    background-color: #ffffff;
-    margin-bottom: 5px;
+  background-color: #f5f7fa;
+  padding: 0;
+  padding-top: 0;
+  margin-top: 0;
+  overflow: visible;
+  
+  .header-title {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    .item {
-      width: 50%;
-      height: 100%;
-      display: flex;
-      position: relative;
-      align-items: center;
-      margin: 0px 5px 0px 5px;
-      .title {
-        margin-left: 5px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 5px;
-        font-size: 14px;
-      }
-      .num {
-        margin-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
-      }
+    padding: 16rpx 24rpx;
+    margin-bottom: 8rpx;
+    background-color: #ffffff;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+    position: relative;
+    z-index: 100;
+    
+    .title-line {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+      flex-shrink: 0;
     }
-    img {
-      height: 30px;
-      width: 30px;
+    
+    .title-text {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #2c3e50;
     }
   }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
+  
+  .header-con {
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 8rpx 16rpx;
+    background-color: transparent;
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
+    align-items: stretch;
+    padding: 0;
+    gap: 12rpx;
+    
+    .item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      padding: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:hover {
+        border-color: #d0d7de;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+      }
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
+      }
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span, .unit {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
+      }
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/health/index.vue b/src/pages/health/index.vue
index 7e65c2e..6e845b6 100644
--- a/src/pages/health/index.vue
+++ b/src/pages/health/index.vue
@@ -1,49 +1,66 @@
 <template>
   <view class="work-container">
 
-
-    <!-- 宫格组件 -->
-    <uni-section title="健康管理" v-show="auth.hasPermi('health:person:list')"  type="line"></uni-section>
-    <view class="grid-body">
-      <uni-grid :column="4" :showBorder="false">
-        <uni-grid-item v-for="(item, index) in healthGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
-        <view class="grid-item-box">
-            <uni-icons :type="item.icon" size="30"></uni-icons>
-            <text class="text">{{ item.text }}</text>
+    <!-- 健康管理 -->
+    <view class="section-header" v-show="auth.hasPermi('health:person:list')">
+      <text class="section-title">健康管理</text>
+    </view>
+    <view class="grid-body" v-show="auth.hasPermi('health:person:list')">
+      <view class="grid-wrapper">
+        <view 
+          v-for="(item, index) in healthGridList" 
+          :key="index" 
+          v-show="auth.hasPermi(item.permission)" 
+          @click="navigateTo(item.path)"
+          class="grid-item">
+          <view class="item-icon" :style="{ background: item.color }">
+            <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
           </view>
-      </uni-grid-item>
-      </uni-grid>
+          <text class="item-text">{{ item.text }}</text>
+        </view>
+      </view>
     </view>
 
-        <!-- 宫格组件 -->
-        <uni-section title="婴幼儿管理" v-show="auth.hasPermi('health:milkPowderRecord:list')"  type="line"></uni-section>
-    <view class="grid-body">
-      <uni-grid :column="4" :showBorder="false">
-        <uni-grid-item v-for="(item, index) in babycareGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
-        <view class="grid-item-box">
-            <uni-icons :type="item.icon" size="30"></uni-icons>
-            <text class="text">{{ item.text }}</text>
+    <!-- 婴幼儿管理 -->
+    <view class="section-header" v-show="auth.hasPermi('health:milkPowderRecord:list')">
+      <text class="section-title">婴幼儿管理</text>
+    </view>
+    <view class="grid-body" v-show="auth.hasPermi('health:milkPowderRecord:list')">
+      <view class="grid-wrapper">
+        <view 
+          v-for="(item, index) in babycareGridList" 
+          :key="index" 
+          v-show="auth.hasPermi(item.permission)" 
+          @click="navigateTo(item.path)"
+          class="grid-item">
+          <view class="item-icon" :style="{ background: item.color }">
+            <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
           </view>
-      </uni-grid-item>
-      </uni-grid>
+          <text class="item-text">{{ item.text }}</text>
+        </view>
+      </view>
     </view>
 
-        <!-- 宫格组件 -->
-        <uni-section title="统计分析" v-show="auth.hasPermi('health:person:list')"  type="line"></uni-section>
-    <view class="grid-body">
-      <uni-grid :column="4" :showBorder="false">
-        <uni-grid-item v-for="(item, index) in healthStaticGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
-        <view class="grid-item-box">
-            <uni-icons :type="item.icon" size="30"></uni-icons>
-            <text class="text">{{ item.text }}</text>
-          </view>
-      </uni-grid-item>
-      </uni-grid>
+    <!-- 统计分析 -->
+    <view class="section-header" v-show="auth.hasPermi('health:person:list')">
+      <text class="section-title">统计分析</text>
+    </view>
+    <view class="grid-body" v-show="auth.hasPermi('health:person:list')">
+      <view class="grid-wrapper">
+        <view 
+          v-for="(item, index) in healthStaticGridList" 
+          :key="index" 
+          v-show="auth.hasPermi(item.permission)" 
+          @click="navigateTo(item.path)"
+          class="grid-item">
+          <view class="item-icon" :style="{ background: item.color }">
+            <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
+          </view>
+          <text class="item-text">{{ item.text }}</text>
+        </view>
+      </view>
     </view>
-
   </view>
-
-      
 </template>
 
 <script setup>
@@ -52,32 +69,31 @@ import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
 // 也可以使用下面的方式
 	import { ref } from "vue";
 
-  const healthGridList=ref([
-       { path: '/pages/health/person/list', text: '成员管理', icon: 'staff-filled', permission: 'health:person:list'  },
-        { path: '/pages/health/healthRecord/list', text: '健康档案', icon: 'bars', permission: 'health:healthRecord:list'  },
-        { path: '/pages/health/processRecord/list', text: '过程记录', icon: 'list', permission: 'health:processRecord:list'  },
-        { path: '/pages/health/doctorRecord/list', text: '就医记录', icon: 'upload', permission: 'health:doctorRecord:list'  },
-        { path: '/pages/health/marRecord/list', text: '用药记录', icon: 'shop-filled', permission: 'health:marRecord:list' },
-        { path: '/pages/health/temperatureRecord/list', text: '体温记录', icon: 'spinner-cycle', permission: 'health:temperatureRecord:list'  },
-        { path: '/pages/health/heightWeightRecord/list', text: '身高体重记录', icon: 'map-pin-ellipse', permission: 'health:heightWeightRecord:list'  },
-        { path: '/pages/health/activity/list', text: '活动记录', icon: 'images-filled', permission: 'health:activity:list'  },
-        { path: '/pages/health/medicineBasic/list', text: '药品基础信息', icon: 'folder-add-filled', permission: 'health:medicineBasic:list'  },
-        { path: '/pages/health/medicineStockIn/list', text: '药品入库清单', icon: 'arrow-down', permission: 'health:medicineStockIn:list'  },
-        { path: '/pages/health/medicineStock/list', text: '药品实时库存', icon: 'color', permission: 'health:medicineStockIn:list'  }
-       
-      ])
-      const babycareGridList=ref([
-        { path: '/pages/health/milkPowderRecord/list', text: '吃奶记录', icon: 'map-pin-ellipse', permission: 'health:milkPowderRecord:list'  },
-  { path: '/pages/health/statistic/milkPowderStatistic/index', text: '吃奶量统计', icon: 'spinner-cycle', permission: 'health:milkPowderStatistic:list'  }
-       
-      ])
+  const healthGridList = ref([
+    { path: '/pages/health/person/list', text: '成员管理', icon: 'staff-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'health:person:list' },
+    { path: '/pages/health/healthRecord/list', text: '健康档案', icon: 'bars', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'health:healthRecord:list' },
+    { path: '/pages/health/processRecord/list', text: '过程记录', icon: 'list', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'health:processRecord:list' },
+    { path: '/pages/health/doctorRecord/list', text: '就医记录', icon: 'medical-filled', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', permission: 'health:doctorRecord:list' },
+    { path: '/pages/health/marRecord/list', text: '用药记录', icon: 'notification-filled', color: 'linear-gradient(135deg, #d38cff 0%, #9d50bb 100%)', permission: 'health:marRecord:list' },
+    { path: '/pages/health/temperatureRecord/list', text: '体温记录', icon: 'fire-filled', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)', permission: 'health:temperatureRecord:list' },
+    { path: '/pages/health/heightWeightRecord/list', text: '身高体重记录', icon: 'person-filled', color: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', permission: 'health:heightWeightRecord:list' },
+    { path: '/pages/health/activity/list', text: '活动记录', icon: 'flag-filled', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'health:activity:list' },
+    { path: '/pages/health/medicineBasic/list', text: '药品基础信息', icon: 'folder-add-filled', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)', permission: 'health:medicineBasic:list' },
+    { path: '/pages/health/medicineStockIn/list', text: '药品入库清单', icon: 'download-filled', color: 'linear-gradient(135deg, #17c0eb 0%, #f368e0 100%)', permission: 'health:medicineStockIn:list' },
+    { path: '/pages/health/medicineStock/list', text: '药品实时库存', icon: 'color', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'health:medicineStockIn:list' }
+  ])
+  
+  const babycareGridList = ref([
+    { path: '/pages/health/milkPowderRecord/list', text: '吃奶记录', icon: 'wine', color: 'linear-gradient(135deg, #fa8231 0%, #f7971e 100%)', permission: 'health:milkPowderRecord:list' },
+    { path: '/pages/health/statistic/milkPowderStatistic/index', text: '吃奶量统计', icon: 'pie-chart', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)', permission: 'health:milkPowderStatistic:list' }
+  ])
 
-      const healthStaticGridList=ref([
-  { path: '/pages/health/statistic/healthStatistic/index', text: '档案统计', icon: 'map', permission: 'health:healthRecord:list'  },
-  { path: '/pages/health/statistic/doctorStatistic/index', text: '就医统计', icon: 'person', permission: 'health:doctorRecord:list'  },
-  { path: '/pages/health/statistic/marStatistic/index', text: '用药统计', icon: 'shop-filled', permission: 'health:marRecord:list' },
-  { path: '/pages/health/statistic/temperatureStatistic/index', text: '体温统计', icon: 'spinner-cycle', permission: 'health:temperatureRecord:list'  }
-      ])
+  const healthStaticGridList = ref([
+    { path: '/pages/health/statistic/healthStatistic/index', text: '档案统计', icon: 'map', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'health:healthRecord:list' },
+    { path: '/pages/health/statistic/doctorStatistic/index', text: '就医统计', icon: 'eye-filled', color: 'linear-gradient(135deg, #fc5c65 0%, #fd79a8 100%)', permission: 'health:doctorRecord:list' },
+    { path: '/pages/health/statistic/marStatistic/index', text: '用药统计', icon: 'heart-filled', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)', permission: 'health:marRecord:list' },
+    { path: '/pages/health/statistic/temperatureStatistic/index', text: '体温统计', icon: 'fire', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'health:temperatureRecord:list' }
+  ])
 	function navigateTo(path) {
     uni.navigateTo({
         url: path
@@ -91,72 +107,82 @@ import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    background-color: #fff;
+    background-color: #f5f7fa;
     min-height: 100%;
     height: auto;
   }
 
-  view {
-    font-size: 14px;
-    line-height: inherit;
-  }
-
   /* #endif */
 
-  .text {
+  .work-container {
+    padding: 12rpx 0;
+  }
+
+  .section-header {
+    padding: 12rpx 24rpx 8rpx;
+  }
+
+  .section-title {
+    font-size: 28rpx;
+    font-weight: 700;
+    color: #333;
+    position: relative;
+    padding-left: 16rpx;
+  }
+
+  .section-title::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 6rpx;
+    height: 28rpx;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 3rpx;
+  }
+
+  .grid-body {
+    padding: 0 16rpx;
+  }
+
+  .grid-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .grid-item {
+    width: 25%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 16rpx 8rpx;
+    box-sizing: border-box;
+  }
+
+  .item-icon {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 12rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+  }
+
+  .grid-item:active .item-icon {
+    transform: scale(0.95);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+  }
+
+  .item-text {
     text-align: center;
     font-size: 22rpx;
-    margin-top: 10rpx;
-  }
-
-  .grid-item-box {
-    flex: 1;
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 15px 0;
-  }
-
-  .uni-margin-wrap {
-    width: 690rpx;
-    width: 100%;
-    ;
-  }
-
-  .swiper {
-    height: 300rpx;
-  }
-
-  .swiper-box {
-    height: 150px;
-  }
-
-  .swiper-item {
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    height: 300rpx;
-    line-height: 300rpx;
-  }
-
-  @media screen and (min-width: 500px) {
-    .uni-swiper-dot-box {
-      width: 400px;
-      /* #ifndef APP-NVUE */
-      margin: 0 auto;
-      /* #endif */
-      margin-top: 8px;
-    }
-
-    .image {
-      width: 100%;
-    }
+    color: #333;
+    font-weight: 500;
+    line-height: 1.3;
   }
 </style>
diff --git a/src/pages/health/marRecord/addEdit.vue b/src/pages/health/marRecord/addEdit.vue
index 40d0169..737311c 100644
--- a/src/pages/health/marRecord/addEdit.vue
+++ b/src/pages/health/marRecord/addEdit.vue
@@ -480,25 +480,54 @@ function submit() {
 <style lang="scss" scoped>
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 0;
   background-color: #fff;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 
   .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
   }
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 24rpx;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 16rpx;
     }
   }
 }
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/health/marRecord/list.vue b/src/pages/health/marRecord/list.vue
index 0f17404..984f376 100644
--- a/src/pages/health/marRecord/list.vue
+++ b/src/pages/health/marRecord/list.vue
@@ -1,42 +1,45 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-          <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-       </view>
-       <view class="search-view">
-        <u-input v-model="queryParams.healthRecordName" border="false" type="select"  @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-       </view>
-         <view class="search-view">
-          <u-input v-model="queryParams.name" border="false"   @click="searchSubmit()" placeholder="请填写药品名称" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <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>
-       </view>
-       </u-sticky>
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u-input v-model="queryParams.time" border="false" type="select" readonly 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-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 typeList" :key="item.id" class="state-item"
-                  :class="item.selected ? 'active' : ''" @click="selectType(item)">{{ item.dictLabel }}</view>
-              </view>
-              <view class="select-header">用药日期</view>
-            <view class="selcet-content" style="padding: 0 24rpx">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-container">
+        <view class="search-row">
+          <u--input v-model="queryParams.personName" border="false" type="select" @click="handlePerson" placeholder="请选择人员" class="search-input"
+            suffixIcon="search" suffixIconStyle="color: #909399">
+          </u--input>
+          <view class="add-btn" @click="handleAdd()">
+            <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+            <text>新增</text>
+          </view>
+        </view>
+        <view class="search-row">
+          <u--input v-model="queryParams.name" border="false" placeholder="请填写药品名称" class="search-input"
+            @blur="searchSubmit" suffixIcon="search" suffixIconStyle="color: #909399">
+          </u--input>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
+        </view>
+      </view>
+      
+      <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="health-record-input">
+              <u--input v-model="queryParams.healthRecordName" border="surround" type="select" @click="handleHealthRecord" placeholder="请选择健康档案"
+                suffixIcon="search" suffixIconStyle="color: #909399">
+              </u--input>
+            </view>
+            
+            <view class="filter-title">用药类型</view>
+            <view class="state-list">
+              <view v-for="item in typeList" :key="item.id" class="state-item"
+                :class="item.selected ? 'active' : ''" @click="selectType(item)">{{ item.dictLabel }}</view>
+            </view>
+            
+            <view class="filter-title">用药日期</view>
+            <view class="date-inputs">
               <u-input
                 :disabled="true"
                 :disabledColor="'#fff'"
@@ -62,64 +65,90 @@
                 </template>
               </u-input>
             </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>
-            <u-datetime-picker
-              :closeOnClickOverlay="true"
-              :show="timeShow"
-              v-model="time"
-              mode="datetime"
-              @close="openOrCloseDate"
-              @cancel="openOrCloseDate"
-              @confirm="confirm"
-            ></u-datetime-picker>
           </view>
-        </u-transition>
-      </view>
+          <view class="btn-box">
+            <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"
+            :show="timeShow"
+            v-model="time"
+            mode="datetime"
+            @close="openOrCloseDate"
+            @cancel="openOrCloseDate"
+            @confirm="confirm"
+          ></u-datetime-picker>
+        </view>
+      </u-transition>
     </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.dosage+dictStr(item.unit, unitList) " size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.name }}</text>
+                <text class="card-code">{{ item.dosage }} {{ dictStr(item.unit, unitList) }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">人员名称：</text>
-            <text class="row-value">{{ item.personName }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">人员名称</text>
+                <text class="info-value">{{ item.personName || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">用药时间</text>
+                <text class="info-value">{{ item.dosingTime || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">用药类型</text>
+                <text class="info-value">{{ dictStr(item.type, typeList) || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">药品来源</text>
+                <text class="info-value">{{ dictStr(item.resource, resourceList) || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">用药地点</text>
+                <text class="info-value">{{ dictStr(item.place, placeList) || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">健康档案</text>
+                <text class="info-value">{{ item.healthRecordName || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">用药时间：</text>
-            <text class="row-value">{{ item.dosingTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">用药类型：</text>
-            <text class="row-value">{{ dictStr(item.type, typeList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">健康档案：</text>
-            <text class="row-value">{{ item.healthRecordName }}</text>
-          </view>
-  
-          <view class="item-row">
-            <text class="row-label">药品来源：</text>
-            <text class="row-value">{{ dictStr(item.resource,resourceList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">用药地点：</text>
-            <text class="row-value">{{ dictStr(item.place, placeList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleCopy(item)">复制</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" @click="handleCopy(item)">
+              <uni-icons type="paperplane" size="16" color="#fa8c16"></uni-icons>
+              <text>复制</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -427,173 +456,374 @@ function settingCancel() {
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
+page {
+  height: 100%;
+  overflow: auto;
+}
+
+.search-container {
+  background-color: #ffffff;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 100;
+
+  .search-row {
+    padding: 12rpx 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16rpx;
+    
+    &:first-child {
+      padding-bottom: 8rpx;
+    }
+    
+    &:last-child {
+      padding-top: 8rpx;
     }
 
-.search-view {
-  padding: 12rpx 32rpx;
-  background-color: #ffffff;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
+    .search-input {
+      background: rgba(102, 126, 234, 0.08);
+      color: #333333;
+      flex: 1;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn,
+    .add-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;
+      }
+    }
+  }
+}
 
-  .search-input {
-    background: #F5F5F5;
-    color: #333333;
-    margin-right: 36rpx;
+.filter-panel {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 180rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+
+  .filter-panel-content {
+    background-color: #ffffff;
+    padding: 0 30rpx 30rpx;
+    border-radius: 16rpx 16rpx 0 0;
+
+    .filter-title {
+      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;
+      }
+    }
+    
+    .medicine-input,
+    .health-record-input {
+      margin-bottom: 24rpx;
+    }
+
+    .state-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      gap: 16rpx;
+      margin-bottom: 24rpx;
+
+      .state-item {
+        padding: 0 32rpx;
+        height: 68rpx;
+        border: 2rpx solid #e8edf3;
+        border-radius: 34rpx;
+        text-align: center;
+        line-height: 68rpx;
+        font-size: 28rpx;
+        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: 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;
+      }
+    }
+    
+    .date-inputs {
+      display: flex;
+      flex-direction: column;
+      gap: 16rpx;
+      
+      .dateInput {
+        border-radius: 12rpx;
+        border: 2rpx solid #e8edf3;
+      }
+    }
   }
 
-  .filter-panel {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+  .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;
       }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
+      
+      text {
+        line-height: 1;
       }
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    .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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .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: 12rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-shrink: 0;
+        letter-spacing: 0.5rpx;
+      }
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.9);
         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;
+        font-weight: 500;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        min-width: 0;
+        letter-spacing: 0.3rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-copy {
+      background: rgba(250, 140, 22, 0.1);
+      color: #fa8c16;
+      border: 1rpx solid rgba(250, 140, 22, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/health/medicineBasic/addEdit.vue b/src/pages/health/medicineBasic/addEdit.vue
index 01a2442..e3fe404 100644
--- a/src/pages/health/medicineBasic/addEdit.vue
+++ b/src/pages/health/medicineBasic/addEdit.vue
@@ -502,25 +502,54 @@ function submit() {
 <style lang="scss" scoped>
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 0;
   background-color: #fff;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 
   .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
   }
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 24rpx;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 16rpx;
     }
   }
 }
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/health/medicineBasic/details.vue b/src/pages/health/medicineBasic/details.vue
index 9051dfc..55b32d4 100644
--- a/src/pages/health/medicineBasic/details.vue
+++ b/src/pages/health/medicineBasic/details.vue
@@ -6,135 +6,407 @@
 			title="药品基础信息详情"
 		>
 		</u-navbar>
-      <view class="section">
-        <u-cell-group>
-        <u-cell title="药品全称:" titleStyle="font-weight:bolder" :value="detailInfo.name"></u-cell>
-        <u-cell title="药品简称:" titleStyle="font-weight:bolder" :value="detailInfo.shortName"></u-cell>
-        <u-cell title="药品编码:" titleStyle="font-weight:bolder" :value="detailInfo.code"></u-cell>
-        <u-cell title="药品剂型:" titleStyle="font-weight:bolder" :value="detailInfo.dosageForm"></u-cell>
-        <u-cell title="治疗类型:" titleStyle="font-weight:bolder" center :value="detailInfo.treatmentType"> </u-cell>
-        <u-cell title="药品分类:" titleStyle="font-weight:bolder" :value="detailInfo.classification"></u-cell>
-        <u-cell title="类别:" titleStyle="font-weight:bolder" :value="detailInfo.category"></u-cell>
-        <u-cell title="品牌:" titleStyle="font-weight:bolder" :value="detailInfo.brand"></u-cell>
-        <u-cell title="药品包装:" titleStyle="font-weight:bolder" :value="detailInfo.packaging"></u-cell>
-        <u-cell title="包装单位:" titleStyle="font-weight:bolder" :value="detailInfo.packageUnit"></u-cell>
-        <u-cell title="生产厂家:" titleStyle="font-weight:bolder" :value="detailInfo.manufacturers"></u-cell>
-        <u-cell title="是否进口:" titleStyle="font-weight:bolder" :value="detailInfo.isImport"></u-cell>
-        <u-cell title="规格:" titleStyle="font-weight:bolder" :value="detailInfo.specifications"></u-cell>
-        <u-cell title="规格单位:" titleStyle="font-weight:bolder" :value="detailInfo.unit"></u-cell>
-        <u-cell title="单个含量:" titleStyle="font-weight:bolder" :value="detailInfo.content"></u-cell>
-        <u-cell title="含量单位:" titleStyle="font-weight:bolder" :value="detailInfo.contentUnit"></u-cell>
-        <u-cell title="生产地址:" titleStyle="font-weight:bolder" :value="detailInfo.address"></u-cell>
-        <u-cell title="功能主治:" titleStyle="font-weight:bolder" :value="detailInfo.indications"></u-cell>
-        <u-cell title="贮藏:" titleStyle="font-weight:bolder" :value="detailInfo.storage"></u-cell>
-        <u-cell title="药品成分:" titleStyle="font-weight:bolder" :value="detailInfo.ingredients"></u-cell>
-        <u-cell title="用法用量:" titleStyle="font-weight:bolder" :value="detailInfo.usage"></u-cell>
-        <u-cell title="性状:" titleStyle="font-weight:bolder" :value="detailInfo.character"></u-cell>
-        <u-cell title="不良反应:" titleStyle="font-weight:bolder" :value="detailInfo.adverseReaction"></u-cell>
-        <u-cell title="备注:" titleStyle="font-weight:bolder" center :value="detailInfo.remark"> </u-cell>
-      </u-cell-group>
+      <view class="detail-card">
+        <view class="card-header">
+          <view class="header-icon">
+            <uni-icons type="plusempty" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.name }}-{{ detailInfo.brand }}({{ detailInfo.packaging }})</text>
+          </view>
+        </view>
+        
+        <view class="card-body">
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>基本信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">药品简称</text>
+                <text class="item-value">{{ detailInfo.shortName || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">药品编码</text>
+                <text class="item-value">{{ detailInfo.code || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">药品剂型</text>
+                <text class="item-value">{{ detailInfo.dosageForm || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">治疗类型</text>
+                <text class="item-value">{{ detailInfo.treatmentType || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">药品分类</text>
+                <text class="item-value">{{ detailInfo.classification || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">类别</text>
+                <text class="item-value">{{ detailInfo.category || '-' }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>产品信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">品牌</text>
+                <text class="item-value">{{ detailInfo.brand || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">药品包装</text>
+                <text class="item-value">{{ detailInfo.packaging || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">包装单位</text>
+                <text class="item-value">{{ detailInfo.packageUnit || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">生产厂家</text>
+                <text class="item-value">{{ detailInfo.manufacturers || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">是否进口</text>
+                <text class="item-value">{{ detailInfo.isImport || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">生产地址</text>
+                <text class="item-value">{{ detailInfo.address || '-' }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>规格信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">规格</text>
+                <text class="item-value">{{ detailInfo.specifications || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">规格单位</text>
+                <text class="item-value">{{ detailInfo.unit || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">单个含量</text>
+                <text class="item-value">{{ detailInfo.content || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">含量单位</text>
+                <text class="item-value">{{ detailInfo.contentUnit || '-' }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.indications">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>功能主治</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.indications }}</text>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.storage">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>贮藏</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.storage }}</text>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.ingredients">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>药品成分</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.ingredients }}</text>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.usage">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>用法用量</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.usage }}</text>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.character">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>性状</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.character }}</text>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.adverseReaction">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>不良反应</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.adverseReaction }}</text>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
+          </view>
+        </view>
       </view>
       <u-toast ref="uToast"></u-toast>
     </view>
   </template>
   
-<script setup>
+  <script setup>
 import { getMedicineBasic } from '@/api/health/medicineBasic'
 import { getDicts } from '@/api/system/dict/data.js'
-import {onLoad} from "@dcloudio/uni-app";
-import {reactive ,toRefs,ref,computed }from "vue";
-const id = ref('')
-const data = reactive({
-  detailInfo: {} 
-})
-const {detailInfo} = toRefs(data)
+import { onLoad } from "@dcloudio/uni-app"
+import { ref, getCurrentInstance } from "vue"
+
+const { proxy } = getCurrentInstance()
+const detailInfo = ref({})
+const typeList = ref([])
+const classificationList = ref([])
+const categoryList = ref([])
+const dosageFormList = ref([])
+const packageUnitList = ref([])
+const isImportList = ref([])
+const unitList = ref([])
+const contentUnitList = ref([])
+
 onLoad((option) => {
-    id.value = option.id
-    getInfo()
-  })
-  function getInfo() {
-    getMedicineBasic(id.value).then(res => {
-          detailInfo.value = res.data
-                     // 类型
-            getDicts('dosage_form').then(result => {
-         detailInfo.value.dosageForm=dictStr(detailInfo.value.dosageForm, result.data)
-      })
-       // 类型
-       getDicts('mar_type').then(result => {
-         detailInfo.value.treatmentType=dictStr(detailInfo.value.treatmentType, result.data)
-      })
-       // 类型
-       getDicts('medicine_classification').then(result => {
-         detailInfo.value.classification=dictStr(detailInfo.value.classification, result.data)
-      })
-       // 类型
-       getDicts('medicine_category').then(result => {
-         detailInfo.value.category=dictStr(detailInfo.value.category, result.data)
-      })
-       // 类型
-       getDicts('package_unit').then(result => {
-         detailInfo.value.packageUnit=dictStr(detailInfo.value.packageUnit, result.data)
-      })
-       // 类型
-       getDicts('is_import').then(result => {
-         detailInfo.value.isImport=dictStr(detailInfo.value.isImport, result.data)
-      })
-       // 类型
-       getDicts('medical_unit').then(result => {
-         detailInfo.value.unit=dictStr(detailInfo.value.unit, result.data)
-      })
-                           // 类型
-            getDicts('content_unit').then(result => {
-         detailInfo.value.contentUnit=dictStr(detailInfo.value.contentUnit, result.data)
-      })
-        })
+  if (option.id) {
+    // 先加载字典，再加载详情
+    getDict().then(() => {
+      getDetail(option.id)
+    })
   }
-  function dictStr(val, arr) {
-      let str = ''
-      arr.map(item => {
-        if (item.dictValue === val) {
-          str = item.dictLabel
-        }
-      })
-      return str
+})
+
+function getDict() {
+  // 使用 Promise.all 确保所有字典都加载完成
+  return Promise.all([
+    getDicts('mar_type').then(res => {
+      typeList.value = res.data
+    }),
+    getDicts('medicine_classification').then(res => {
+      classificationList.value = res.data
+    }),
+    getDicts('medicine_category').then(res => {
+      categoryList.value = res.data
+    }),
+    getDicts('dosage_form').then(res => {
+      dosageFormList.value = res.data
+    }),
+    getDicts('package_unit').then(res => {
+      packageUnitList.value = res.data
+    }),
+    getDicts('is_import').then(res => {
+      isImportList.value = res.data
+    }),
+    getDicts('medical_unit').then(res => {
+      unitList.value = res.data
+    }),
+    getDicts('content_unit').then(res => {
+      contentUnitList.value = res.data
+    })
+  ])
+}
+
+function dictStr(val, arr) {
+  if (!val || !arr || arr.length === 0) {
+    return ''
+  }
+  let str = ''
+  arr.forEach(item => {
+    // 支持字符串和数字类型的匹配
+    if (String(item.dictValue) === String(val)) {
+      str = item.dictLabel
     }
-  </script>
+  })
+  return str
+}
+
+function getDetail(id) {
+  getMedicineBasic(id).then(res => {
+    const data = res.data
+    // 先将原始数据赋值
+    detailInfo.value = { ...data }
+    
+    // 使用已加载的字典数据进行转换，将字典值转换为标签显示
+    if (data.treatmentType) {
+      detailInfo.value.treatmentType = dictStr(data.treatmentType, typeList.value) || data.treatmentType
+    }
+    if (data.classification) {
+      detailInfo.value.classification = dictStr(data.classification, classificationList.value) || data.classification
+    }
+    if (data.category) {
+      detailInfo.value.category = dictStr(data.category, categoryList.value) || data.category
+    }
+    if (data.dosageForm) {
+      detailInfo.value.dosageForm = dictStr(data.dosageForm, dosageFormList.value) || data.dosageForm
+    }
+    if (data.packageUnit) {
+      detailInfo.value.packageUnit = dictStr(data.packageUnit, packageUnitList.value) || data.packageUnit
+    }
+    if (data.isImport !== null && data.isImport !== undefined) {
+      detailInfo.value.isImport = dictStr(String(data.isImport), isImportList.value) || data.isImport
+    }
+    if (data.unit) {
+      detailInfo.value.unit = dictStr(data.unit, unitList.value) || data.unit
+    }
+    if (data.contentUnit) {
+      detailInfo.value.contentUnit = dictStr(data.contentUnit, contentUnitList.value) || data.contentUnit
+    }
+  })
+}
+</script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
+.container {
+  background: #f5f7fa;
+  padding-bottom: 24rpx;
+}
+
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
+  .header-icon {
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    backdrop-filter: blur(10rpx);
+  }
   
-    .content {
-      width: 647rpx;
+  .header-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    
+    .card-name {
+      color: #ffffff;
       font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
   
-    .img-con {
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
+  .info-list {
+    .list-item {
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
-    }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
       }
     }
   }
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
+      font-size: 26rpx;
+      line-height: 1.6;
+    }
+  }
+}
   </style>
\ No newline at end of file
diff --git a/src/pages/health/medicineBasic/list.vue b/src/pages/health/medicineBasic/list.vue
index a018296..f769357 100644
--- a/src/pages/health/medicineBasic/list.vue
+++ b/src/pages/health/medicineBasic/list.vue
@@ -1,22 +1,18 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.keys" border="false" type="select"  @click="searchBlur" placeholder="请输入名称编码品牌厂家" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <u-icon name="plus-circle-fill"  v-show="auth.hasPermi('health:medicineBasic:add')"  color="#666666" size="28" style="margin-left:10px" label="新增"
-        labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
-       </view>
-       </u-sticky>
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx" v-show="auth.hasPermi('health:medicineBasic:add')">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
       <view class="search-view">
-        <u-input v-model="queryParams.time" border="false" type="select" readonly 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--input v-model="queryParams.keys" border="false" @click="searchBlur"
+          placeholder="请输入名称编码厂家" class="search-input" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+        <view class="add-btn" v-show="auth.hasPermi('health:medicineBasic:add')" @click="handleAdd()">
+          <uni-icons type="plusempty" 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">
@@ -25,37 +21,43 @@
                 <view v-for="item in typeList" :key="item.id" class="state-item"
                   :class="item.selected ? 'active' : ''" @click="selectType(item)">{{ item.dictLabel }}</view>
               </view>
-              <view class="select-header">录入日期</view>
-            <view class="selcet-content" style="padding: 0 24rpx">
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.startTime"
-                placeholder="请选择开始时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                </template>
-              </u-input>
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.endTime"
-                placeholder="请选择结束时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-                </template>
-              </u-input>
-            </view>
+              <view class="filter-title">录入日期</view>
+              <view class="selcet-content" style="padding: 0 24rpx">
+                <u-input
+                  :disabled="true"
+                  :disabledColor="'#fff'"
+                  class="dateInput"
+                  border="surround"
+                  v-model="queryParams.startTime"
+                  placeholder="请选择开始时间"
+                >
+                  <template v-slot:suffix>
+                    <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+                  </template>
+                </u-input>
+                <u-input
+                  :disabled="true"
+                  :disabledColor="'#fff'"
+                  class="dateInput"
+                  border="surround"
+                  v-model="queryParams.endTime"
+                  placeholder="请选择结束时间"
+                >
+                  <template v-slot:suffix>
+                    <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+                  </template>
+                </u-input>
+              </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"
@@ -73,48 +75,68 @@
     </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" @click="enterDetails(item)">
-            <u--text  suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.shortName +'-'+ item.brand +'('+ item.packaging+')' " size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="plusempty" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.shortName }}-{{ item.brand }}({{ item.packaging }})</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">药品全称：</text>
-            <text class="row-value">{{ item.name }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item" v-if="item.name || true">
+                <text class="info-label">药品全称</text>
+                <text class="info-value">{{ item.name || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="dictStr(item.treatmentType, typeList) || true">
+                <text class="info-label">治疗类型</text>
+                <text class="info-value">{{ dictStr(item.treatmentType, typeList) || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="item.code || true">
+                <text class="info-label">药品编码</text>
+                <text class="info-value">{{ item.code || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="dictStr(item.classification, classificationList) || true">
+                <text class="info-label">药品分类</text>
+                <text class="info-value">{{ dictStr(item.classification, classificationList) || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="dictStr(item.category, categoryList) || true">
+                <text class="info-label">类别</text>
+                <text class="info-value">{{ dictStr(item.category, categoryList) || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="dictStr(item.dosageForm, dosageFormList) || true">
+                <text class="info-label">药品剂型</text>
+                <text class="info-value">{{ dictStr(item.dosageForm, dosageFormList) || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.manufacturers || true">
+                <text class="info-label">生产厂家</text>
+                <text class="info-value">{{ item.manufacturers || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.createTime || true">
+                <text class="info-label">录入时间</text>
+                <text class="info-value">{{ item.createTime || '--' }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">治疗类型：</text>
-            <text class="row-value">{{ dictStr(item.treatmentType, typeList) }}</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">{{ dictStr(item.classification, classificationList) }}</text>
-          </view>
-  
-          <view class="item-row">
-            <text class="row-label">类别：</text>
-            <text class="row-value">{{ dictStr(item.category,categoryList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">药品剂型：</text>
-            <text class="row-value">{{ dictStr(item.dosageForm, dosageFormList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">生产厂家：</text>
-            <text class="row-value">{{ item.manufacturers }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">录入时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" v-show="auth.hasPermi('health:medicineBasic:edit')" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" v-show="auth.hasPermi('health:medicineBasic:edit')" @click="handleCopy(item)">复制</view>
-            <view class="btn filling" v-show="auth.hasPermi('health:medicineBasic:remove')" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" v-show="auth.hasPermi('health:medicineBasic:edit')" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" v-show="auth.hasPermi('health:medicineBasic:edit')" @click="handleCopy(item)">
+              <uni-icons type="copy" size="16" color="#fa8c16"></uni-icons>
+              <text>复制</text>
+            </view>
+            <view class="btn-delete" v-show="auth.hasPermi('health:medicineBasic:remove')" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -306,31 +328,35 @@ function settingCancel() {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delMedicineBasic(item.id)
-              uni.navigateTo({ url: `/pages/health/medicineBasic/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delMedicineBasic(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
-
+page {
+  height: 100%;
+  overflow: auto;
+}
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -338,157 +364,336 @@ 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;
   }
-
+  
+  .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;
+    }
+  }
+  
+  .add-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;
+    margin-left: 10rpx;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
   .filter-panel {
     width: 100%;
     position: absolute;
     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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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%);
+    
+    .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;
+      align-items: center;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        letter-spacing: 0.5rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-copy {
+      background: rgba(250, 140, 22, 0.1);
+      color: #fa8c16;
+      border: 1rpx solid rgba(250, 140, 22, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/health/medicineStock/list.vue b/src/pages/health/medicineStock/list.vue
index 89279e9..865fedc 100644
--- a/src/pages/health/medicineStock/list.vue
+++ b/src/pages/health/medicineStock/list.vue
@@ -1,30 +1,33 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.medicalName" border="false" type="select"  @click="handleMedical" placeholder="请选择药品" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-       </view>
-       </u-sticky>
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-view">
+        <u--input v-model="queryParams.medicalName" border="false" type="select" @click="handleMedical"
+          placeholder="请选择药品" class="search-input" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+      </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"  @click="enterDetails(item)">
-            <u--text lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.medicineName+' 库存 '+item.leftCount+dictStr(item.unit, unitList) " size="30rpx" color="#333333" :bold="true"></u--text>
+          <view class="item-header" @click="enterDetails(item)">
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.medicineName }} - 库存{{ item.leftCount }}{{ dictStr(item.unit, unitList) }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">规格总数：</text>
-            <text class="row-value">{{ item.totalCount+dictStr(item.unit, unitList) }}</text>
-          </view>
-          <!-- <view class="item-row">
-            <text class="row-label">剩余数量：</text>
-            <text class="row-value">{{ item.leftCount }}</text>
-          </view> -->
-          <!-- <view class="item-row">
-            <text class="row-label">规格单位：</text>
-            <text class="row-value">{{ dictStr(item.unit, unitList) }}</text>
+          
+          <!-- <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">规格总数</text>
+                <text class="info-value">{{ item.totalCount }}{{ dictStr(item.unit, unitList) }}</text>
+              </view>
+            </view>
           </view> -->
         </view>
       </u-list-item>
@@ -174,11 +177,13 @@ function settingCancel() {
       getList()
   }
  function handleMedicalCancel() {
-       showMedical.value = false
-       queryParams.value.medicalName =null
-       queryParams.value.medicineId= null
-       getList()
-  }
+  showMedical.value = false
+  queryParams.value.medicalName = null
+  queryParams.value.medicineId = null
+  pageNum.value = 1
+  listData.value = []
+  getList()
+}
 
 
 
@@ -186,15 +191,10 @@ function settingCancel() {
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
-
+page {
+  height: 100%;
+  overflow: auto;
+}
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -202,157 +202,117 @@ 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;
-  }
-
-  .filter-panel {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
-      }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
-      }
-    }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
-    }
+    flex: 1;
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
   }
 }
 
 .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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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%);
+    
+    .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;
+      align-items: center;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        letter-spacing: 0.5rpx;
       }
     }
   }
 
-  .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;
+      
+      .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;
+      }
 
-    .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;
+      .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;
+      }
     }
   }
 }
diff --git a/src/pages/health/medicineStockIn/addEdit.vue b/src/pages/health/medicineStockIn/addEdit.vue
index fae51eb..10212f9 100644
--- a/src/pages/health/medicineStockIn/addEdit.vue
+++ b/src/pages/health/medicineStockIn/addEdit.vue
@@ -512,25 +512,54 @@ function submit() {
 <style lang="scss" scoped>
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 0;
   background-color: #fff;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 
   .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
   }
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 24rpx;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 16rpx;
     }
   }
 }
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/health/medicineStockIn/details.vue b/src/pages/health/medicineStockIn/details.vue
index b382526..4c7156b 100644
--- a/src/pages/health/medicineStockIn/details.vue
+++ b/src/pages/health/medicineStockIn/details.vue
@@ -6,27 +6,124 @@
 			title="药品入库清单详情"
 		>
 		</u-navbar>
-      <view class="section">
-        <u-cell-group>
-        <u-cell title="药品名称:" titleStyle="font-weight:bolder" :value="detailInfo.medicineName"></u-cell>
-        <u-cell title="入库编号:" titleStyle="font-weight:bolder" :value="detailInfo.code"></u-cell>
-        <u-cell title="入库数量:" titleStyle="font-weight:bolder" :value="detailInfo.quantity"></u-cell>
-        <u-cell title="购买时间:" titleStyle="font-weight:bolder" :value="detailInfo.purchaseDate"></u-cell>
-        <u-cell title="使用状态:" titleStyle="font-weight:bolder" center :value="detailInfo.state"> </u-cell>
-        <u-cell title="生产日期:" titleStyle="font-weight:bolder" :value="detailInfo.productionDate"></u-cell>
-        <u-cell title="过期日期:" titleStyle="font-weight:bolder" :value="detailInfo.expiringDate"></u-cell>
-        <u-cell title="包装单位:" titleStyle="font-weight:bolder" :value="detailInfo.packageUnit"></u-cell>
-        <u-cell title="规格总数:" titleStyle="font-weight:bolder" :value="detailInfo.totalCount"></u-cell>
-        <u-cell title="规格单位:" titleStyle="font-weight:bolder" :value="detailInfo.unit"></u-cell>
-        <u-cell title="已使用数量:" titleStyle="font-weight:bolder" :value="detailInfo.usedCount"></u-cell>
-        <u-cell title="剩余数量:" titleStyle="font-weight:bolder" :value="detailInfo.leftCount"></u-cell>
-        <u-cell title="年龄体重:" titleStyle="font-weight:bolder" :value="detailInfo.ageWeight"></u-cell>
-        <u-cell title="药品单价:" titleStyle="font-weight:bolder" :value="detailInfo.purchasePrice"></u-cell>
-        <u-cell title="药品总价:" titleStyle="font-weight:bolder" :value="detailInfo.totalPrice"></u-cell>
-        <u-cell title="医嘱:" titleStyle="font-weight:bolder" :value="detailInfo.usage"></u-cell>
-        <u-cell title="购买地址:" titleStyle="font-weight:bolder" :value="detailInfo.purchaseAddress"></u-cell>
-        <u-cell title="备注:" titleStyle="font-weight:bolder" center :value="detailInfo.remark"> </u-cell>
-      </u-cell-group>
+      <view class="detail-card">
+        <view class="card-header">
+          <view class="header-icon">
+            <uni-icons type="plusempty" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.medicineName }}</text>
+          </view>
+        </view>
+        
+        <view class="card-body">
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>入库信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">入库编号</text>
+                <text class="item-value">{{ detailInfo.code || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">入库数量</text>
+                <text class="item-value">{{ detailInfo.quantity || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">购买时间</text>
+                <text class="item-value">{{ detailInfo.purchaseDate || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">使用状态</text>
+                <text class="item-value">{{ detailInfo.state || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">生产日期</text>
+                <text class="item-value">{{ detailInfo.productionDate || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">过期日期</text>
+                <text class="item-value">{{ detailInfo.expiringDate || '-' }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>规格信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">包装单位</text>
+                <text class="item-value">{{ detailInfo.packageUnit || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">规格总数</text>
+                <text class="item-value">{{ detailInfo.totalCount || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">规格单位</text>
+                <text class="item-value">{{ detailInfo.unit || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">已使用数量</text>
+                <text class="item-value">{{ detailInfo.usedCount || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">剩余数量</text>
+                <text class="item-value">{{ detailInfo.leftCount || '-' }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>价格信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">药品单价</text>
+                <text class="item-value">{{ detailInfo.purchasePrice || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">药品总价</text>
+                <text class="item-value">{{ detailInfo.totalPrice || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">年龄体重</text>
+                <text class="item-value">{{ detailInfo.ageWeight || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">购买地址</text>
+                <text class="item-value">{{ detailInfo.purchaseAddress || '-' }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.usage">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>医嘱</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.usage }}</text>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
+          </view>
+        </view>
       </view>
       <u-toast ref="uToast"></u-toast>
     </view>
@@ -78,40 +175,124 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
+.container {
+  background: #f5f7fa;
+  padding-bottom: 24rpx;
+}
+
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
+  .header-icon {
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    backdrop-filter: blur(10rpx);
+  }
   
-    .content {
-      width: 647rpx;
+  .header-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    
+    .card-name {
+      color: #ffffff;
       font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
   
-    .img-con {
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
+  .info-list {
+    .list-item {
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
-    }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
       }
     }
   }
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
+      font-size: 26rpx;
+      line-height: 1.6;
+    }
+  }
+}
   </style>
\ No newline at end of file
diff --git a/src/pages/health/medicineStockIn/list.vue b/src/pages/health/medicineStockIn/list.vue
index fab037a..802d0eb 100644
--- a/src/pages/health/medicineStockIn/list.vue
+++ b/src/pages/health/medicineStockIn/list.vue
@@ -1,22 +1,18 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.medicalName" border="false" type="select"  @click="handleMedical" placeholder="请选择药品" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <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>
-       </view>
-       </u-sticky>
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
       <view class="search-view">
-        <u-input v-model="queryParams.time" border="false" type="select" readonly 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--input v-model="queryParams.medicalName" border="false" type="select" @click="handleMedical"
+          placeholder="请选择药品" class="search-input" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plusempty" 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">
@@ -25,37 +21,43 @@
                 <view v-for="item in stateList" :key="item.id" class="state-item"
                   :class="item.selected ? 'active' : ''" @click="selectType(item)">{{ item.dictLabel }}</view>
               </view>
-              <view class="select-header">购买时间</view>
-            <view class="selcet-content" style="padding: 0 24rpx">
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.startTime"
-                placeholder="请选择开始时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                </template>
-              </u-input>
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.endTime"
-                placeholder="请选择结束时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-                </template>
-              </u-input>
-            </view>
+              <view class="filter-title">购买时间</view>
+              <view class="selcet-content" style="padding: 0 24rpx">
+                <u-input
+                  :disabled="true"
+                  :disabledColor="'#fff'"
+                  class="dateInput"
+                  border="surround"
+                  v-model="queryParams.startTime"
+                  placeholder="请选择开始时间"
+                >
+                  <template v-slot:suffix>
+                    <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+                  </template>
+                </u-input>
+                <u-input
+                  :disabled="true"
+                  :disabledColor="'#fff'"
+                  class="dateInput"
+                  border="surround"
+                  v-model="queryParams.endTime"
+                  placeholder="请选择结束时间"
+                >
+                  <template v-slot:suffix>
+                    <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+                  </template>
+                </u-input>
+              </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"
@@ -73,56 +75,64 @@
     </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"  @click="enterDetails(item)">
-            <u--text lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.medicineName+'入库'+item.quantity +dictStr(item.packageUnit, packageUnitList)" size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="arrow-down" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.medicineName }} - 入库{{ item.quantity }}{{ dictStr(item.packageUnit, packageUnitList) }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">购买时间：</text>
-            <text class="row-value">{{ item.purchaseDate }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">购买时间</text>
+                <text class="info-value">{{ item.purchaseDate || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">使用状态</text>
+                <text class="info-value">{{ dictStr(item.state, stateList) || '--' }}</text>
+              </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.expiringDate || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">规格总数</text>
+                <text class="info-value">{{ item.totalCount }}{{ dictStr(item.unit, unitList) }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">剩余数量</text>
+                <text class="info-value">{{ item.leftCount }}{{ dictStr(item.unit, unitList) }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">使用状态：</text>
-            <text class="row-value">{{ dictStr(item.state, stateList) }}</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.quantity }}</text>
-          </view> -->
-          <!-- <view class="item-row">
-            <text class="row-label">包装单位：</text>
-            <text class="row-value">{{ dictStr(item.packageUnit, packageUnitList) }}</text>
-          </view> -->
-  
-          <view class="item-row">
-            <text class="row-label">过期日期：</text>
-            <text class="row-value">{{item.expiringDate }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">规格总数：</text>
-            <text class="row-value">{{ item.totalCount +dictStr(item.unit, unitList)}}</text>
-          </view>
-          <!-- <view class="item-row">
-            <text class="row-label">规格单位：</text>
-            <text class="row-value">{{ dictStr(item.unit, unitList) }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">剩余数量：</text>
-            <text class="row-value">{{ item.leftCount +dictStr(item.unit, unitList)}}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleCopy(item)">复制</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" @click="handleCopy(item)">
+              <uni-icons type="copy" size="16" color="#fa8c16"></uni-icons>
+              <text>复制</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -336,31 +346,35 @@ function settingCancel() {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delMedicineStockIn(item.id)
-              uni.navigateTo({ url: `/pages/health/medicineStockIn/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delMedicineStockIn(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
-
+page {
+  height: 100%;
+  overflow: auto;
+}
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -368,157 +382,331 @@ 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;
   }
-
+  
+  .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;
+    }
+  }
+  
+  .add-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;
+    margin-left: 10rpx;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
   .filter-panel {
     width: 100%;
     position: absolute;
     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;
-      }
-
-      .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%);
+    
+    .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;
+      align-items: center;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        letter-spacing: 0.5rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-copy {
+      background: rgba(250, 140, 22, 0.1);
+      color: #fa8c16;
+      border: 1rpx solid rgba(250, 140, 22, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/health/milkPowderRecord/addEdit.vue b/src/pages/health/milkPowderRecord/addEdit.vue
index 92bfcac..a2d1634 100644
--- a/src/pages/health/milkPowderRecord/addEdit.vue
+++ b/src/pages/health/milkPowderRecord/addEdit.vue
@@ -184,25 +184,54 @@ function submit() {
 <style lang="scss" scoped>
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 0;
   background-color: #fff;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 
   .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
   }
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 24rpx;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 16rpx;
     }
   }
 }
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/health/milkPowderRecord/list.vue b/src/pages/health/milkPowderRecord/list.vue
index fb90eb4..ec5dd63 100644
--- a/src/pages/health/milkPowderRecord/list.vue
+++ b/src/pages/health/milkPowderRecord/list.vue
@@ -1,56 +1,58 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <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>
-       </view>
-       </u-sticky>
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
       <view class="search-view">
-        <u-input v-model="queryParams.time" border="false" type="select" readonly 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--input v-model="queryParams.personName" border="false" type="select" @click="handlePerson"
+          placeholder="请选择人员" class="search-input" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plusempty" 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="selcet-content" style="padding: 0 24rpx">
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.startTime"
-                placeholder="请选择开始时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                </template>
-              </u-input>
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.endTime"
-                placeholder="请选择结束时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-                </template>
-              </u-input>
-            </view>
+              <view class="filter-title">吃奶日期</view>
+              <view class="selcet-content" style="padding: 0 24rpx">
+                <u-input
+                  :disabled="true"
+                  :disabledColor="'#fff'"
+                  class="dateInput"
+                  border="surround"
+                  v-model="queryParams.startTime"
+                  placeholder="请选择开始时间"
+                >
+                  <template v-slot:suffix>
+                    <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+                  </template>
+                </u-input>
+                <u-input
+                  :disabled="true"
+                  :disabledColor="'#fff'"
+                  class="dateInput"
+                  border="surround"
+                  v-model="queryParams.endTime"
+                  placeholder="请选择结束时间"
+                >
+                  <template v-slot:suffix>
+                    <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+                  </template>
+                </u-input>
+              </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"
@@ -70,24 +72,41 @@
       <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.personName+' '+item.sucklesTime+'，吃奶 '+item.consumption +'毫升'" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.personName }} - {{ item.sucklesTime }}</text>
+              </view>
+            </view>
+            <view class="balance-section">
+              <text class="balance-value">{{ item.consumption }}<text class="balance-label">毫升</text></text>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">吃奶时间：</text>
-            <text class="row-value">{{ item.sucklesTime }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">奶粉品牌：</text>
-            <text class="row-value">{{ item.milkPowderBrand }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">奶粉品牌</text>
+                <text class="info-value">{{ item.milkPowderBrand || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -252,31 +271,35 @@ function settingCancel() {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delMilkPowderRecord(item.id)
-              uni.navigateTo({ url: `/pages/health/milkPowderRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delMilkPowderRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
-
+page {
+  height: 100%;
+  overflow: auto;
+}
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -284,157 +307,313 @@ 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;
   }
-
+  
+  .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;
+    }
+  }
+  
+  .add-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;
+    margin-left: 10rpx;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
   .filter-panel {
     width: 100%;
     position: absolute;
     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;
-      }
-
-      .state-list {
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
         display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+        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;
         }
       }
     }
 
     .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;
+      align-items: center;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        letter-spacing: 0.5rpx;
       }
-
-      .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;
+    }
+    
+    .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-left: 4rpx;
+        }
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/health/person/addEdit.vue b/src/pages/health/person/addEdit.vue
index 98d7a22..60b7d54 100644
--- a/src/pages/health/person/addEdit.vue
+++ b/src/pages/health/person/addEdit.vue
@@ -6,71 +6,67 @@
     title="成员管理"
   >
   </u-navbar>
-    <view class="section">
-      <view class="section-title">{{ title}}</view>
-      <view class="form-view">
-        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
-          <u-form-item label="姓名" prop="name" required >
-              <u--input v-model="form.name"  placeholder="请填写姓名"
-                inputAlign="right" border="none"></u--input>
-            </u-form-item>
-            <u-form-item label="昵称" prop="nickName" required >
-              <u--input v-model="form.nickName"  placeholder="请填写昵称"
-                inputAlign="right" border="none"></u--input>
-            </u-form-item>
-          <u-form-item label="类型" prop="typeName" required @click="handleType">
-              <u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
-                inputAlign="right" border="none"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
-            </u-form-item>
-          
-            <u-form-item label="生日" prop="birthday" required @click="selectBirthday()">
-            <u--input v-model="form.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日" inputAlign="right" border="none"></u--input>
-          <u-icon slot="right" name="arrow-right"></u-icon>
+  <view class="section">
+    <view class="section-title">{{ title}}</view>
+    <view class="form-view">
+      <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+        <u-form-item label="姓名" prop="name" required >
+            <u--input v-model="form.name"  placeholder="请填写姓名"
+              inputAlign="right" border="none"></u--input>
           </u-form-item>
-          <u-form-item label="性别" prop="sexName" required @click="handleSex">
-              <u--input v-model="form.sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
-                inputAlign="right" border="none"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
-            </u-form-item>
-            <u-form-item label="身份证" prop="identityCard" >
-              <u--input v-model="form.identityCard"  placeholder="请填写身份证"
-                inputAlign="right" border="none"></u--input>
-            </u-form-item>
-          <u-form-item label="排序" prop="ranking" >
-              <u--input v-model="form.ranking" type="number" placeholder="请填写排序"
-                inputAlign="right" border="none"></u--input>
-            </u-form-item>
-            <u-form-item label="身高" prop="height" >
-              <u--input v-model="form.height"  placeholder="请填写身高"
-                inputAlign="right" border="none">
-                <template #suffix>
+          <u-form-item label="昵称" prop="nickName" required >
+            <u--input v-model="form.nickName"  placeholder="请填写昵称"
+              inputAlign="right" border="none"></u--input>
+          </u-form-item>
+        <u-form-item label="类型" prop="typeName" required @click="handleType">
+            <u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
+              inputAlign="right" border="none"></u--input>
+            <u-icon slot="right" name="arrow-down"></u-icon>
+          </u-form-item>
+        
+          <u-form-item label="生日" prop="birthday" required @click="selectBirthday()">
+          <u--input v-model="form.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日" inputAlign="right" border="none"></u--input>
+        <u-icon slot="right" name="arrow-right"></u-icon>
+        </u-form-item>
+        <u-form-item label="性别" prop="sexName" required @click="handleSex">
+            <u--input v-model="form.sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
+              inputAlign="right" border="none"></u--input>
+            <u-icon slot="right" name="arrow-down"></u-icon>
+          </u-form-item>
+          <u-form-item label="身份证" prop="identityCard" >
+            <u--input v-model="form.identityCard"  placeholder="请填写身份证"
+              inputAlign="right" border="none"></u--input>
+          </u-form-item>
+        <u-form-item label="身高" prop="height" >
+            <u--input v-model="form.height"  placeholder="请填写身高"
+              inputAlign="right" border="none">
+              <template #suffix>
 					<up-text
 						text="CM"
 					></up-text>
 				</template></u--input>
-            </u-form-item>
-            <u-form-item label="体重" prop="weight" >
-              <u--input v-model="form.weight"  placeholder="请填写体重"
-                inputAlign="right" border="none">
-                <template #suffix>
+          </u-form-item>
+          <u-form-item label="体重" prop="weight" >
+            <u--input v-model="form.weight"  placeholder="请填写体重"
+              inputAlign="right" border="none">
+              <template #suffix>
 					<up-text
 						text="KG"
 					></up-text>
 				</template></u--input>
-            </u-form-item>
-           
-          <u-form-item label="备注" prop="remark"  labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
-              maxlength="2000" style="padding:18rpx 0;"></u--textarea>
           </u-form-item>
-        </u--form>
-        <view class="form-btn">
-          <u-button type="primary" text="提交" @click="submit"></u-button>
-        </view>
+         
+        <u-form-item label="备注" prop="remark"  labelPosition="top">
+          <u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
+            maxlength="2000" style="padding:18rpx 0;"></u--textarea>
+        </u-form-item>
+      </u--form>
+      <view class="form-btn">
+        <u-button type="primary" text="提交" @click="submit"></u-button>
       </view>
     </view>
+  </view>
     <u-toast ref="uToast"></u-toast>
         <u-picker itemHeight="88" :show="showType" :columns="typeList" keyName="dictLabel" @cancel="handleTypeCancel"
         @confirm="handleTypeConfirm"></u-picker>
@@ -254,25 +250,54 @@ function submit() {
 <style lang="scss" scoped>
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 0;
   background-color: #fff;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 
   .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
   }
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 24rpx;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 16rpx;
     }
   }
 }
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/health/person/list.vue b/src/pages/health/person/list.vue
index 3e8839f..3090d46 100644
--- a/src/pages/health/person/list.vue
+++ b/src/pages/health/person/list.vue
@@ -1,60 +1,65 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.name" border="false" type="select"   @click="handleSearch" placeholder="请填入名称或昵称" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <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>
-       </view>
-       </u-sticky>
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-view">
+        <u--input v-model="queryParams.name" border="false" placeholder="请输入名称或昵称" class="search-input"
+          @blur="handleSearch" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+          <text>新增</text>
+        </view>
+      </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.nickName+'）- '+dictStr(item.sex,sexList) +' - '+dictStr(item.type,typeList) +' - '+item.age" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.name }}（{{ item.nickName }}）</text>
+                <text class="card-code">{{ dictStr(item.sex, sexList) }} · {{ dictStr(item.type, typeList) }} · {{ item.age }}</text>
+              </view>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">昵称：</text>
-            <text class="row-value">{{ item.nickName }}</text>
-          </view> -->
-          <!-- <view class="item-row">
-            <text class="row-label">类型：</text>
-            <text class="row-value">{{ dictStr(item.type,typeList) }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">生日：</text>
-            <text class="row-value">{{ item.birthday }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item" v-if="item.birthday">
+                <text class="info-label">生日</text>
+                <text class="info-value">{{ item.birthday }}</text>
+              </view>
+              <view class="info-item" v-if="item.identityCard">
+                <text class="info-label">身份证</text>
+                <text class="info-value">{{ item.identityCard }}</text>
+              </view>
+              <view class="info-item" v-if="item.height">
+                <text class="info-label">身高（CM）</text>
+                <text class="info-value">{{ item.height }}</text>
+              </view>
+              <view class="info-item" v-if="item.weight">
+                <text class="info-label">体重（KG）</text>
+                <text class="info-value">{{ item.weight }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">身份证：</text>
-            <text class="row-value">{{ item.identityCard }}</text>
-          </view>
-          <!-- <view class="item-row">
-            <text class="row-label">年龄：</text>
-            <text class="row-value">{{ item.age }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">身高（CM）：</text>
-            <text class="row-value">{{ item.height }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">体重（KG）：</text>
-            <text class="row-value">{{ item.weight }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">排序：</text>
-            <text class="row-value">{{ item.ranking }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -160,30 +165,35 @@ function getList() {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delPerson(item.id)
-              uni.navigateTo({ url: `/pages/health/person/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delPerson(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
+page {
+  height: 100%;
+  overflow: auto;
+}
 
 .search-view {
   padding: 12rpx 32rpx;
@@ -192,157 +202,207 @@ function getList() {
   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 {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
-      }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
-      }
+  
+  .add-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);
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    
+    uni-icons {
+      color: #667eea;
     }
   }
 }
 
 .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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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;
+    }
+    
+    .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: 12rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-shrink: 0;
+        letter-spacing: 0.5rpx;
       }
-
-      .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;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        min-width: 0;
+        letter-spacing: 0.3rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/health/processRecord/addEdit.vue b/src/pages/health/processRecord/addEdit.vue
index befcf5e..60ad5c6 100644
--- a/src/pages/health/processRecord/addEdit.vue
+++ b/src/pages/health/processRecord/addEdit.vue
@@ -253,25 +253,54 @@ function submit() {
 <style lang="scss" scoped>
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 0;
   background-color: #fff;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 
   .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
   }
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 24rpx;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 16rpx;
     }
   }
 }
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/health/processRecord/list.vue b/src/pages/health/processRecord/list.vue
index bb59ff2..d28a8be 100644
--- a/src/pages/health/processRecord/list.vue
+++ b/src/pages/health/processRecord/list.vue
@@ -1,61 +1,66 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
       <view class="search-view">
-          <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-       </view>
-         <view class="search-view">
-          <u-input v-model="queryParams.healthRecordName" border="false" type="select"  @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <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>
-       </view>
-       </u-sticky>
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u-input v-model="queryParams.time" border="false" type="select" readonly 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--input v-model="queryParams.personName" border="false" placeholder="请选择人员" class="search-input"
+          @click="handlePerson" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plusempty" 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="selcet-content" style="padding: 0 24rpx">
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.startTime"
-                placeholder="请选择开始时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                </template>
-              </u-input>
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.endTime"
-                placeholder="请选择结束时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-                </template>
-              </u-input>
-            </view>
+              <view class="filter-title">健康档案</view>
+              <view class="health-record-input">
+                <u--input v-model="queryParams.healthRecordName" border="surround" placeholder="请选择健康档案" 
+                  @click="handleHealthRecord" suffixIcon="search" suffixIconStyle="color: #909399">
+                </u--input>
+              </view>
+              
+              <view class="filter-title">记录日期</view>
+              <view class="date-inputs">
+                <u-input
+                  :disabled="true"
+                  :disabledColor="'#fff'"
+                  class="dateInput"
+                  border="surround"
+                  v-model="queryParams.startTime"
+                  placeholder="请选择开始时间"
+                >
+                  <template v-slot:suffix>
+                    <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+                  </template>
+                </u-input>
+                <u-input
+                  :disabled="true"
+                  :disabledColor="'#fff'"
+                  class="dateInput"
+                  border="surround"
+                  v-model="queryParams.endTime"
+                  placeholder="请选择结束时间"
+                >
+                  <template v-slot:suffix>
+                    <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+                  </template>
+                </u-input>
+              </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"
@@ -75,31 +80,49 @@
       <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.personName+' ' +item.recordingTime" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.healthRecordName }}</text>
+                <text class="card-code">{{ item.recordingTime }}</text>
+              </view>
+            </view>
           </view>
-            <view class="item-row">
-            <text class="row-label">健康档案：</text>
-            <text class="row-value">{{ item.healthRecordName }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <!-- <view class="info-item info-item-full">
+                <text class="info-label">健康档案</text>
+                <text class="info-value">{{ item.healthRecordName || '--' }}</text>
+              </view> -->
+              <view class="info-item info-item-full" v-if="item.content">
+                <text class="info-label">记录内容</text>
+                <text class="info-value">{{ item.content }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">记录时间：</text>
-            <text class="row-value">{{ item.recordingTime }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">记录内容：</text>
-            <text class="row-value">{{ item.content }}</text>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" @click="handleCopy(item)">
+              <uni-icons type="paperplane" size="16" color="#fa8c16"></uni-icons>
+              <text>复制</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleCopy(item)">复制</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
         </view>
-      </view>
       </u-list-item>
       <view>
       </view>
@@ -342,14 +365,10 @@ function settingCancel() {
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
+page {
+  height: 100%;
+  overflow: auto;
+}
 
 .search-view {
   padding: 12rpx 32rpx;
@@ -358,157 +377,343 @@ 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-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;
+    }
+  }
+  
+  .add-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;
+    margin-left: 10rpx;
+    
+    &: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 {
     width: 100%;
     position: absolute;
     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;
-      }
-
-      .state-list {
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
         display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
+        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;
         }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+      }
+      
+      .health-record-input {
+        margin-bottom: 24rpx;
+      }
+      
+      .date-inputs {
+        display: flex;
+        flex-direction: column;
+        gap: 16rpx;
+        
+        .dateInput {
+          border-radius: 12rpx;
+          border: 2rpx solid #e8edf3;
         }
       }
     }
 
     .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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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;
+    }
+    
+    .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: 12rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-shrink: 0;
+        letter-spacing: 0.5rpx;
       }
-
-      .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;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        min-width: 0;
+        letter-spacing: 0.3rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-copy {
+      background: rgba(250, 140, 22, 0.1);
+      color: #fa8c16;
+      border: 1rpx solid rgba(250, 140, 22, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/health/statistic/doctorStatistic/index.vue b/src/pages/health/statistic/doctorStatistic/index.vue
index 990224c..b8df085 100644
--- a/src/pages/health/statistic/doctorStatistic/index.vue
+++ b/src/pages/health/statistic/doctorStatistic/index.vue
@@ -1,118 +1,170 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-       
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
       <view class="search-view">
         <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
         suffixIconStyle="color: #909399" class="search-input">
         </u-input>  
-    </view>
-    <view class="search-view">
-          <u-input v-model="queryParams.healthRecordName" border="false" type="select"  @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
+      </view>
+      <view class="search-view">
+        <u-input v-model="queryParams.healthRecordName" border="false" type="select"  @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
+        suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-       </view>
-    </u-sticky>
-      <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+      </view>
       <view class="search-view">
         <u-input v-model="queryParams.time" placeholder="请选择就医日期" 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>
-      <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="selcet-content" style="padding: 0 24rpx">
-            <u-input
-              :disabled="true"
-              :disabledColor="'#fff'"
-              class="dateInput"
-              border="surround"
-              v-model="queryParams.startTime"
-              placeholder="请选择开始时间"
-            >
-              <template v-slot:suffix>
-                <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-              </template>
-            </u-input>
-            <u-input
-              :disabled="true"
-              :disabledColor="'#fff'"
-              class="dateInput"
-              border="surround"
-              v-model="queryParams.endTime"
-              placeholder="请选择结束时间"
-            >
-              <template v-slot:suffix>
-                <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-              </template>
-            </u-input>
-          </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>
-          <u-datetime-picker
-            :closeOnClickOverlay="true"
-            :show="timeShow"
-            v-model="time"
-            mode="date"
-            :minDate="-2209017600000"
-            @close="openOrCloseDate"
-            @cancel="openOrCloseDate"
-            @confirm="confirm"
-          ></u-datetime-picker>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
         </view>
-      </u-transition>
+      </view>
+      
+      <view class="app-container">
+        <view class="header-con" ref="searchHeightRef">
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
+        <uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">就医次数</view>
+        <view class="num">{{ doctor.doctorCount }}<span>次</span></view>
+      </view>
     </view>
+    <view class="item">
+      <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>
+      <view class="info-sum">
+        <view class="title">就医费用</view>
+        <view class="num">{{ doctor.doctorCost }}<span>元</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef">
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
+        <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">常去医院</view>
+        <view class="num">{{ doctor.commonHospital }}<span></span></view>
+      </view>
+    </view>
+    <view class="item">
+      <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>
+      <view class="info-sum">
+        <view class="title">常去科室</view>
+        <view class="num">{{ doctor.commonDepartments }}<span></span></view>
+      </view>
+    </view>
+  </view>
+      </view>
+      
+<!-- 视图切换 -->
+  <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'; btFirstClick()"
+      >
+        <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>
     </u-sticky>
-      <div class="app-container" style="overflow: auto">
-  <div class="header-con" ref="searchHeightRef">
+    
+  <!-- 筛选面板 -->
+  <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="selcet-content" style="padding: 0 24rpx">
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.startTime"
+            placeholder="请选择开始时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+            </template>
+          </u-input>
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.endTime"
+            placeholder="请选择结束时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+            </template>
+          </u-input>
+        </view>
+      </view>
+      <view class="btn-box">
+        <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>
+    </view>
+  </u-transition>
+  
+  <!-- 日期选择器 -->
+  <u-datetime-picker
+    :closeOnClickOverlay="true"
+    :show="timeShow"
+    v-model="time"
+    mode="date"
+    :minDate="-2209017600000"
+    @close="openOrCloseDate"
+    @cancel="openOrCloseDate"
+    @confirm="confirm"
+  ></u-datetime-picker>
+    
+    <!-- <div class="header-con" ref="searchHeightRef">
     <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">就医次数</div>
-        <div class="num">{{ doctor.doctorCount }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">就医费用</div>
-        <div class="num">{{ doctor.doctorCost }}<span>元</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">常去医院</div>
-        <div class="num">{{ doctor.commonHospital }}<span></span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">常去科室</div>
-        <div class="num">{{ doctor.commonDepartments }}<span></span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
+        <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">常看大夫</div>
         <div class="num">{{ doctor.commonDoctor }}<span></span></div>
       </div>
     </div>
     <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <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">
         <div class="title">门诊次数</div>
         <div class="num">{{ doctor.clinicCount }}<span>次</span></div>
@@ -121,14 +173,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, #f59e0b 0%, #d97706 100%);">
+        <uni-icons type="fire-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">急诊次数</div>
         <div class="num">{{ doctor.emergencyCount }}<span>次</span></div>
       </div>
     </div>
     <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <uni-icons type="plusempty" size="20" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">输液次数</div>
         <div class="num">{{ doctor.infusionCount }}<span>次</span></div>
@@ -137,112 +193,181 @@
   </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, #10b981 0%, #059669 100%);">
+        <uni-icons type="home" size="20" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">住院次数</div>
         <div class="num">{{ doctor.hospitalizedCount }}<span>次</span></div>
       </div>
     </div>
     <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
+      <view class="item-icon" style="background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);">
+        <uni-icons type="chat-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
       <div class="info-sum">
         <div class="title">线上问诊次数</div>
         <div class="num">{{ doctor.onlineCount }}<span>次</span></div>
       </div>
     </div>
-  </div>
-  <div></div>
-</div>
-<div style="margin:8px" v-show="listData.length>0">
+  </div> -->
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="doctorLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="doctorColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+<div style="margin:8px" v-show="listData.length>0 && viewMode === 'list'">
     <button :type="firstType" style="margin-right:5px" size=mini @click="btFirstClick">明细</button>
     <button :type="secondType"   size=mini  @click="btSecondClick">医院</button>
     <button :type="thirdType"   size=mini  @click="btThirdClick">科室</button>
     <button :type="fourType"   size=mini  @click="btFourClick">大夫</button>
     <button :type="fiveType"  size=mini  @click="btFiveClick">费用</button>
   </div>
-    <u-list   v-show="firstTabShow"  :spaceHeight="116" lowerThreshold="100">
+    <u-list   v-show="firstTabShow && viewMode === 'list'"  :spaceHeight="720" 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.hospitalName+'-'+dictStr(item.type, typeList)+'-'+item.doctor" size="30rpx" color="#333333" ></u--text>
+            <view class="record-name-section">
+              <view class="record-icon">
+                <uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="record-info">
+                <text class="record-name">{{ item.hospitalName }}</text>
+                <text class="record-code">{{ dictStr(item.type, typeList) }}</text>
+              </view>
+            </view>
+            <view class="cost-section">
+              <text class="cost-value"><text class="cost-label">费用</text>{{ item.totalCost }}元</text>
+            </view>
+          </view>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">就诊人</text>
+                <text class="info-value">{{ item.personName || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">大夫</text>
+                <text class="info-value">{{ item.doctor || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">就诊时间</text>
+                <text class="info-value">{{ item.visitingTime || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full">
+                <text class="info-label">诊断结果</text>
+                <text class="info-value">{{ item.diagnosis || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full">
+                <text class="info-label">处理及医嘱</text>
+                <text class="info-value">{{ item.prescribe || '--' }}</text>
+              </view>
+            </view>
           </view>
-        <!-- <view class="item-row">
-          <text class="row-label">就医类型：</text>
-          <text class="row-value">{{ dictStr(item.type, typeList) }}</text>
-        </view> -->
-        <view class="item-row">
-          <text class="row-label">就诊人：</text>
-          <text class="row-value">{{item.personName}}</text>
-        </view> 
-        <view class="item-row">
-          <text class="row-label">就诊时间：</text>
-          <text class="row-value">{{ item.visitingTime}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">诊断结果：</text>
-          <text class="row-value">{{ item.diagnosis}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">就诊费用：</text>
-          <text class="row-value">{{ item.totalCost+' 元'}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">处理及医嘱：</text>
-          <text class="row-value">{{ item.prescribe}}</text>
-        </view>
         </view>
       </u-list-item>
       <view>
       </view>
     </u-list>
-    <u-list v-show="secondTabShow"  :spaceHeight="116" lowerThreshold="100">
+    <u-list v-show="secondTabShow && viewMode === 'list'"  :spaceHeight="720" 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.hospitalName+' '+item.count+' 次'" size="30rpx" color="#333333" ></u--text>
+              <view class="record-name-section">
+                <view class="record-icon">
+                  <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
+                </view>
+                <view class="record-info">
+                  <text class="record-name">{{ item.hospitalName }}</text>
+                </view>
+              </view>
+              <view class="cost-section">
+                <text class="cost-value"><text class="cost-label">次数</text>{{ item.count }}次</text>
+              </view>
             </view>
-
           </view>
         </u-list-item>
         <view>
         </view>
       </u-list>
-      <u-list v-show="thirdTabShow"  :spaceHeight="116" lowerThreshold="100">
+      <u-list v-show="thirdTabShow && viewMode === 'list'"  :spaceHeight="720" lowerThreshold="100">
         <u-list-item v-for="(item, index) in thirdListData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.departments+'  '+item.count+' 次'" size="30rpx" color="#333333" ></u--text>
+              <view class="record-name-section">
+                <view class="record-icon">
+                  <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+                </view>
+                <view class="record-info">
+                  <text class="record-name">{{ item.departments }}</text>
+                </view>
+              </view>
+              <view class="cost-section">
+                <text class="cost-value"><text class="cost-label">次数</text>{{ item.count }}次</text>
+              </view>
             </view>
-
           </view>
         </u-list-item>
         <view>
         </view>
       </u-list>
-      <u-list v-show="fourTabShow"  :spaceHeight="116" lowerThreshold="100">
+      <u-list v-show="fourTabShow && viewMode === 'list'"  :spaceHeight="720" lowerThreshold="100">
         <u-list-item v-for="(item, index) in fourListData" :key="index">
           <view class="list-item">
             <view class="item-header">
-              <u--text  lines="2" 
-                :text="item.hospitalName+'  '+item.doctor +' '+item.count+' 次'" size="30rpx" color="#333333" ></u--text>
+              <view class="record-name-section">
+                <view class="record-icon">
+                  <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
+                </view>
+                <view class="record-info">
+                  <text class="record-name">{{ item.doctor }} - {{ item.hospitalName }}</text>
+                </view>
+              </view>
+              <view class="cost-section">
+                <text class="cost-value"><text class="cost-label">次数</text>{{ item.count }}次</text>
+              </view>
             </view>
-
           </view>
         </u-list-item>
         <view>
         </view>
       </u-list>
-      <u-list v-show="fiveTabShow"  :spaceHeight="116" lowerThreshold="100">
+      <u-list v-show="fiveTabShow && viewMode === 'list'"  :spaceHeight="720" lowerThreshold="100">
         <u-list-item v-for="(item, index) in fiveListData" :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="record-name-section">
+                <view class="record-icon">
+                  <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+                </view>
+                <view class="record-info">
+                  <text class="record-name">{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="cost-section">
+                <text class="cost-value"><text class="cost-label">费用</text>{{ item.value }}元</text>
+              </view>
             </view>
-
           </view>
         </u-list-item>
         <view>
@@ -303,6 +428,147 @@ const thirdListData = ref([])
 const fourListData = ref([])
 const fiveListData = ref([])
 
+const viewMode = ref('list') // 'list', 'line', 'column'
+
+// 曲线图配置
+const lineChartOpts = computed(() => {
+  const dataCount = fiveListData.value ? fiveListData.value.length : 0
+  const showXAxisLabel = dataCount <= 10
+  
+  return {
+    color: ['#667eea'],
+    padding: [15, 15, 30, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: showXAxisLabel ? 10 : 0,
+      fontColor: showXAxisLabel ? '#999999' : 'transparent',
+      rotateLabel: true,
+      rotateAngle: 30,
+      disabled: !showXAxisLabel
+    },
+    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 = computed(() => {
+  const dataCount = fiveListData.value ? fiveListData.value.length : 0
+  const showXAxisLabel = dataCount <= 10
+  
+  return {
+    color: ['#667eea'],
+    padding: [15, 15, 30, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: showXAxisLabel ? 10 : 0,
+      fontColor: showXAxisLabel ? '#999999' : 'transparent',
+      rotateLabel: true,
+      rotateAngle: 30,
+      disabled: !showXAxisLabel
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showTitle: false,
+      disabled: false,
+      format: (val) => {
+        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: 'none',
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  }
+})
+
+// 图表数据
+const chartData = computed(() => {
+  if (!fiveListData.value || fiveListData.value.length === 0) {
+    return {
+      categories: [],
+      series: []
+    }
+  }
+  
+  const reversedData = [...fiveListData.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
+        })
+      }
+    ]
+  }
+})
+
 function   btFirstClick() {
         firstType.value="primary"
         secondType.value="default"
@@ -581,40 +847,79 @@ function settingCancel() {
 </script>
 
 <style lang="scss" scoped>
-
-.app-container {
-.header-con {
-  width: 100%;
-  height: 100px;
-  background-color: #ffffff;
-  margin-bottom: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .item {
-    width: 50%;
-    height: 100%;
-    display: flex;
-    position: relative;
-    align-items: center;
-    margin: 5px 10px 5px 10px;
-    .title {
-      margin-left: 5px;
-      color: rgb(133, 133, 148);
-      margin-bottom: 5px;
-      font-size: 14px;
-    }
-    .num {
-      margin-left: 5px;
-      font-weight: bold;
-      font-size: 14px;
-    }
-  }
-  img {
-    height: 30px;
-    width: 30px;
-  }
+page {
+  height: 100%;
+  overflow: auto;
 }
+.app-container {
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
+
+  .header-con {
+    width: calc(100% - 32rpx);
+    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: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
+      }
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
+      }
+    }
+  }
 .header-title {
   width: 100%;
   height: 30px;
@@ -639,160 +944,391 @@ function settingCancel() {
   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-panel {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
-      }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
-      }
+  
+  .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);
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    
+    uni-icons {
+      color: #667eea;
     }
   }
 }
 
+.filter-panel {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 270rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+
+  .filter-panel-content {
+    background-color: #ffffff;
+    padding: 0 30rpx 30rpx;
+    border-radius: 16rpx 16rpx 0 0;
+
+    .select-header {
+      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;
+      }
+    }
+
+    .filter-title {
+      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;
+
+      .state-item {
+        width: 210rpx;
+        height: 72rpx;
+        border: 1rpx solid rgba(0, 0, 0, 0.25);
+        border-radius: 72rpx;
+        text-align: center;
+        line-height: 72rpx;
+        margin: 0 20rpx 20rpx 0;
+        font-size: 28rpx;
+        color: #000000;
+      }
+
+      .active {
+        background-color: rgba(222, 241, 255, 1);
+        border: 1rpx solid rgba(22, 119, 255, 1);
+      }
+    }
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+.section-title {
+  display: flex;
+  margin-top: -10rpx;
+  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 60rpx;
+  padding: 16rpx;
+  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: 650rpx;
+  overflow: visible;
+  position: relative;
+}
+
 .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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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%);
+    
+    .record-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      margin-right: 16rpx;
+    }
+    
+    .record-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;
+    }
+    
+    .record-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      
+      .record-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;
+      
+      .record-code {
+        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;
+    }
+    
+    .cost-section {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      white-space: nowrap;
+      
+      .cost-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        
+        .cost-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;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 }
diff --git a/src/pages/health/statistic/healthStatistic/index.vue b/src/pages/health/statistic/healthStatistic/index.vue
index 3b49073..8b1921e 100644
--- a/src/pages/health/statistic/healthStatistic/index.vue
+++ b/src/pages/health/statistic/healthStatistic/index.vue
@@ -1,220 +1,311 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-       
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
       <view class="search-view">
         <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
         suffixIconStyle="color: #909399" class="search-input">
         </u-input>  
-    </view>
-    <view class="search-view">
-          <u-input v-model="queryParams.healthRecordName" border="false" type="select"  @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
+      </view>
+      <view class="search-view">
+        <u-input v-model="queryParams.healthRecordName" border="false" type="select"  @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
+        suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-       </view>
-    </u-sticky>
-      <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+      </view>
       <view class="search-view">
         <u-input v-model="queryParams.time" placeholder="请选择建档日期" 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>
-      <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="selcet-content" style="padding: 0 24rpx">
-            <u-input
-              :disabled="true"
-              :disabledColor="'#fff'"
-              class="dateInput"
-              border="surround"
-              v-model="queryParams.startTime"
-              placeholder="请选择开始时间"
-            >
-              <template v-slot:suffix>
-                <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-              </template>
-            </u-input>
-            <u-input
-              :disabled="true"
-              :disabledColor="'#fff'"
-              class="dateInput"
-              border="surround"
-              v-model="queryParams.endTime"
-              placeholder="请选择结束时间"
-            >
-              <template v-slot:suffix>
-                <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-              </template>
-            </u-input>
-          </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>
-          <u-datetime-picker
-            :closeOnClickOverlay="true"
-            :show="timeShow"
-            v-model="time"
-            mode="date"
-            :minDate="-2209017600000"
-            @close="openOrCloseDate"
-            @cancel="openOrCloseDate"
-            @confirm="confirm"
-          ></u-datetime-picker>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
         </view>
-      </u-transition>
+      </view>
+      
+      <view class="app-container">
+        <view class="header-con" ref="searchHeightRef">
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
+        <uni-icons type="folder-add-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">档案数量</view>
+        <view class="num">{{ record.healthRecordCount }}<span>份</span></view>
+      </view>
     </view>
-    </u-sticky>
-      <div class="app-container" style="overflow: auto">
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">档案数量</div>
-        <div class="num">{{ record.healthRecordCount }}<span>份</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">平均康复周期</div>
-        <div class="num">
-          {{ record.perDuration.split(',')[0]  }}
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
+        <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">平均康复周期</view>
+        <view class="num">
+          {{ record.perDuration ? record.perDuration.split(',')[0] : '0' }}
           <span>天</span>
-          {{ record.perDuration.split(',')[1]  }}
+          {{ record.perDuration ? record.perDuration.split(',')[1] : '0' }}
           <span>小时</span>
-        
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">就医医院</div>
-        <div class="num">{{ record.hospitalCount }}<span>个</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">就诊大夫</div>
-        <div class="num">{{ record.doctorTotalCount }}<span>个</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">就医次数</div>
-        <div class="num">{{ record.doctorCount }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">就医费用</div>
-        <div class="num">{{ record.doctorCost }}<span>元</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">用药天数</div>
-        <div class="num">{{ record.marDayCount }}<span>天</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">用药次数</div>
-        <div class="num">{{ record.marCount }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">发烧天数</div>
-        <div class="num">{{ record.feverDayCount }}<span>天</span></div>
-      </div>
-    </div>
-    <!-- <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">用药次数</div>
-        <div class="num">{{ record.marCount }}<span>次</span></div>
-      </div>
-    </div> -->
-  </div>
-  <div></div>
-</div>
-<div style="margin:8px" v-show="listData.length>0">
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef">
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
+        <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">就医医院</view>
+        <view class="num">{{ record.hospitalCount }}<span>个</span></view>
+      </view>
+    </view>
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
+        <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">就诊大夫</view>
+        <view class="num">{{ record.doctorTotalCount }}<span>个</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef">
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
+        <uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">就医次数</view>
+        <view class="num">{{ record.doctorCount }}<span>次</span></view>
+      </view>
+    </view>
+    <view class="item">
+      <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>
+      <view class="info-sum">
+        <view class="title">就医费用</view>
+        <view class="num">{{ record.doctorCost }}<span>元</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef">
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
+        <uni-icons type="color" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">用药天数</view>
+        <view class="num">{{ record.marDayCount }}<span>天</span></view>
+      </view>
+    </view>
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <uni-icons type="cart-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">用药次数</view>
+        <view class="num">{{ record.marCount }}<span>次</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef">
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
+        <uni-icons type="fire-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">发烧天数</view>
+        <view class="num">{{ record.feverDayCount }}<span>天</span></view>
+      </view>
+    </view>
+  </view>
+      </view>
+      
+<!-- 视图切换 -->
+  <view class="section-title" v-show="listData.length>0 || secondListData.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'; btFirstClick()"
+      >
+        <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'"
+        v-if="secondListData.length>0"
+      >
+        <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'"
+        v-if="secondListData.length>0"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+    </u-sticky>
+    
+  <!-- 筛选面板 -->
+  <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="selcet-content" style="padding: 0 24rpx">
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.startTime"
+            placeholder="请选择开始时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+            </template>
+          </u-input>
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.endTime"
+            placeholder="请选择结束时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+            </template>
+          </u-input>
+        </view>
+      </view>
+      <view class="btn-box">
+        <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>
+    </view>
+  </u-transition>
+  
+  <!-- 日期选择器 -->
+  <u-datetime-picker
+    :closeOnClickOverlay="true"
+    :show="timeShow"
+    v-model="time"
+    mode="date"
+    :minDate="-2209017600000"
+    @close="openOrCloseDate"
+    @cancel="openOrCloseDate"
+    @confirm="confirm"
+  ></u-datetime-picker>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="secondListData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="healthLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="secondListData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="healthColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+  <view style="margin:8px" v-show="listData.length>0 && viewMode === 'list'">
     <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" :spaceHeight="116" lowerThreshold="100">
+  </view>
+    <u-list   v-show="!tabShow && viewMode === 'list'" :spaceHeight="720" 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" size="30rpx" color="#333333" ></u--text>
+            <view class="record-name-section">
+              <view class="record-icon">
+                <uni-icons type="folder-add-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="record-info">
+                <text class="record-name">{{ item.name }}</text>
+              </view>
+            </view>
+            <view class="cost-section">
+              <text class="cost-value"><text class="cost-label">费用</text>{{ item.doctorCost }}元</text>
+            </view>
+          </view>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">发生时间</text>
+                <text class="info-value">{{ item.occurTime || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">持续时间</text>
+                <text class="info-value">{{ item.duration || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">过程记录</text>
+                <text class="info-value">{{ item.processCount || 0 }}次</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">就医次数</text>
+                <text class="info-value">{{ item.doctorCount || 0 }}次</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">用药天数</text>
+                <text class="info-value">{{ item.marDayCount || 0 }}天</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">用药次数</text>
+                <text class="info-value">{{ item.marCount || 0 }}次</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">发烧天数</text>
+                <text class="info-value">{{ item.feverDayCount || 0 }}天</text>
+              </view>
+            </view>
           </view>
-        <view class="item-row">
-          <text class="row-label">发生时间：</text>
-          <text class="row-value">{{ item.occurTime}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">持续时间：</text>
-          <text class="row-value">{{item.duration}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">过程记录次数：</text>
-          <text class="row-value">{{ item.processCount+" 次"}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">就医次数：</text>
-          <text class="row-value">{{ item.doctorCount+" 次"}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">就医费用：</text>
-          <text class="row-value">{{ item.doctorCost+" 元"}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">用药天数：</text>
-          <text class="row-value">{{ item.marDayCount+" 天"}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">用药次数：</text>
-          <text class="row-value">{{ item.marCount+" 次"}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">发烧天数：</text>
-          <text class="row-value">{{ item.feverDayCount+" 天"}}</text>
-        </view>
         </view>
       </u-list-item>
       <view>
       </view>
     </u-list>
-    <u-list v-show="tabShow"  :spaceHeight="116" lowerThreshold="100">
-        <u-list-item v-for="(item, index) in listData" :key="index">
+    <u-list v-show="tabShow && viewMode === 'list'"  :spaceHeight="720" 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.name+' 花费 '+item.doctorCost+' 元'" size="30rpx" color="#333333" ></u--text>
+              <view class="record-name-section">
+                <view class="record-icon">
+                  <uni-icons type="folder-add-filled" size="20" color="#ffffff"></uni-icons>
+                </view>
+                <view class="record-info">
+                  <text class="record-name">{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="cost-section">
+                <text class="cost-value"><text class="cost-label">费用</text>{{ item.value }}元</text>
+              </view>
             </view>
-
           </view>
         </u-list-item>
         <view>
@@ -262,6 +353,180 @@ const tabShow = ref(false)
 const firstType = ref("primary")
 const secondType = ref("default")
 const secondListData = ref([])
+const viewMode = ref('list') // 'list', 'line', 'column'
+
+// 曲线图配置
+const lineChartOpts = computed(() => {
+  const showXAxisLabel = filteredDataCount.value <= 10
+  
+  return {
+    color: ['#667eea'],
+    padding: [15, 15, 30, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: false,
+      fontSize: showXAxisLabel ? 10 : 0,
+      fontColor: showXAxisLabel ? '#999999' : 'transparent',
+      lineHeight: 12,
+      marginTop: 5,
+      disabled: !showXAxisLabel
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 2,
+      gridColor: '#eeeeee',
+      padding: 10,
+      showTitle: false,
+      data: [
+        {
+          min: 0,
+          axisLabel: true,
+          fontSize: 10,
+          fontColor: '#999999',
+          format: (val) => val.toFixed(0)
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 2,
+        activeType: 'hollow',
+        linearType: 'custom',
+        onShadow: false,
+        animation: 'vertical'
+      },
+      markLine: {
+        type: 'dash',
+        dashLength: 5,
+        data: [
+          {
+            value: 'average',
+            lineColor: '#f04864',
+            showLabel: false,
+            labelOffsetX: 5,
+            labelOffsetY: -5
+          }
+        ]
+      }
+    }
+  }
+})
+
+// 柱状图配置
+const columnChartOpts = computed(() => {
+  const showXAxisLabel = filteredDataCount.value <= 10
+  
+  return {
+    color: ['#667eea'],
+    padding: [15, 15, 30, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: false,
+      fontSize: showXAxisLabel ? 10 : 0,
+      fontColor: showXAxisLabel ? '#999999' : 'transparent',
+      lineHeight: 12,
+      marginTop: 5,
+      disabled: !showXAxisLabel
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 2,
+      gridColor: '#eeeeee',
+      padding: 10,
+      showTitle: false,
+      data: [
+        {
+          min: 0,
+          axisLabel: true,
+          fontSize: 10,
+          fontColor: '#999999',
+          format: (val) => val.toFixed(0)
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 30,
+        activeBgColor: '#000000',
+        activeBgOpacity: 0.08,
+        linearType: 'custom',
+        barBorderCircle: true,
+        seriesGap: 2,
+        categoryGap: 2
+      }
+    }
+  }
+})
+
+// 图表数据
+const chartData = computed(() => {
+  if (!secondListData.value || secondListData.value.length === 0) {
+    return {
+      categories: [],
+      series: []
+    }
+  }
+  
+  // 使用实际的字段名：time 和 value，过滤掉空值和undefined
+  const filteredData = secondListData.value.filter(item => {
+    return item && 
+           item.time && 
+           item.time !== 'undefined' && 
+           item.time !== undefined && 
+           item.value !== undefined && 
+           item.value !== null && 
+           item.value !== 'undefined'
+  })
+  
+  return {
+    categories: filteredData.map(item => String(item.time)),
+    series: [
+      {
+        name: '费用',
+        data: filteredData.map(item => parseFloat(item.value || 0)),
+        color: '#667eea',
+        linearColor: [
+          [0, '#667eea'],
+          [1, '#764ba2']
+        ]
+      }
+    ]
+  }
+})
+
+// 过滤后的实际数据量
+const filteredDataCount = computed(() => {
+  if (!secondListData.value || secondListData.value.length === 0) {
+    return 0
+  }
+  return secondListData.value.filter(item => {
+    return item && 
+           item.time && 
+           item.time !== 'undefined' && 
+           item.time !== undefined && 
+           item.value !== undefined && 
+           item.value !== null && 
+           item.value !== 'undefined'
+  }).length
+})
 
 const data = reactive({
   filterPanel: false,
@@ -355,6 +620,15 @@ function getList() {
           secondListData.value=[]
         listData.value = listData.value.concat(res.data.recordList)
         secondListData.value = secondListData.value.concat(res.data.recordCostList)
+        
+        // 调试信息：查看完整返回数据和费用数据结构
+        console.log('完整返回数据 res.data:', res.data)
+        console.log('recordList:', res.data.recordList)
+        console.log('recordCostList:', res.data.recordCostList)
+        if (secondListData.value.length > 0) {
+          console.log('第一条费用数据示例:', secondListData.value[0])
+          console.log('费用数据所有字段:', Object.keys(secondListData.value[0]))
+        }
       }).catch(() => {
       })
     }
@@ -451,218 +725,488 @@ function settingCancel() {
 </script>
 
 <style lang="scss" scoped>
-
+page {
+  height: 100%;
+  overflow: auto;
+}
 .app-container {
-.header-con {
-  width: 100%;
-  height: 100px;
-  background-color: #ffffff;
-  margin-bottom: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .item {
-    width: 50%;
-    height: 100%;
+  background-color: #f5f7fa;
+  padding: 0;
+  
+  .header-con {
     display: flex;
-    position: relative;
+    justify-content: space-between;
     align-items: center;
-    margin: 5px 10px 5px 10px;
-    .title {
-      margin-left: 5px;
-      color: rgb(133, 133, 148);
-      margin-bottom: 5px;
-      font-size: 14px;
-    }
-    .num {
-      margin-left: 5px;
-      font-weight: bold;
-      font-size: 14px;
+    padding: 8rpx 24rpx;
+    margin-bottom: 8rpx;
+    background-color: transparent;
+    
+    .item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      padding: 16rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+      margin: 0 4rpx;
+      transition: all 0.3s ease;
+      
+      &:first-child {
+        margin-left: 0;
+      }
+      
+      &:last-child {
+        margin-right: 0;
+      }
+      
+      &:active {
+        transform: translateY(-2rpx);
+        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+      }
+      
+      .item-icon {
+        width: 64rpx;
+        height: 64rpx;
+        border-radius: 12rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 12rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 4rpx;
+          font-size: 22rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 18rpx;
+            color: #95a5a6;
+            margin-left: 2rpx;
+          }
+        }
+      }
     }
   }
-  img {
+  
+  .header-title {
+    width: 100%;
     height: 30px;
-    width: 30px;
+    background-color: #ffffff;
+    margin-bottom: 3px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
   }
 }
-.header-title {
-  width: 100%;
-  height: 30px;
-  background-color: #ffffff;
-  margin-bottom: 3px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 16px;
-}
-}
+
 .btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
+  width: 146rpx;
+  height: 56rpx;
+  line-height: 56rpx;
+  border-radius: 8rpx;
+  display:float;
+  text-align: center;
+}
 
 .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-panel {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
-      }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
-      }
+  
+  .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);
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    
+    uni-icons {
+      color: #667eea;
     }
   }
 }
 
+.filter-panel {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 270rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+
+  .filter-panel-content {
+    background-color: #ffffff;
+    padding: 0 30rpx 30rpx;
+    border-radius: 16rpx 16rpx 0 0;
+
+    .select-header {
+      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;
+      }
+    }
+
+    .filter-title {
+      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;
+
+      .state-item {
+        width: 210rpx;
+        height: 72rpx;
+        border: 1rpx solid rgba(0, 0, 0, 0.25);
+        border-radius: 72rpx;
+        text-align: center;
+        line-height: 72rpx;
+        margin: 0 20rpx 20rpx 0;
+        font-size: 28rpx;
+        color: #000000;
+      }
+
+      .active {
+        background-color: rgba(222, 241, 255, 1);
+        border: 1rpx solid rgba(22, 119, 255, 1);
+      }
+    }
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+.section-title {
+  display: flex;
+  margin-top: -10rpx;
+  align-items: center;
+  padding: 20rpx 32rpx 12rpx;
+  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 60rpx;
+  padding: 16rpx;
+  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: 500rpx;
+  overflow: visible;
+  position: relative;
+}
+
 .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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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%);
+    
+    .record-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      margin-right: 16rpx;
+    }
+    
+    .record-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;
+    }
+    
+    .record-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      
+      .record-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;
-      }
-
-      .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;
+    }
+    
+    .cost-section {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      white-space: nowrap;
+      
+      .cost-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        
+        .cost-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;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 }
diff --git a/src/pages/health/statistic/index.vue b/src/pages/health/statistic/index.vue
index 519309b..47fa66b 100644
--- a/src/pages/health/statistic/index.vue
+++ b/src/pages/health/statistic/index.vue
@@ -1,115 +1,157 @@
 <template>
   <view class="work-container">
-
-
+    <!-- 统计分析标题 -->
+    <view class="page-header">
+      <view class="header-decorator"></view>
+      <text class="header-title">统计分析</text>
+    </view>
+    
     <!-- 宫格组件 -->
-    <uni-section title="统计分析" v-show="auth.hasPermi('health:person:list')"  type="line"></uni-section>
-    <view class="grid-body">
-      <uni-grid :column="4" :showBorder="false">
-        <uni-grid-item v-for="(item, index) in healthGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
-        <view class="grid-item-box">
-            <uni-icons :type="item.icon" size="30"></uni-icons>
-            <text class="text">{{ item.text }}</text>
+    <view class="grid-body" v-show="auth.hasPermi('health:person:list')">
+      <view class="grid-container">
+        <view 
+          v-for="(item, index) in healthGridList" 
+          :key="index" 
+          v-show="auth.hasPermi(item.permission)" 
+          class="grid-item"
+          @click="navigateTo(item.path)"
+        >
+          <view class="grid-item-content">
+            <view class="icon-wrapper" :style="{ background: item.gradient }">
+              <uni-icons :type="item.icon" size="32" color="#ffffff"></uni-icons>
+            </view>
+            <text class="grid-text">{{ item.text }}</text>
           </view>
-      </uni-grid-item>
-      </uni-grid>
+        </view>
+      </view>
     </view>
   </view>
-
-      
 </template>
 
 <script setup>
-import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
+import auth from "@/plugins/auth";
+import { ref } from "vue";
 
-// 也可以使用下面的方式
-	import { ref } from "vue";
+const healthGridList = ref([
+  { 
+    path: '/pages/health/statistic/healthStatistic/index', 
+    text: '档案统计', 
+    icon: 'folder-add-filled', 
+    permission: 'health:healthRecord:list',
+    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+  },
+  { 
+    path: '/pages/health/statistic/doctorStatistic/index', 
+    text: '就医统计', 
+    icon: 'stethoscope', 
+    permission: 'health:doctorRecord:list',
+    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
+  },
+  { 
+    path: '/pages/health/statistic/marStatistic/index', 
+    text: '用药统计', 
+    icon: 'color', 
+    permission: 'health:marRecord:list',
+    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
+  },
+  { 
+    path: '/pages/health/statistic/temperatureStatistic/index', 
+    text: '体温统计', 
+    icon: 'fire-filled', 
+    permission: 'health:temperatureRecord:list',
+    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
+  }
+]);
 
-  const healthGridList=ref([
-  { path: '/pages/health/statistic/healthStatistic/index', text: '档案统计', icon: 'map', permission: 'health:healthRecord:list'  },
-  { path: '/pages/health/statistic/doctorStatistic/index', text: '就医统计', icon: 'person', permission: 'health:doctorRecord:list'  },
-  { path: '/pages/health/statistic/marStatistic/index', text: '用药统计', icon: 'shop-filled', permission: 'health:marRecord:list' },
-  { path: '/pages/health/statistic/temperatureStatistic/index', text: '体温统计', icon: 'spinner-cycle', permission: 'health:temperatureRecord:list'  }
-      ])
-	function navigateTo(path) {
-    uni.navigateTo({
-        url: path
-      });
-	}
+function navigateTo(path) {
+  uni.navigateTo({
+    url: path
+  });
+}
 </script>
 
-<style lang="scss">
-  /* #ifndef APP-NVUE */
-  page {
+<style lang="scss" scoped>
+page {
+  background-color: #f5f7fa;
+  min-height: 100%;
+}
+
+.work-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 24rpx;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  padding: 32rpx 24rpx 24rpx;
+  background-color: #ffffff;
+  border-radius: 16rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  
+  .header-decorator {
+    width: 6rpx;
+    height: 32rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 3rpx;
+    margin-right: 12rpx;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #2c3e50;
+  }
+}
+
+.grid-body {
+  .grid-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+  }
+  
+  .grid-item {
+    width: calc(50% - 12rpx);
+    background: #ffffff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    
+    &:active {
+      transform: translateY(-4rpx);
+      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
+    }
+  }
+  
+  .grid-item-content {
     display: flex;
     flex-direction: column;
-    box-sizing: border-box;
-    background-color: #fff;
-    min-height: 100%;
-    height: auto;
+    align-items: center;
+    justify-content: center;
+    padding: 40rpx 20rpx;
+    position: relative;
   }
-
-  view {
-    font-size: 14px;
-    line-height: inherit;
+  
+  .icon-wrapper {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20rpx;
+    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.15);
   }
-
-  /* #endif */
-
-  .text {
+  
+  .grid-text {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #2c3e50;
     text-align: center;
-    font-size: 22rpx;
-    margin-top: 10rpx;
-  }
-
-  .grid-item-box {
-    flex: 1;
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 15px 0;
-  }
-
-  .uni-margin-wrap {
-    width: 690rpx;
-    width: 100%;
-    ;
-  }
-
-  .swiper {
-    height: 300rpx;
-  }
-
-  .swiper-box {
-    height: 150px;
-  }
-
-  .swiper-item {
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    height: 300rpx;
-    line-height: 300rpx;
-  }
-
-  @media screen and (min-width: 500px) {
-    .uni-swiper-dot-box {
-      width: 400px;
-      /* #ifndef APP-NVUE */
-      margin: 0 auto;
-      /* #endif */
-      margin-top: 8px;
-    }
-
-    .image {
-      width: 100%;
-    }
   }
+}
 </style>
diff --git a/src/pages/health/statistic/marStatistic/index.vue b/src/pages/health/statistic/marStatistic/index.vue
index 5ea6c84..a9b8ce7 100644
--- a/src/pages/health/statistic/marStatistic/index.vue
+++ b/src/pages/health/statistic/marStatistic/index.vue
@@ -1,30 +1,264 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-       
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
       <view class="search-view">
-        <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
+        <u-input v-model="queryParams.personName" border="false" type="select" @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
         suffixIconStyle="color: #909399" class="search-input">
-        </u-input>  
-    </view>
-    <view class="search-view">
-          <u-input v-model="queryParams.healthRecordName" border="false" type="select"  @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-       </view>
-    </u-sticky>
-      <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+      </view>
+      <view class="search-view">
+        <u-input v-model="queryParams.healthRecordName" border="false" type="select" @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
+        suffixIconStyle="color: #909399" class="search-input">
+        </u-input>
+      </view>
       <view class="search-view">
         <u-input v-model="queryParams.time" placeholder="请选择用药日期" 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>
-      <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-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+      </view>
+      
+      <view class="app-container">
+  <view class="header-con" ref="searchHeightRef">
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
+        <uni-icons type="color" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">用药天数</view>
+        <view class="num">{{ mar.marDays }}<span>天</span></view>
+      </view>
+    </view>
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <uni-icons type="cart-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">用药种类</view>
+        <view class="num">{{ mar.marCategoryCount }}<span>种</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef">
+    <view class="item">
+      <view class="item-icon" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
+        <uni-icons type="loop" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">用药次数</view>
+        <view class="num">{{ mar.marCount }}<span>次</span></view>
+      </view>
+    </view>
+    <view class="item" v-show="mar.top1Name != null">
+      <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>
+      <view class="info-sum">
+        <view class="title">{{ mar.top1Name }}</view>
+        <view class="num">{{ mar.top1 }}<span>次</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef" v-show="mar.top2Name != null">
+    <view class="item" v-show="mar.top2Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #0284c7 100%);">
+        <uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top2Name }}</view>
+        <view class="num">{{ mar.top2 }}<span>次</span></view>
+      </view>
+    </view>
+    <view class="item" v-show="mar.top3Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
+        <uni-icons type="gear-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top3Name }}</view>
+        <view class="num">{{ mar.top3 }}<span>次</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef" v-show="mar.top4Name != null">
+    <view class="item" v-show="mar.top4Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
+        <uni-icons type="flag-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top4Name }}</view>
+        <view class="num">{{ mar.top4 }}<span>次</span></view>
+      </view>
+    </view>
+    <view class="item" v-show="mar.top5Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
+        <uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top5Name }}</view>
+        <view class="num">{{ mar.top5 }}<span>次</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef" v-show="mar.top6Name != null">
+    <view class="item" v-show="mar.top6Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
+        <uni-icons type="location-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top6Name }}</view>
+        <view class="num">{{ mar.top6 }}<span>次</span></view>
+      </view>
+    </view>
+    <view class="item" v-show="mar.top7Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <uni-icons type="paperplane-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top7Name }}</view>
+        <view class="num">{{ mar.top7 }}<span>次</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef" v-show="mar.top8Name != null">
+    <view class="item" v-show="mar.top8Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
+        <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top8Name }}</view>
+        <view class="num">{{ mar.top8 }}<span>次</span></view>
+      </view>
+    </view>
+    <view class="item" v-show="mar.top9Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #ec4899 100%);">
+        <uni-icons type="settings-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top9Name }}</view>
+        <view class="num">{{ mar.top9 }}<span>次</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef" v-show="mar.top10Name != null">
+    <view class="item" v-show="mar.top10Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
+        <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top10Name }}</view>
+        <view class="num">{{ mar.top10 }}<span>次</span></view>
+      </view>
+    </view>
+    <view class="item" v-show="mar.top11Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
+        <uni-icons type="contact-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top11Name }}</view>
+        <view class="num">{{ mar.top11 }}<span>次</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef" v-show="mar.top12Name != null">
+    <view class="item" v-show="mar.top12Name != null">
+      <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>
+      <view class="info-sum">
+        <view class="title">{{ mar.top12Name }}</view>
+        <view class="num">{{ mar.top12 }}<span>次</span></view>
+      </view>
+    </view>
+    <view class="item" v-show="mar.top13Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
+        <uni-icons type="email-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top13Name }}</view>
+        <view class="num">{{ mar.top13 }}<span>次</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef" v-show="mar.top14Name != null">
+    <view class="item" v-show="mar.top14Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
+        <uni-icons type="chatbubble-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top14Name }}</view>
+        <view class="num">{{ mar.top14 }}<span>次</span></view>
+      </view>
+    </view>
+    <view class="item" v-show="mar.top15Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
+        <uni-icons type="eye-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top15Name }}</view>
+        <view class="num">{{ mar.top15 }}<span>次</span></view>
+      </view>
+    </view>
+  </view>
+  <view class="header-con" ref="searchHeightRef" v-show="mar.top16Name != null">
+    <view class="item" v-show="mar.top16Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
+        <uni-icons type="hand-up-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top16Name }}</view>
+        <view class="num">{{ mar.top16 }}<span>次</span></view>
+      </view>
+    </view>
+    <view class="item" v-show="mar.top17Name != null">
+      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <uni-icons type="locked-filled" size="20" color="#ffffff"></uni-icons>
+      </view>
+      <view class="info-sum">
+        <view class="title">{{ mar.top17Name }}</view>
+        <view class="num">{{ mar.top17 }}<span>次</span></view>
+      </view>
+    </view>
+  </view>
+</view>
+      
+<!-- 视图切换 -->
+  <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'; tabShow = false"
+      >
+        <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'; tabShow = false"
+      >
+        <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'; tabShow = false"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+    </u-sticky>
+    
+    <!-- 筛选面板 -->
+    <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="selcet-content" style="padding: 0 24rpx">
             <u-input
               :disabled="true"
@@ -51,225 +285,101 @@
               </template>
             </u-input>
           </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>
-          <u-datetime-picker
-            :closeOnClickOverlay="true"
-            :show="timeShow"
-            v-model="time"
-            mode="date"
-            :minDate="-2209017600000"
-            @close="openOrCloseDate"
-            @cancel="openOrCloseDate"
-            @confirm="confirm"
-          ></u-datetime-picker>
         </view>
-      </u-transition>
-    </view>
-    </u-sticky>
-      <div class="app-container" style="overflow: auto">
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">用药天数</div>
-        <div class="num">{{ mar.marDays }}<span>天</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">用药种类</div>
-        <div class="num">{{ mar.marCategoryCount }}<span>种</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">用药次数</div>
-        <div class="num">{{ mar.marCount }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item" v-show="mar.top1Name != null">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top1Name }}</div>
-        <div class="num">{{ mar.top1 }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef" v-show="mar.top2Name != null">
-    <div class="item" v-show="mar.top2Name != null">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top2Name }}</div>
-        <div class="num">{{ mar.top2 }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item" v-show="mar.top3Name != null">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top3Name }}</div>
-        <div class="num">{{ mar.top3 }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef" v-show="mar.top4Name != null">
-    <div class="item" v-show="mar.top4Name != null">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top4Name }}</div>
-        <div class="num">{{ mar.top4 }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item" v-show="mar.top5Name != null">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top5Name }}</div>
-        <div class="num">{{ mar.top5 }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef" v-show="mar.top6Name != null">
-    <div class="item" v-show="mar.top6Name != null">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top6Name }}</div>
-        <div class="num">{{ mar.top6 }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item" v-show="mar.top7Name != null">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top7Name }}</div>
-        <div class="num">{{ mar.top7 }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef" v-show="mar.top8Name != null">
-    <div class="item" v-show="mar.top8Name != null">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top8Name }}</div>
-        <div class="num">{{ mar.top8 }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item" v-show="mar.top9Name != null">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top9Name }}</div>
-        <div class="num">{{ mar.top9 }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef" v-show="mar.top10Name != null">
-    <div class="item" v-show="mar.top10Name != null">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top10Name }}</div>
-        <div class="num">{{ mar.top10 }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item" v-show="mar.top11Name != null">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top11Name }}</div>
-        <div class="num">{{ mar.top11 }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef" v-show="mar.top12Name != null">
-    <div class="item" v-show="mar.top12Name != null">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top12Name }}</div>
-        <div class="num">{{ mar.top12 }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item" v-show="mar.top13Name != null">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top13Name }}</div>
-        <div class="num">{{ mar.top13 }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef" v-show="mar.top14Name != null">
-    <div class="item" v-show="mar.top14Name != null">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top14Name }}</div>
-        <div class="num">{{ mar.top14 }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item" v-show="mar.top15Name != null">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top15Name }}</div>
-        <div class="num">{{ mar.top15 }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef" v-show="mar.top16Name != null">
-    <div class="item" v-show="mar.top16Name != null">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top16Name }}</div>
-        <div class="num">{{ mar.top16 }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item" v-show="mar.top17Name != null">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">{{ mar.top17Name }}</div>
-        <div class="num">{{ mar.top17 }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-
-  <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">用药次数</button>
-  </div>
-    <u-list v-show="!tabShow" :spaceHeight="116" lowerThreshold="100">
+        <view class="btn-box">
+          <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>
+      </view>
+    </u-transition>
+    
+    <u-datetime-picker
+      :closeOnClickOverlay="true"
+      :show="timeShow"
+      v-model="time"
+      mode="date"
+      :minDate="-2209017600000"
+      @close="openOrCloseDate"
+      @cancel="openOrCloseDate"
+      @confirm="confirm"
+    ></u-datetime-picker>
+    
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="marLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="marColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+    <u-list v-show="viewMode === 'list' && !tabShow" :spaceHeight="720" 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.medicalName" size="30rpx" color="#333333" ></u--text>
+            <view class="record-name-section">
+              <view class="record-icon">
+                <uni-icons type="color" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="record-info">
+                <text class="record-name">{{ item.medicalName }} - {{ item.useDays || 0 }}天</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">用药次数</text>
+                <text class="info-value">{{ item.count || 0 }}次</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">用药总量</text>
+                <text class="info-value">{{ item.dosage }}{{ item.unit }}</text>
+              </view>
+            </view>
           </view>
-        <view class="item-row">
-          <text class="row-label">用药天数：</text>
-          <text class="row-value">{{ item.useDays+" 天"}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">用药次数：</text>
-          <text class="row-value">{{item.count+" 次"}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">用药总量：</text>
-          <text class="row-value">{{ item.dosage+item.unit}}</text>
-        </view>
         </view>
       </u-list-item>
       <view>
       </view>
     </u-list>
-    <u-list v-show="tabShow"  :spaceHeight="116" lowerThreshold="100">
+    <u-list v-show="viewMode === 'list' && tabShow"  :spaceHeight="720" 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="record-name-section">
+                <view class="record-icon">
+                  <uni-icons type="color" size="20" color="#ffffff"></uni-icons>
+                </view>
+                <view class="record-info">
+                  <text class="record-name">{{ item.time }}</text>
+                </view>
+              </view>
+              <view class="cost-section">
+                <text class="cost-value"><text class="cost-label">次数</text>{{ item.value }}次</text>
+              </view>
             </view>
-
           </view>
         </u-list-item>
         <view>
@@ -314,10 +424,143 @@ const  flag= ref(true)
 const mar = ref({})
 
 const tabShow = ref(false)
+const viewMode = ref('list') // 'list', 'line', 'column'
 const firstType = ref("primary")
 const secondType = ref("default")
 const secondListData = ref([])
 
+// 曲线图配置
+const lineChartOpts = computed(() => {
+  const dataCount = secondListData.value ? secondListData.value.length : 0
+  const showXAxisLabel = dataCount <= 10
+  
+  return {
+    color: ['#667eea'],
+    padding: [15, 15, 30, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: showXAxisLabel ? 10 : 0,
+      fontColor: showXAxisLabel ? '#999999' : 'transparent',
+      rotateLabel: true,
+      rotateAngle: 30,
+      disabled: !showXAxisLabel
+    },
+    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 = computed(() => {
+  const dataCount = secondListData.value ? secondListData.value.length : 0
+  const showXAxisLabel = dataCount <= 10
+  
+  return {
+    color: ['#667eea'],
+    padding: [15, 15, 30, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: showXAxisLabel ? 10 : 0,
+      fontColor: showXAxisLabel ? '#999999' : 'transparent',
+      rotateLabel: true,
+      rotateAngle: 30,
+      disabled: !showXAxisLabel
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showTitle: false,
+      disabled: false,
+      format: (val) => {
+        return val.toFixed(0) + '次'
+      }
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'none',
+        barBorderCircle: true,
+        seriesGap: 2
+      }
+    }
+  }
+})
+
+// 图表数据
+const chartData = computed(() => {
+  if (!secondListData.value || secondListData.value.length === 0) {
+    return {
+      categories: [],
+      series: []
+    }
+  }
+  
+  return {
+    categories: secondListData.value.map(item => item.time || ''),
+    series: [
+      {
+        name: '用药次数',
+        data: secondListData.value.map(item => {
+          const value = parseFloat(item.value)
+          return isNaN(value) ? 0 : value
+        })
+      }
+    ]
+  }
+})
+
 const data = reactive({
   filterPanel: false,
   queryPersonParams: {
@@ -509,51 +752,96 @@ function settingCancel() {
 </script>
 
 <style lang="scss" scoped>
-
+page {
+  height: 100%;
+  overflow: auto;
+}
 .app-container {
-.header-con {
-  width: 100%;
-  height: 100px;
-  background-color: #ffffff;
-  margin-bottom: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .item {
-    width: 50%;
-    height: 100%;
+  background-color: #f5f7fa;
+  padding: 0;
+  
+  .header-con {
     display: flex;
-    position: relative;
+    justify-content: space-between;
     align-items: center;
-    margin: 5px 10px 5px 10px;
-    .title {
-      margin-left: 5px;
-      color: rgb(133, 133, 148);
-      margin-bottom: 5px;
-      font-size: 14px;
-    }
-    .num {
-      margin-left: 5px;
-      font-weight: bold;
-      font-size: 14px;
+    padding: 8rpx 24rpx;
+    margin-bottom: 8rpx;
+    background-color: transparent;
+    
+    .item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      padding: 16rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+      margin: 0 4rpx;
+      transition: all 0.3s ease;
+      
+      &:first-child {
+        margin-left: 0;
+      }
+      
+      &:last-child {
+        margin-right: 0;
+      }
+      
+      &:active {
+        transform: translateY(-2rpx);
+        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+      }
+      
+      .item-icon {
+        width: 64rpx;
+        height: 64rpx;
+        border-radius: 12rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 12rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 4rpx;
+          font-size: 22rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 18rpx;
+            color: #95a5a6;
+            margin-left: 2rpx;
+          }
+        }
+      }
     }
   }
-  img {
+  
+  .header-title {
+    width: 100%;
     height: 30px;
-    width: 30px;
+    background-color: #ffffff;
+    margin-bottom: 3px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
   }
 }
-.header-title {
-  width: 100%;
-  height: 30px;
-  background-color: #ffffff;
-  margin-bottom: 3px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 16px;
-}
-}
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -567,33 +855,84 @@ function settingCancel() {
   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 {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
+.filter-panel {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 270rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
 
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
+  .filter-panel-content {
+    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;
+    .filter-title {
+      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;
@@ -619,108 +958,261 @@ function settingCancel() {
       }
     }
 
-    .btn-box {
+  .btn-box {
+    display: flex;
+    gap: 20rpx;
+    padding: 24rpx 30rpx;
+    background-color: #fff;
+    box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    .btn-reset,
+    .btn-confirm {
       display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      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;
+      }
     }
   }
 }
 
+.section-title {
+  display: flex;
+  margin-top: -10rpx;
+  align-items: center;
+  padding: 20rpx 32rpx 12rpx;
+  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 60rpx;
+  padding: 16rpx;
+  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: 500rpx;
+  overflow: visible;
+  position: relative;
+}
+
 .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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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%);
+    
+    .record-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      margin-right: 16rpx;
+    }
+    
+    .record-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;
+    }
+    
+    .record-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      
+      .record-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;
-      }
-
-      .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;
+    }
+    
+    .cost-section {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      white-space: nowrap;
+      
+      .cost-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        
+        .cost-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;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 }
diff --git a/src/pages/health/statistic/milkPowderStatistic/index.vue b/src/pages/health/statistic/milkPowderStatistic/index.vue
index d8ff2cc..c9f2cac 100644
--- a/src/pages/health/statistic/milkPowderStatistic/index.vue
+++ b/src/pages/health/statistic/milkPowderStatistic/index.vue
@@ -1,173 +1,262 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-       
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
       <view class="search-view">
         <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
         suffixIconStyle="color: #909399" class="search-input">
         </u-input>  
-    </view>
-    </u-sticky>
-      <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+      </view>
       <view class="search-view">
         <u-input v-model="queryParams.time" placeholder="请选择吃奶日期" 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>
-      <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="selcet-content" style="padding: 0 24rpx">
-            <u-input
-              :disabled="true"
-              :disabledColor="'#fff'"
-              class="dateInput"
-              border="surround"
-              v-model="queryParams.startTime"
-              placeholder="请选择开始时间"
-            >
-              <template v-slot:suffix>
-                <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-              </template>
-            </u-input>
-            <u-input
-              :disabled="true"
-              :disabledColor="'#fff'"
-              class="dateInput"
-              border="surround"
-              v-model="queryParams.endTime"
-              placeholder="请选择结束时间"
-            >
-              <template v-slot:suffix>
-                <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-              </template>
-            </u-input>
-          </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>
-          <u-datetime-picker
-            :closeOnClickOverlay="true"
-            :show="timeShow"
-            v-model="time"
-            mode="date"
-            :minDate="-2209017600000"
-            @close="openOrCloseDate"
-            @cancel="openOrCloseDate"
-            @confirm="confirm"
-          ></u-datetime-picker>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
         </view>
-      </u-transition>
+      </view>
+      
+      <view class="app-container">
+        <view class="header-con" ref="searchHeightRef">
+          <view class="item">
+            <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+              <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+            </view>
+            <view class="info-sum">
+              <view class="title">今日吃奶次数</view>
+              <view class="num">{{ milkPowder.todayCount }}<span>次</span></view>
+            </view>
+          </view>
+          <view class="item">
+            <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #0284c7 100%);">
+              <uni-icons type="color" size="20" color="#ffffff"></uni-icons>
+            </view>
+            <view class="info-sum">
+              <view class="title">今日吃奶量</view>
+              <view class="num">{{ milkPowder.todayConsumption }}<span>毫升</span></view>
+            </view>
+          </view>
+        </view>
+        <view class="header-con" ref="searchHeightRef">
+          <view class="item">
+            <view class="item-icon" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
+              <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+            </view>
+            <view class="info-sum">
+              <view class="title">今日单次平均吃奶量</view>
+              <view class="num">{{ milkPowder.todayPerConsumption }}<span>毫升</span></view>
+            </view>
+          </view>
+          <view class="item">
+            <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
+              <uni-icons type="calendar" size="20" color="#ffffff"></uni-icons>
+            </view>
+            <view class="info-sum">
+              <view class="title">近7日吃奶量</view>
+              <view class="num">{{ milkPowder.sevenDayConsumption }}<span>毫升</span></view>
+            </view>
+          </view>
+        </view>
+        <view class="header-con" ref="searchHeightRef">
+          <view class="item">
+            <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
+              <uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
+            </view>
+            <view class="info-sum">
+              <view class="title">近7日日平均吃奶量</view>
+              <view class="num">{{ milkPowder.sevenDayPerConsumption }}<span>毫升</span></view>
+            </view>
+          </view>
+          <view class="item">
+            <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
+              <uni-icons type="flag-filled" size="20" color="#ffffff"></uni-icons>
+            </view>
+            <view class="info-sum">
+              <view class="title">近1月吃奶量</view>
+              <view class="num">{{ milkPowder.oneMonthConsumption }}<span>毫升</span></view>
+            </view>
+          </view>
+        </view>
+        <view class="header-con" ref="searchHeightRef">
+          <view class="item">
+            <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
+              <uni-icons type="gift-filled" size="20" color="#ffffff"></uni-icons>
+            </view>
+            <view class="info-sum">
+              <view class="title">近3月吃奶量</view>
+              <view class="num">{{ milkPowder.threeMonthConsumption }}<span>毫升</span></view>
+            </view>
+          </view>
+          <view class="item">
+            <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
+              <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+            </view>
+            <view class="info-sum">
+              <view class="title">近6月吃奶量</view>
+              <view class="num">{{ milkPowder.sixMonthConsumption }}<span>毫升</span></view>
+            </view>
+          </view>
+        </view>
+        <view class="header-con" ref="searchHeightRef">
+          <view class="item">
+            <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
+              <uni-icons type="fire-filled" size="20" color="#ffffff"></uni-icons>
+            </view>
+            <view class="info-sum">
+              <view class="title">近1年吃奶量</view>
+              <view class="num">{{ milkPowder.oneYearConsumption }}<span>毫升</span></view>
+            </view>
+          </view>
+          <view class="item">
+            <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>
+            <view class="info-sum">
+              <view class="title">总吃奶量</view>
+              <view class="num">{{ milkPowder.totalConsumption }}<span>毫升</span></view>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+<!-- 视图切换 -->
+  <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>
     </u-sticky>
-      <div class="app-container" style="overflow: auto">
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">今日吃奶次数</div>
-        <div class="num">{{ milkPowder.todayCount }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">今日吃奶量</div>
-        <div class="num">{{ milkPowder.todayConsumption }}<span>毫升</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">今日单次平均吃奶量</div>
-        <div class="num">{{ milkPowder.todayPerConsumption }}<span>毫升</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">近7日吃奶量</div>
-        <div class="num">{{ milkPowder.sevenDayConsumption }}<span>毫升</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">近7日日平均吃奶量</div>
-        <div class="num">{{ milkPowder.sevenDayPerConsumption }}<span>毫升</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">近1月吃奶量</div>
-        <div class="num">{{ milkPowder.oneMonthConsumption }}<span>毫升</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">近3月吃奶量</div>
-        <div class="num">{{ milkPowder.threeMonthConsumption }}<span>毫升</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">近6月吃奶量</div>
-        <div class="num">{{ milkPowder.sixMonthConsumption }}<span>毫升</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">近1年吃奶量</div>
-        <div class="num">{{ milkPowder.oneYearConsumption }}<span>毫升</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">总吃奶量</div>
-        <div class="num">{{ milkPowder.totalConsumption }}<span>毫升</span></div>
-      </div>
-    </div>
-  </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">
+    
+  <!-- 筛选面板 -->
+  <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="selcet-content" style="padding: 0 24rpx">
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.startTime"
+            placeholder="请选择开始时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+            </template>
+          </u-input>
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.endTime"
+            placeholder="请选择结束时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+            </template>
+          </u-input>
+        </view>
+      </view>
+      <view class="btn-box">
+        <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>
+    </view>
+  </u-transition>
+  
+  <!-- 日期选择器 -->
+  <u-datetime-picker
+    :closeOnClickOverlay="true"
+    :show="timeShow"
+    v-model="time"
+    mode="date"
+    :minDate="-2209017600000"
+    @close="openOrCloseDate"
+    @cancel="openOrCloseDate"
+    @confirm="confirm"
+  ></u-datetime-picker>
+  
+  <!-- 曲线图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
+    <qiun-data-charts 
+      type="line"
+      canvasId="milkLineChart"
+      :chartData="chartData"
+      :opts="lineChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 柱状图展示 -->
+  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
+    <qiun-data-charts 
+      type="column"
+      canvasId="milkColumnChart"
+      :chartData="chartData"
+      :opts="columnChartOpts"
+      :loadingType="1"
+    />
+  </view>
+  
+  <!-- 列表展示 -->
+  <view style="margin:0 24rpx 24rpx" v-show="listData.length>0 && viewMode === 'list'">
+    <u-list :spaceHeight="720" 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="record-name-section">
+              <view class="record-icon">
+                <uni-icons type="color" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="record-info">
+                <text class="record-name">{{ item.time }}</text>
+              </view>
+            </view>
+            <view class="cost-section">
+              <text class="cost-value">{{ item.value }}<text class="cost-label">ml</text></text>
+            </view>
           </view>
-  
         </view>
       </u-list-item>
       <view>
       </view>
     </u-list>
-    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
-      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
-      <u-picker itemHeight="88" :show="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel"
-        @confirm="handlePersonConfirm"></u-picker>
+  </view>
+  
+  <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
+    @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
+  <u-picker itemHeight="88" :show="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel"
+    @confirm="handlePersonConfirm"></u-picker>
   </view>
   <!-- 悬停按钮返回工作台-->
   <suspend></suspend>
@@ -194,6 +283,140 @@ const timeShow= ref(false)
 const time =ref( Number(new Date()))
 const  flag= ref(true)
 const milkPowder = ref({})
+const viewMode = ref('list') // 'list', 'line', 'column'
+
+// 曲线图配置
+const lineChartOpts = computed(() => {
+  const dataCount = listData.value ? listData.value.length : 0
+  const showXAxisLabel = dataCount <= 10
+  
+  return {
+    color: ['#667eea'],
+    padding: [15, 15, 30, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: showXAxisLabel ? 10 : 0,
+      fontColor: showXAxisLabel ? '#999999' : 'transparent',
+      rotateLabel: true,
+      rotateAngle: 30,
+      disabled: !showXAxisLabel
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        return val.toFixed(0) + 'ml'
+      },
+      data: [
+        {
+          min: 0
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      }
+    }
+  }
+})
+
+// 柱状图配置
+const columnChartOpts = computed(() => {
+  const dataCount = listData.value ? listData.value.length : 0
+  const showXAxisLabel = dataCount <= 10
+  
+  return {
+    color: ['#667eea'],
+    padding: [15, 15, 30, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: showXAxisLabel ? 10 : 0,
+      fontColor: showXAxisLabel ? '#999999' : 'transparent',
+      rotateLabel: true,
+      rotateAngle: 30,
+      disabled: !showXAxisLabel
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showTitle: false,
+      disabled: false,
+      format: (val) => {
+        return val.toFixed(0) + 'ml'
+      }
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'none',
+        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
+        })
+      }
+    ]
+  }
+})
 const data = reactive({
   filterPanel: false,
   queryPersonParams: {
@@ -206,7 +429,7 @@ const data = reactive({
   dataType: null,
   recordId: null,
   id: null
-   } 
+   }
 })
 
 const { filterPanel, queryPersonParams, queryParams} = toRefs(data)
@@ -269,8 +492,11 @@ function searchSubmit() {
 function getList() {
   
   getMilkPowderAnalysis({...queryParams.value }).then(res => {
+          console.log('吃奶统计返回数据:', res.data)
+          console.log('milkPowderTableList:', res.data.milkPowderTableList)
           milkPowder.value = { ...res.data.milkPowderStatistic }
         listData.value = listData.value.concat(res.data.milkPowderTableList)
+        console.log('listData.value:', listData.value)
       }).catch(() => {
       })
     }
@@ -318,7 +544,6 @@ function settingCancel() {
   function   handlePersonConfirm(e) {
     queryParams.value.personName = e.value[0].name
     queryParams.value.id= e.value[0].id
-      queryHealthRecordParams.value.personId=e.value[0].id
     showPerson.value = false
         pageNum.value = 1
       listData.value = []
@@ -339,51 +564,97 @@ function settingCancel() {
 </script>
 
 <style lang="scss" scoped>
-
+page {
+  height: 100%;
+  overflow: auto;
+}
 .app-container {
-.header-con {
-  width: 100%;
-  height: 100px;
-  background-color: #ffffff;
-  margin-bottom: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .item {
-    width: 50%;
-    height: 100%;
+  background-color: #f5f7fa;
+  padding: 0;
+  
+  .header-con {
     display: flex;
-    position: relative;
+    justify-content: space-between;
     align-items: center;
-    margin: 5px 10px 5px 10px;
-    .title {
-      margin-left: 5px;
-      color: rgb(133, 133, 148);
-      margin-bottom: 5px;
-      font-size: 14px;
-    }
-    .num {
-      margin-left: 5px;
-      font-weight: bold;
-      font-size: 14px;
+    padding: 8rpx 24rpx;
+    margin-bottom: 8rpx;
+    background-color: transparent;
+    
+    .item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      padding: 16rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+      margin: 0 4rpx;
+      transition: all 0.3s ease;
+      
+      &:first-child {
+        margin-left: 0;
+      }
+      
+      &:last-child {
+        margin-right: 0;
+      }
+      
+      &:active {
+        transform: translateY(-2rpx);
+        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+      }
+      
+      .item-icon {
+        width: 64rpx;
+        height: 64rpx;
+        border-radius: 12rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 12rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 4rpx;
+          font-size: 22rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 18rpx;
+            color: #95a5a6;
+            margin-left: 2rpx;
+          }
+        }
+      }
     }
   }
-  img {
+  
+  .header-title {
+    width: 100%;
     height: 30px;
-    width: 30px;
+    background-color: #ffffff;
+    margin-bottom: 3px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
   }
 }
-.header-title {
-  width: 100%;
-  height: 30px;
-  background-color: #ffffff;
-  margin-bottom: 3px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 16px;
-}
-}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -397,160 +668,322 @@ function settingCancel() {
   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 {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+.section-title {
+  display: flex;
+  margin-top: -10rpx;
+  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;
       }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
+      
+      &.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);
+      }
+    }
+  }
+}
 
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
+.chart-container {
+  margin: 16rpx 24rpx 60rpx;
+  padding: 16rpx;
+  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: 550rpx;
+  overflow: visible;
+  position: relative;
+}
+
+.filter-panel {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 184rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+
+  .filter-panel-content {
+    background-color: #ffffff;
+    padding: 0 30rpx 30rpx;
+    border-radius: 16rpx 16rpx 0 0;
+
+    .select-header {
+      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;
       }
     }
 
-    .btn-box {
+    .filter-title {
+      color: #2c3e50;
+      font-size: 32rpx;
+      font-weight: 600;
+      padding: 32rpx 0 24rpx 20rpx;
+      position: relative;
       display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      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;
+
+      .state-item {
+        width: 210rpx;
+        height: 72rpx;
+        border: 1rpx solid rgba(0, 0, 0, 0.25);
+        border-radius: 72rpx;
+        text-align: center;
+        line-height: 72rpx;
+        margin: 0 20rpx 20rpx 0;
+        font-size: 28rpx;
+        color: #000000;
+      }
+
+      .active {
+        background-color: rgba(222, 241, 255, 1);
+        border: 1rpx solid rgba(22, 119, 255, 1);
+      }
+    }
+  }
+
+  .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;
-  background-color: #fff;
+  margin: 0 0 24rpx;
+  padding: 24rpx 32rpx;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: translateY(-2rpx);
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+  }
 
   .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;
+    
+    .record-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      
+      .record-icon {
+        width: 64rpx;
+        height: 64rpx;
+        border-radius: 12rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+        flex-shrink: 0;
       }
-
-      .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;
+      
+      .record-info {
+        flex: 1;
+        
+        .record-name {
+          font-size: 30rpx;
+          font-weight: 600;
+          color: #2c3e50;
+          line-height: 1.4;
+        }
       }
     }
-  }
-
-  .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;
+    
+    .cost-section {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      
+      .cost-value {
+        font-size: 36rpx;
+        font-weight: 700;
+        color: #667eea;
+        line-height: 1;
+        
+        .cost-label {
+          font-size: 22rpx;
+          color: #95a5a6;
+          margin-left: 4rpx;
+          font-weight: 500;
+        }
+      }
     }
   }
 }
diff --git a/src/pages/health/statistic/temperatureStatistic/index.vue b/src/pages/health/statistic/temperatureStatistic/index.vue
index 2ca03bc..40c3523 100644
--- a/src/pages/health/statistic/temperatureStatistic/index.vue
+++ b/src/pages/health/statistic/temperatureStatistic/index.vue
@@ -1,30 +1,145 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-       
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
       <view class="search-view">
-        <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
+        <u-input v-model="queryParams.personName" border="false" type="select" @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
         suffixIconStyle="color: #909399" class="search-input">
-        </u-input>  
-    </view>
-    <view class="search-view">
-          <u-input v-model="queryParams.healthRecordName" border="false" type="select"  @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-       </view>
-    </u-sticky>
-      <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+      </view>
+      <view class="search-view">
+        <u-input v-model="queryParams.healthRecordName" border="false" type="select" @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
+        suffixIconStyle="color: #909399" class="search-input">
+        </u-input>
+      </view>
       <view class="search-view">
         <u-input v-model="queryParams.time" placeholder="请选择测量日期" 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>
-      <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-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+      </view>
+      
+      <!-- 统计卡片 -->
+    <view class="app-container">
+      <view class="header-con">
+        <view class="item">
+          <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
+            <uni-icons type="fire-filled" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <view class="info-sum">
+            <view class="title">发烧天数</view>
+            <view class="num">{{ temp.feverDay }}<span>天</span></view>
+          </view>
+        </view>
+        <view class="item">
+          <view class="item-icon" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);">
+            <uni-icons type="fire-filled" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <view class="info-sum">
+            <view class="title">最高体温</view>
+            <view class="num">{{ temp.maxTemp }}<span>℃</span></view>
+          </view>
+        </view>
+      </view>
+      <view class="header-con">
+        <view class="item">
+          <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);">
+            <uni-icons type="snow" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <view class="info-sum">
+            <view class="title">最低体温</view>
+            <view class="num">{{ temp.minTemp }}<span>℃</span></view>
+          </view>
+        </view>
+        <view class="item">
+          <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+            <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <view class="info-sum">
+            <view class="title">平均体温</view>
+            <view class="num">{{ temp.averageTemp }}<span>℃</span></view>
+          </view>
+        </view>
+      </view>
+      <view class="header-con">
+        <view class="item">
+          <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #047857 100%);">
+            <uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <view class="info-sum">
+            <view class="title">正常( &lt;36.9℃)</view>
+            <view class="num">{{ temp.normalTempCount }}<span>次</span></view>
+          </view>
+        </view>
+        <view class="item">
+          <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
+            <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <view class="info-sum">
+            <view class="title">低烧(36.9~37.5℃)</view>
+            <view class="num">{{ temp.lowerTempCount }}<span>次</span></view>
+          </view>
+        </view>
+      </view>
+      <view class="header-con">
+        <view class="item">
+          <view class="item-icon" style="background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);">
+            <uni-icons type="fire" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <view class="info-sum">
+            <view class="title">中烧(37.5~38.5℃)</view>
+            <view class="num">{{ temp.middleTempCount }}<span>次</span></view>
+          </view>
+        </view>
+        <view class="item">
+          <view class="item-icon" style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);">
+            <uni-icons type="fire-filled" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <view class="info-sum">
+            <view class="title">高烧（>38.5℃）</view>
+            <view class="num">{{ temp.higherTempCount }}<span>次</span></view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 视图切换 -->
+    <view class="section-title" v-show="secondListData.length>0">
+      <view class="title-decorator"></view>
+      <text class="title-text">体温统计</text>
+      <view class="view-switch">
+        <view 
+          :class="['switch-item', { 'active': !tabShow }]" 
+          @click="btFirstClick"
+        >
+          <uni-icons type="list" size="16" :color="!tabShow ? '#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>
+    </u-sticky>
+    
+    <!-- 筛选面板 -->
+    <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="selcet-content" style="padding: 0 24rpx">
             <u-input
               :disabled="true"
@@ -51,137 +166,96 @@
               </template>
             </u-input>
           </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>
-          <u-datetime-picker
-            :closeOnClickOverlay="true"
-            :show="timeShow"
-            v-model="time"
-            mode="date"
-            :minDate="-2209017600000"
-            @close="openOrCloseDate"
-            @cancel="openOrCloseDate"
-            @confirm="confirm"
-          ></u-datetime-picker>
         </view>
-      </u-transition>
+        <view class="btn-box">
+          <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>
+      </view>
+    </u-transition>
+    
+    <!-- 日期选择器 -->
+    <u-datetime-picker
+      :closeOnClickOverlay="true"
+      :show="timeShow"
+      v-model="time"
+      mode="date"
+      :minDate="-2209017600000"
+      @close="openOrCloseDate"
+      @cancel="openOrCloseDate"
+      @confirm="confirm"
+    ></u-datetime-picker>
+    
+    <!-- 曲线图展示 -->
+    <view class="chart-container" v-if="secondListData.length>0 && viewMode === 'line'">
+      <qiun-data-charts 
+        type="line"
+        canvasId="tempLineChart"
+        :chartData="chartData"
+        :opts="lineChartOpts"
+        :loadingType="1"
+      />
     </view>
-    </u-sticky>
-      <div class="app-container" style="overflow: auto">
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">发烧天数</div>
-        <div class="num">{{ temp.feverDay }}<span>天</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">最高体温</div>
-        <div class="num">{{ temp.maxTemp }}<span>℃</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">最低体温</div>
-        <div class="num">{{ temp.minTemp }}<span>℃</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">平均体温</div>
-        <div class="num">{{ temp.averageTemp }}<span>℃</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">正常( &lt;36.9℃)</div>
-        <div class="num">{{ temp.normalTempCount }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">低烧(36.9~37.5℃)</div>
-        <div class="num">{{ temp.lowerTempCount }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-  <div class="header-con" ref="searchHeightRef">
-    <div class="item">
-      <img src="@/static/images/one.png" alt="" />
-      <div class="info-sum">
-        <div class="title">中烧(37.5~38.5℃)</div>
-        <div class="num">{{ temp.middleTempCount }}<span>次</span></div>
-      </div>
-    </div>
-    <div class="item">
-      <img src="@/static/images/ticketSum.png" alt="" />
-      <div class="info-sum">
-        <div class="title">高烧（>38.5℃）</div>
-        <div class="num">{{ temp.higherTempCount }}<span>次</span></div>
-      </div>
-    </div>
-  </div>
-  <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">体温明细</button>
-  </div>
-    <u-list  v-show="!tabShow" :spaceHeight="116" lowerThreshold="100">
+    
+    <!-- 柱状图展示 -->
+    <view class="chart-container" v-if="secondListData.length>0 && viewMode === 'column'">
+      <qiun-data-charts 
+        type="column"
+        canvasId="tempColumnChart"
+        :chartData="chartData"
+        :opts="columnChartOpts"
+        :loadingType="1"
+      />
+    </view>
+    <!-- 列表展示 -->
+    <u-list v-show="!tabShow && viewMode === 'list'" :spaceHeight="720" 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.time+'  测量 '+item.count+' 次'" 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.count }}次</text>
+            </view>
+          </view>
+          <view class="item-body">
+            <view class="detail-row">
+              <text class="row-label">最高体温：</text>
+              <text class="row-value">{{ item.max }} ℃</text>
+            </view>
+            <view class="detail-row">
+              <text class="row-label">最低体温：</text>
+              <text class="row-value">{{ item.min }} ℃</text>
+            </view>
+            <view class="detail-row">
+              <text class="row-label">平均体温：</text>
+              <text class="row-value">{{ item.average }} ℃</text>
+            </view>
+            <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>
-          <text class="row-value">{{ item.max+" ℃"}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">最低体温：</text>
-          <text class="row-value">{{item.min+" ℃"}}</text>
-        </view>
-        <view class="item-row">
-          <text class="row-label">平均体温：</text>
-          <text class="row-value">{{ item.average+" ℃"}}</text>
-        </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>
-    <u-list v-show="tabShow"  :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.time+' 体温 '+item.value+' ℃'" size="30rpx" color="#333333" ></u--text>
-            </view>
 
-          </view>
-        </u-list-item>
-        <view>
-        </view>
-      </u-list>
     <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
       @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
       <u-picker itemHeight="88" :show="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel"
@@ -221,10 +295,200 @@ const  flag= ref(true)
 const temp = ref({})
 
 const tabShow = ref(false)
+const viewMode = ref('list') // 'list', 'line', 'column'
 const firstType = ref("primary")
 const secondType = ref("default")
 const secondListData = ref([])
 
+// 曲线图配置
+const lineChartOpts = computed(() => {
+  const dataCount = secondListData.value ? secondListData.value.length : 0
+  const showXAxisLabel = dataCount <= 10
+  
+  return {
+    color: ['#667eea'],
+    padding: [15, 15, 60, 5],
+    enableScroll: false,
+    enableMarkLine: true,
+    dataLabel: false,
+    dataPointShape: true,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'justify',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: showXAxisLabel ? 10 : 0,
+      fontColor: showXAxisLabel ? '#999999' : 'transparent',
+      rotateLabel: true,
+      rotateAngle: 30,
+      disabled: !showXAxisLabel
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      format: (val) => {
+        return val.toFixed(1) + '℃'
+      },
+      data: [
+        {
+          min: 35
+        }
+      ]
+    },
+    extra: {
+      line: {
+        type: 'curve',
+        width: 3,
+        activeType: 'hollow',
+        linearType: 'custom',
+        linearOpacity: 0.2,
+        onShadow: true,
+        animation: true
+      },
+      markLine: {
+        type: 'dash',
+        dashLength: 5,
+        data: [
+          {
+            value: 37,
+            lineColor: '#f59e0b',
+            showLabel: true,
+            labelText: '37',
+            labelFontSize: 10,
+            labelFontColor: '#f59e0b',
+            labelOffsetX: 5,
+            labelOffsetY: -5
+          },
+          {
+            value: 38.5,
+            lineColor: '#dc2626',
+            showLabel: true,
+            labelText: '38.5',
+            labelFontSize: 10,
+            labelFontColor: '#dc2626',
+            labelOffsetX: 5,
+            labelOffsetY: -5
+          }
+        ]
+      }
+    }
+  }
+})
+
+// 柱状图配置
+const columnChartOpts = computed(() => {
+  const dataCount = secondListData.value ? secondListData.value.length : 0
+  const showXAxisLabel = dataCount <= 10
+  
+  return {
+    color: ['#667eea'],
+    padding: [15, 15, 30, 5],
+    enableScroll: false,
+    dataLabel: false,
+    legend: {
+      show: false
+    },
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: 'center',
+      axisLine: false,
+      scrollShow: true,
+      itemCount: 5,
+      fontSize: showXAxisLabel ? 10 : 0,
+      fontColor: showXAxisLabel ? '#999999' : 'transparent',
+      rotateLabel: true,
+      rotateAngle: 30,
+      disabled: !showXAxisLabel
+    },
+    yAxis: {
+      gridType: 'dash',
+      dashLength: 4,
+      gridColor: '#EEEEEE',
+      splitNumber: 5,
+      fontSize: 10,
+      fontColor: '#999999',
+      showTitle: false,
+      disabled: false,
+      format: (val) => {
+        return val.toFixed(1) + '℃'
+      },
+      data: [
+        {
+          min: 35
+        }
+      ]
+    },
+    extra: {
+      column: {
+        type: 'group',
+        width: 20,
+        activeBgColor: '#764ba2',
+        activeBgOpacity: 0.08,
+        linearType: 'none',
+        barBorderCircle: true,
+        seriesGap: 2
+      },
+      markLine: {
+        type: 'dash',
+        dashLength: 5,
+        data: [
+          {
+            value: 37,
+            lineColor: '#f59e0b',
+            showLabel: true,
+            labelText: '37',
+            labelFontSize: 10,
+            labelFontColor: '#f59e0b',
+            labelOffsetX: 5,
+            labelOffsetY: -5
+          },
+          {
+            value: 38.5,
+            lineColor: '#dc2626',
+            showLabel: true,
+            labelText: '38.5',
+            labelFontSize: 10,
+            labelFontColor: '#dc2626',
+            labelOffsetX: 5,
+            labelOffsetY: -5
+          }
+        ]
+      }
+    }
+  }
+})
+
+// 图表数据
+const chartData = computed(() => {
+  if (!secondListData.value || secondListData.value.length === 0) {
+    return {
+      categories: [],
+      series: []
+    }
+  }
+  
+  return {
+    categories: secondListData.value.map(item => item.time || ''),
+    series: [
+      {
+        name: '体温',
+        data: secondListData.value.map(item => {
+          const value = parseFloat(item.value)
+          return isNaN(value) ? 0 : value
+        })
+      }
+    ]
+  }
+})
+
 const data = reactive({
   filterPanel: false,
   queryPersonParams: {
@@ -262,18 +526,18 @@ onLoad(() => {
     }
   });
 
-  function   btFirstClick() {
-    tabShow.value=false
-    firstType.value="primary"
-    secondType.value="default"
-
-      }
-      function  btSecondClick() {
-        secondType.value="primary"
-         firstType.value="default"
-        tabShow.value=true
-        
-    }
+  function btFirstClick() {
+    tabShow.value = false
+    viewMode.value = 'list'
+    firstType.value = "primary"
+    secondType.value = "default"
+  }
+  
+  function btSecondClick() {
+    secondType.value = "primary"
+    firstType.value = "default"
+    tabShow.value = true
+  }
 
   function formatMultiLineData(data) {
 if (data != null) {
@@ -419,218 +683,399 @@ function settingCancel() {
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
 
 .app-container {
-.header-con {
-  width: 100%;
-  height: 100px;
-  background-color: #ffffff;
-  margin-bottom: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .item {
-    width: 50%;
-    height: 100%;
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
+
+  .header-con {
+    width: calc(100% - 32rpx);
+    margin: 0 16rpx 8rpx 16rpx;
+    background-color: transparent;
     display: flex;
-    position: relative;
-    align-items: center;
-    margin: 5px 10px 5px 10px;
-    .title {
-      margin-left: 5px;
-      color: rgb(133, 133, 148);
-      margin-bottom: 5px;
-      font-size: 14px;
+    justify-content: space-between;
+    align-items: stretch;
+    padding: 0;
+    gap: 12rpx;
+    
+    .item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      padding: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
+      }
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
+      }
     }
-    .num {
-      margin-left: 5px;
-      font-weight: bold;
-      font-size: 14px;
-    }
-  }
-  img {
-    height: 30px;
-    width: 30px;
   }
 }
-.header-title {
-  width: 100%;
-  height: 30px;
-  background-color: #ffffff;
-  margin-bottom: 3px;
+
+.section-title {
   display: flex;
-  justify-content: space-between;
+  margin-top: -10rpx;
   align-items: center;
-  font-size: 16px;
-}
-}
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
+  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;
-      display:float;
-      text-align: center;
+      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 60rpx;
+  padding: 16rpx;
+  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: 550rpx;
+  overflow: visible;
+  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 {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
+.filter-panel {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 270rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
 
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
+  .filter-panel-content {
+    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;
-      }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
+    .filter-title {
+      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;
       }
     }
+  }
 
-    .btn-box {
+  .btn-box {
+    display: flex;
+    gap: 20rpx;
+    padding: 24rpx 30rpx;
+    background-color: #fff;
+    box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    .btn-reset,
+    .btn-confirm {
       display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      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-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 12rpx 0;
+      border-bottom: 1rpx solid #f0f0f0;
+      
+      &:last-of-type {
+        border-bottom: none;
+      }
+      
+      .row-label {
+        font-size: 26rpx;
+        color: #7f8c8d;
+      }
+      
+      .row-value {
+        font-size: 26rpx;
+        color: #2c3e50;
+        font-weight: 600;
+      }
     }
-
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    
+    .detail-label {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      margin: 16rpx 0 12rpx;
+      
+      text {
+        font-size: 26rpx;
+        color: #667eea;
+        font-weight: 600;
+      }
     }
-  }
-
-  .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/health/temperatureRecord/addEdit.vue b/src/pages/health/temperatureRecord/addEdit.vue
index e7e4310..bdafd51 100644
--- a/src/pages/health/temperatureRecord/addEdit.vue
+++ b/src/pages/health/temperatureRecord/addEdit.vue
@@ -256,25 +256,54 @@ function submit() {
 <style lang="scss" scoped>
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 0;
   background-color: #fff;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 
   .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
   }
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 24rpx;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 16rpx;
     }
   }
 }
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/health/temperatureRecord/list.vue b/src/pages/health/temperatureRecord/list.vue
index 24c6b63..737d0f7 100644
--- a/src/pages/health/temperatureRecord/list.vue
+++ b/src/pages/health/temperatureRecord/list.vue
@@ -1,31 +1,31 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-          <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-       </view>
-         <view class="search-view">
-          <u-input v-model="queryParams.healthRecordName" border="false" type="select"  @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <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>
-       </view>
-       </u-sticky>
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u-input v-model="queryParams.time" border="false" type="select" readonly 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-transition :show="filterPanel" mode="fade">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-container">
+        <view class="search-row">
+          <u--input v-model="queryParams.personName" border="false" type="select" @click="handlePerson" placeholder="请选择人员" class="search-input"
+            suffixIcon="search" suffixIconStyle="color: #909399">
+          </u--input>
+          <view class="add-btn" @click="handleAdd()">
+            <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+            <text>新增</text>
+          </view>
+        </view>
+        <view class="search-row">
+          <u--input v-model="queryParams.healthRecordName" border="false" type="select" @click="handleHealthRecord" placeholder="请选择健康档案" class="search-input"
+            suffixIcon="search" suffixIconStyle="color: #909399">
+          </u--input>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
+        </view>
+      </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"
@@ -54,8 +54,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"
@@ -68,32 +74,48 @@
               @confirm="confirm"
             ></u-datetime-picker>
           </view>
-        </u-transition>
-      </view>
+      </u-transition>
     </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.personName+'- 体温：'+item.temperature +'℃'" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="fire" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.personName }}</text>
+                <text class="card-time">{{ item.measureTime }}</text>
+                <text class="card-code">测量体温 <text :class="getTemperatureClass(item.temperature)">{{ item.temperature }}℃</text></text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">测量时间：</text>
-            <text class="row-value">{{ item.measureTime }}</text>
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item info-item-full">
+                <text class="info-label">健康档案</text>
+                <text class="info-value">{{ item.healthRecordName || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">健康档案：</text>
-            <text class="row-value">{{ item.healthRecordName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleCopy(item)">复制</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" @click="handleCopy(item)">
+              <uni-icons type="copy" size="16" color="#fa8c16"></uni-icons>
+              <text>复制</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -251,7 +273,16 @@ function settingCancel() {
 })
   }
  function handlePersonCancel() {
+  queryParams.value.personName = ''
+        queryParams.value.personId = ''
+        queryHealthRecordParams.value.personId=null
+        listHealthRecord(queryHealthRecordParams.value).then((response) => {  
+        healthRecordList.value = [response.rows] 
+        })
        showPerson.value = false
+       pageNum.value = 1
+      listData.value = []
+      getList()
   }
 
   function handleHealthRecord() {
@@ -272,7 +303,12 @@ function settingCancel() {
       getList()
   }
  function handleHealthRecordCancel() {
+  queryParams.value.healthRecordName= ''
+         queryParams.value.healthRecordId = ''
        showHealthRecord.value = false
+       pageNum.value = 1
+      listData.value = []
+      getList()
   }
     function searchBlur() {
       pageNum.value = 1
@@ -309,189 +345,384 @@ function settingCancel() {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delTemperatureRecord(item.id)
-              uni.navigateTo({ url: `/pages/health/temperatureRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delTemperatureRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
+    }
+    
+    function getTemperatureClass(temperature) {
+      const temp = parseFloat(temperature)
+      if (temp < 37) {
+        return 'temp-normal'
+      } else if (temp >= 37 && temp < 38.5) {
+        return 'temp-warning'
+      } else {
+        return 'temp-danger'
+      }
     }
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
+page {
+  height: 100%;
+  overflow: auto;
+}
+.search-container {
+  background-color: #ffffff;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 100;
+
+  .search-row {
+    padding: 12rpx 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16rpx;
+    
+    &:first-child {
+      padding-bottom: 8rpx;
+    }
+    
+    &:last-child {
+      padding-top: 8rpx;
     }
 
-.search-view {
-  padding: 12rpx 32rpx;
-  background-color: #ffffff;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
+    .search-input {
+      background: rgba(102, 126, 234, 0.08);
+      color: #333333;
+      flex: 1;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn,
+    .add-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;
+      }
+    }
+  }
+}
 
-  .search-input {
-    background: #F5F5F5;
-    color: #333333;
-    margin-right: 36rpx;
+.filter-panel {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 180rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+
+  .filter-panel-content {
+    background-color: #ffffff;
+    padding: 0 30rpx 30rpx;
+    border-radius: 16rpx 16rpx 0 0;
+
+    .filter-title {
+      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;
+      }
+    }
+
+    .selcet-content {
+      display: flex;
+      flex-direction: column;
+      gap: 16rpx;
+    }
   }
 
-  .filter-panel {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+  .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;
+      flex: 1;
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
       }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
+      
+      text {
+        line-height: 1;
       }
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    .btn-reset {
+      background: #f5f7fa;
+      border: 2rpx solid #dcdfe6;
+      
+      text {
+        color: #606266;
+      }
+    }
+    
+    .btn-confirm {
+      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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .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;
+    }
+    
+    .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: 12rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex-shrink: 0;
+        letter-spacing: 0.5rpx;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+      
+      .card-time {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 1.3;
+        white-space: nowrap;
+        flex-shrink: 0;
+        margin-right: 8rpx;
       }
-
-      .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;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+        min-width: 0;
+        letter-spacing: 0.3rpx;
+        
+        .temp-normal {
+          color: rgba(255, 255, 255, 0.9);
+        }
+        
+        .temp-warning {
+          color: #ff7875;
+        }
+        
+        .temp-danger {
+          color: #ff4d4f;
+        }
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-copy {
+      background: rgba(250, 140, 22, 0.1);
+      color: #fa8c16;
+      border: 1rpx solid rgba(250, 140, 22, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/invest/debitCard/addEdit.vue b/src/pages/invest/debitCard/addEdit.vue
new file mode 100644
index 0000000..b020dc5
--- /dev/null
+++ b/src/pages/invest/debitCard/addEdit.vue
@@ -0,0 +1,298 @@
+<template>
+    <view class="container" style="paddingBottom:1rpx;">
+      <u-navbar
+			leftIconSize="40rpx"
+			leftIconColor="#333333"
+			title="储蓄账户管理"
+		>
+		</u-navbar>
+      <view class="section">
+        <view class="section-title">{{ title}}</view>
+        <view class="form-view">
+          <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+            :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+            <u-form-item label="储蓄账户名称" prop="name" required >
+              <u--input v-model="form.name"  placeholder="请填写储蓄账户名称"
+                inputAlign="right" border="none"></u--input>
+            </u-form-item>
+            <u-form-item label="储蓄账户卡号" prop="code" required >
+              <u--input v-model="form.code"  placeholder="请填写储蓄账户卡号"
+                inputAlign="right" border="none"></u--input>
+            </u-form-item>
+            <u-form-item label="账户状态" required prop="statusName"  @click="handleShowStatus">
+              <u--input v-model="form.statusName" disabled disabledColor="#ffffff" placeholder="请选择账户状态"
+                inputAlign="right" border="none"></u--input>
+              <u-icon slot="right" name="arrow-down"></u-icon>
+            </u-form-item>
+            <u-form-item label="余额" required prop="balance" >
+              <u--input v-model="form.balance"  type="number" placeholder="请填写余额"
+                inputAlign="right" border="none"></u--input>
+            </u-form-item>
+            <u-form-item label="储蓄账户类型" prop="debitTypeName" required @click="handleShowTeam">
+              <u--input v-model="form.debitTypeName" disabled disabledColor="#ffffff" placeholder="请选择储蓄账户类型"
+                inputAlign="right" border="none"></u--input>
+              <u-icon slot="right" name="arrow-down"></u-icon>
+            </u-form-item>
+            <u-form-item label="开户行" prop="openingBank" >
+              <u--input v-model="form.openingBank"  placeholder="请填写开户行"
+                inputAlign="right" border="none"></u--input>
+            </u-form-item>
+            <u-form-item label="开户日期" prop="activationDate"  @click="selectDate(1)">
+              <u--input v-model="form.activationDate" disabled disabledColor="#ffffff" placeholder="请选择开户日期" inputAlign="right" border="none"></u--input>
+						<u-icon slot="right" name="arrow-right"></u-icon>
+            </u-form-item>
+            <u-form-item label="有效期" prop="effectiveDate"  @click="selectDate(2)">
+              <u--input v-model="form.effectiveDate" disabled disabledColor="#ffffff" placeholder="请选择有效期" inputAlign="right" border="none"></u--input>
+						<u-icon slot="right" name="arrow-right"></u-icon>
+            </u-form-item>
+            <u-form-item label="备注" prop="remark"  labelPosition="top">
+              <u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
+                maxlength="20000" style="padding:18rpx 0;"></u--textarea>
+            </u-form-item>
+          </u--form>
+          <view class="form-btn">
+            <u-button type="primary" text="提交" @click="submit"></u-button>
+          </view>
+        </view>
+      </view>
+      <u-toast ref="uToast"></u-toast>
+      <u-picker itemHeight="88" :show="showTeam" :columns="debitTypeList" keyName="dictLabel" @cancel="handleCancel"
+        @confirm="handleConfirm"></u-picker>
+        <u-picker itemHeight="88" :show="showStatus" :columns="statusList" keyName="dictLabel" @cancel="handleStatusCancel"
+        @confirm="handleStatusConfirm"></u-picker>
+        <u-datetime-picker
+			:show="datePickShow"
+			mode="date"
+      :minDate="-2209017600000"
+      ref="createTimeRef" 
+			@cancel="datePickShow=false"
+			@confirm="datePickConfirm"
+			itemHeight="88"
+		></u-datetime-picker>
+    </view>
+  </template>
+  
+  <script setup>
+import { getBankcardLend, addBankcardLend, updateBankcardLend } from '@/api/invest/bankcardlend'
+  import { getDicts } from '@/api/system/dict/data.js'
+  const { proxy } = getCurrentInstance()
+  import dayjs from 'dayjs'
+  import {onLoad,onReady} from "@dcloudio/uni-app";
+    // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
+import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
+const datePickShow = ref(false)
+const showTeam = ref(false)
+const title = ref("储蓄账户管理")
+const debitTypeList = ref([])
+const dateType = ref(1)
+const showStatus = ref(false)
+const statusList = ref([])
+const data = reactive({
+  form: {
+    id: null,
+    name: null,
+    type: '1',
+    code: null,
+    openingBank: null,
+    activationDate: null,
+    billDate: null,
+    payDate: null,
+    delayPeriod: null,
+    creditLimit: null,
+    balance: null,
+    effectiveDate: null,
+    cvv: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    delFlag: null,
+    remark: null,
+    debitType: null,
+    status: '1',
+    statusName: '正常使用'
+  },
+  // dateType:'1',
+  rules: {
+          name: [{ type: 'string', required: true, message: '储蓄账户名称不能为空', trigger: ['change', 'blur'] }],
+          code: [{ type: 'string', required: true, message: '储蓄账户卡号不能为空', trigger: ['change', 'blur'] }],
+          balance: [{ type: 'number', required: true, message: '余额不能为空', trigger: ['change', 'blur'] }],  
+          statusName: [{ type: 'string', required: true, message: '账户状态不能为空', trigger: ['change', 'blur'] }],  
+          debitTypeName: [{ type: 'string', required: true, message: '储蓄账户类型不能为空', trigger: ['change', 'blur'] }],
+  }
+})
+const { form, rules} = toRefs(data)
+
+onLoad((option) => {
+       form.value.id = option.id
+       if(form.value.id!=null){
+        title.value="储蓄账户管理-修改"
+       }else{
+        title.value="储蓄账户管理-新增"
+       }
+      getDict()
+  })
+  onReady(() => {
+    form.value.activationDate = dayjs(new Date().getTime()).format("YYYY-MM-DD")
+    form.value.effectiveDate = dayjs(new Date().getTime()).format("YYYY-MM-DD")
+  })
+  function  getDict() {
+        // 类型
+        getDicts('debit_type').then(res => {
+        debitTypeList.value =[res.data] 
+      })
+       // 类型
+       getDicts('account_status').then(res => {
+        statusList.value =[res.data] 
+      })
+      if(form.value.id!=null){
+        getBankcardLend(form.value.id).then(res => {
+          form.value = res.data
+           // 类型
+        getDicts('debit_type').then(result => {
+          form.value.debitTypeName=dictStr(form.value.debitType, result.data)
+      })
+          
+       // 类型
+       getDicts('account_status').then(result => {
+          form.value.statusName=dictStr(form.value.status, result.data)
+      })
+        })
+      }
+  }
+  function dictStr(val, arr) {
+      let str = ''
+      arr.map(item => {
+        if (item.dictValue === val) {
+          str = item.dictLabel
+        }
+      })
+      return str
+    }
+
+  function handleShowTeam() {
+        if (debitTypeList.value[0].length === 0) {
+          proxy.$refs['uToast'].show({
+            message: '类型为空  ', type: 'warning'
+          })
+        } else {
+          showTeam.value = true
+        }
+      }
+      function   handleConfirm(e) {
+        form.value.debitTypeName = e.value[0].dictLabel
+        form.value.debitType = e.value[0].dictValue
+        showTeam.value = false
+      }
+      function handleCancel() {
+       showTeam.value = false
+      }
+      function handleShowStatus() {
+        if (statusList.value[0].length === 0) {
+          proxy.$refs['uToast'].show({
+            message: '账户状态操作为空  ', type: 'warning'
+          })
+        } else {
+          showStatus.value = true
+        }
+      }
+      function   handleStatusConfirm(e) {
+        form.value.statusName = e.value[0].dictLabel
+        form.value.status = e.value[0].dictValue
+        showStatus.value = false
+      }
+      function handleStatusCancel() {
+       showStatus.value = false
+      }
+
+      function  selectDate(type) {
+        dateType.value=type
+				datePickShow.value = true
+        proxy.$refs['createTimeRef'].innerValue = new Date().getTime()
+			}
+			function datePickConfirm(e) {
+         if(dateType.value===1){
+          form.value.activationDate = dayjs(e.value).format("YYYY-MM-DD")
+          }
+          if(dateType.value===2){
+          form.value.effectiveDate = dayjs(e.value).format("YYYY-MM-DD")
+          }
+				datePickShow.value = false
+			}
+      function submit() {
+        proxy.$refs['uForm'].validate().then(() => {
+          if (form.value.id != null) {
+            updateBankcardLend(form.value).then(res => {
+              proxy.$refs['uToast'].show({
+              message: '修改成功', complete() {
+                uni.navigateTo({ url: `/pages/work/base/debitCard/list` })
+              }
+            })
+          })
+          }else {
+            addBankcardLend(form.value).then(res => {
+              proxy.$refs['uToast'].show({
+              message: '新增成功', complete() {
+                uni.navigateTo({ url: `/pages/work/base/debitCard/list` })
+              }
+            })
+          })
+          }
+        })
+      }
+  </script>
+  
+  <style lang="scss" scoped>
+  .section {
+    margin: 24rpx;
+    padding: 0;
+    background-color: #fff;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+  
+    .section-title {
+      padding: 16rpx 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: #ffffff;
+      line-height: 1.2;
+      font-size: 28rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      
+      &::before {
+        content: '';
+        width: 6rpx;
+        height: 28rpx;
+        background: #ffffff;
+        border-radius: 3rpx;
+        margin-right: 12rpx;
+      }
+    }
+  
+    .form-view {
+      padding: 24rpx;
+  
+      .form-btn {
+        padding-top: 16rpx;
+      }
+    }
+  }
+  </style>
+  
+  <style lang="scss">
+  .form-btn .u-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    border-radius: 24rpx !important;
+    height: 80rpx !important;
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+  }
+  
+  .form-btn .u-button__text {
+    font-size: 30rpx !important;
+    font-weight: 500 !important;
+    letter-spacing: 2rpx !important;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/pages/invest/debitCard/adjustLimit.vue b/src/pages/invest/debitCard/adjustLimit.vue
new file mode 100644
index 0000000..227fea9
--- /dev/null
+++ b/src/pages/invest/debitCard/adjustLimit.vue
@@ -0,0 +1,470 @@
+<template>
+  <view class="container" style="paddingBottom:1rpx;">
+    <u-navbar
+      leftIconSize="40rpx"
+      leftIconColor="#333333"
+      title="储蓄卡非柜调额"
+    >
+    </u-navbar>
+    <view class="section">
+      <view class="section-title">{{ title }}</view>
+      <view class="form-view">
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+          
+          <u-form-item label="调整前额度" prop="beforeLimit">
+            <u--input v-model="form.beforeLimit" disabled disabledColor="#ffffff" placeholder="调整前额度"
+              inputAlign="right" border="none">
+              <template #suffix>
+                <text style="color: #909399; font-size: 28rpx;">元</text>
+              </template>
+            </u--input>
+          </u-form-item>
+            <u-form-item label="调整类型" prop="adjustTypeName" required @click="handleShowAdjustType">
+            <u--input v-model="form.adjustTypeName" disabled disabledColor="#ffffff" placeholder="请选择调整类型"
+              inputAlign="right" border="none"></u--input>
+            <u-icon slot="right" name="arrow-down"></u-icon>
+          </u-form-item>
+                    <u-form-item label="调整后额度" prop="afterLimit" required>
+            <u--input v-model="form.afterLimit" type="number" placeholder="请输入调整后额度"
+              inputAlign="right" border="none">
+              <template #suffix>
+                <text style="color: #909399; font-size: 28rpx;">元</text>
+              </template>
+            </u--input>
+          </u-form-item>
+            <u-form-item label="调整额度" prop="adjustLimit">
+            <u--input v-model="adjustLimitDisplay" disabled disabledColor="#ffffff" placeholder="自动计算"
+              inputAlign="right" border="none" :style="{ color: adjustLimitColor }">
+              <template #suffix>
+                <text style="color: #909399; font-size: 28rpx;">元</text>
+              </template>
+            </u--input>
+          </u-form-item>
+
+
+          <u-form-item label="生效日期" prop="effectDate" required @click="selectEffectDate">
+            <u--input v-model="form.effectDate" disabled disabledColor="#ffffff" placeholder="请选择生效日期" 
+              inputAlign="right" border="none"></u--input>
+            <u-icon slot="right" name="arrow-right"></u-icon>
+          </u-form-item>
+          
+          <u-form-item label="截止日期" prop="deadlineDate" @click="selectDeadlineDate">
+            <u--input v-model="form.deadlineDate" disabled disabledColor="#ffffff" placeholder="请选择截止日期（可选）" 
+              inputAlign="right" border="none"></u--input>
+            <u-icon slot="right" name="arrow-right"></u-icon>
+          </u-form-item>
+          
+          <u-form-item label="调整时间" prop="adjustTime" required @click="selectAdjustTime">
+            <u--input v-model="form.adjustTime" disabled disabledColor="#ffffff" placeholder="请选择调整时间" 
+              inputAlign="right" border="none"></u--input>
+            <u-icon slot="right" name="arrow-right"></u-icon>
+          </u-form-item>
+          
+          <u-form-item label="备注" prop="remark" labelPosition="top">
+            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
+              maxlength="500" style="padding:18rpx 0;"></u--textarea>
+          </u-form-item>
+        </u--form>
+        <view class="form-btn">
+          <u-button type="primary" text="提交" @click="submit"></u-button>
+        </view>
+      </view>
+    </view>
+    
+    <u-toast ref="uToast"></u-toast>
+    
+    <!-- 调整类型选择器 -->
+    <u-picker itemHeight="88" :show="showAdjustType" :columns="adjustTypeList" keyName="dictLabel" 
+      @cancel="handleAdjustTypeCancel" @confirm="handleAdjustTypeConfirm"></u-picker>
+    
+    <!-- 生效日期选择器 -->
+    <u-datetime-picker
+      :show="effectDatePickShow"
+      mode="date"
+      :minDate="-2209017600000"
+      ref="effectDateRef" 
+      @cancel="effectDatePickShow=false"
+      @confirm="effectDateConfirm"
+      itemHeight="88"
+    ></u-datetime-picker>
+    
+    <!-- 截止日期选择器 -->
+    <u-datetime-picker
+      :show="deadlineDatePickShow"
+      mode="date"
+      :minDate="-2209017600000"
+      ref="deadlineDateRef" 
+      @cancel="deadlineDatePickShow=false"
+      @confirm="deadlineDateConfirm"
+      itemHeight="88"
+    ></u-datetime-picker>
+    
+    <!-- 调整时间选择器 -->
+    <u-datetime-picker
+      :show="adjustTimePickShow"
+      mode="datetime"
+      :minDate="-2209017600000"
+      ref="adjustTimeRef" 
+      @cancel="adjustTimePickShow=false"
+      @confirm="adjustTimeConfirm"
+      itemHeight="88"
+    ></u-datetime-picker>
+  </view>
+</template>
+
+<script setup>
+import { getBankcardLend } from '@/api/invest/bankcardlend'
+import { addLimitHistory, updateLimitHistory, getLimitHistory, listLimitHistory } from '@/api/invest/limitHistory'
+import { getDicts } from '@/api/system/dict/data.js'
+import { getCurrentInstance } from 'vue'
+import { onLoad, onReady } from '@dcloudio/uni-app'
+import { reactive, toRefs, ref, computed, watch } from 'vue'
+import dayjs from 'dayjs'
+
+const { proxy } = getCurrentInstance()
+
+const title = ref('储蓄卡非柜调额')
+const showAdjustType = ref(false)
+const effectDatePickShow = ref(false)
+const deadlineDatePickShow = ref(false)
+const adjustTimePickShow = ref(false)
+const adjustTypeList = ref([])
+
+const data = reactive({
+  form: {
+    id: null,
+    name: '',
+    cardNumber: '',
+    type: '1', // 储蓄卡类型
+    bankCardLendId: null,
+    beforeLimit: '',
+    afterLimit: '',
+    adjustLimit: 0,
+    adjustType: '',
+    adjustTypeName: '',
+    effectDate: '',
+    deadlineDate: '',
+    adjustTime: '',
+    remark: ''
+  },
+  rules: {
+    afterLimit: [
+      { type: 'number', required: true, message: '调整后额度不能为空', trigger: ['change', 'blur'] }
+    ],
+    adjustTypeName: [
+      { type: 'string', required: true, message: '调整类型不能为空', trigger: ['change', 'blur'] }
+    ],
+    effectDate: [
+      { type: 'string', required: true, message: '生效日期不能为空', trigger: ['change', 'blur'] }
+    ],
+    adjustTime: [
+      { type: 'string', required: true, message: '调整时间不能为空', trigger: ['change', 'blur'] }
+    ]
+  }
+})
+
+const { form, rules } = toRefs(data)
+
+// 计算调整额度
+const adjustLimitDisplay = computed(() => {
+  const before = parseFloat(form.value.beforeLimit) || 0
+  const after = parseFloat(form.value.afterLimit) || 0
+  const adjust = after - before
+  form.value.adjustLimit = adjust
+  return adjust > 0 ? `+${adjust}` : `${adjust}`
+})
+
+// 调整额度颜色
+const adjustLimitColor = computed(() => {
+  const adjust = form.value.adjustLimit
+  if (adjust > 0) return '#52c41a'
+  if (adjust < 0) return '#ff4d4f'
+  return '#909399'
+})
+
+onLoad((option) => {
+  form.value.id = option.id || null
+  form.value.bankCardLendId = option.bankCardLendId
+  form.value.name = option.name
+  
+  if (form.value.id) {
+    title.value = '储蓄卡非柜调额记录-修改'
+  } else {
+    title.value = '储蓄卡非柜调额记录-新增'
+  }
+  
+  getDict()
+  
+  if (form.value.id) {
+    // 编辑模式：加载已有记录
+    getLimitHistoryInfo()
+  } else {
+    // 新增模式：获取当前额度
+    getCardInfo()
+  }
+})
+
+onReady(() => {
+  // 默认调整时间为当前时间
+  form.value.adjustTime = dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
+  // 默认生效日期为当前日期
+  form.value.effectDate = dayjs(new Date().getTime()).format('YYYY-MM-DD')
+})
+
+function getDict() {
+  // 调整类型
+  getDicts('adjust_type').then(res => {
+    adjustTypeList.value = [res.data]
+    // 如果是新增模式，默认选中"调额"
+    if (!form.value.id && res.data && res.data.length > 0) {
+      const defaultItem = res.data.find(item => item.dictLabel === '调额')
+      if (defaultItem) {
+        form.value.adjustType = defaultItem.dictValue
+        form.value.adjustTypeName = defaultItem.dictLabel
+      }
+    }
+  })
+}
+
+function getLimitHistoryInfo() {
+  getLimitHistory(form.value.id).then(res => {
+    form.value = { ...form.value, ...res.data }
+    // 获取字典显示名称
+    getDicts('adjust_type').then(result => {
+      form.value.adjustTypeName = dictStr(form.value.adjustType, result.data)
+    })
+  })
+}
+
+function getCardInfo() {
+  // 先获取该储蓄卡的最新一条调额记录
+  listLimitHistory({ 
+    pageSize: 1, 
+    pageNum: 1, 
+    bankCardLendId: form.value.bankCardLendId 
+  }).then(res => {
+    if (res.rows && res.rows.length > 0) {
+      // 如果有调额记录，使用最新记录的调整后额度作为调整前额度
+      const afterLimit = res.rows[0].afterLimit || 0
+      form.value.beforeLimit = afterLimit
+      // 默认调整后额度与调整前一致
+      form.value.afterLimit = afterLimit
+    } else {
+      // 如果没有调额记录，使用储蓄卡的当前额度
+      getBankcardLend(form.value.bankCardLendId).then(cardRes => {
+        const limit = cardRes.data.limit || 0
+        form.value.beforeLimit = limit
+        // 默认调整后额度与调整前一致
+        form.value.afterLimit = limit
+      })
+    }
+  }).catch(() => {
+    // 查询失败时，使用储蓄卡的当前额度
+    getBankcardLend(form.value.bankCardLendId).then(cardRes => {
+      const limit = cardRes.data.limit || 0
+      form.value.beforeLimit = limit
+      // 默认调整后额度与调整前一致
+      form.value.afterLimit = limit
+    })
+  })
+  
+  // 获取储蓄卡账号
+  getBankcardLend(form.value.bankCardLendId).then(res => {
+    form.value.cardNumber = res.data.cardNumber || ''
+  })
+}
+
+function dictStr(val, arr) {
+  let str = ''
+  arr.map(item => {
+    if (item.dictValue === val) {
+      str = item.dictLabel
+    }
+  })
+  return str
+}
+
+// 调整类型选择
+function handleShowAdjustType() {
+  if (adjustTypeList.value[0].length === 0) {
+    proxy.$refs['uToast'].show({
+      message: '调整类型为空', 
+      type: 'warning'
+    })
+  } else {
+    showAdjustType.value = true
+  }
+}
+
+function handleAdjustTypeConfirm(e) {
+  form.value.adjustTypeName = e.value[0].dictLabel
+  form.value.adjustType = e.value[0].dictValue
+  showAdjustType.value = false
+}
+
+function handleAdjustTypeCancel() {
+  showAdjustType.value = false
+}
+
+// 生效日期选择
+function selectEffectDate() {
+  effectDatePickShow.value = true
+  proxy.$refs['effectDateRef'].innerValue = form.value.effectDate 
+    ? new Date(form.value.effectDate).getTime() 
+    : new Date().getTime()
+}
+
+function effectDateConfirm(e) {
+  form.value.effectDate = dayjs(e.value).format('YYYY-MM-DD')
+  effectDatePickShow.value = false
+}
+
+// 截止日期选择
+function selectDeadlineDate() {
+  deadlineDatePickShow.value = true
+  proxy.$refs['deadlineDateRef'].innerValue = form.value.deadlineDate 
+    ? new Date(form.value.deadlineDate).getTime() 
+    : new Date().getTime()
+}
+
+function deadlineDateConfirm(e) {
+  form.value.deadlineDate = dayjs(e.value).format('YYYY-MM-DD')
+  deadlineDatePickShow.value = false
+}
+
+// 调整时间选择
+function selectAdjustTime() {
+  adjustTimePickShow.value = true
+  proxy.$refs['adjustTimeRef'].innerValue = form.value.adjustTime 
+    ? new Date(form.value.adjustTime).getTime() 
+    : new Date().getTime()
+}
+
+function adjustTimeConfirm(e) {
+  form.value.adjustTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
+  adjustTimePickShow.value = false
+}
+
+// 提交
+function submit() {
+  proxy.$refs['uForm'].validate().then(() => {
+    const submitData = { ...form.value }
+    
+    if (form.value.id) {
+      // 修改
+      updateLimitHistory(submitData).then(res => {
+        proxy.$refs['uToast'].show({
+          message: '修改成功',
+          complete() {
+            setTimeout(() => {
+              uni.navigateBack()
+            }, 1500)
+          }
+        })
+      })
+    } else {
+      // 新增
+      addLimitHistory(submitData).then(res => {
+        proxy.$refs['uToast'].show({
+          message: '调额成功',
+          complete() {
+            setTimeout(() => {
+              uni.navigateBack()
+            }, 1500)
+          }
+        })
+      })
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.section {
+  margin: 24rpx;
+  padding: 0;
+  background-color: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+
+  .section-title {
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+  }
+
+  .form-view {
+    padding: 24rpx;
+
+    .form-btn {
+      padding-top: 16rpx;
+    }
+  }
+  
+  .card-info {
+    padding: 24rpx;
+    border-bottom: 2rpx solid #f5f7fa;
+    
+    .card-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12rpx 0;
+      
+      &:not(:last-child) {
+        margin-bottom: 8rpx;
+      }
+      
+      .card-label {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 500;
+        background: rgba(102, 126, 234, 0.08);
+        padding: 6rpx 16rpx;
+        border-radius: 8rpx;
+      }
+      
+      .card-value {
+        color: #333333;
+        font-size: 28rpx;
+        font-weight: 600;
+        flex: 1;
+        text-align: right;
+        margin-left: 16rpx;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
+</style>
diff --git a/src/pages/invest/debitCard/details.vue b/src/pages/invest/debitCard/details.vue
new file mode 100644
index 0000000..a53c00c
--- /dev/null
+++ b/src/pages/invest/debitCard/details.vue
@@ -0,0 +1,308 @@
+<template>
+    <view class="container">
+      <u-navbar
+			leftIconSize="40rpx"
+			leftIconColor="#333333"
+			title="储蓄账户详情"
+		>
+		</u-navbar>
+      
+      <view class="detail-card">
+        <view class="card-header">
+          <view class="header-icon">
+            <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.name }}<text class="card-code">({{ detailInfo.code }})</text></text>
+          </view>
+        </view>
+        
+        <view class="card-body">
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>账户信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">余额</text>
+                <text class="item-value orange">{{ detailInfo.balance }}元</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">账户类型</text>
+                <text class="item-value">{{ detailInfo.debitType }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">账户状态</text>
+                <text class="item-value" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">{{ detailInfo.statusText }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>开户信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">开户行</text>
+                <text class="item-value">{{ detailInfo.openingBank || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">开户日期</text>
+                <text class="item-value">{{ detailInfo.activationDate }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">有效期</text>
+                <text class="item-value">{{ detailInfo.effectiveDate }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <u-toast ref="uToast"></u-toast>
+    </view>
+  </template>
+  
+<script setup>
+import { getBankcardLend} from '@/api/invest/bankcardlend'
+import { getDicts } from '@/api/system/dict/data.js'
+import {onLoad} from "@dcloudio/uni-app";
+import {reactive ,toRefs,ref,computed }from "vue";
+const id = ref('')
+const data = reactive({
+  detailInfo: {} 
+})
+const {detailInfo} = toRefs(data)
+
+function getStatusClass(status, statusText) {
+  // 优先根据状态文字判断
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  
+  // 备用：根据状态值判断
+  const statusStr = String(status)
+  if (statusStr === '2') {
+    return 'status-normal'
+  }
+  if (statusStr === '0' || statusStr === '3' || statusStr === '4') {
+    return 'status-error'
+  }
+  
+  return 'status-default'
+}
+
+onLoad((option) => {
+    id.value = option.id
+    getInfo()
+  })
+  function getInfo() {
+    getBankcardLend(id.value).then(res => {
+          detailInfo.value = res.data
+          detailInfo.value.statusText = res.data.status
+                     // 类型
+            getDicts('debit_type').then(result => {
+         detailInfo.value.debitType=dictStr(detailInfo.value.debitType, result.data)
+      })
+                // 类型
+          getDicts('account_status').then(result => {
+         detailInfo.value.statusText=dictStr(detailInfo.value.status, result.data)
+      })
+        })
+  }
+  function dictStr(val, arr) {
+      let str = ''
+      arr.map(item => {
+        if (item.dictValue === val) {
+          str = item.dictLabel
+        }
+      })
+      return str
+    }
+  </script>
+  
+  <style lang="scss" scoped>
+.container {
+  background: #f5f7fa;
+  padding-bottom: 24rpx;
+}
+
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  
+  .header-icon {
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    
+    .card-name {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 28rpx;
+        font-weight: 400;
+        margin-left: 8rpx;
+      }
+    }
+  }
+  
+  .status-badge {
+    padding: 12rpx 28rpx;
+    border-radius: 24rpx;
+    font-size: 26rpx;
+    font-weight: 600;
+    
+    &.status-default {
+      background: #f0f0f0;
+      color: #666666;
+    }
+    
+    &.status-normal {
+      background: #fa8c16;
+      color: #ffffff;
+      box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
+    }
+    
+    &.status-error {
+      background: #ff4d4f;
+      color: #ffffff;
+      box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+    }
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
+  .info-list {
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+        
+        &.orange {
+          color: #fa8c16;
+        }
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
+        }
+      }
+    }
+  }
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
+      font-size: 26rpx;
+      line-height: 1.6;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/invest/debitCard/limitHistory.vue b/src/pages/invest/debitCard/limitHistory.vue
new file mode 100644
index 0000000..e173ecc
--- /dev/null
+++ b/src/pages/invest/debitCard/limitHistory.vue
@@ -0,0 +1,486 @@
+<template>
+  <view class="container">
+    <u-navbar
+      leftIconSize="40rpx"
+      leftIconColor="#333333"
+      :title="pageTitle"
+    >
+    </u-navbar>
+    
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="header-view">
+        <view class="card-info-header">
+          <view class="info-item">
+            <text class="info-label">卡名称：</text>
+            <text class="info-value">{{ cardInfo.name || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">卡账号：</text>
+            <text class="info-value">{{ cardInfo.code || '--' }}</text>
+          </view>
+        </view>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+          <text>新增调额</text>
+        </view>
+      </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" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-left">
+              <view class="adjust-icon" :class="item.adjustLimit > 0 ? 'icon-up' : 'icon-down'">
+                <uni-icons :type="item.adjustLimit > 0 ? 'arrow-up' : 'arrow-down'" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="header-info">
+                <text class="adjust-type">{{ item.adjustTypeName || dictStr(item.adjustType, adjustTypeList) }}</text>
+              </view>
+            </view>
+            <view class="header-center">
+              <text class="adjust-time">{{ formatDate(item.adjustTime) }}</text>
+            </view>
+            <view class="adjust-amount" :class="item.adjustLimit > 0 ? 'amount-up' : 'amount-down'">
+              <text>{{ item.adjustLimit > 0 ? '+' : '' }}{{ item.adjustLimit }}元</text>
+            </view>
+          </view>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">调整前额度</text>
+                <text class="info-value">{{ item.beforeLimit }}元</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">调整后额度</text>
+                <text class="info-value orange">{{ item.afterLimit }}元</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">生效日期</text>
+                <text class="info-value">{{ item.effectDate || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="item.deadlineDate">
+                <text class="info-label">截止日期</text>
+                <text class="info-value">{{ item.deadlineDate }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
+          </view>
+        </view>
+      </u-list-item>
+      <view>
+      </view>
+      <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
+    </u-list>
+  </view>
+  <!-- 悬停按钮-->
+  <suspend></suspend>
+  <refresh></refresh>
+</template>
+
+<script setup>
+import { listLimitHistory, delLimitHistory } from '@/api/invest/limitHistory'
+import { getBankcardLend } from '@/api/invest/bankcardlend'
+import { getDicts } from '@/api/system/dict/data.js'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { reactive, toRefs, ref, computed } from 'vue'
+
+const pageNum = ref(1)
+const listData = ref([])
+const isShow = ref(false)
+const status = ref('loadmore')
+const adjustTypeList = ref([])
+const bankCardLendId = ref('')
+const cardName = ref('')
+const cardInfo = ref({
+  name: '',
+  cardNumber: ''
+})
+
+const pageTitle = computed(() => {
+  return cardName.value ? `${cardName.value} - 调额记录` : '调额记录'
+})
+
+const data = reactive({
+  queryParams: {
+    bankCardLendId: ''
+  }
+})
+
+const { queryParams } = toRefs(data)
+
+onLoad((option) => {
+  bankCardLendId.value = option.bankCardLendId
+  cardName.value = option.name || ''
+  queryParams.value.bankCardLendId = option.bankCardLendId
+  getDict()
+  getCardInfo()
+  getList()
+})
+
+onShow(() => {
+  if (isShow.value) {
+    listData.value = []
+    pageNum.value = 1
+    getList()
+    isShow.value = false
+  }
+})
+
+function loadmore() {
+  pageNum.value += 1
+  if (status.value == 'loadmore') {
+    getList()
+  }
+}
+
+function getList() {
+  status.value = 'loading'
+  listLimitHistory({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
+    listData.value = listData.value.concat(res.rows)
+    if (listData.value.length < res.total) {
+      status.value = 'loadmore'
+    } else {
+      status.value = 'nomore'
+    }
+  }).catch(() => {
+    status.value = 'nomore'
+  })
+}
+
+function getDict() {
+  // 调整类型
+  getDicts('adjust_type').then(res => {
+    adjustTypeList.value = res.data
+  })
+}
+
+function getCardInfo() {
+  getBankcardLend(bankCardLendId.value).then(res => {
+    cardInfo.value.name = res.data.name || ''
+    cardInfo.value.code = res.data.code || ''
+  })
+}
+
+function dictStr(val, arr) {
+  let str = ''
+  arr.map(item => {
+    if (item.dictValue === val) {
+      str = item.dictLabel
+    }
+  })
+  return str
+}
+
+function formatDate(dateTime) {
+  if (!dateTime) return '--'
+  // 只取日期部分 YYYY-MM-DD
+  return dateTime.split(' ')[0]
+}
+
+function enterDetails(item) {
+  // 可以添加详情页面
+  handleEdit(item)
+}
+
+function handleEdit(item) {
+  uni.navigateTo({ 
+    url: `/pages/work/base/debitCard/adjustLimit?id=${item.id}&bankCardLendId=${bankCardLendId.value}&name=${cardName.value}` 
+  })
+  isShow.value = true
+}
+
+function handleAdd() {
+  uni.navigateTo({ 
+    url: `/pages/work/base/debitCard/adjustLimit?bankCardLendId=${bankCardLendId.value}&name=${cardName.value}` 
+  })
+  isShow.value = true
+}
+
+function handleDelete(item) {
+  uni.showModal({
+    title: '确认删除',
+    content: '确定要删除这条调额记录吗？',
+    confirmText: '删除',
+    cancelText: '取消',
+    confirmColor: '#f5576c',
+    cancelColor: '#909399',
+    success: function (res) {
+      if (res.confirm) {
+        delLimitHistory(item.id).then(() => {
+          uni.showToast({
+            title: '删除成功',
+            icon: 'success'
+          })
+          pageNum.value = 1
+          listData.value = []
+          getList()
+        })
+      }
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
+.container {
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
+.header-view {
+  padding: 12rpx 32rpx;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  gap: 24rpx;
+  
+  .card-info-header {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    
+    .info-item {
+      display: flex;
+      align-items: center;
+      
+      .info-label {
+        color: #667eea;
+        font-size: 26rpx;
+        font-weight: 500;
+        flex-shrink: 0;
+      }
+      
+      .info-value {
+        color: #333333;
+        font-size: 26rpx;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .add-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;
+    }
+  }
+}
+
+.list-item {
+  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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
+
+  .item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    gap: 16rpx;
+    
+    .header-left {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      
+      .adjust-icon {
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 12rpx;
+        flex-shrink: 0;
+        
+        &.icon-up {
+          background: rgba(82, 196, 26, 0.3);
+        }
+        
+        &.icon-down {
+          background: rgba(255, 77, 79, 0.3);
+        }
+      }
+      
+      .header-info {
+        display: flex;
+        align-items: center;
+        
+        .adjust-type {
+          color: #ffffff;
+          font-size: 28rpx;
+          font-weight: 600;
+          line-height: 1.2;
+          white-space: nowrap;
+        }
+      }
+    }
+    
+    .header-center {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      
+      .adjust-time {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 30rpx;
+        line-height: 1;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+    }
+    
+    .adjust-amount {
+      font-size: 32rpx;
+      font-weight: 700;
+      flex-shrink: 0;
+      
+      &.amount-up {
+        color: #52c41a;
+      }
+      
+      &.amount-down {
+        color: #ff4d4f;
+      }
+    }
+  }
+
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      
+      &.info-item-full {
+        flex: 0 0 100%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        line-height: 1.5;
+        word-break: break-all;
+        
+        &.orange {
+          color: #fa8c16;
+          font-weight: 600;
+        }
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .operate {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
+
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
+    }
+  }
+}
+</style>
diff --git a/src/pages/invest/debitCard/list.vue b/src/pages/invest/debitCard/list.vue
new file mode 100644
index 0000000..f414792
--- /dev/null
+++ b/src/pages/invest/debitCard/list.vue
@@ -0,0 +1,688 @@
+<template>
+  <view class="container">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-view">
+        <u--input v-model="queryParams.name" border="false" placeholder="请输入账户名称" class="search-input"
+          @blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plusempty" 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="filter-title">储蓄账户类型</view>
+              <view class="state-list">
+                <view v-for="item in debitTypeList" :key="item.id" class="state-item"
+                  :class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
+              </view>
+            </view>
+            <view class="btn-box">
+              <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>
+          </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" @click="enterDetails(item)">
+          <view class="item-header">
+            <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>
+                <text class="card-code" v-if="item.code">{{ item.code }}</text>
+              </view>
+            </view>
+            <view class="balance-section">
+              <text class="balance-value"><text class="balance-label">余额</text>{{ item.balance }}元</text>
+            </view>
+          </view>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item" v-if="dictStr(item.debitType, debitTypeList) || true">
+                <text class="info-label">账户类型</text>
+                <text class="info-value">{{ dictStr(item.debitType, debitTypeList) || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="dictStr(item.status, statusList) || true">
+                <text class="info-label">账户状态</text>
+                <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="item.activationDate || true">
+                <text class="info-label">开户日期</text>
+                <text class="info-value">{{ item.activationDate || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="item.effectiveDate || true">
+                <text class="info-label">有效期</text>
+                <text class="info-value">{{ item.effectiveDate || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.openingBank || true">
+                <text class="info-label">开户行</text>
+                <text class="info-value">{{ item.openingBank || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="operate" @click.stop>
+              <view class="btn-limit" @click="handleLimitHistory(item)">
+              <uni-icons type="list" size="16" color="#fa8c16"></uni-icons>
+              <text>调额记录</text>
+            </view>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
+          </view>
+        </view>
+      </u-list-item>
+      <view>
+      </view>
+      <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
+    </u-list>
+    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
+      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
+  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
+  <refresh></refresh>
+</template>
+
+<script setup>
+import { listBankcardLend,delBankcardLend} from '@/api/invest/bankcardlend'
+import { getDicts } from '@/api/system/dict/data.js'
+import {onLoad,onShow} from "@dcloudio/uni-app";
+    // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
+import {reactive ,toRefs,ref,computed }from "vue";
+const pageNum = ref(1)
+const listData = ref([])
+const isShow = ref(false)
+const status = ref('loadmore')
+const debitTypeList = ref([])
+const statusList = ref([])
+const settingPickShow = ref(false)
+const settingColumns = ref([])
+const data = reactive({
+  filterPanel: false,
+  queryParams: {
+    name: null,
+    type: '1',
+    debitType: ''
+   } 
+})
+const { filterPanel, queryParams} = toRefs(data)
+const windowHeight = computed(() => {
+			uni.getSystemInfoSync().windowHeight - 50
+		})	
+onLoad(() => {
+    getDict()
+    getList()
+  });
+
+ onShow(() => {
+    if (isShow.value) {
+      listData.value=[]
+      getList()
+      isShow.value = false
+    }
+  });
+
+function loadmore() {
+      pageNum.value += 1
+      if (status.value == 'loadmore') {
+        getList()
+      }
+    }
+function getList() {
+      status.value = 'loading'
+      listBankcardLend({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
+        listData.value = listData.value.concat(res.rows)
+        if (listData.value.length < res.total) {
+          status.value = 'loadmore'
+        } else {
+          status.value = 'nomore'
+        }
+      }).catch(() => {
+        status.value = 'nomore'
+      })
+    }
+function   getDict() {
+      // 类型
+      getDicts('debit_type').then(res => {
+        debitTypeList.value = res.data
+      })
+       // 账户状态
+       getDicts('account_status').then(res => {
+        statusList.value = res.data
+      })
+    }
+function settingConfirm(e) {
+      queryParams.value.settingId = e.value[0].settingId
+      queryParams.value.settingName = e.value[0].settingName
+      settingPickShow.value = false
+    }
+function settingCancel() {
+      settingPickShow.value = false
+    }
+function getStatusClass(status, statusText) {
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  return 'status-default'
+}
+
+function dictStr(val, arr) {
+      let str = ''
+      arr.map(item => {
+        if (item.dictValue === val) {
+          str = item.dictLabel
+        }
+      })
+      return str
+    }
+
+function formatCardCode(code) {
+  if (!code) return ''
+  // 去除所有空格和特殊字符
+  const cleanCode = code.replace(/\s+/g, '')
+  // 如果卡号长度小于等于4位，直接返回
+  if (cleanCode.length <= 4) return code
+  // 只显示后4位，前面用 XX 替代
+  const suffix = cleanCode.substring(cleanCode.length - 4)
+  return `${suffix}`
+}
+function selectStatus(item) {
+      queryParams.value.debitType = item.dictValue
+      debitTypeList.value.map(ele => {
+        if (ele.dictValue == item.dictValue) {
+          ele.selected = true
+          Reflect.set(ele, 'selected', true)
+        } else {
+          Reflect.set(ele, 'selected', false)
+        }
+      })
+    }
+    function searchSubmit() {
+      pageNum.value = 1
+      listData.value = []
+      getList()
+      filterPanel.value = false
+    }
+    function searchBlur() {
+      pageNum.value = 1
+      listData.value = []
+      getList()
+    }
+    function resetQuery() {
+        queryParams.value.name = '',
+        queryParams.value.debitType = '',
+        queryParams.value.type = '1'
+      debitTypeList.value.map(ele => {
+        Reflect.set(ele, 'selected', false)
+      })
+    }
+    function enterDetails(item) {
+      uni.navigateTo({ url: `/pages/work/base/debitCard/details?id=${item.id}` })
+    }
+    function handleEdit(item) {
+      uni.navigateTo({ url: `/pages/work/base/debitCard/addEdit?id=${item.id}` })
+      isShow.value = true
+    }
+    function handleAdd() {
+      uni.navigateTo({ url: `/pages/work/base/debitCard/addEdit` })
+      isShow.value = true
+    }
+    function handleLimitHistory(item) {
+      uni.navigateTo({ url: `/pages/work/base/debitCard/limitHistory?bankCardLendId=${item.id}&name=${item.name}` })
+      isShow.value = true
+    }
+    function handleDelete(item) {
+      uni.showModal({
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delBankcardLend(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
+    }
+	
+</script>
+
+<style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
+
+.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: rgba(102, 126, 234, 0.08);
+    color: #333333;
+    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;
+    }
+  }
+  
+  .add-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;
+    margin-left: 10rpx;
+    
+    &: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 {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 96rpx;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+
+    .filter-panel-content {
+      background-color: #ffffff;
+      padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
+
+      .filter-title {
+        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 {
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
+          text-align: center;
+          line-height: 68rpx;
+          font-size: 28rpx;
+          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: 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: 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;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
+
+  .item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    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;
+      }
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 22rpx;
+        font-weight: 400;
+        line-height: 1;
+      }
+    }
+    
+    .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;
+        }
+      }
+    }
+  }
+
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
+
+    .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%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
+        }
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .operate {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
+
+    .btn-edit,
+    .btn-limit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
+    }
+    
+    .btn-limit {
+      background: rgba(250, 140, 22, 0.1);
+      color: #fa8c16;
+      border: 1rpx solid rgba(250, 140, 22, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/invest/shouye/index.vue b/src/pages/invest/shouye/index.vue
new file mode 100644
index 0000000..cbedfdf
--- /dev/null
+++ b/src/pages/invest/shouye/index.vue
@@ -0,0 +1,1238 @@
+<template>
+  <view class="content">
+    <view class="text-area">
+      <text class="title"></text>
+    </view>
+    <div class="app-container">
+    <div class="header-title" ref="searchHeightRef">
+      <!-- <view class="title-line"></view> -->
+      <text class="title-text">资产总览</text>
+    </div>
+    <div class="header-con" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #2d8f3c 0%, #1b5e20 100%);">
+          <uni-icons type="medal-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">净资产</div>
+          <div class="num">{{ ((parseFloat(debitTotalBalance)+parseFloat(investBalance)-parseFloat(unClearedOnlineDebt)-parseFloat(creditBalance)- parseFloat(peopleLendHistory)).toFixed(2) * 1).toFixed(2) }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="minus-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">总负债</div>
+          <div class="num">{{ ((parseFloat(unClearedOnlineDebt)+ parseFloat(creditBalance)+ parseFloat(peopleLendHistory)).toFixed(2) * 1).toFixed(2)}}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
+          <uni-icons type="contact-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">人情欠款</div>
+          <div class="num">{{ (parseFloat(peopleLendHistory) || 0) === 0 ? '0.00' : peopleLendHistory }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="calendar" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">未结清贷款本息</div>
+          <div class="num">{{ unClearedOnlineDebt }}<span>元</span></div>
+        </div>
+      </div>
+    </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, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">信用卡已用额度</div>
+          <div class="num">{{ creditBalance}}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
+          <uni-icons type="loop" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">未结清分期本息</div>
+          <div class="num">{{ unclearedCreditInstallment }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+
+<div class="header-con" v-show="auth.hasPermi('invest:debitCard')"  ref="searchHeightRef">
+  <div class="item">
+    <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
+      <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+    </view>
+    <div class="info-sum">
+      <div class="title">储蓄卡余额</div>
+      <div class="num">{{ debitBalance }}<span>元</span></div>
+    </div>
+  </div>
+  <div class="item">
+    <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
+      <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+    </view>
+    <div class="info-sum">
+      <div class="title">储蓄账户余额</div>
+      <div class="num">{{ debitTotalBalance }}<span>元</span></div>
+    </div>
+  </div>
+</div>
+    <div class="header-con" v-show="auth.hasPermi('invest:creditCard','invest:creditQueryRecord:list')"  ref="searchHeightRef">
+      <div class="item" v-show="auth.hasPermi('invest:creditCard')">
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
+          <uni-icons type="plusempty" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">信用卡可用额度</div>
+          <div class="num">{{ creditAvailableLimit }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近6月硬查询</div>
+          <div class="num">{{ lastSixMonths }}<span>次</span></div>
+        </div>
+      </div>
+    </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, #667eea 0%, #5b6cdb 100%);">
+      <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+    </view>
+    <div class="info-sum">
+      <div class="title">投资账户余额</div>
+      <div class="num">{{ investBalance }}<span>元</span></div>
+    </div>
+  </div>
+  <div class="item">
+    <view class="item-icon" style="background: linear-gradient(135deg, #f59a23 0%, #f57c00 100%);">
+      <uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
+    </view>
+    <div class="info-sum">
+      <div class="title">本月投资收益</div>
+      <div class="num">{{ currentMonthInvest }}<span>元</span></div>
+    </div>
+  </div>
+</div>
+    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')"  ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当月应还款</div>
+          <div class="num">{{ dueOnlineDebt }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
+          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当月待还款</div>
+          <div class="num">{{ leftOnlineDebt }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="header-title" v-show="auth.hasPermi('invest:debitCard')" ref="searchHeightRef">
+      <view class="title-line"></view>
+      <text class="title-text">储蓄账户信息</text>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:debitCard')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="vip-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">I类储蓄卡</div>
+          <div class="num">{{ debitICount }}<span>张</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #89c4f4 0%, #4facfe 100%);">
+          <uni-icons type="vip" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">II类储蓄卡</div>
+          <div class="num">{{ debitIICount }}<span>张</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:debitCard')" ref="searchHeightRef">
+     <div class="item">
+       <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
+         <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
+       </view>
+       <div class="info-sum">
+         <div class="title">储蓄账户余额</div>
+         <div class="num">{{ debitTotalBalance }}<span>元</span></div>
+       </div>
+     </div>
+     <div class="item">
+       <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
+         <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+       </view>
+       <div class="info-sum">
+         <div class="title">储蓄卡余额</div>
+         <div class="num">{{ debitBalance }}<span>元</span></div>
+       </div>
+     </div>
+   </div>
+    <div class="header-con" v-show="(debitOnlineCount>0||storedValueCardCount>0)&&auth.hasPermi('invest:debitCard')"  ref="searchHeightRef">
+      <div class="item" v-show="debitOnlineCount>0&&auth.hasPermi('invest:debitCard')">
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
+          <uni-icons type="paperplane" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">网络账户</div>
+          <div class="num">{{ debitOnlineCount }}<span>个</span></div>
+        </div>
+      </div>
+      <div class="item" v-show="debitOnlineCount>0&&auth.hasPermi('invest:debitCard')">
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">网络账户余额</div>
+          <div class="num">{{ debitOnlineBalance }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="(storedValueCardCount>0||storedValueCardBalance>0)&&auth.hasPermi('invest:debitCard')"  ref="searchHeightRef">
+      <div class="item" v-show="storedValueCardCount>0&&auth.hasPermi('invest:debitCard')">
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
+          <uni-icons type="gift-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">储值卡</div>
+          <div class="num">{{ storedValueCardCount }}<span>张</span></div>
+        </div>
+      </div>
+      <div class="item" v-show="storedValueCardCount>0&&auth.hasPermi('invest:debitCard')">
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">储值卡余额</div>
+          <div class="num">{{ storedValueCardBalance }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="header-con" v-show="(medicalBalance>0||housingFundBalance>0)&&auth.hasPermi('invest:debitCard')"   ref="searchHeightRef">
+      <div class="item" v-show="housingFundBalance>0&&auth.hasPermi('invest:debitCard')">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">住房公积金余额</div>
+          <div class="num">{{ housingFundBalance }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item" v-show="medicalBalance>0&&auth.hasPermi('invest:debitCard')">
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">职工医保余额</div>
+          <div class="num">{{ medicalBalance }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="(personalPensionBalance>0)&&auth.hasPermi('invest:debitCard')"  ref="searchHeightRef">
+      <div class="item" v-show="personalPensionBalance>0&&auth.hasPermi('invest:debitCard')">
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
+          <uni-icons type="settings-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">个人养老金余额</div>
+          <div class="num">{{ personalPensionBalance }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="header-title" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
+      <view class="title-line"></view>
+      <text class="title-text">信用卡信息</text>
+    </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, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="auth-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">信用卡总数</div>
+          <div class="num">{{ creditCount }}<span>张</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
+          <uni-icons type="plusempty" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">总额度</div>
+          <div class="num">{{ creditLimit }}<span>元</span></div>
+        </div>
+      </div>
+    </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, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="minus-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已使用额度</div>
+          <div class="num">{{ creditBalance }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
+          <uni-icons type="plus-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">可用额度</div>
+          <div class="num">{{ creditAvailableLimit }}<span>元</span></div>
+        </div>
+      </div>
+    </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, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">信用卡使用率</div>
+          <div class="num">{{ creditBillRate }}<span>%</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当月账单</div>
+          <div class="num">{{ currentCreditBill }}<span>元</span></div>
+        </div>
+      </div>
+    </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%, #ec407a 100%);">
+          <uni-icons type="redo" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当月分期本息</div>
+          <div class="num">{{ creditInstallment }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">未结清分期</div>
+          <div class="num">{{ unclearedCreditInstallmentCount }}<span>笔</span></div>
+        </div>
+      </div>
+    </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, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">未结清分期本息</div>
+          <div class="num">{{ unclearedCreditInstallment }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">未结清分期本金</div>
+          <div class="num">{{ unclearedCreditInstallmentPrinciple }}<span>元</span></div>
+        </div>
+      </div>
+    </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, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">未结清分期利息</div>
+          <div class="num">{{ unclearedCreditInstallmentInterest }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #2d8f3c 0%, #1b5e20 100%);">
+          <uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已结清分期</div>
+          <div class="num">{{ clearedCreditInstallmentCount }}<span>笔</span></div>
+        </div>
+      </div>
+    </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, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已结清分期本息</div>
+          <div class="num">{{ clearedCreditInstallmentDebt }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已结清分期本金</div>
+          <div class="num">{{ clearedCreditInstallmentPrinciple }}<span>元</span></div>
+        </div>
+      </div>
+    </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, #5b6cdb 0%, #4527a0 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已结清分期利息</div>
+          <div class="num">{{ clearedCreditInstallmentInterest }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">上月账单使用率</div>
+          <div class="num">{{ lastMonthUsedRate }}<span>%</span></div>
+        </div>
+      </div>
+    </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%, #ec407a 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">上月账单</div>
+          <div class="num">{{ lastMonthUsedLimit }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近6月使用率</div>
+          <div class="num">{{ lastSixMonthUsedRate }}<span>%</span></div>
+        </div>
+      </div>
+    </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, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近6月平均使用额度</div>
+          <div class="num">{{ lastSixMonthUsedLimit }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="header-title" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
+      <view class="title-line"></view>
+      <text class="title-text">借贷账户信息</text>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">贷款账户</div>
+          <div class="num">{{ onlineLendCount }}<span>个</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">未结清贷款本息</div>
+          <div class="num">{{ unClearedOnlineDebt }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
+          <uni-icons type="contact-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">人情账户</div>
+          <div class="num">{{ peopleLendCount }}<span>人</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">人情欠款</div>
+          <div class="num">{{ (parseFloat(peopleLendHistory) || 0) === 0 ? '0.00' : peopleLendHistory }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当月应还款</div>
+          <div class="num">{{ dueOnlineDebt }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #2d8f3c 0%, #1b5e20 100%);">
+         <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当月已还款</div>
+          <div class="num">{{ repaidOnlineDebt }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
+          <uni-icons type="clock" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当月待还款</div>
+          <div class="num">{{ leftOnlineDebt }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">未结清贷款</div>
+          <div class="num">{{ unclearedOnlineDebtCount }}<span>笔</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">未结清贷款本金</div>
+          <div class="num">{{ unClearedOnlineDebtPrinciple }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">未结清贷款利息</div>
+          <div class="num">{{ unClearedOnlineDebtInterest }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #2d8f3c 0%, #1b5e20 100%);">
+          <uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已结清贷款</div>
+          <div class="num">{{ clearedOnlineDebtCount }}<span>笔</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已结清贷款本金</div>
+          <div class="num">{{ clearedOnlineDebtPrinciple }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')"  ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已结清贷款利息</div>
+          <div class="num">{{ clearedOnlineDebtInterest }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-title" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
+      <view class="title-line"></view>
+      <text class="title-text">POS机信息</text>
+    </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, #667eea 0%, #5b6cdb 100%);">
+          <uni-icons type="navigate-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">POS机</div>
+          <div class="num">{{ posCount }}<span>台</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当月刷卡次数</div>
+          <div class="num">{{ currentMonthCount }}<span>次</span></div>
+        </div>
+      </div>
+    </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, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当月刷卡金额</div>
+          <div class="num">{{ currentMonthAmount }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当月刷卡手续费</div>
+          <div class="num">{{ currentMonthCommission }}<span>元</span></div>
+        </div>
+      </div>
+    </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, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当年刷卡次数</div>
+          <div class="num">{{ currentYearCount }}<span>次</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当年刷卡金额</div>
+          <div class="num">{{ currentYearAmount }}<span>元</span></div>
+        </div>
+      </div>
+    </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, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">当年刷卡手续费</div>
+          <div class="num">{{ currentYearCommission }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
+          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">累计刷卡次数</div>
+          <div class="num">{{ accumulateCount }}<span>次</span></div>
+        </div>
+      </div>
+    </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, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">累计刷卡金额</div>
+          <div class="num">{{ accumulateAmount }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">累计刷卡手续费</div>
+          <div class="num">{{ accumulateCommission }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-title" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
+      <view class="title-line"></view>
+      <text class="title-text">投资账户信息</text>
+    </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, #667eea 0%, #5b6cdb 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">股票账户</div>
+          <div class="num">{{ stocksCount }}<span>个</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">期货账户</div>
+          <div class="num">{{ futuresCount }}<span>个</span></div>
+        </div>
+      </div>
+    </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, #667eea 0%, #5b6cdb 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">投资账户余额</div>
+          <div class="num">{{ investBalance }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f59a23 0%, #f57c00 100%);">
+          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">本月投资收益</div>
+          <div class="num">{{ currentMonthInvest }}<span>元</span></div>
+        </div>
+      </div>
+    </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, #2d8f3c 0%, #1b5e20 100%);">
+          <uni-icons type="plus-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">本月投资盈利</div>
+          <div class="num">{{ currentMonthIncome }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="minus-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">本月投资亏损</div>
+          <div class="num">{{ currentMonthExpenses }}<span>元</span></div>
+        </div>
+      </div>
+    </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, #f59a23 0%, #f57c00 100%);">
+          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">总收益</div>
+          <div class="num">{{ totalIncome }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">期货收益</div>
+          <div class="num">{{ futuresIncome }}<span>元</span></div>
+        </div>
+      </div>
+    </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, #5b6cdb 0%, #4527a0 100%);">
+          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">股票收益</div>
+          <div class="num">{{ stocksIncome }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-title" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
+      <view class="title-line"></view>
+      <text class="title-text">征信信息</text>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近1月硬查询</div>
+          <div class="num">{{ lastOneMonths }}<span>次</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近2月硬查询</div>
+          <div class="num">{{ lastTwoMonths }}<span>次</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近3月硬查询</div>
+          <div class="num">{{ lastThreeMonths }}<span>次</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近6月硬查询</div>
+          <div class="num">{{ lastSixMonths }}<span>次</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近1年硬查询</div>
+          <div class="num">{{ lastOneYears }}<span>次</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近2年硬查询</div>
+          <div class="num">{{ lastTwoYears }}<span>次</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
+          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">总硬查询</div>
+          <div class="num">{{ lastAllYears }}<span>次</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
+          <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近6月个人查询</div>
+          <div class="num">{{ lastSixMonthQueryCount }}<span>次</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
+          <uni-icons type="settings" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近6月贷后管理</div>
+          <div class="num">{{ lastSixMonthsAfterLoan }}<span>次</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
+          <uni-icons type="settings" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">近2年贷后管理</div>
+          <div class="num">{{ lastTwoYearsAfterLoan }}<span>次</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')"  ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
+          <uni-icons type="settings" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">贷后管理总数</div>
+          <div class="num">{{ totalAfterLoan }}<span>次</span></div>
+        </div>
+      </div>
+    </div>
+
+    <div></div>
+  </div>
+</view>
+      <!-- 悬停按钮刷新-->
+      <refresh></refresh>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { getPosAccountsInfo, getInvestAccountsInfo, getCreditReportInfo, getLendAccountsInfo, getCreditAccountsInfo, getDebitAccountsInfo } from '@/api/invest/accountAnalysis.js'
+import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
+//POS机信息
+const posCount = ref(0) //POS机总数
+const currentMonthAmount = ref(0) //当月刷卡金额
+const currentMonthCommission = ref(0) //当月刷卡手续费
+const currentMonthCount = ref(0) //当月刷卡次数
+const currentYearAmount = ref(0) //当年刷卡金额
+const currentYearCommission = ref(0) //当年刷卡手续费
+const currentYearCount = ref(0) //当年刷卡次数
+const accumulateAmount = ref(0) //累计刷卡金额
+const accumulateCommission = ref(0) //累计刷卡手续费
+const accumulateCount = ref(0) //累计刷卡次数
+
+//投资账户信息
+const stocksCount = ref(0) //股票账户
+const futuresCount = ref(0) //期货账户
+const currentMonthInvest = ref(0) //当月收益
+const currentMonthIncome = ref(0) //当月盈利
+const currentMonthExpenses = ref(0) //当月亏损
+const futuresIncome = ref(0) //期货收益
+const totalIncome = ref(0) //投资总收益
+const stocksIncome = ref(0) //股票收益
+const investBalance = ref(0) //投资账户余额
+
+//储蓄账户信息
+const debitCount = ref(0) //储蓄卡总数
+const debitICount = ref(0) //I类储蓄卡总数
+const debitIICount = ref(0) //II类储蓄卡总数
+const debitOnlineCount = ref(0) //网络账户总数
+const storedValueCardCount = ref(0) //储值卡总数
+const otherDebitCount = ref(0) //其他账户数
+const storedValueCardBalance = ref(0) //储值卡余额
+const housingFundBalance = ref(0) //公积金余额
+const medicalBalance = ref(0) //医保余额
+const debitOnlineBalance = ref(0) //网络账户余额
+const personalPensionBalance = ref(0) //个人养老金余额
+const otherDebitBalance = ref(0) //其他余额
+const debitBalance = ref(0) //储蓄卡余额
+const debitTotalBalance = ref(0) //储蓄账户余额
+
+//借贷账户信息
+const peopleLendHistory = ref(0) //人情借贷余额
+const peopleLendCount = ref(0) //人情账户
+const onlineLendCount = ref(0) //贷款账户
+const unclearedOnlineDebtCount = ref(0) //未结清贷款账户数
+const unClearedOnlineDebt = ref(0) //未结清贷款本息
+const unClearedOnlineDebtPrinciple = ref(0) //未结清贷款本金
+const unClearedOnlineDebtInterest = ref(0) //未结清贷款利息
+const clearedOnlineDebtCount = ref(0) //已结清贷款账户数
+const clearedOnlineDebt = ref(0) //已结清贷款本息
+const clearedOnlineDebtPrinciple = ref(0) //已结清贷款本金
+const clearedOnlineDebtInterest = ref(0) //已结清贷款利息
+const dueOnlineDebt = ref(0) //本月应还贷款
+const repaidOnlineDebt = ref(0) //本月已还贷款
+const leftOnlineDebt = ref(0) //本月剩余应还贷款
+
+//信用卡信息
+const creditInstallmentHistory = ref(0)
+const creditCount = ref(0) //信用卡数量
+const currentCreditBill = ref(0)
+const creditInstallment = ref(0)
+const creditLimit = ref(0) //信用卡额度
+const lastSixMonthUsedLimit = ref(0) //近6月使用额度
+const lastSixMonthUsedRate = ref(0) //近6月使用率
+const lastMonthUsedLimit = ref(0) //上月已用额度
+const lastMonthUsedRate = ref(0) //上月使用率
+const creditBalance = ref(0) //信用卡余额
+const creditAvailableLimit = ref(0) //信用卡可用额度
+const creditBillRate = ref(0) //信用卡使用率
+const unclearedCreditInstallmentCount = ref(0) //未结清分期数量
+const unclearedCreditInstallment = ref(0) //未结清分期本息
+const unclearedCreditInstallmentPrinciple = ref(0) //未结清分期本金
+const unclearedCreditInstallmentInterest = ref(0) //未结清分期利息
+const clearedCreditInstallmentCount = ref(0) //已结清分期数量
+const clearedCreditInstallmentDebt = ref(0) //已结清分期本息
+const clearedCreditInstallmentPrinciple = ref(0) //已结清分期本金
+const clearedCreditInstallmentInterest = ref(0) //已结清分期利息
+
+//征信报告信息
+const lastOneMonths = ref(0) //近1月硬查询
+const lastTwoMonths = ref(0) //近2月硬查询
+const lastThreeMonths = ref(0) //近3月硬查询
+const lastSixMonths = ref(0) //近6月硬查询
+const lastOneYears = ref(0) //近1年硬查询
+const lastTwoYears = ref(0) //近2年硬查询
+const lastAllYears = ref(0) //所有硬查询
+const lastSixMonthQueryCount = ref(0) //近6月个人查询
+const lastSixMonthsAfterLoan = ref(0) //近6月贷后管理
+const lastTwoYearsAfterLoan = ref(0) //近2年贷后管理
+const totalAfterLoan = ref(0) //总贷后管理
+
+const getInvestAccountsInfoData = () => {
+  getInvestAccountsInfo().then((res) => {
+    stocksCount.value = res.data.stocksCount
+    futuresCount.value = res.data.futuresCount
+    totalIncome.value = res.data.totalIncome
+    futuresIncome.value = res.data.futuresIncome
+    stocksIncome.value = res.data.stocksIncome
+    investBalance.value = res.data.investBalance
+    currentMonthInvest.value = res.data.currentMonthInvest
+    currentMonthIncome.value = res.data.currentMonthIncome
+    currentMonthExpenses.value = res.data.currentMonthExpenses
+  })
+}
+
+const getPosAccountsInfoData = () => {
+  getPosAccountsInfo().then((res) => {
+    posCount.value = res.data.posCount
+    currentMonthAmount.value = res.data.currentMonthAmount
+    currentMonthCommission.value = res.data.currentMonthCommission
+    currentMonthCount.value = res.data.currentMonthCount
+    currentYearAmount.value = res.data.currentYearAmount
+    currentYearCommission.value = res.data.currentYearCommission
+    currentYearCount.value = res.data.currentYearCount
+    accumulateAmount.value = res.data.accumulateAmount
+    accumulateCommission.value = res.data.accumulateCommission
+    accumulateCount.value = res.data.accumulateCount
+  })
+}
+
+const getCreditAccountsInfoData = () => {
+  getCreditAccountsInfo().then((res) => {
+    creditCount.value = res.data.creditCount
+    currentCreditBill.value = res.data.currentCreditBill
+    creditInstallment.value = res.data.creditInstallment
+    creditLimit.value = res.data.creditLimit
+    lastSixMonthUsedLimit.value = res.data.lastSixMonthUsedLimit
+    lastSixMonthUsedRate.value = res.data.lastSixMonthUsedRate
+    lastMonthUsedLimit.value = res.data.lastMonthUsedLimit
+    lastMonthUsedRate.value = res.data.lastMonthUsedRate
+    creditBalance.value = res.data.creditBalance
+    creditAvailableLimit.value = res.data.creditAvailableLimit
+    creditBillRate.value = res.data.creditBillRate
+    unclearedCreditInstallmentCount.value = res.data.unclearedCreditInstallmentCount
+    unclearedCreditInstallment.value = res.data.unclearedCreditInstallment
+    unclearedCreditInstallmentPrinciple.value = res.data.unclearedCreditInstallmentPrinciple
+    unclearedCreditInstallmentInterest.value = res.data.unclearedCreditInstallmentInterest
+    clearedCreditInstallmentCount.value = res.data.clearedCreditInstallmentCount
+    clearedCreditInstallmentDebt.value = res.data.clearedCreditInstallmentDebt
+    clearedCreditInstallmentPrinciple.value = res.data.clearedCreditInstallmentPrinciple
+    clearedCreditInstallmentInterest.value = res.data.clearedCreditInstallmentInterest
+  })
+}
+const getLendAccountsInfoData = () => {
+  getLendAccountsInfo().then((res) => {
+    peopleLendCount.value = res.data.peopleLendCount
+    onlineLendCount.value = res.data.onlineLendCount
+    unClearedOnlineDebt.value = res.data.unClearedOnlineDebt
+    creditInstallmentHistory.value = res.data.creditInstallmentHistory
+    peopleLendHistory.value = res.data.peopleLendHistory
+    unclearedOnlineDebtCount.value = res.data.unclearedOnlineDebtCount
+    clearedOnlineDebtCount.value = res.data.clearedOnlineDebtCount
+    clearedOnlineDebt.value = res.data.clearedOnlineDebt
+    dueOnlineDebt.value = res.data.dueOnlineDebt
+    repaidOnlineDebt.value = res.data.repaidOnlineDebt
+    leftOnlineDebt.value = res.data.leftOnlineDebt
+    unClearedOnlineDebtPrinciple.value = res.data.unClearedOnlineDebtPrinciple
+    unClearedOnlineDebtInterest.value = res.data.unClearedOnlineDebtInterest
+    clearedOnlineDebtPrinciple.value = res.data.clearedOnlineDebtPrinciple
+    clearedOnlineDebtInterest.value = res.data.clearedOnlineDebtInterest
+  })
+}
+const getCreditReportInfoData = () => {
+  getCreditReportInfo().then((res) => {
+    lastOneMonths.value = res.data.lastOneMonths
+    lastTwoMonths.value = res.data.lastTwoMonths
+    lastThreeMonths.value = res.data.lastThreeMonths
+    lastSixMonths.value = res.data.lastSixMonths
+    lastOneYears.value = res.data.lastOneYears
+    lastTwoYears.value = res.data.lastTwoYears
+    lastAllYears.value = res.data.lastAllYears
+    lastSixMonthQueryCount.value = res.data.lastSixMonthQueryCount
+    lastSixMonthsAfterLoan.value = res.data.lastSixMonthsAfterLoan
+    lastTwoYearsAfterLoan.value = res.data.lastTwoYearsAfterLoan
+    totalAfterLoan.value = res.data.totalAfterLoan
+  })
+}
+const getDebitAccountsInfoData = () => {
+  getDebitAccountsInfo().then((res) => {
+    debitCount.value = res.data.debitCount
+    debitICount.value = res.data.debitICount
+    debitIICount.value = res.data.debitIICount
+    debitOnlineCount.value = res.data.debitOnlineCount
+    storedValueCardCount.value = res.data.storedValueCardCount
+    debitBalance.value = res.data.debitBalance
+    debitTotalBalance.value = res.data.debitTotalBalance
+    debitOnlineBalance.value = res.data.debitOnlineBalance
+    storedValueCardBalance.value = res.data.storedValueCardBalance
+    housingFundBalance.value = res.data.housingFundBalance
+    medicalBalance.value = res.data.medicalBalance
+    personalPensionBalance.value = res.data.personalPensionBalance
+    otherDebitBalance.value = res.data.otherDebitBalance
+    otherDebitCount.value = res.data.otherDebitCount
+  })
+}
+
+onMounted(() => {
+  getInvestAccountsInfoData()
+  getPosAccountsInfoData()
+  getDebitAccountsInfoData()
+  getCreditAccountsInfoData()
+  getLendAccountsInfoData()
+  getCreditReportInfoData()
+})
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
+  
+  .header-title {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 24rpx;
+    margin-bottom: 8rpx;
+    background-color: #ffffff;
+    
+    &:first-child {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+    }
+    
+    .title-line {
+      width: 6rpx;
+      height: 32rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+      flex-shrink: 0;
+    }
+    
+    .title-text {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #2c3e50;
+    }
+  }
+  
+  .header-con {
+    width: calc(100% - 32rpx);
+    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: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:hover {
+        border-color: #d0d7de;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+      }
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
+      }
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span, .unit {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/invest/statics/creditBillAnalysis/index.vue b/src/pages/invest/statics/creditBillAnalysis/index.vue
new file mode 100644
index 0000000..50f6c99
--- /dev/null
+++ b/src/pages/invest/statics/creditBillAnalysis/index.vue
@@ -0,0 +1,979 @@
+
+<template>
+    <view class="container">
+      <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+         <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>
+       </view>
+        <view class="search-view">
+          <u-input v-model="queryParams.time" border="false" type="select" readonly 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>
+        </view>
+        <div class="app-container">
+    <div class="header-con" ref="searchHeightRef">
+      <div class="item">
+        <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">
+          <div class="title">使用率</div>
+          <div class="num">{{ creditObj.creditBillRate }}<span>%</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <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">
+          <div class="title">总额度</div>
+          <div class="num">{{  creditObj.creditLimit }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" ref="searchHeightRef">
+      <div class="item">
+        <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">
+          <div class="title">已用额度</div>
+          <div class="num">{{ creditObj.creditBalance}}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <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">
+          <div class="title">可用额度</div>
+          <div class="num">{{ creditObj.creditAvailableLimit }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" ref="searchHeightRef">
+      <div class="item">
+        <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">
+          <div class="title">信用卡总数</div>
+          <div class="num">{{ creditObj.creditCardCount}}<span>张</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <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">
+          <div class="title">月平均账单金额</div>
+          <div class="num">{{ creditObj.averageCreditBill }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" ref="searchHeightRef">
+      <div class="item">
+        <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">
+          <div class="title">累计账单金额</div>
+          <div class="num">{{ creditObj.actualCreditBill}}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div></div>
+  </div>
+  <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>
+      </u-sticky>
+      
+  <!-- 筛选面板 -->
+  <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="selcet-content" style="padding: 0 24rpx">
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.startTime"
+            placeholder="请选择开始时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+            </template>
+          </u-input>
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.endTime"
+            placeholder="请选择结束时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+            </template>
+          </u-input>
+        </view>
+      </view>
+      <view class="btn-box">
+        <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>
+    </view>
+  </u-transition>
+  
+  <!-- 日期选择器 -->
+  <u-datetime-picker
+    :closeOnClickOverlay="true"
+    :show="timeShow"
+    v-model="time"
+    mode="year-month"
+    @close="openOrCloseDate"
+    @cancel="openOrCloseDate"
+    @confirm="confirm"
+  ></u-datetime-picker>
+  
+  <!-- 曲线图展示 -->
+  <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="720" 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">
+              <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>
+        </u-list-item>
+        <view>
+        </view>
+      </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="accountList" keyName="nameCode" @cancel="handleAccountCancel"
+          @confirm="handleAccountConfirm"></u-picker>
+    </view>
+    <!-- 悬停按钮返回统计分析-->
+      <statisticBtn></statisticBtn>
+  </template>
+  
+  <script setup>
+  import { getCreditAnalysis } from '@/api/invest/statisticAnalysis'
+  import { getDicts } from '@/api/system/dict/data.js'
+    import dayjs from 'dayjs'
+  import { timeHandler } from '@/utils/common.ts'
+import { listBankcardLend } from '@/api/invest/bankcardlend'
+  import {onLoad,onShow} from "@dcloudio/uni-app";
+      // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
+  import {reactive ,toRefs,ref,computed }from "vue";
+  const pageNum = ref(1)
+  const listData = ref([])
+  const isShow = ref(false)
+  const accountList = ref([])
+  const accountTypeList = ref([])
+  const settingPickShow = ref(false)
+  const settingColumns = ref([])
+  const showAccount = ref(false)
+  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: '',
+  clearedTotal: '',
+  totalInterest: '',
+  historyList: []
+})
+  const data = reactive({
+    filterPanel: false,
+    queryAccountParams: {
+      pageNum: 1,
+    type: '2',
+    pageSize: 1000
+  },
+    queryParams: {
+    type: 2,
+    time: null,
+    id: null
+     } 
+  })
+
+  const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  
+  // 曲线图配置
+  const lineChartOpts = computed(() => {
+    const dataCount = listData.value ? listData.value.length : 0
+    const showXAxisLabel = dataCount <= 10
+    
+    return {
+      color: ['#667eea'],
+      padding: [15, 15, 30, 5],
+      enableScroll: false,
+      enableMarkLine: true,
+      dataLabel: false,
+      dataPointShape: true,
+      legend: {
+        show: false
+      },
+      xAxis: {
+        disableGrid: true,
+        boundaryGap: 'justify',
+        axisLine: false,
+        scrollShow: true,
+        itemCount: 5,
+        fontSize: showXAxisLabel ? 10 : 0,
+        fontColor: showXAxisLabel ? '#999999' : 'transparent',
+        rotateLabel: true,
+        rotateAngle: 30,
+        disabled: !showXAxisLabel
+      },
+      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 = computed(() => {
+    const dataCount = listData.value ? listData.value.length : 0
+    const showXAxisLabel = dataCount <= 10
+    
+    // 计算数据范围以动态设置Y轴
+    let minValue = 0
+    let maxValue = 0
+    if (listData.value && listData.value.length > 0) {
+      const values = listData.value.map(item => parseFloat(item.value) || 0)
+      const dataMin = Math.min(...values)
+      const dataMax = Math.max(...values)
+      
+      // 确保包含0轴
+      minValue = Math.min(0, dataMin)
+      maxValue = Math.max(0, dataMax)
+      
+      // 给数据留出更大的上下空间
+      const range = maxValue - minValue
+      if (range > 0) {
+        minValue = minValue - range * 0.1
+        maxValue = maxValue + range * 0.2
+      }
+    }
+    
+    return {
+      color: ['#667eea'],
+      padding: [15, 15, 30, 5],
+      enableScroll: false,
+      dataLabel: false,
+      legend: {
+        show: false
+      },
+      xAxis: {
+        disableGrid: true,
+        boundaryGap: 'center',
+        axisLine: false,
+        scrollShow: true,
+        itemCount: 5,
+        fontSize: showXAxisLabel ? 10 : 0,
+        fontColor: showXAxisLabel ? '#999999' : 'transparent',
+        rotateLabel: true,
+        rotateAngle: 30,
+        disabled: !showXAxisLabel
+      },
+      yAxis: {
+        gridType: 'dash',
+        dashLength: 4,
+        gridColor: '#EEEEEE',
+        splitNumber: 5,
+        min: minValue,
+        max: maxValue,
+        fontSize: 10,
+        fontColor: '#999999',
+        showTitle: false,
+        disabled: false,
+        format: (val) => {
+          const absVal = Math.abs(val)
+          if (absVal >= 10000) {
+            return (val / 10000).toFixed(1) + 'w'
+          }
+          return val.toFixed(0)
+        }
+      },
+      extra: {
+        column: {
+          type: 'group',
+          width: 20,
+          activeBgColor: '#764ba2',
+          activeBgOpacity: 0.08,
+          linearType: 'none',
+          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
+          }),
+          color: (value) => {
+            // 负数使用红色，正数使用蓝紫色
+            return value < 0 ? '#ef4444' : '#667eea'
+          }
+        }
+      ]
+    }
+  })
+  const windowHeight = computed(() => {
+              uni.getSystemInfoSync().windowHeight - 50
+          })	
+  onLoad(() => {
+      getDict()
+      getList()
+      console.log('页面加载完成')
+    });
+  
+   onShow(() => {
+      if (isShow.value) {
+      listData.value=[]
+        getList()
+        isShow.value = false
+      }
+    });
+
+    function formatMultiLineData(data) {
+  if (data != null) {
+    return data.replace(/<br\/>/g, '\n')
+  }
+}
+function  openOrCloseDate(data) {
+      timeShow.value = !timeShow.value
+      flag.value = data
+    }
+    function confirm(e) {
+      const date = timeHandler(new Date(e.value), '-', ':')
+            let formatValue = 'YYYY-MM'
+            dayjs(date).format(formatValue)
+      if (flag.value) {
+        queryParams.value.startTime =  dayjs(date).format(formatValue)
+      } else {
+        queryParams.value.endTime =  dayjs(date).format(formatValue)
+      }
+      timeShow.value = false
+    }
+function searchSubmit() {
+  queryParams.value.time = queryParams.value.startTime+'-'+queryParams.value.endTime 
+      pageNum.value = 1
+      listData.value = []
+      getList()
+      filterPanel.value = false
+    }
+    function resetQuery() {
+        queryParams.value.id = ''
+        queryParams.value.type = 2
+        queryParams.value.dataType = '2'
+        let formatValue = 'YYYY-MM'
+        const today = new Date()
+      const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
+      const start = dayjs(end).add(-11, '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.accountName = ''
+    }
+  function getList() {
+    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(() => {
+        })
+      }
+  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(-11, '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)
+      listBankcardLend(queryAccountParams.value).then((response) => {
+        accountList.value = [response.rows] 
+      })
+        
+      }
+  function settingConfirm(e) {
+        queryParams.value.settingId = e.value[0].settingId
+        queryParams.value.settingName = e.value[0].settingName
+        settingPickShow.value = false
+      }
+  function settingCancel() {
+        settingPickShow.value = false
+      }
+      function handleAccount() {
+          if (accountList.value[0].length === 0) {
+            proxy.$refs['uToast'].show({
+              message: '信用卡为空  ', type: 'warning'
+            })
+          } else {
+            showAccount.value = true
+          }
+       }
+    function   handleAccountConfirm(e) {
+      queryParams.value.accountName = e.value[0].nameCode
+      queryParams.value.id= e.value[0].id
+          showAccount.value = false
+          pageNum.value = 1
+        listData.value = []
+        getList()
+    }
+   function handleAccountCancel() {
+    queryParams.value.accountName = ''
+      queryParams.value.id=''
+
+         showAccount.value = false
+         listData.value = []
+        getList()
+        filterPanel.value = false
+    }
+    
+
+  </script>
+  
+  <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
+.app-container {
+  background-color: #f5f7fa;
+  padding: 0;
+  overflow: visible;
+
+  .header-con {
+    width: calc(100% - 32rpx);
+    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: 20rpx 16rpx;
+      transition: all 0.3s ease;
+      border: 2rpx solid #e8edf3;
+      border-radius: 16rpx;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
+      }
+      
+      .item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+      
+      .info-sum {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .title {
+          color: #7f8c8d;
+          margin-bottom: 8rpx;
+          font-size: 24rpx;
+        }
+        
+        .num {
+          color: #2c3e50;
+          font-size: 32rpx;
+          font-weight: 600;
+          
+          span {
+            font-size: 20rpx;
+            color: #95a5a6;
+            margin-left: 4rpx;
+          }
+        }
+      }
+    }
+  }
+}
+  .btnAdd {
+        width: 146rpx;
+        height: 56rpx;
+        line-height: 56rpx;
+        border-radius: 8rpx;
+        display:float;
+        text-align: center;
+      }
+
+  .section-title {
+    display: flex;
+    margin-top: -10rpx;
+    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 60rpx;
+    padding: 16rpx;
+    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: 650rpx;
+    overflow: visible;
+    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: rgba(102, 126, 234, 0.08);
+      color: #333333;
+      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 {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 180rpx;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+
+    .filter-panel-content {
+      background-color: #ffffff;
+      padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
+
+      .filter-title {
+        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 {
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
+          text-align: center;
+          line-height: 68rpx;
+          font-size: 28rpx;
+          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: 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 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: 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;
+        }
+        
+        .amount-value {
+          font-size: 30rpx;
+          font-weight: 700;
+          color: #ffffff;
+          line-height: 1;
+        }
+      }
+    }
+    
+    .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;
+        }
+      }
+      
+      .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;
+        }
+      }
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/src/pages/invest/work/index.vue b/src/pages/invest/work/index.vue
new file mode 100644
index 0000000..d44860e
--- /dev/null
+++ b/src/pages/invest/work/index.vue
@@ -0,0 +1,219 @@
+<template>
+  <view class="work-container">
+
+    <!-- 常用功能 -->
+    <view class="section-header" v-show="auth.hasPermi('invest:accountDealRecord:list')">
+      <text class="section-title">常用功能</text>
+    </view>
+    <view class="grid-body" v-show="auth.hasPermi('invest:accountDealRecord:list')">
+      <view class="grid-wrapper">
+        <view 
+          v-for="(item, index) in commonGridList" 
+          :key="index" 
+          v-show="auth.hasPermi(item.permission)" 
+          @click="navigateTo(item.path)"
+          class="grid-item">
+          <view class="item-icon" :style="{ background: item.color }">
+            <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
+          </view>
+          <text class="item-text">{{ item.text }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 账单管理 -->
+    <view class="section-header" v-show="auth.hasPermi('invest:installmentHistory:list')">
+      <text class="section-title">账单管理</text>
+    </view>
+    <view class="grid-body" v-show="auth.hasPermi('invest:installmentHistory:list')">
+      <view class="grid-wrapper">
+        <view 
+          v-for="(item, index) in billGridList" 
+          :key="index" 
+          v-show="auth.hasPermi(item.permission)" 
+          @click="navigateTo(item.path)"
+          class="grid-item">
+          <view class="item-icon" :style="{ background: item.color }">
+            <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
+          </view>
+          <text class="item-text">{{ item.text }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 记账管理 -->
+    <view class="section-header" v-show="auth.hasPermi('invest:accounts:list')">
+      <text class="section-title">记账管理</text>
+    </view>
+    <view class="grid-body" v-show="auth.hasPermi('invest:accounts:list')">
+      <view class="grid-wrapper">
+        <view 
+          v-for="(item, index) in accountGridList" 
+          :key="index" 
+          v-show="auth.hasPermi(item.permission)" 
+          @click="navigateTo(item.path)"
+          class="grid-item">
+          <view class="item-icon" :style="{ background: item.color }">
+            <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
+          </view>
+          <text class="item-text">{{ item.text }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 基础信息 -->
+    <view class="section-header" v-show="auth.hasPermi('invest:bankcard:list')">
+      <text class="section-title">基础信息</text>
+    </view>
+    <view class="grid-body" v-show="auth.hasPermi('invest:bankcard:list')">
+      <view class="grid-wrapper">
+        <view 
+          v-for="(item, index) in baseGridList" 
+          :key="index" 
+          v-show="auth.hasPermi(item.permission)" 
+          @click="navigateTo(item.path)"
+          class="grid-item">
+          <view class="item-icon" :style="{ background: item.color }">
+            <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
+          </view>
+          <text class="item-text">{{ item.text }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
+
+// 也可以使用下面的方式
+	import { ref } from "vue";
+  const commonGridList=ref([
+        { path: '/pages/work/heartJourney/list', text: '心路历程', icon: 'heart-filled', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', permission: 'invest:heartJourney:list'  },
+        { path: '/pages/work/accounts/accountDealRecord/list', text: '账户交易记录', icon: 'list', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'invest:accountDealRecord:list'  },
+        { path: '/pages/work/accounts/posadvice/list', text: 'POS刷卡推荐', icon: 'star-filled', color: 'linear-gradient(135deg, #d38cff 0%, #9d50bb 100%)', permission: 'invest:posmachine:list'  },
+        { path: '/pages/work/accounts/posTransferRecord/list', text: 'POS机刷卡记账', icon: 'checkmarkempty', color: 'linear-gradient(135deg, #17c0eb 0%, #f368e0 100%)', permission: 'invest:posmachine:list'  },
+        { path: '/pages/work/accounts/creditTransferRecord/list', text: '信用卡还款', icon: 'redo', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'invest:creditCard'  },
+        { path: '/pages/work/accounts/investAccountDeal/list', text: '投资交易记录', icon: 'bars', color: 'linear-gradient(135deg, #00b4db 0%, #0083b0 100%)', permission: 'invest:futureStocks:list'  },
+        { path: '/pages/work/accounts/investTransferRecord/list', text: '投资账户记账', icon: 'compose', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'invest:futureStocks:list'  },
+        { path: '/pages/work/accounts/debitTransferRecord/list', text: '储蓄账户转账', icon: 'loop', color: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', permission: 'invest:debitCard'  },
+        { path: '/pages/work/bill/creditCardBill/list', text: '信用卡账单', icon: 'wallet-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'invest:creditCardBill:list'   },
+        { path: '/pages/work/bill/onlineLendHistory/list', text: '贷款账单', icon: 'calendar', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)', permission: 'invest:onlineLend'  },
+        { path: '/pages/work/bill/creditInstallmentHistory/list', text: '信用卡分期账单', icon: 'calendar-filled', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'invest:creditCard'  },
+        { path: '/pages/work/bill/creditQueryRecord/list', text: '征信查询记录', icon: 'search', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)', permission: 'invest:creditQueryRecord:list'  }
+      ])
+  const baseGridList=ref([
+        { path: '/pages/work/base/debitCard/list', text: '储蓄账户管理', icon: 'home-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'invest:debitCard'  },
+        { path: '/pages/work/base/creditCard/list', text: '信用卡管理', icon: 'vip-filled', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'invest:creditCard'  },
+        { path: '/pages/work/base/lend/list', text: '借贷账户管理', icon: 'upload-filled', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)', permission: 'invest:onlineLend'  },
+        { path: '/pages/work/base/posmachine/list', text: 'pos机管理', icon: 'navigate-filled', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'invest:posmachine:list' },
+        { path: '/pages/work/base/financials/list', text: '理财账户管理', icon: 'star', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'invest:futureStocks:list'  },
+        { path: '/pages/work/base/stocks/list', text: '股票账户管理', icon: 'arrow-up', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)', permission: 'invest:futureStocks:list'  },
+        { path: '/pages/work/base/futures/list', text: '期货账户管理', icon: 'fire', color: 'linear-gradient(135deg, #fc5c65 0%, #fd79a8 100%)', permission: 'invest:futureStocks:list'  },
+        { path: '/pages/work/product/productInfor/list', text: '商品信息', icon: 'gift-filled', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)', permission: 'invest:productInfor:list'  }
+      ])
+      const billGridList=ref([
+       { path: '/pages/work/bill/peopleLendHistory/list', text: '人情账单', icon: 'person-filled', color: 'linear-gradient(135deg, #fa8231 0%, #f7971e 100%)', permission: 'invest:onlineLend'  },
+        { path: '/pages/work/bill/futuresBill/list', text: '期货账单', icon: 'chatboxes', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'invest:futureStocksBill:list'  },
+        { path: '/pages/work/bill/stocksBill/list', text: '股票账单', icon: 'flag-filled', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)', permission: 'invest:futureStocksBill:list'  }
+      ])
+      const accountGridList=ref([
+        { path: '/pages/work/accounts/accounts/list', text: '记账账户', icon: 'wallet', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'invest:accounts:list'  },
+        { path: '/pages/work/accounts/lendTransferRecord/list', text: '借贷账户记账', icon: 'link', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)', permission: 'invest:onlineLend'  },
+        { path: '/pages/work/product/productPriceRecord/list', text: '物价记录', icon: 'cart-filled', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'invest:productPriceRecord:list'  }
+      ])
+      const heartJourneyGridList=ref([
+      { path: '/pages/work/heartJourney/list', text: '心路历程', icon: 'heart', permission: 'invest:heartJourney:list'  }
+      ])
+	function navigateTo(path) {
+    uni.navigateTo({
+        url: path
+      });
+	}
+</script>
+
+<style lang="scss">
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  /* #endif */
+
+  .work-container {
+    padding: 12rpx 0;
+  }
+
+  .section-header {
+    padding: 12rpx 24rpx 8rpx;
+  }
+
+  .section-title {
+    font-size: 28rpx;
+    font-weight: 700;
+    color: #333;
+    position: relative;
+    padding-left: 16rpx;
+  }
+
+  .section-title::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 6rpx;
+    height: 28rpx;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 3rpx;
+  }
+
+  .grid-body {
+    padding: 0 16rpx;
+  }
+
+  .grid-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .grid-item {
+    width: 25%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 16rpx 8rpx;
+    box-sizing: border-box;
+  }
+
+  .item-icon {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 12rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+  }
+
+  .grid-item:active .item-icon {
+    transform: scale(0.95);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+  }
+
+  .item-text {
+    text-align: center;
+    font-size: 22rpx;
+    color: #333;
+    font-weight: 500;
+    line-height: 1.3;
+  }
+</style>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index d3c65a5..1a0dbeb 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,41 +1,57 @@
 <template>
   <view class="normal-login-container">
-    <view class="logo-content align-center justify-center flex">
-      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
-      </image>
+    <view class="background-decoration"></view>
+    
+    <view class="logo-content">
+      <view class="logo-wrapper">
+        <image class="logo-image" :src="globalConfig.appInfo.logo" mode="aspectFit"></image>
+      </view>
       <text class="title">智聪健康管理平台</text>
+      <text class="subtitle">专业的健康管理工具</text>
     </view>
+    
     <view class="login-form-content">
-      <view class="input-item flex align-center">
-        <view class="iconfont icon-user icon"></view>
-        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
-      </view>
-      <view class="input-item flex align-center">
-        <view class="iconfont icon-password icon"></view>
-        <input v-model="loginForm.password" type="password" class="input"  placeholder="请输入密码" maxlength="20" />
-      </view>
-      <view class="flex align-center" style="margin-left: 5px;">
-        <up-checkbox
-        :customStyle="{marginBottom: '8px'}"
-        label="记住密码"
-        name="agree"
-        usedAlone
-        @change="rememberMeChange()"
-        v-model:checked="rememberMe"
-    >
-    </up-checkbox>
-      </view>
-      <view class="action-btn">
-        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
+      <view class="form-card">
+        <view class="input-item">
+          <view class="input-icon">
+            <uni-icons type="person" size="20" color="#667eea"></uni-icons>
+          </view>
+          <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
+        </view>
+        
+        <view class="input-item">
+          <view class="input-icon">
+            <uni-icons type="locked" size="20" color="#667eea"></uni-icons>
+          </view>
+          <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
+        </view>
+        
+        <view class="remember-section">
+          <up-checkbox
+            :customStyle="{marginBottom: '8px'}"
+            label="记住密码"
+            name="agree"
+            usedAlone
+            @change="rememberMeChange()"
+            v-model:checked="rememberMe"
+          >
+          </up-checkbox>
+        </view>
+        
+        <view class="action-btn">
+          <button @click="handleLogin" class="login-btn">
+            <text class="btn-text">登录</text>
+          </button>
+        </view>
       </view>
     </view>
 
-    <view class="xieyi text-center">
-      <text @click="handleRegister" class="text-blue">立即注册 </text>
-      <text class="text-grey1">&nbsp;&nbsp;</text>
-      <text @click="handleWebsite" class="text-blue">官方网站</text>
-      <text class="text-grey1">&nbsp;&nbsp;</text>
-      <text @click="handleUserAgrement" class="text-blue">用户服务协议</text>
+    <view class="footer-links">
+      <text @click="handleRegister" class="link-item">立即注册</text>
+      <text class="separator">·</text>
+      <text @click="handleWebsite" class="link-item">官方网站</text>
+      <text class="separator">·</text>
+      <text @click="handleUserAgrement" class="link-item">服务协议</text>
     </view>
   </view>
 </template>
@@ -136,7 +152,7 @@ function loginSuccess(result) {
   // 设置用户信息
   userStore.getInfo().then(res => {
     uni.switchTab({
-      url: '/pages/health/homepage/index'
+   url: '/pages/health/homepage/index'
     });
   })
 }
@@ -162,78 +178,177 @@ function handleUserAgrement() {
 getCode();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 page {
-  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100%;
+  height: auto;
 }
 
 .normal-login-container {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  
+  .background-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
+    pointer-events: none;
+  }
 
   .logo-content {
     width: 100%;
-    font-size: 21px;
     text-align: center;
-    padding-top: 15%;
-
-    image {
-      border-radius: 4px;
+    padding-top: 120rpx;
+    position: relative;
+    z-index: 1;
+    
+    .logo-wrapper {
+      display: inline-block;
+      margin-bottom: 32rpx;
+      
+      .logo-image {
+        width: 140rpx;
+        height: 140rpx;
+        border-radius: 28rpx;
+        box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
+        background: #ffffff;
+        padding: 20rpx;
+      }
     }
 
     .title {
-      margin-left: 10px;
+      display: block;
+      font-size: 48rpx;
+      font-weight: 700;
+      color: #ffffff;
+      margin-bottom: 12rpx;
+    }
+    
+    .subtitle {
+      display: block;
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.8);
     }
   }
 
   .login-form-content {
-    text-align: center;
-    margin: 20px auto;
-    margin-top: 15%;
-    width: 80%;
+    flex: 1;
+    margin-top: 80rpx;
+    padding: 0 48rpx;
+    position: relative;
+    z-index: 1;
+    
+    .form-card {
+      background: #ffffff;
+      border-radius: 32rpx;
+      padding: 48rpx 40rpx;
+      box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
+    }
 
     .input-item {
-      margin: 20px auto;
-      background-color: #f5f6f7;
-      height: 45px;
-      border-radius: 20px;
+      margin-bottom: 32rpx;
+      background-color: #f5f7fa;
+      height: 96rpx;
+      border-radius: 48rpx;
+      display: flex;
+      align-items: center;
+      padding: 0 32rpx;
+      transition: all 0.3s ease;
+      
+      &:focus-within {
+        background-color: #eff1f5;
+        box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
+      }
 
-      .icon {
-        font-size: 38rpx;
-        margin-left: 10px;
-        color: #999;
+      .input-icon {
+        margin-right: 20rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
       .input {
+        flex: 1;
+        font-size: 28rpx;
+        color: #303133;
+        
+        &::placeholder {
+          color: #c0c4cc;
+        }
+      }
+    }
+    
+    .remember-section {
+      margin-bottom: 40rpx;
+      padding-left: 8rpx;
+    }
+
+    .action-btn {
+      margin-top: 48rpx;
+      
+      .login-btn {
         width: 100%;
-        font-size: 14px;
-        line-height: 20px;
-        text-align: left;
-        padding-left: 15px;
+        height: 96rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 48rpx;
+        border: none;
+        box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s ease;
+        
+        &::after {
+          border: none;
+        }
+        
+        &:active {
+          transform: scale(0.98);
+          box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+        }
+        
+        .btn-text {
+          color: #ffffff;
+          font-size: 32rpx;
+          font-weight: 600;
+        }
       }
-
     }
+  }
 
-    .login-btn {
-      margin-top: 40px;
-      height: 45px;
-    }
-
-    .xieyi {
-      color: #333;
-      margin-top: 20px;
-    }
-
-    .login-code {
-      height: 38px;
-      float: right;
-
-      .login-code-img {
-        height: 38px;
-        position: absolute;
-        margin-left: 10px;
-        width: 200rpx;
+  .footer-links {
+    text-align: center;
+    padding: 60rpx 0 80rpx;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16rpx;
+    
+    .link-item {
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 26rpx;
+      transition: all 0.3s ease;
+      
+      &:active {
+        opacity: 0.7;
       }
     }
+    
+    .separator {
+      color: rgba(255, 255, 255, 0.5);
+      font-size: 26rpx;
+    }
   }
 }
 </style>
diff --git a/src/pages/mine.vue b/src/pages/mine.vue
index 675f332..804ca82 100644
--- a/src/pages/mine.vue
+++ b/src/pages/mine.vue
@@ -1,73 +1,114 @@
 <template>
-  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
+  <view class="mine-container">
     <!--顶部个人信息栏-->
     <view class="header-section">
-      <view class="flex padding justify-between">
-        <view class="flex align-center">
-          <view v-if="!avatar" class="cu-avatar xl round bg-white">
-            <view class="iconfont icon-people text-gray icon"></view>
-          </view>
-          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
-          </image>
-          <view v-if="!name" @click="handleToLogin" class="login-tip">
-            点击登录
-          </view>
-          <view v-if="name" @click="handleToInfo" class="user-info">
-            <view class="u_title">
-              用户名：{{ name }}
+      <view class="header-content">
+        <view class="user-section">
+          <view class="avatar-wrapper">
+            <view class="avatar-gradient">
+              <view class="avatar-inner">
+                <uni-icons type="person-filled" size="48" color="#ffffff"></uni-icons>
+              </view>
             </view>
           </view>
+          <view class="user-details">
+            <view v-if="!name" @click="handleToLogin" class="login-prompt">
+              <text class="login-text">点击登录</text>
+              <uni-icons type="right" size="16" color="#ffffff"></uni-icons>
+            </view>
+            <view v-if="name" class="user-name-section">
+              <text class="user-name">{{ name }}</text>
+              <view class="user-tag">会员</view>
+            </view>
+            <view v-if="name" class="user-id">ID: {{ userId }}</view>
+          </view>
         </view>
-        <view @click="handleToInfo" class="flex align-center">
-          <text>个人信息</text>
-          <view class="iconfont icon-right"></view>
+        <view @click="handleToInfo" class="settings-btn">
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
       </view>
     </view>
 
     <view class="content-section">
-      <view class="mine-actions grid col-4 text-center">
-        <view class="action-item" @click="handleJiaoLiuQun">
-          <view class="iconfont icon-friendfill text-pink icon"></view>
-          <text class="text">官方公众号</text>
+      <view class="quick-actions">
+        <view class="action-card" @click="handleJiaoLiuQun">
+          <view class="action-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+            <uni-icons type="chatboxes" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <text class="action-text">交流社区</text>
         </view>
-        <view class="action-item" @click="handleService">
-          <view class="iconfont icon-service text-blue icon"></view>
-          <text class="text">在线客服</text>
+        <view class="action-card" @click="handleService">
+          <view class="action-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+            <uni-icons type="contact" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <text class="action-text">联系客服</text>
         </view>
-        <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-community text-mauve icon"></view>
-          <text class="text">反馈社区</text>
+        <view class="action-card" @click="handleBuilding">
+          <view class="action-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+            <uni-icons type="compose" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <text class="action-text">意见反馈</text>
         </view>
-        <view class="action-item" @click="handleUs">
-          <view class="iconfont icon-dianzan text-green icon"></view>
-          <text class="text">点赞我们</text>
+        <view class="action-card" @click="handleUs">
+          <view class="action-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+            <uni-icons type="star" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <text class="action-text">给个好评</text>
         </view>
       </view>
 
-      <view class="menu-list">
-        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
-          <view class="menu-item-box">
-            <view class="iconfont icon-user menu-icon"></view>
-            <view>编辑资料</view>
+      <view class="menu-section">
+        <view class="section-title">
+          <view class="title-bar"></view>
+          <text class="title-text">账户管理</text>
+        </view>
+        <view class="menu-card">
+          <view class="menu-item" @click="handleToEditInfo">
+            <view class="item-left">
+              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+                <uni-icons type="person" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="menu-text">编辑资料</text>
+            </view>
+            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
+          </view>
+          <view class="menu-divider"></view>
+          <view class="menu-item" @click="handleToSetting">
+            <view class="item-left">
+              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+                <uni-icons type="gear" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="menu-text">应用设置</text>
+            </view>
+            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
           </view>
         </view>
-        <view class="list-cell list-cell-arrow" @click="handleHelp">
-          <view class="menu-item-box">
-            <view class="iconfont icon-help menu-icon"></view>
-            <view>常见问题</view>
-          </view>
+      </view>
+
+      <view class="menu-section">
+        <view class="section-title">
+          <view class="title-bar"></view>
+          <text class="title-text">帮助与支持</text>
         </view>
-        <view class="list-cell list-cell-arrow" @click="handleAbout">
-          <view class="menu-item-box">
-            <view class="iconfont icon-aixin menu-icon"></view>
-            <view>关于我们</view>
+        <view class="menu-card">
+          <view class="menu-item" @click="handleHelp">
+            <view class="item-left">
+              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+                <uni-icons type="help" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="menu-text">常见问题</text>
+            </view>
+            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
           </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleToSetting">
-          <view class="menu-item-box">
-            <view class="iconfont icon-setting menu-icon"></view>
-            <view>应用设置</view>
+          <view class="menu-divider"></view>
+          <view class="menu-item" @click="handleAbout">
+            <view class="item-left">
+              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+                <uni-icons type="info" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="menu-text">关于我们</text>
+            </view>
+            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
           </view>
         </view>
       </view>
@@ -86,20 +127,15 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import config from '@/config.js'
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore()
 const name = userStore.name;
+const userId = computed(() => userStore.userId || '');
 const version = config.appInfo.version;
 
-const avatar = ref(window.location.protocol + '//' + window.location.hostname + ':' + window.location.port+userStore.avatar);
-const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
 const popup = ref(null);
-
-uni.$on('refresh', () => {
-  avatar.value = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port+userStore.avatar;
-})
 function handleToInfo() {
   uni.navigateTo({
     url: '/pages_mine/pages/info/index'
@@ -120,11 +156,6 @@ function handleToLogin() {
     url: '/pages/login'
   });
 };
-function handleToAvatar() {
-  uni.navigateTo({
-    url: '/pages_mine/pages/avatar/index'
-  });
-};
 function handleLogout() {
   popup.value.open();
 };
@@ -186,64 +217,295 @@ function handleUs() {
 
 <style lang="scss">
 page {
-  background-color: #f5f6f7;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: #f5f7fa;
+  min-height: 100%;
+  height: auto;
 }
 
 .mine-container {
   width: 100%;
-  height: 100%;
-
+  background-color: #f5f7fa;
 
   .header-section {
-    padding: 15px 15px 45px 15px;
-    background-color: #3c96f3;
-    color: white;
-
-    .login-tip {
-      font-size: 18px;
-      margin-left: 10px;
+    padding: 40rpx 32rpx 80rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      right: -20%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+      animation: pulse 15s infinite;
     }
-
-    .cu-avatar {
-      border: 2px solid #eaeaea;
-
-      .icon {
-        font-size: 40px;
+    
+    .header-content {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .user-section {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        
+        .avatar-wrapper {
+          position: relative;
+          margin-right: 24rpx;
+          
+          .avatar-gradient {
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 60rpx;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.4);
+            position: relative;
+            overflow: hidden;
+            
+            &::before {
+              content: '';
+              position: absolute;
+              top: -50%;
+              left: -50%;
+              width: 200%;
+              height: 200%;
+              background: conic-gradient(
+                from 0deg,
+                transparent 0deg,
+                rgba(255, 255, 255, 0.3) 90deg,
+                transparent 180deg
+              );
+              animation: rotate 3s linear infinite;
+            }
+            
+            .avatar-inner {
+              width: 112rpx;
+              height: 112rpx;
+              border-radius: 56rpx;
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              position: relative;
+              z-index: 1;
+            }
+          }
+        }
+        
+        .user-details {
+          flex: 1;
+          
+          .login-prompt {
+            display: flex;
+            align-items: center;
+            padding: 16rpx 24rpx;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 40rpx;
+            backdrop-filter: blur(10rpx);
+            
+            .login-text {
+              color: #ffffff;
+              font-size: 28rpx;
+              margin-right: 8rpx;
+            }
+          }
+          
+          .user-name-section {
+            display: flex;
+            align-items: center;
+            margin-bottom: 12rpx;
+            
+            .user-name {
+              color: #ffffff;
+              font-size: 36rpx;
+              font-weight: 600;
+              margin-right: 12rpx;
+            }
+            
+            .user-tag {
+              padding: 4rpx 16rpx;
+              background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
+              border-radius: 20rpx;
+              color: #ffffff;
+              font-size: 20rpx;
+            }
+          }
+          
+          .user-id {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 24rpx;
+          }
+        }
       }
-    }
-
-    .user-info {
-      margin-left: 15px;
-
-      .u_title {
-        font-size: 18px;
-        line-height: 30px;
+      
+      .settings-btn {
+        padding: 16rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 50%;
+        backdrop-filter: blur(10rpx);
       }
     }
   }
 
   .content-section {
+    margin-top: -40rpx;
+    padding: 60rpx 32rpx 32rpx;
     position: relative;
-    top: -50px;
+    z-index: 2;
+    flex: 1;
+    overflow: hidden;
 
-    .mine-actions {
-      margin: 15px 15px;
-      padding: 20px 0px;
-      border-radius: 8px;
-      background-color: white;
-
-      .action-item {
-        .icon {
-          font-size: 28px;
+    .quick-actions {
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+      border-radius: 24rpx;
+      padding: 32rpx 24rpx;
+      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+      display: flex;
+      justify-content: space-around;
+      margin-bottom: 32rpx;
+      
+      .action-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        
+        .action-icon {
+          width: 96rpx;
+          height: 96rpx;
+          border-radius: 24rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 16rpx;
+          box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.12);
+          transition: all 0.3s ease;
+          
+          &:active {
+            transform: scale(0.95);
+          }
         }
-
-        .text {
-          display: block;
-          font-size: 13px;
-          margin: 8px 0px;
+        
+        .action-text {
+          color: #2c3e50;
+          font-size: 24rpx;
+        }
+      }
+    }
+    
+    .menu-section {
+      margin-bottom: 32rpx;
+      
+      .section-title {
+        color: #7f8c8d;
+        font-size: 28rpx;
+        padding: 0 0 20rpx 0;
+        margin-left: 16rpx;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        
+        .title-bar {
+          width: 6rpx;
+          height: 28rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
+        }
+        
+        .title-text {
+          color: #7f8c8d;
+          font-size: 28rpx;
+          font-weight: 600;
+        }
+      }
+      
+      .menu-card {
+        background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+        border-radius: 24rpx;
+        overflow: hidden;
+        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+        
+        .menu-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 32rpx 24rpx;
+          transition: background-color 0.3s ease;
+          
+          &:active {
+            background-color: rgba(0, 0, 0, 0.02);
+          }
+          
+          .item-left {
+            display: flex;
+            align-items: center;
+            
+            .menu-icon-wrapper {
+              width: 64rpx;
+              height: 64rpx;
+              border-radius: 16rpx;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-right: 24rpx;
+              box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+            }
+            
+            .menu-text {
+              color: #2c3e50;
+              font-size: 28rpx;
+            }
+          }
+        }
+        
+        .menu-divider {
+          height: 1rpx;
+          background-color: #e8edf3;
+          margin: 0 24rpx;
         }
       }
     }
   }
 }
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    transform: scale(1.1) rotate(180deg);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/src/pages/register.vue b/src/pages/register.vue
index 4926070..3ca797a 100644
--- a/src/pages/register.vue
+++ b/src/pages/register.vue
@@ -1,21 +1,60 @@
 <template>
-  <view class="pwd-retrieve-container">
-    <uni-forms ref="form" :value="user" labelWidth="80px">
-      <uni-forms-item name="username" label="账号" required>
-        <uni-easyinput  v-model="user.username" placeholder="请输入账号" />
-      </uni-forms-item>
-      <uni-forms-item name="password" label="密码" required>
-        <uni-easyinput type="password" v-model="user.password" placeholder="请输入密码" />
-      </uni-forms-item>
-      <uni-forms-item name="confirmPassword" label="确认密码" required>
-        <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认密码" />
-      </uni-forms-item>
-      <button type="primary" @click="handleRegister">用户注册</button>
-    </uni-forms>
-    <u-toast ref="uToast"></u-toast>
-    <view class="xieyi text-center"><br>
-      <text class="text-grey1">Copyright © 2024 qdintc All Rights Reserved.</text>
+  <view class="register-container">
+    <view class="background-decoration"></view>
+    
+    <view class="header-section">
+      <text class="page-title">用户注册</text>
+      <text class="page-subtitle">创建你的账号</text>
     </view>
+    
+    <view class="form-section">
+      <view class="form-card">
+        <uni-forms ref="form" :value="user" labelWidth="80px">
+          <uni-forms-item name="username" required label="账号">
+            <uni-easyinput v-model="user.username" placeholder="请输入账号" />
+          </uni-forms-item>
+          <uni-forms-item name="password" required label="密码">
+            <uni-easyinput type="password" v-model="user.password" placeholder="请输入密码" />
+          </uni-forms-item>
+          <uni-forms-item name="confirmPassword" required label="确认密码">
+            <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认密码" />
+          </uni-forms-item>
+        </uni-forms>
+        
+        <view class="tips-card">
+          <view class="tips-header">
+            <uni-icons type="info" size="16" color="#667eea"></uni-icons>
+            <text class="tips-title">密码要求</text>
+          </view>
+          <view class="tips-list">
+            <view class="tip-item">
+              <text class="tip-dot">•</text>
+              <text class="tip-text">账号长度为 6-20 个字符</text>
+            </view>
+            <view class="tip-item">
+              <text class="tip-dot">•</text>
+              <text class="tip-text">密码长度为 6-20 个字符</text>
+            </view>
+            <view class="tip-item">
+              <text class="tip-dot">•</text>
+              <text class="tip-text">两次密码输入必须一致</text>
+            </view>
+          </view>
+        </view>
+        
+        <view class="action-btn">
+          <button class="register-btn" @click="handleRegister">
+            <text class="btn-text">立即注册</text>
+          </button>
+        </view>
+      </view>
+    </view>
+    
+    <view class="footer-section">
+      <text class="copyright-text">Copyright © 2024 qdintc All Rights Reserved.</text>
+    </view>
+    
+    <u-toast ref="uToast"></u-toast>
   </view>
 </template>
 
@@ -27,7 +66,7 @@
         user: {
           username: '',
   password: '',
-  resource: '2',
+  resource: '1',
   confirmPassword: '',
   code: '',
   uuid: ''
@@ -92,13 +131,167 @@ uni.navigateTo({ url: `/pages/login` })
   }
 </script>
 
-<style lang="scss">
-  page {
-    background-color: #ffffff;
-  }
+<style lang="scss" scoped>
+page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100%;
+  height: auto;
+}
 
-  .pwd-retrieve-container {
-    padding-top: 36rpx;
-    padding: 15px;
+.register-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  
+  .background-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
+    pointer-events: none;
   }
+  
+  .header-section {
+    padding: 100rpx 48rpx 60rpx;
+    position: relative;
+    z-index: 1;
+    
+    .page-title {
+      display: block;
+      font-size: 48rpx;
+      font-weight: 700;
+      color: #ffffff;
+      margin-bottom: 12rpx;
+    }
+    
+    .page-subtitle {
+      display: block;
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.8);
+    }
+  }
+  
+  .form-section {
+    flex: 1;
+    padding: 0 48rpx 32rpx;
+    position: relative;
+    z-index: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+    
+    /* 隐藏滚动条 */
+    &::-webkit-scrollbar {
+      display: none !important;
+      width: 0 !important;
+      height: 0 !important;
+    }
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+    
+    .form-card {
+      background: #ffffff;
+      border-radius: 32rpx;
+      padding: 48rpx 40rpx;
+      box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
+    }
+  }
+  
+  .tips-card {
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
+    border-radius: 20rpx;
+    padding: 24rpx;
+    margin-top: 32rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.2);
+  }
+  
+  .tips-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16rpx;
+    
+    .tips-title {
+      color: #667eea;
+      font-size: 26rpx;
+      font-weight: 600;
+      margin-left: 8rpx;
+    }
+  }
+  
+  .tips-list {
+    .tip-item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 8rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .tip-dot {
+        color: #667eea;
+        font-size: 24rpx;
+        margin-right: 8rpx;
+        line-height: 36rpx;
+      }
+      
+      .tip-text {
+        flex: 1;
+        color: #606266;
+        font-size: 24rpx;
+        line-height: 36rpx;
+      }
+    }
+  }
+  
+  .action-btn {
+    margin-top: 48rpx;
+    
+    .register-btn {
+      width: 100%;
+      height: 96rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 48rpx;
+      border: none;
+      box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.4);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s ease;
+      
+      &::after {
+        border: none;
+      }
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+      }
+      
+      .btn-text {
+        color: #ffffff;
+        font-size: 32rpx;
+        font-weight: 600;
+      }
+    }
+  }
+  
+  .footer-section {
+    padding: 60rpx 48rpx 80rpx;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+    
+    .copyright-text {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 24rpx;
+    }
+  }
+}
 </style>
diff --git a/src/pages/statistic/bill/creditBillAnalysis/index.vue b/src/pages/statistic/bill/creditBillAnalysis/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue b/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue b/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/statistic/bill/creditRecordAnalysis/index.vue b/src/pages/statistic/bill/creditRecordAnalysis/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/statistic/bill/futuresAnalysis/index.vue b/src/pages/statistic/bill/futuresAnalysis/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/statistic/bill/investAnalysis/index.vue b/src/pages/statistic/bill/investAnalysis/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/statistic/bill/onlineLendAnalysis/index.vue b/src/pages/statistic/bill/onlineLendAnalysis/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue b/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/statistic/bill/stocksAnalysis/index.vue b/src/pages/statistic/bill/stocksAnalysis/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages_mine/pages/about/index.vue b/src/pages_mine/pages/about/index.vue
index 3d62934..5de0b82 100644
--- a/src/pages_mine/pages/about/index.vue
+++ b/src/pages_mine/pages/about/index.vue
@@ -1,71 +1,226 @@
 <template>
   <view class="about-container">
-    <view class="header-section text-center">
-      <image style="width: 150rpx;height: 150rpx;" src="/static/logo.png" mode="widthFix">
-      </image>
-      <uni-title type="h2" title="智聪网络科技"></uni-title>
+    <view class="header-section">
+      <view class="logo-wrapper">
+        <image class="logo-image" src="/static/logo.png" mode="aspectFit"></image>
+        <view class="logo-shine"></view>
+      </view>
+      <text class="app-name">智聪网络科技</text>
+      <text class="app-slogan">专业的健康管理工具</text>
     </view>
 
-    <view class="content-section">
-      <view class="menu-list">
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>版本信息</view>
-            <view class="text-right">v{{version}}</view>
+    <view class="info-card">
+      <view class="info-item" v-for="(item, index) in infoList" :key="index">
+        <view class="item-left">
+          <view class="info-icon" :style="{ background: item.gradient }">
+            <uni-icons :type="item.icon" size="20" color="#ffffff"></uni-icons>
           </view>
+          <text class="item-label">{{ item.label }}</text>
         </view>
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>官方邮箱</view>
-            <view class="text-right">qdintc@126com</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>服务热线</view>
-            <view class="text-right">17753252359</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>公司网站</view>
-            <view class="text-right">
-              <uni-link :href="url" :text="url" showUnderLine="false"></uni-link>
-            </view>
-          </view>
+        <view class="item-right">
+          <uni-link v-if="item.isLink" :href="item.value" :text="item.displayText" showUnderLine="false" color="#667eea"></uni-link>
+          <text v-else class="item-value">{{ item.value }}</text>
         </view>
       </view>
     </view>
 
     <view class="copyright">
-      <view>Copyright &copy; 2025 智聪网络科技 All Rights Reserved.</view>
+      <text class="copyright-text">Copyright &copy; 2025 智聪网络科技</text>
+      <text class="copyright-text">All Rights Reserved.</text>
     </view>
   </view>
 </template>
 
 <script setup>
-	import config from '@/config.js'
-	const url=config.appInfo.site_url;
-	const version=config.appInfo.version;
+import { computed } from 'vue'
+import config from '@/config.js'
 
+const url = config.appInfo.site_url
+const version = config.appInfo.version
+
+const infoList = computed(() => [
+  {
+    icon: 'flag',
+    label: '版本信息',
+    value: `v${version}`,
+    displayText: `v${version}`,
+    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    isLink: false
+  },
+  {
+    icon: 'email',
+    label: '官方邮箱',
+    value: 'qdintc@126.com',
+    displayText: 'qdintc@126.com',
+    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+    isLink: false
+  },
+  {
+    icon: 'phone',
+    label: '服务热线',
+    value: '17753252359',
+    displayText: '17753252359',
+    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+    isLink: false
+  },
+  {
+    icon: 'home',
+    label: '公司网站',
+    value: url,
+    displayText: url,
+    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
+    isLink: true
+  }
+])
+  
 </script>
 
-<style lang="scss">
-  page {
-    background-color: #f8f8f8;
-  }
+<style lang="scss" scoped>
+page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: #f5f7fa;
+  min-height: 100%;
+  height: auto;
+}
 
-  .copyright {
-    margin-top: 50rpx;
-    text-align: center;
-    line-height: 60rpx;
-    color: #999;
-  }
+.about-container {
+  display: flex;
+  flex-direction: column;
+}
 
-  .header-section {
+.header-section {
+  padding: 60rpx 0 50rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -20%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+    animation: pulse 15s infinite;
+  }
+  
+  .logo-wrapper {
+    position: relative;
+    margin-bottom: 24rpx;
+    
+    .logo-image {
+      width: 140rpx;
+      height: 140rpx;
+      border-radius: 28rpx;
+      box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.2);
+      background: #ffffff;
+      padding: 16rpx;
+    }
+    
+    .logo-shine {
+      position: absolute;
+      top: -10rpx;
+      right: -10rpx;
+      width: 40rpx;
+      height: 40rpx;
+      background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
+      border-radius: 20rpx;
+      border: 4rpx solid #667eea;
+    }
+  }
+  
+  .app-name {
+    color: #ffffff;
+    font-size: 36rpx;
+    font-weight: 700;
+    margin-bottom: 8rpx;
+  }
+  
+  .app-slogan {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 26rpx;
+  }
+}
+
+.info-card {
+  margin: 10rpx 24rpx 24rpx;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 20rpx;
+  padding: 4rpx 0;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+  flex: 1;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx 20rpx;
+  
+  &:not(:last-child) {
+    border-bottom: 1rpx solid #e8edf3;
+  }
+  
+  .item-left {
     display: flex;
-    padding: 30rpx 0 0;
-    flex-direction: column;
     align-items: center;
+    
+    .info-icon {
+      width: 56rpx;
+      height: 56rpx;
+      border-radius: 14rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 20rpx;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+      flex-shrink: 0;
+    }
+    
+    .item-label {
+      color: #606266;
+      font-size: 26rpx;
+      font-weight: 500;
+    }
   }
+  
+  .item-right {
+    flex: 1;
+    text-align: right;
+    
+    .item-value {
+      color: #303133;
+      font-size: 26rpx;
+    }
+  }
+}
+
+.copyright {
+  padding: 32rpx 24rpx 50rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6rpx;
+  
+  .copyright-text {
+    color: #909399;
+    font-size: 24rpx;
+    line-height: 36rpx;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    transform: scale(1.1) rotate(180deg);
+  }
+}
 </style>
diff --git a/src/pages_mine/pages/avatar/index.vue b/src/pages_mine/pages/avatar/index.vue
index 2b97713..b4a7f3a 100644
--- a/src/pages_mine/pages/avatar/index.vue
+++ b/src/pages_mine/pages/avatar/index.vue
@@ -2,6 +2,10 @@
 	<view class="container">
 		<view class="page-body uni-content-info">
 			<view class='cropper-content'>
+				<view class="preview-tip">
+					<uni-icons type="info" size="16" color="#667eea"></uni-icons>
+					<text class="tip-text">拖动裁剪框选择头像区域</text>
+				</view>
 				<view v-if="isShowImg" class="uni-corpper"
 					:style="'width:' + cropperInitW + 'px;height:' + cropperInitH + 'px;background:#000'">
 					<view class="uni-corpper-content"
@@ -38,10 +42,20 @@
 						</view>
 					</view>
 				</view>
+				<view v-else class="empty-state">
+					<uni-icons type="images" size="80" color="#ddd"></uni-icons>
+					<text class="empty-text">请选择头像</text>
+				</view>
 			</view>
 			<view class='cropper-config'>
-				<button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button>
-				<button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button>
+				<button class="choose-btn" @click="getImage">
+					<uni-icons type="images" size="20" color="#667eea"></uni-icons>
+					<text class="btn-text">选择头像</text>
+				</button>
+				<button class="submit-btn" @click="getImageInfo">
+					<uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
+					<text class="btn-text">确认提交</text>
+				</button>
 			</view>
 			<canvas canvas-id="myCanvas"
 				:style="'position:absolute;border: 1px solid red; width:' + imageW + 'px;height:' + imageH + 'px;top:-9999px;left:-9999px;'"></canvas>
@@ -348,16 +362,124 @@ export default {
 }
 </script>
 
-<style>
-/* pages/uni-cropper/index.wxss */
+<style scoped>
+page {
+	background-color: #f5f7fa;
+}
+
+.container {
+	min-height: 100vh;
+	background-color: #f5f7fa;
+}
+
+.page-body {
+	padding: 24rpx;
+}
+
+.preview-tip {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 20rpx;
+	margin-bottom: 16rpx;
+	background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
+	border-radius: 16rpx;
+	border: 2rpx solid rgba(102, 126, 234, 0.2);
+	gap: 8rpx;
+}
+
+.tip-text {
+	color: #667eea;
+	font-size: 24rpx;
+}
+
+.empty-state {
+	width: 100%;
+	height: 750rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+	border-radius: 24rpx;
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+}
+
+.empty-text {
+	color: #999;
+	font-size: 26rpx;
+	margin-top: 24rpx;
+}
 
 .cropper-config {
-	padding: 20rpx 40rpx;
+	padding: 32rpx 0;
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.choose-btn {
+	width: 100%;
+	height: 88rpx;
+	background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+	border-radius: 44rpx;
+	border: 2rpx solid #667eea;
+	box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.15);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 12rpx;
+	transition: all 0.3s ease;
+}
+
+.choose-btn::after {
+	border: none;
+}
+
+.choose-btn:active {
+	transform: scale(0.98);
+	background: linear-gradient(135deg, #f8f9fb 0%, #eff1f5 100%);
+}
+
+.choose-btn .btn-text {
+	color: #667eea;
+	font-size: 32rpx;
+	font-weight: 600;
+}
+
+.submit-btn {
+	width: 100%;
+	height: 88rpx;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	border-radius: 44rpx;
+	border: none;
+	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 12rpx;
+	transition: all 0.3s ease;
+}
+
+.submit-btn::after {
+	border: none;
+}
+
+.submit-btn:active {
+	transform: scale(0.98);
+	box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+}
+
+.submit-btn .btn-text {
+	color: #ffffff;
+	font-size: 32rpx;
+	font-weight: 600;
 }
 
 .cropper-content {
 	min-height: 750rpx;
 	width: 100%;
+	margin-bottom: 8rpx;
 }
 
 .uni-corpper {
@@ -370,6 +492,8 @@ export default {
 	-webkit-tap-highlight-color: transparent;
 	-webkit-touch-callout: none;
 	box-sizing: border-box;
+	border-radius: 24rpx;
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
 }
 
 .uni-corpper-content {
@@ -415,8 +539,9 @@ export default {
 	width: 100%;
 	height: 100%;
 	overflow: visible;
-	outline: 1rpx solid #69f;
-	outline-color: rgba(102, 153, 255, .75)
+	outline: 2rpx solid #667eea;
+	outline-color: rgba(102, 126, 234, 0.9);
+	border-radius: 12rpx;
 }
 
 /* 横向虚线 */
@@ -586,12 +711,14 @@ export default {
 	-webkit-transform: translate3d(-50%, -50%, 0);
 	transform: translate3d(-50%, -50%, 0);
 	cursor: n-resize;
-	width: 36rpx;
-	height: 36rpx;
-	background-color: #69f;
+	width: 40rpx;
+	height: 40rpx;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 	position: absolute;
 	z-index: 1112;
 	opacity: 1;
+	border-radius: 50%;
+	box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
 }
 
 .point-b {
diff --git a/src/pages_mine/pages/help/index.vue b/src/pages_mine/pages/help/index.vue
index 9ed68fc..4cbf0ae 100644
--- a/src/pages_mine/pages/help/index.vue
+++ b/src/pages_mine/pages/help/index.vue
@@ -1,15 +1,24 @@
 <template>
   <view class="help-container">
-    <view v-for="(item, findex) in list" :key="findex" :title="item.title" class="list-title">
-      <view class="text-title">
-        <view :class="item.icon"></view>{{ item.title }}
+    <view v-for="(item, findex) in list" :key="findex" class="help-section">
+      <view class="section-header">
+        <view class="header-icon" :style="{ background: findex === 0 ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' }">
+          <uni-icons :type="findex === 0 ? 'help' : 'info'" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <text class="section-title">{{ item.title }}</text>
       </view>
-      <view class="childList">
-        <view v-for="(child, zindex) in item.childList" :key="zindex" class="question" hover-class="hover"
-         >
-          <view class="text-item">{{ child.title }}</view>
-          <view class="text-item">{{ child.content }}</view>
-          <view class="line" v-if="zindex !== item.childList.length - 1"></view>
+      
+      <view class="qa-card">
+        <view v-for="(child, zindex) in item.childList" :key="zindex" class="qa-item">
+          <view class="question-row">
+            <view class="q-badge">Q</view>
+            <text class="question-text">{{ child.title }}</text>
+          </view>
+          <view class="answer-row">
+            <view class="a-badge">A</view>
+            <text class="answer-text">{{ child.content }}</text>
+          </view>
+          <view class="divider" v-if="zindex !== item.childList.length - 1"></view>
         </view>
       </view>
     </view>
@@ -20,7 +29,6 @@
 	import { ref } from "vue";
 	
 	const list =ref([{
-            icon: 'iconfont icon-user',
             title: '智聪网络科技问题',
             childList: [{
               title: '智聪网络科技平台免费吗？',
@@ -34,7 +42,6 @@
             }]
           },
           {
-            icon: 'iconfont icon-help',
             title: '其他问题',
             childList: [{
               title: '如何退出登录？',
@@ -57,51 +64,132 @@
 </script>
 
 <style lang="scss" scoped>
-  page {
-    background-color: #f8f8f8;
-  }
+page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: #f5f7fa;
+  min-height: 100%;
+  height: auto;
+}
 
-  .help-container {
-    margin-bottom: 100rpx;
-    padding: 30rpx;
+.help-container {
+  padding: 24rpx;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  
+  /* 隐藏滚动条 */
+  &::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
   }
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
 
-  .list-title {
-    margin-bottom: 30rpx;
+.help-section {
+  margin-bottom: 24rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
   }
+}
 
-  .childList {
-    background: #ffffff;
-    box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
-    border-radius: 16rpx;
-    margin-top: 10rpx;
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+  
+  .header-icon {
+    width: 52rpx;
+    height: 52rpx;
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
   }
-
-  .line {
-    width: 100%;
-    height: 1rpx;
-    background-color: #F5F5F5;
-  }
-
-  .text-title {
+  
+  .section-title {
     color: #303133;
-    font-size: 32rpx;
-    font-weight: bold;
-    margin-left: 10rpx;
-
-    .iconfont {
-      font-size: 16px;
-      margin-right: 10rpx;
-    }
+    font-size: 30rpx;
+    font-weight: 600;
   }
+}
 
-  .text-item {
-    font-size: 28rpx;
-    padding: 24rpx;
+.qa-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 20rpx;
+  padding: 12rpx 0;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+}
+
+.qa-item {
+  padding: 20rpx;
+}
+
+.question-row {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 12rpx;
+  
+  .q-badge {
+    width: 36rpx;
+    height: 36rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    font-size: 22rpx;
+    font-weight: 600;
+    margin-right: 12rpx;
+    flex-shrink: 0;
   }
+  
+  .question-text {
+    flex: 1;
+    color: #303133;
+    font-size: 26rpx;
+    font-weight: 500;
+    line-height: 36rpx;
+  }
+}
 
-  .question {
+.answer-row {
+  display: flex;
+  align-items: flex-start;
+  
+  .a-badge {
+    width: 36rpx;
+    height: 36rpx;
+    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    font-size: 22rpx;
+    font-weight: 600;
+    margin-right: 12rpx;
+    flex-shrink: 0;
+  }
+  
+  .answer-text {
+    flex: 1;
     color: #606266;
-    font-size: 28rpx;
+    font-size: 24rpx;
+    line-height: 36rpx;
   }
+}
+
+.divider {
+  height: 1rpx;
+  background: linear-gradient(90deg, transparent, #e8edf3 20%, #e8edf3 80%, transparent);
+  margin: 20rpx 0;
+}
 </style>
diff --git a/src/pages_mine/pages/info/edit.vue b/src/pages_mine/pages/info/edit.vue
index 5ec9b7b..2af6c14 100644
--- a/src/pages_mine/pages/info/edit.vue
+++ b/src/pages_mine/pages/info/edit.vue
@@ -1,6 +1,6 @@
 <template>
-  <view class="container">
-    <view class="example">
+  <view class="edit-container">
+    <view class="form-card">
       <uni-forms ref="form" :model="user" labelWidth="80px">
         <uni-forms-item label="用户昵称" name="nickName">
           <uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
@@ -15,7 +15,12 @@
           <uni-data-checkbox v-model="user.sex" :localdata="sexs" />
         </uni-forms-item>
       </uni-forms>
-      <button type="primary" @click="submit">提交</button>
+    </view>
+    
+    <view class="submit-section">
+      <button class="submit-btn" @click="submit">
+        <text class="btn-text">保存修改</text>
+      </button>
     </view>
   </view>
 </template>
@@ -96,37 +101,52 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 page {
-  background-color: #ffffff;
+  background-color: #f5f7fa;
 }
 
-.example {
-  padding: 15px;
-  background-color: #fff;
+.edit-container {
+  padding: 32rpx;
 }
 
-.segmented-control {
-  margin-bottom: 15px;
+.form-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 24rpx;
+  padding: 32rpx 24rpx;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+  margin-bottom: 32rpx;
 }
 
-.button-group {
-  margin-top: 15px;
-  display: flex;
-  justify-content: space-around;
+.submit-section {
+  padding: 0 8rpx;
 }
 
-.form-item {
+.submit-btn {
+  width: 100%;
+  height: 88rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 44rpx;
+  border: none;
+  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
   display: flex;
   align-items: center;
-  flex: 1;
-}
-
-.button {
-  display: flex;
-  align-items: center;
-  height: 35px;
-  line-height: 35px;
-  margin-left: 10px;
+  justify-content: center;
+  transition: all 0.3s ease;
+  
+  &::after {
+    border: none;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+  }
+  
+  .btn-text {
+    color: #ffffff;
+    font-size: 32rpx;
+    font-weight: 600;
+  }
 }
 </style>
diff --git a/src/pages_mine/pages/info/index.vue b/src/pages_mine/pages/info/index.vue
index a41ff39..8fcbcba 100644
--- a/src/pages_mine/pages/info/index.vue
+++ b/src/pages_mine/pages/info/index.vue
@@ -1,28 +1,55 @@
 <template>
-  <view class="container">
-    <uni-list>
-      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'person-filled' }" title="昵称" :rightText="user.nickName" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'phone-filled' }" title="手机号码"
-        :rightText="user.phonenumber" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'email-filled' }" title="邮箱" :rightText="user.email" />
-      <!-- <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="岗位" :rightText="postGroup" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'staff-filled' }" title="角色" :rightText="roleGroup" /> -->
-      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'calendar-filled' }" title="创建日期"
-        :rightText="user.createTime" />
-    </uni-list>
-
-    <!-- <u-button @click="register()">绑定微信</u-button> -->
+  <view class="profile-container">
+    <view class="profile-card">
+      <view class="info-item" v-for="(item, index) in infoList" :key="index">
+        <view class="item-left">
+          <view class="info-icon" :style="{ background: item.gradient }">
+            <uni-icons :type="item.icon" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <text class="item-label">{{ item.label }}</text>
+        </view>
+        <text class="item-value">{{ item.value }}</text>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup>
 import { getUserProfile } from "@/api/system/user"
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import modal from "@/plugins/modal"
 
 const user = ref({})
 const roleGroup = ref("")
 const postGroup = ref("")
+
+const infoList = computed(() => [
+  {
+    icon: 'person',
+    label: '昵称',
+    value: user.value.nickName || '未设置',
+    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+  },
+  {
+    icon: 'phone',
+    label: '手机号码',
+    value: user.value.phonenumber || '未绑定',
+    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
+  },
+  {
+    icon: 'email',
+    label: '邮箱',
+    value: user.value.email || '未绑定',
+    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
+  },
+  {
+    icon: 'calendar',
+    label: '创建日期',
+    value: user.value.createTime || '-',
+    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
+  }
+])
+
 function getUser() {
   getUserProfile().then(response => {
     user.value = response.data
@@ -41,13 +68,68 @@ function register(){
       modal.closeLoading()
     })
   })
-  
+
 }
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 page {
-  background-color: #ffffff;
+  background-color: #f5f7fa;
+}
+
+.profile-container {
+  padding: 32rpx;
+}
+
+.profile-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 24rpx;
+  padding: 8rpx 0;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32rpx 24rpx;
+  transition: background-color 0.3s ease;
+  
+  &:not(:last-child) {
+    border-bottom: 1rpx solid #e8edf3;
+  }
+  
+  .item-left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    
+    .info-icon {
+      width: 64rpx;
+      height: 64rpx;
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 24rpx;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+      flex-shrink: 0;
+    }
+    
+    .item-label {
+      color: #606266;
+      font-size: 28rpx;
+      font-weight: 500;
+    }
+  }
+  
+  .item-value {
+    color: #303133;
+    font-size: 28rpx;
+    max-width: 400rpx;
+    text-align: right;
+    word-break: break-all;
+  }
 }
 </style>
diff --git a/src/pages_mine/pages/pwd/index.vue b/src/pages_mine/pages/pwd/index.vue
index d0a10c5..72df1a3 100644
--- a/src/pages_mine/pages/pwd/index.vue
+++ b/src/pages_mine/pages/pwd/index.vue
@@ -1,17 +1,45 @@
 <template>
-  <view class="pwd-retrieve-container">
-    <uni-forms ref="form" :value="user" labelWidth="80px">
-      <uni-forms-item name="oldPassword" label="旧密码">
-        <uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
-      </uni-forms-item>
-      <uni-forms-item name="newPassword" label="新密码">
-        <uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
-      </uni-forms-item>
-      <uni-forms-item name="confirmPassword" label="确认密码">
-        <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
-      </uni-forms-item>
-      <button type="primary" @click="submit">提交</button>
-    </uni-forms>
+  <view class="pwd-container">
+    <view class="form-card">
+      <uni-forms ref="form" :value="user" labelWidth="80px">
+        <uni-forms-item name="oldPassword" label="旧密码">
+          <uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
+        </uni-forms-item>
+        <uni-forms-item name="newPassword" label="新密码">
+          <uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
+        </uni-forms-item>
+        <uni-forms-item name="confirmPassword" label="确认密码">
+          <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
+        </uni-forms-item>
+      </uni-forms>
+    </view>
+    
+    <view class="tips-card">
+      <view class="tips-header">
+        <uni-icons type="info" size="18" color="#667eea"></uni-icons>
+        <text class="tips-title">密码要求</text>
+      </view>
+      <view class="tips-list">
+        <view class="tip-item">
+          <text class="tip-dot">•</text>
+          <text class="tip-text">密码长度为 6-20 个字符</text>
+        </view>
+        <view class="tip-item">
+          <text class="tip-dot">•</text>
+          <text class="tip-text">建议使用字母、数字和符号组合</text>
+        </view>
+        <view class="tip-item">
+          <text class="tip-dot">•</text>
+          <text class="tip-text">不要使用容易被猜到的密码</text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="submit-section">
+      <button class="submit-btn" @click="submit">
+        <text class="btn-text">修改密码</text>
+      </button>
+    </view>
   </view>
 </template>
 
@@ -79,13 +107,99 @@
   }
 </script>
 
-<style lang="scss">
-  page {
-    background-color: #ffffff;
-  }
+<style lang="scss" scoped>
+page {
+  background-color: #f5f7fa;
+}
 
-  .pwd-retrieve-container {
-    padding-top: 36rpx;
-    padding: 15px;
+.pwd-container {
+  padding: 32rpx;
+}
+
+.form-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 24rpx;
+  padding: 32rpx 24rpx;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+  margin-bottom: 24rpx;
+}
+
+.tips-card {
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
+  border-radius: 24rpx;
+  padding: 24rpx;
+  margin-bottom: 32rpx;
+  border: 2rpx solid rgba(102, 126, 234, 0.2);
+}
+
+.tips-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+  
+  .tips-title {
+    color: #667eea;
+    font-size: 28rpx;
+    font-weight: 600;
+    margin-left: 8rpx;
   }
+}
+
+.tips-list {
+  .tip-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 8rpx;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .tip-dot {
+      color: #667eea;
+      font-size: 28rpx;
+      margin-right: 8rpx;
+      line-height: 40rpx;
+    }
+    
+    .tip-text {
+      flex: 1;
+      color: #606266;
+      font-size: 24rpx;
+      line-height: 40rpx;
+    }
+  }
+}
+
+.submit-section {
+  padding: 0 8rpx;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 88rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 44rpx;
+  border: none;
+  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  
+  &::after {
+    border: none;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+  }
+  
+  .btn-text {
+    color: #ffffff;
+    font-size: 32rpx;
+    font-weight: 600;
+  }
+}
 </style>
diff --git a/src/pages_mine/pages/setting/index.vue b/src/pages_mine/pages/setting/index.vue
index 1020a99..65465e1 100644
--- a/src/pages_mine/pages/setting/index.vue
+++ b/src/pages_mine/pages/setting/index.vue
@@ -1,33 +1,25 @@
 <template>
-  <view class="setting-container" :style="{ height: `${windowHeight}px` }">
-    <view class="menu-list">
-      <view class="list-cell list-cell-arrow" @click="handleToPwd">
-        <view class="menu-item-box">
-          <view class="iconfont icon-password menu-icon"></view>
-          <view>修改密码</view>
+  <view class="setting-container">
+    <view class="menu-card">
+      <view class="menu-item" @click="handleToPwd">
+        <view class="item-left">
+          <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+            <uni-icons type="locked" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <text class="menu-text">修改密码</text>
         </view>
+        <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
       </view>
-      <!-- <view class="list-cell list-cell-arrow" @click="handleToUpgrade">
-        <view class="menu-item-box">
-          <view class="iconfont icon-refresh menu-icon"></view>
-          <view>检查更新</view>
-        </view>
-      </view> -->
-      <!-- <view class="list-cell list-cell-arrow" @click="handleCleanTmp">
-        <view class="menu-item-box">
-          <view class="iconfont icon-clean menu-icon"></view>
-          <view>清理缓存</view>
-        </view>
-      </view> -->
     </view>
-    <view class="cu-list menu">
-      <view class="cu-item item-box">
-        <view class="content text-center" @click="handleLogout">
-          <text class="text-black">退出登录</text>
-        </view>
-      </view>
+    
+    <view class="logout-section">
+      <button class="logout-btn" @click="handleLogout">
+        <uni-icons type="redo" size="20" color="#f56c6c"></uni-icons>
+        <text class="logout-text">退出登录</text>
+      </button>
     </view>
   </view>
+  
   <view>
     <uni-popup ref="popup" type="dialog">
       <uni-popup-dialog type="info" cancelText="关闭" confirmText="退出" title="通知" content="确定注销并退出系统吗"
@@ -42,7 +34,6 @@ import { ref } from "vue";
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore()
 
-const windowHeight = ref(uni.getSystemInfoSync().windowHeight);
 const popup = ref(null);
 
 function handleToPwd() {
@@ -85,20 +76,85 @@ function dialogClose() {
 </script>
 
 <style lang="scss" scoped>
-.page {
-  background-color: #f8f8f8;
+page {
+  background-color: #f5f7fa;
 }
 
-.item-box {
-  background-color: #FFFFFF;
-  margin: 30rpx;
+.setting-container {
+  padding: 32rpx;
+}
+
+.menu-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 24rpx;
+  overflow: hidden;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+  margin-bottom: 32rpx;
+}
+
+.menu-item {
   display: flex;
-  flex-direction: row;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  padding: 10rpx;
-  border-radius: 8rpx;
-  color: #303133;
-  font-size: 32rpx;
+  padding: 32rpx 24rpx;
+  transition: background-color 0.3s ease;
+  
+  &:active {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+  
+  .item-left {
+    display: flex;
+    align-items: center;
+    
+    .menu-icon-wrapper {
+      width: 64rpx;
+      height: 64rpx;
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 24rpx;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+    }
+    
+    .menu-text {
+      color: #2c3e50;
+      font-size: 28rpx;
+    }
+  }
+}
+
+.logout-section {
+  padding: 0 8rpx;
+}
+
+.logout-btn {
+  width: 100%;
+  height: 88rpx;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 44rpx;
+  border: 2rpx solid #f56c6c;
+  box-shadow: 0 4rpx 16rpx rgba(245, 108, 108, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  transition: all 0.3s ease;
+  
+  &::after {
+    border: none;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
+  }
+  
+  .logout-text {
+    color: #f56c6c;
+    font-size: 32rpx;
+    font-weight: 600;
+  }
 }
 </style>