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 8b4221d..d703eca 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.json b/src/pages.json
index b299ac0..37dc23e 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -689,7 +689,7 @@
     {
       "path": "pages/work/accounts/investTransferRecord/details",
       "style": {
-        "navigationBarTitleText": "信投资账户记账详情"
+        "navigationBarTitleText": "投资账户记账详情"
       }
     }
     ,
diff --git a/src/pages/calendar/list.vue b/src/pages/calendar/list.vue
index ba2a6db..c9f0ae7 100644
--- a/src/pages/calendar/list.vue
+++ b/src/pages/calendar/list.vue
@@ -437,11 +437,11 @@ page {
       }
 
       .info-label {
-        font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+         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;
       }
@@ -467,9 +467,7 @@ page {
         color: #666;
         line-height: 1.4;
         flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        word-break: break-all;
       }
     }
   }
diff --git a/src/pages/work/accounts/accountDealRecord/addEdit.vue b/src/pages/work/accounts/accountDealRecord/addEdit.vue
index 823806c..c27aeef 100644
--- a/src/pages/work/accounts/accountDealRecord/addEdit.vue
+++ b/src/pages/work/accounts/accountDealRecord/addEdit.vue
@@ -479,11 +479,6 @@ getDicts('deal_category').then(result => {
   </script>
   
   <style lang="scss" scoped>
-.container {
-  background: #f5f7fa;
-  min-height: 100vh;
-}
-
 .section {
   margin: 24rpx;
   padding: 0;
diff --git a/src/pages/work/accounts/accountDealRecord/details.vue b/src/pages/work/accounts/accountDealRecord/details.vue
index 831793d..08b5fbe 100644
--- a/src/pages/work/accounts/accountDealRecord/details.vue
+++ b/src/pages/work/accounts/accountDealRecord/details.vue
@@ -47,7 +47,7 @@
                 <text class="item-value">{{ detailInfo.childCategoryName }}</text>
               </view>
               <view class="list-item">
-                <text class="item-label">当前余额</text>
+                <text class="item-label">余额</text>
                 <text class="item-value orange">{{ detailInfo.currentBalance }}元</text>
               </view>
       
diff --git a/src/pages/work/accounts/accountDealRecord/list.vue b/src/pages/work/accounts/accountDealRecord/list.vue
index 684bf3a..332ad52 100644
--- a/src/pages/work/accounts/accountDealRecord/list.vue
+++ b/src/pages/work/accounts/accountDealRecord/list.vue
@@ -105,11 +105,11 @@
           
           <view class="card-body">
             <view class="info-row">
-              <view class="info-item">
+              <view class="info-item info-item-balance">
                 <text class="info-label">余额</text>
-                <text class="info-value balance">{{ item.currentBalance }}元</text>
+                <text class="info-value balance-color">{{ item.currentBalance }}元</text>
               </view>
-              <view class="info-item" v-if="item.remark">
+              <view class="info-item info-item-remark" v-if="item.remark">
                 <text class="info-label">备注</text>
                 <text class="info-remark">{{ item.remark }}</text>
               </view>
@@ -743,55 +743,59 @@ page {
 
     .info-row {
       display: flex;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
       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-balance {
+          flex-shrink: 0;
+        }
+        
+        &.info-item-remark {
+          flex: 1;
+        }
 
         .info-label {
-          font-size: 24rpx;
-          color: #999;
-          line-height: 1.2;
-          padding: 4rpx 12rpx;
-          background: rgba(102, 126, 234, 0.08);
-          border-radius: 8rpx;
-          align-self: flex-start;
+           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;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          
-          &.balance {
-            color: #fa8c16;
-            font-weight: 600;
-          }
-        }
+       font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 1.2;
         
-        .info-remark {
-          font-size: 26rpx;
-          color: #333;
-          font-weight: 500;
-          flex: 1;
-          line-height: 1.5;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
+        &.balance-color {
+          color: #fa8c16;
+          font-weight: 600;
         }
       }
+
+      .info-remark {
+        font-size: 24rpx;
+        color: #666;
+        line-height: 1.4;
+        flex: 1;
+        word-break: break-all;
+      }
+      }
     }
   }
 
diff --git a/src/pages/work/accounts/accounts/list.vue b/src/pages/work/accounts/accounts/list.vue
index e689649..a05fb70 100644
--- a/src/pages/work/accounts/accounts/list.vue
+++ b/src/pages/work/accounts/accounts/list.vue
@@ -46,7 +46,8 @@
                 <uni-icons :type="item.type === '1' ? 'wallet-filled' : 'vip-filled'" size="20" color="#ffffff"></uni-icons>
               </view>
               <view class="card-info">
-                <text class="card-name">{{ item.name }}<text class="card-code" v-if="item.code">({{ item.code }})</text></text>
+                <text class="card-name">{{ item.name }}</text>
+                <text class="card-code" v-if="item.code">{{ item.code }}</text>
               </view>
             </view>
             <view class="balance-section">
@@ -66,7 +67,7 @@
               </view>
               <view class="info-item">
                 <text class="info-label">可用额度</text>
-                <text class="info-value">{{ item.availableLimit }}</text>
+                <text class="info-value orange">{{ item.availableLimit }}</text>
               </view>
               <view class="info-item" v-if="item.type === '1'">
                 <text class="info-label">储蓄卡类型</text>
@@ -555,7 +556,9 @@ page {
     .card-info {
       flex: 1;
       min-width: 0;
-      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
       
       .card-name {
         color: #ffffff;
@@ -565,14 +568,13 @@ page {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        display: block;
-        
-        .card-code {
-          color: rgba(255, 255, 255, 0.85);
-          font-size: 22rpx;
-          font-weight: 400;
-          margin-left: 8rpx;
-        }
+      }
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 22rpx;
+        font-weight: 400;
+        line-height: 1;
       }
     }
     
@@ -627,11 +629,11 @@ page {
       }
 
       .info-label {
-        font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+         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;
       }
diff --git a/src/pages/work/accounts/creditTransferRecord/addEdit.vue b/src/pages/work/accounts/creditTransferRecord/addEdit.vue
index 4884dad..8c92a4a 100644
--- a/src/pages/work/accounts/creditTransferRecord/addEdit.vue
+++ b/src/pages/work/accounts/creditTransferRecord/addEdit.vue
@@ -9,6 +9,7 @@
 		>
 		</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' }">
@@ -284,24 +285,56 @@ function handleCreditCard() {
   </script>
   
   <style lang="scss" scoped>
-  .container {
-    background: #f5f7fa;
-    min-height: 100vh;
-  }
-  
   .section {
     margin: 24rpx;
-    padding: 32rpx;
+    padding: 0;
     background-color: #fff;
     border-radius: 16rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+    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-top: 20rpx;
+      padding: 24rpx;
   
       .form-btn {
-        padding-top: 32rpx;
+        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/work/accounts/creditTransferRecord/details.vue b/src/pages/work/accounts/creditTransferRecord/details.vue
index f92e535..419ebc3 100644
--- a/src/pages/work/accounts/creditTransferRecord/details.vue
+++ b/src/pages/work/accounts/creditTransferRecord/details.vue
@@ -14,21 +14,22 @@
             <uni-icons type="wallet-filled" size="28" color="#ffffff"></uni-icons>
           </view>
           <view class="header-info">
-            <text class="card-name">{{ detailInfo.inAccountName }}</text>
-            <text class="type-text">{{ detailInfo.dealType }}</text>
-          </view>
-          <view class="amount-section">
-            <text class="amount-label">还款金额</text>
-            <text class="amount-value">{{ detailInfo.amount }}元</text>
+            <text class="card-name">{{ detailInfo.name }}</text>
+            <view class="info-row">
+              <text class="type-text">{{ detailInfo.dealType }}</text>
+              <text class="amount-value">{{ detailInfo.amount }}元</text>
+            </view>
           </view>
         </view>
         
         <view class="info-card">
           <view class="card-title">
-            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
             <text>还款信息</text>
           </view>
-          
+           <view class="detail-row">
+            <text class="detail-label">信用卡</text>
+            <text class="detail-value">{{ detailInfo.inAccountName }}</text>
+          </view>
           <view class="detail-row">
             <text class="detail-label">储蓄账户</text>
             <text class="detail-value">{{ detailInfo.outAccountName }}</text>
@@ -80,11 +81,11 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .container {
-    background: #f5f7fa;
-    min-height: 100vh;
+  page {
+    overflow: hidden;
   }
   
+  
   .section {
     margin: 24rpx;
     display: flex;
@@ -99,7 +100,7 @@ onLoad((option) => {
     padding: 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 16rpx;
-    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+    box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.25);
   
     .header-icon {
       width: 48rpx;
@@ -116,11 +117,11 @@ onLoad((option) => {
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 6rpx;
+      gap: 8rpx;
       min-width: 0;
   
       .card-name {
-        font-size: 28rpx;
+        font-size: 29rpx;
         font-weight: 600;
         color: #ffffff;
         line-height: 1.2;
@@ -128,29 +129,21 @@ onLoad((option) => {
         text-overflow: ellipsis;
         white-space: nowrap;
       }
+      
+      .info-row {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 12rpx;
+      }
   
       .type-text {
-        font-size: 22rpx;
+        font-size: 26rpx;
         color: rgba(255, 255, 255, 0.85);
-        font-weight: 400;
+        font-weight: 500;
         line-height: 1;
       }
-    }
-  
-    .amount-section {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      gap: 6rpx;
-      flex-shrink: 0;
-  
-      .amount-label {
-        font-size: 20rpx;
-        color: rgba(255, 255, 255, 0.7);
-        font-weight: 400;
-        line-height: 1;
-      }
-  
+      
       .amount-value {
         font-size: 32rpx;
         font-weight: 700;
@@ -164,7 +157,7 @@ onLoad((option) => {
     padding: 32rpx;
     background-color: #fff;
     border-radius: 16rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
   
     .card-title {
       display: flex;
@@ -173,6 +166,18 @@ onLoad((option) => {
       padding-bottom: 24rpx;
       margin-bottom: 24rpx;
       border-bottom: 2rpx solid #f0f0f0;
+      position: relative;
+      padding-left: 20rpx;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 6rpx;
+        height: 32rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 3rpx;
+      }
   
       text {
         font-size: 30rpx;
diff --git a/src/pages/work/accounts/creditTransferRecord/list.vue b/src/pages/work/accounts/creditTransferRecord/list.vue
index 66f0fce..6486161 100644
--- a/src/pages/work/accounts/creditTransferRecord/list.vue
+++ b/src/pages/work/accounts/creditTransferRecord/list.vue
@@ -1,26 +1,24 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.creditCardName" border="false" type="select"  @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
-          <text>新增</text>
-        </view>
-       </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="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></u-icon>
+    <view class="search-view">
+      <u-input v-model="queryParams.creditCardName" border="false" type="select"  @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
+        suffixIconStyle="color: #909399" class="search-input">
+      </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-view">
+      <u-input v-model="queryParams.time" border="false" type="select" readonly placeholder="请选择还款时间" suffixIcon="calendar"
+        suffixIconStyle="color: #909399" class="search-input">
+      </u-input>
+      <view class="filter-btn" @click="filterPanel = !filterPanel">
+        <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+        <text>筛选</text>
+      </view>
          
-        <u-transition :show="filterPanel" mode="fade">
+      <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>
@@ -79,7 +77,6 @@
           </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)">
@@ -331,6 +328,14 @@ function dictStr(val, arr) {
 </script>
 
 <style lang="scss" scoped>
+page {
+  overflow: hidden;
+}
+
+.container {
+  background-color: #f5f7fa;
+}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -346,16 +351,18 @@ function dictStr(val, arr) {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
   }
   
   .add-btn {
@@ -363,22 +370,53 @@ function dictStr(val, arr) {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
       font-weight: 600;
     }
+    
+    uni-icons {
+      color: #667eea;
+    }
+  }
+  
+  .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 {
@@ -397,24 +435,64 @@ function dictStr(val, arr) {
         color: #2c3e50;
         font-size: 32rpx;
         font-weight: 600;
-        padding: 32rpx 0 24rpx;
+        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;
+        }
       }
 
       .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 {
diff --git a/src/pages/work/accounts/debitTransferRecord/addEdit.vue b/src/pages/work/accounts/debitTransferRecord/addEdit.vue
index ad48d69..90aa534 100644
--- a/src/pages/work/accounts/debitTransferRecord/addEdit.vue
+++ b/src/pages/work/accounts/debitTransferRecord/addEdit.vue
@@ -1,14 +1,13 @@
 <template>
-    <view class="container">
+    <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
+			leftIconColor="#333333"
 			:title="title"
-			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
-			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</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' }">
@@ -36,8 +35,7 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"
-              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 12rpx; font-size: 32rpx; font-weight: 600; height: 88rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
+            <u-button type="primary" text="提交" @click="submit"></u-button>
           </view>
         </view>
       </view>
@@ -228,24 +226,61 @@ function handleInAccount() {
   </script>
   
   <style lang="scss" scoped>
-  .container {
-    background: #f5f7fa;
-    min-height: 100vh;
+  page {
+    overflow: hidden;
   }
+  
 
   .section {
     margin: 24rpx;
-    padding: 32rpx;
+    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: 0;
+      padding: 24rpx;
   
       .form-btn {
-        padding-top: 40rpx;
+        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/work/accounts/debitTransferRecord/details.vue b/src/pages/work/accounts/debitTransferRecord/details.vue
index d1aaccc..8350395 100644
--- a/src/pages/work/accounts/debitTransferRecord/details.vue
+++ b/src/pages/work/accounts/debitTransferRecord/details.vue
@@ -10,13 +10,10 @@
     </u-navbar>
     
     <view class="header-card">
-      <view class="transfer-icon-wrapper">
-        <view class="transfer-icon">
-          <uni-icons type="redo" size="32" color="#ffffff"></uni-icons>
-        </view>
+      <view class="header-icon">
+        <uni-icons type="redo-filled" size="24" color="#ffffff"></uni-icons>
       </view>
       <text class="transfer-name">{{ detailInfo.name }}</text>
-      <text class="transfer-amount">{{ detailInfo.amount }}元</text>
     </view>
 
     <view class="detail-card">
@@ -35,6 +32,11 @@
         <text class="detail-value">{{ detailInfo.inAccountName }}</text>
       </view>
       
+      <view class="detail-item">
+        <text class="detail-label">转账金额</text>
+        <text class="detail-value amount">{{ detailInfo.amount }}元</text>
+      </view>
+      
       <view class="detail-item">
         <text class="detail-label">转账时间</text>
         <text class="detail-value">{{ detailInfo.createTime }}</text>
@@ -67,52 +69,39 @@ onLoad((option) => {
   
   <style lang="scss" scoped>
   page {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    min-height: 100%;
-    height: auto;
-  }
-
-  .container {
-    background: #f5f7fa;
-    flex: 1;
+    overflow: hidden;
   }
 
   .header-card {
     margin: 24rpx;
-    padding: 48rpx 32rpx;
+    padding: 20rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 16rpx;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+    gap: 16rpx;
+    box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.25);
 
-    .transfer-icon-wrapper {
-      margin-bottom: 24rpx;
-    }
-
-    .transfer-icon {
-      width: 80rpx;
-      height: 80rpx;
+    .header-icon {
+      width: 48rpx;
+      height: 48rpx;
       border-radius: 50%;
-      background: rgba(255, 255, 255, 0.2);
+      background: rgba(255, 255, 255, 0.25);
       display: flex;
       align-items: center;
       justify-content: center;
+      flex-shrink: 0;
     }
 
     .transfer-name {
       font-size: 28rpx;
-      color: rgba(255, 255, 255, 0.9);
-      margin-bottom: 12rpx;
-    }
-
-    .transfer-amount {
-      font-size: 48rpx;
       font-weight: 600;
       color: #ffffff;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
@@ -122,21 +111,25 @@ onLoad((option) => {
     background: #ffffff;
     border-radius: 16rpx;
     overflow: hidden;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
 
     .card-title {
       padding: 24rpx;
-      font-size: 28rpx;
+      font-size: 30rpx;
       font-weight: 600;
-      color: #333;
+      color: #2c3e50;
       display: flex;
       align-items: center;
       gap: 12rpx;
       border-bottom: 1rpx solid #f0f0f0;
+      position: relative;
+      padding-left: 44rpx;
 
       .title-icon {
+        position: absolute;
+        left: 24rpx;
         width: 6rpx;
-        height: 28rpx;
+        height: 32rpx;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         border-radius: 3rpx;
       }
@@ -162,6 +155,11 @@ onLoad((option) => {
         font-size: 26rpx;
         color: #333;
         font-weight: 500;
+        
+        &.amount {
+          color: #fa8c16;
+          font-weight: 600;
+        }
       }
     }
   }
diff --git a/src/pages/work/accounts/debitTransferRecord/list.vue b/src/pages/work/accounts/debitTransferRecord/list.vue
index e5a1a04..ec510b7 100644
--- a/src/pages/work/accounts/debitTransferRecord/list.vue
+++ b/src/pages/work/accounts/debitTransferRecord/list.vue
@@ -1,26 +1,24 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u--input v-model="queryParams.accountName" border="false" placeholder="请选择储蓄账户" class="search-input"
-            @click="handleAccount" suffixIcon="search" suffixIconStyle="color: #909399">
-        </u--input>
-        <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
-          <text>新增</text>
-        </view>
-       </view>
-       </u-sticky>
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u--input v-model="queryParams.time" border="false" readonly placeholder="请选择转账时间" class="search-input"
-          suffixIcon="calendar" suffixIconStyle="color: #909399">
-          </u--input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></u-icon>
+    <view class="search-view">
+      <u--input v-model="queryParams.accountName" border="false" placeholder="请选择储蓄账户" class="search-input"
+        @click="handleAccount" 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-view">
+      <u--input v-model="queryParams.time" border="false" readonly placeholder="请选择转账时间" class="search-input"
+        suffixIcon="calendar" 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>
 
-        <u-transition :show="filterPanel" mode="fade">
+      <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>
@@ -74,7 +72,6 @@
           </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)">
@@ -355,6 +352,14 @@ function dictStr(val, arr) {
 </script>
 
 <style lang="scss" scoped>
+page {
+  overflow: hidden;
+}
+
+.container {
+  background-color: #f5f7fa;
+}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -370,17 +375,18 @@ function dictStr(val, arr) {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
-  margin-bottom: 24rpx;
+  position: sticky;
+  top: 0;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
   }
   
   .add-btn {
@@ -388,22 +394,53 @@ function dictStr(val, arr) {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
       font-weight: 600;
     }
+    
+    uni-icons {
+      color: #667eea;
+    }
+  }
+  
+  .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 {
@@ -423,7 +460,40 @@ function dictStr(val, arr) {
         color: #2c3e50;
         font-size: 32rpx;
         font-weight: 600;
-        padding: 32rpx 0 24rpx;
+        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;
+        }
       }
 
       .state-list {
@@ -596,7 +666,7 @@ function dictStr(val, arr) {
       .amount-value {
         font-size: 32rpx;
         font-weight: 700;
-        color: #ffffff;
+        color: #fa8c16;
         margin-right: 4rpx;
       }
     }
@@ -624,13 +694,13 @@ function dictStr(val, arr) {
       }
 
       .info-label {
-        font-size: 22rpx;
-        color: #999;
-        font-weight: 400;
-        flex-shrink: 0;
-        padding: 4rpx 12rpx;
+        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 {
diff --git a/src/pages/work/accounts/investAccountDeal/addEdit.vue b/src/pages/work/accounts/investAccountDeal/addEdit.vue
index 8e696d2..2efa5a7 100644
--- a/src/pages/work/accounts/investAccountDeal/addEdit.vue
+++ b/src/pages/work/accounts/investAccountDeal/addEdit.vue
@@ -267,26 +267,48 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  page {
+    overflow: hidden;
+  }
+
+  
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
+    padding: 32rpx;
     background-color: #fff;
-    border-radius: 8rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
   
     .section-title {
-      width: 360rpx;
-      color: #333333;
+      color: #2c3e50;
       line-height: 44rpx;
       font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+      font-weight: 600;
+      padding-left: 20rpx;
+      position: relative;
+      margin-bottom: 24rpx;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 6rpx;
+        height: 32rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 3rpx;
+      }
     }
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding-top: 20rpx;
   
       .form-btn {
-        padding-top: 20rpx;
+        padding-top: 32rpx;
+        
+        .u-button {
+          border-radius: 24rpx;
+          box-shadow: 0 6rpx 16rpx rgba(102, 126, 234, 0.25);
+        }
       }
     }
   }
diff --git a/src/pages/work/accounts/investAccountDeal/details.vue b/src/pages/work/accounts/investAccountDeal/details.vue
index f0a0f47..fe0fdf6 100644
--- a/src/pages/work/accounts/investAccountDeal/details.vue
+++ b/src/pages/work/accounts/investAccountDeal/details.vue
@@ -11,36 +11,50 @@
       
       <view class="header-card">
         <view class="header-icon">
-          <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
-        </view>
-        <view class="header-info">
-          <view class="info-row">
-            <text class="label">账户名称</text>
-            <text class="value">{{ detailInfo.accountName }}</text>
-          </view>
-          <view class="info-row">
-            <text class="label">交易类型</text>
-            <text class="value">{{ detailInfo.dealType }}</text>
-          </view>
-          <view class="amount-row">
-            <text class="amount-label">交易金额</text>
-            <text class="amount-value" :class="detailInfo.dealType === '亏损' ? 'loss' : 'profit'">{{ detailInfo.dealType === '亏损' ? '-' : '+' }}{{ detailInfo.amount }}元</text>
-          </view>
+          <uni-icons type="wallet-filled" size="28" color="#ffffff"></uni-icons>
         </view>
+        <text class="account-name">{{ detailInfo.accountName }}</text>
+        <text class="type-text" :class="detailInfo.dealType === '亏损' ? 'loss' : 'profit'">{{ detailInfo.dealType }}</text>
+        <text class="amount-value" :class="detailInfo.dealType === '亏损' ? 'loss' : 'profit'">{{ detailInfo.dealType === '亏损' ? '-' : '+' }}{{ detailInfo.amount }}元</text>
       </view>
       
-      <view class="section">
-        <view class="section-title">
-          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
-          <text>交易信息</text>
+      <view class="detail-card">
+        <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.type }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">交易类别</text>
+                <text class="item-value">{{ detailInfo.dealCategory }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">余额</text>
+                <text class="item-value orange">{{ detailInfo.currentBalance }}元</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">交易时间</text>
+                <text class="item-value">{{ detailInfo.createTime }}</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>
-        <u-cell-group>
-          <u-cell title="账户类型:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.type"></u-cell>
-          <u-cell title="交易类别:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.dealCategory"></u-cell>
-          <u-cell title="当前余额:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.currentBalance"></u-cell>
-          <u-cell title="交易时间:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.createTime"></u-cell>
-          <u-cell title="备注:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.remark || '无'" center> </u-cell>
-        </u-cell-group>
       </view>
    
       <u-toast ref="uToast"></u-toast>
@@ -90,13 +104,20 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  page {
+    overflow: hidden;
+  }
+  
+
+  
 .header-card {
   margin: 24rpx;
   padding: 24rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 16rpx;
-  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+  box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.25);
   display: flex;
+  align-items: center;
   gap: 16rpx;
   
   .header-icon {
@@ -110,79 +131,131 @@ onLoad((option) => {
     flex-shrink: 0;
   }
   
-  .header-info {
+  .account-name {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 1.2;
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 6rpx;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .type-text {
+    font-size: 28rpx;
+    font-weight: 600;
+    line-height: 1;
+    flex-shrink: 0;
+    margin-right: 8rpx;
     
-    .info-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      
-      .label {
-        font-size: 20rpx;
-        color: rgba(255, 255, 255, 0.8);
-        font-weight: 400;
-        line-height: 1;
-      }
-      
-      .value {
-        font-size: 24rpx;
-        color: #ffffff;
-        font-weight: 600;
-        line-height: 1;
-      }
+    &.profit {
+      color: #52c41a;
     }
     
-    .amount-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      padding-top: 8rpx;
-      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
-      
-      .amount-label {
-        font-size: 20rpx;
-        color: rgba(255, 255, 255, 0.8);
-        font-weight: 400;
-        line-height: 1;
-      }
-      
-      .amount-value {
-        font-size: 32rpx;
-        font-weight: 700;
-        line-height: 1;
-        
-        &.profit {
-          color: #52c41a;
-        }
-        
-        &.loss {
-          color: #f5576c;
-        }
-      }
+    &.loss {
+      color: #f5576c;
+    }
+  }
+  
+  .amount-value {
+    font-size: 32rpx;
+    font-weight: 700;
+    line-height: 1;
+    flex-shrink: 0;
+    
+    &.profit {
+      color: #52c41a;
+    }
+    
+    &.loss {
+      color: #f5576c;
     }
   }
 }
 
-.section {
+.detail-card {
   margin: 24rpx;
-  background-color: #fff;
+  background: #ffffff;
   border-radius: 16rpx;
-  overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
 
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
   .section-title {
     display: flex;
     align-items: center;
-    gap: 12rpx;
-    padding: 24rpx;
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #2c3e50;
-    border-bottom: 1rpx solid #f5f7fa;
+    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;
+        }
+      }
+    }
+  }
+  
+  .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/work/accounts/investAccountDeal/list.vue b/src/pages/work/accounts/investAccountDeal/list.vue
index da63fec..5443cfe 100644
--- a/src/pages/work/accounts/investAccountDeal/list.vue
+++ b/src/pages/work/accounts/investAccountDeal/list.vue
@@ -1,26 +1,24 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <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="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
-          <text>新增</text>
-        </view>
-       </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="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></u-icon>
+    <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="add-btn" @click="handleAdd()">
+        <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+        <text>新增</text>
+      </view>
+    </view>
+    <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>
+      <view class="filter-btn" @click="filterPanel = !filterPanel">
+        <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+        <text>筛选</text>
+      </view>
 
-        <u-transition :show="filterPanel" mode="fade">
+      <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>
@@ -78,7 +76,6 @@
           </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)">
@@ -88,18 +85,21 @@
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="account-name">{{ item.accountName }}</text>
+              <text class="time-text">{{ item.createTime }}</text>
             </view>
             <view class="info-row">
-              <text class="time-text">{{ item.createTime }}</text>
-              <text class="type-text">{{ dictStr(item.dealType, dealTypeList) }}</text>
+              <text class="remark-text">{{ item.remark || '无备注' }}</text>
+              <text class="type-text" :class="item.dealType === '2' ? 'loss' : 'profit'">{{ dictStr(item.dealType, dealTypeList) }}</text>
               <text class="amount-value" :class="item.dealType === '2' ? 'loss' : 'profit'">{{ item.dealType === '2' ? '-' : '+' }}{{ item.amount }}元</text>
             </view>
           </view>
           
-          <view class="card-body" v-if="item.remark">
-            <view class="remark-section">
-              <text class="remark-label">备注：</text>
-              <text class="remark-text">{{ item.remark }}</text>
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item info-item-balance">
+                <text class="info-label">余额</text>
+                <text class="info-value balance">{{ item.currentBalance || 0 }}元</text>
+              </view>
             </view>
           </view>
           
@@ -333,6 +333,14 @@ function selectAccountType(item) {
 </script>
 
 <style lang="scss" scoped>
+page {
+  overflow: hidden;
+}
+
+.container {
+  background-color: #f5f7fa;
+}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -348,16 +356,18 @@ function selectAccountType(item) {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
   }
   
   .add-btn {
@@ -365,22 +375,53 @@ function selectAccountType(item) {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
       font-weight: 600;
     }
+    
+    uni-icons {
+      color: #667eea;
+    }
+  }
+  
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    
+    uni-icons {
+      color: #667eea;
+    }
   }
 
   .filter-panel {
@@ -399,24 +440,64 @@ function selectAccountType(item) {
         color: #2c3e50;
         font-size: 32rpx;
         font-weight: 600;
-        padding: 32rpx 0 24rpx;
+        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;
+        }
       }
 
       .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 {
@@ -524,6 +605,15 @@ function selectAccountType(item) {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    
+    .time-text {
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 500;
+      line-height: 1;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
 
     .info-row {
       display: flex;
@@ -533,23 +623,33 @@ function selectAccountType(item) {
       padding-top: 6rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
     }
-
-    .time-text {
-      font-size: 26rpx;
-      color: rgba(255, 255, 255, 0.9);
-      font-weight: 500;
-      line-height: 1;
-      flex-shrink: 0;
-    }
-
-    .type-text {
-      font-size: 24rpx;
-      font-weight: 500;
+    
+    .remark-text {
+      font-size: 22rpx;
       color: rgba(255, 255, 255, 0.85);
-      line-height: 1;
+      font-weight: 400;
+      line-height: 1.3;
       flex: 1;
       min-width: 0;
-      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .type-text {
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: 1;
+      flex-shrink: 0;
+      margin-right: 8rpx;
+      
+      &.profit {
+        color: #52c41a;
+      }
+      
+      &.loss {
+        color: #f5576c;
+      }
     }
 
     .amount-value {
@@ -572,24 +672,45 @@ function selectAccountType(item) {
     padding: 20rpx 24rpx;
     background: #fff;
     border-top: 1rpx solid #f5f7fa;
+  }
+  
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
     
-    .remark-section {
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
-      gap: 8rpx;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
       
-      .remark-label {
-        font-size: 24rpx;
-        color: #999;
-        font-weight: 500;
-        flex-shrink: 0;
+      &.info-item-balance {
+        flex: 0 0 auto;
       }
       
-      .remark-text {
+      .info-label {
         font-size: 24rpx;
-        color: #666;
-        line-height: 1.5;
+        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: #fa8c16;
+        font-weight: 700;
         flex: 1;
-        word-break: break-all;
+        line-height: 1.5;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
   }
diff --git a/src/pages/work/accounts/investTransferRecord/addEdit.vue b/src/pages/work/accounts/investTransferRecord/addEdit.vue
index 7fea616..94c8154 100644
--- a/src/pages/work/accounts/investTransferRecord/addEdit.vue
+++ b/src/pages/work/accounts/investTransferRecord/addEdit.vue
@@ -238,25 +238,54 @@ onLoad((option) => {
   <style lang="scss" scoped>
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
+    padding: 0;
     background-color: #fff;
-    border-radius: 8rpx;
-  
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+    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/work/accounts/investTransferRecord/details.vue b/src/pages/work/accounts/investTransferRecord/details.vue
index 14f057c..072b43a 100644
--- a/src/pages/work/accounts/investTransferRecord/details.vue
+++ b/src/pages/work/accounts/investTransferRecord/details.vue
@@ -11,33 +11,42 @@
       
       <view class="header-card">
         <view class="header-icon">
-          <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
-        </view>
-        <view class="header-info">
-          <view class="info-row">
-            <text class="label">转入账户</text>
-            <text class="value">{{ detailInfo.inAccountName }}</text>
-          </view>
-          <view class="info-row">
-            <text class="label">交易类型</text>
-            <text class="value">{{ detailInfo.dealType }}</text>
-          </view>
-          <view class="amount-row">
-            <text class="amount-label">转账金额</text>
-            <text class="amount-value">{{ detailInfo.amount }}元</text>
-          </view>
+          <uni-icons type="wallet-filled" size="28" color="#ffffff"></uni-icons>
         </view>
+        <text class="account-name">{{ detailInfo.name }}</text>
       </view>
       
-      <view class="section">
-        <view class="section-title">
-          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
-          <text>转账信息</text>
+      <view class="detail-card">
+        <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.inAccountName }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">转出账户</text>
+                <text class="item-value">{{ detailInfo.outAccountName }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">转账金额</text>
+                <text class="item-value" :class="detailInfo.dealTypeValue === '1' ? 'transfer-in' : 'transfer-out'">{{ detailInfo.dealTypeValue === '1' ? '+' : '-' }}{{ detailInfo.amount }}元</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">交易类型</text>
+                <text class="item-value">{{ detailInfo.dealType }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">转账时间</text>
+                <text class="item-value">{{ detailInfo.createTime }}</text>
+              </view>
+            </view>
+          </view>
         </view>
-        <u-cell-group>
-          <u-cell title="转出账户：" titleStyle="font-weight:500; color: #666;" :value="detailInfo.outAccountName"></u-cell>
-          <u-cell title="转账时间:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.createTime"></u-cell>
-        </u-cell-group>
       </view>
    
       <u-toast ref="uToast"></u-toast>
@@ -61,9 +70,11 @@ onLoad((option) => {
   function getInfo() {
     getAccountsTransferRecord(id.value).then(res => {
           detailInfo.value = res.data
+          const dealTypeValue = res.data.dealType
             // 类型
           getDicts('in_out').then(result => {
-         detailInfo.value.dealType=dictStr(detailInfo.value.dealType, result.data)
+         detailInfo.value.dealType=dictStr(dealTypeValue, result.data)
+         detailInfo.value.dealTypeValue = dealTypeValue
       })
         })
   }
@@ -79,13 +90,18 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  page {
+    overflow: hidden;
+  }
+  
 .header-card {
   margin: 24rpx;
   padding: 24rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 16rpx;
-  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+  box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.25);
   display: flex;
+  align-items: center;
   gap: 16rpx;
   
   .header-icon {
@@ -99,72 +115,109 @@ onLoad((option) => {
     flex-shrink: 0;
   }
   
-  .header-info {
+  .account-name {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 1.2;
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 6rpx;
-    
-    .info-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      
-      .label {
-        font-size: 20rpx;
-        color: rgba(255, 255, 255, 0.8);
-        font-weight: 400;
-        line-height: 1;
-      }
-      
-      .value {
-        font-size: 24rpx;
-        color: #ffffff;
-        font-weight: 600;
-        line-height: 1;
-      }
-    }
-    
-    .amount-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      padding-top: 8rpx;
-      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
-      
-      .amount-label {
-        font-size: 20rpx;
-        color: rgba(255, 255, 255, 0.8);
-        font-weight: 400;
-        line-height: 1;
-      }
-      
-      .amount-value {
-        font-size: 32rpx;
-        color: #52c41a;
-        font-weight: 700;
-        line-height: 1;
-      }
-    }
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .deal-type {
+    font-size: 24rpx;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1;
+    flex-shrink: 0;
+    margin-right: 12rpx;
+  }
+  
+  .amount-value {
+    font-size: 32rpx;
+    font-weight: 700;
+    color: #52c41a;
+    line-height: 1;
+    flex-shrink: 0;
   }
 }
 
-.section {
+.detail-card {
   margin: 24rpx;
-  background-color: #fff;
+  background: #ffffff;
   border-radius: 16rpx;
-  overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
 
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
   .section-title {
     display: flex;
     align-items: center;
-    gap: 12rpx;
-    padding: 24rpx;
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #2c3e50;
-    border-bottom: 1rpx solid #f5f7fa;
+    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;
+        
+        &.transfer-in {
+          color: #52c41a;
+        }
+        
+        &.transfer-out {
+          color: #f5576c;
+        }
+      }
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/work/accounts/investTransferRecord/list.vue b/src/pages/work/accounts/investTransferRecord/list.vue
index 9c3e463..399b832 100644
--- a/src/pages/work/accounts/investTransferRecord/list.vue
+++ b/src/pages/work/accounts/investTransferRecord/list.vue
@@ -1,26 +1,24 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <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="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
-          <text>新增</text>
-        </view>
-       </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="请选择转账时间"
-          suffixIconStyle="color: #909399" class="search-input">
-          </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></u-icon>
+    <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="add-btn" @click="handleAdd()">
+        <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+        <text>新增</text>
+      </view>
+    </view>
+    <view class="search-view">
+      <u-input v-model="queryParams.time" border="false" type="select" readonly placeholder="请选择转账时间"
+        suffixIconStyle="color: #909399" class="search-input">
+      </u-input>
+      <view class="filter-btn" @click="filterPanel = !filterPanel">
+        <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+        <text>筛选</text>
+      </view>
 
-        <u-transition :show="filterPanel" mode="fade">
+      <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>
@@ -79,7 +77,6 @@
           </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)">
@@ -93,7 +90,7 @@
             <view class="info-row">
               <text class="time-text">{{ item.createTime }}</text>
               <text class="type-text">{{ dictStr(item.dealType, dealTypeList) }}</text>
-              <text class="amount-value">{{ item.amount }}元</text>
+              <text class="amount-value" :class="item.dealType === '1' ? 'transfer-in' : 'transfer-out'">{{ item.dealType === '1' ? '+' : '-' }}{{ item.amount }}元</text>
             </view>
           </view>
           
@@ -309,6 +306,14 @@ function dictStr(val, arr) {
 </script>
 
 <style lang="scss" scoped>
+page {
+  overflow: hidden;
+}
+
+.container {
+  background-color: #f5f7fa;
+}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -324,16 +329,18 @@ function dictStr(val, arr) {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
   }
   
   .add-btn {
@@ -341,22 +348,53 @@ function dictStr(val, arr) {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
       font-weight: 600;
     }
+    
+    uni-icons {
+      color: #667eea;
+    }
+  }
+  
+  .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 {
@@ -375,24 +413,64 @@ function dictStr(val, arr) {
         color: #2c3e50;
         font-size: 32rpx;
         font-weight: 600;
-        padding: 32rpx 0 24rpx;
+        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;
+        }
       }
 
       .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 {
@@ -531,9 +609,16 @@ function dictStr(val, arr) {
     .amount-value {
       font-size: 32rpx;
       font-weight: 700;
-      color: #52c41a;
       line-height: 1;
       flex-shrink: 0;
+      
+      &.transfer-in {
+        color: #52c41a;
+      }
+      
+      &.transfer-out {
+        color: #f5576c;
+      }
     }
   }
 
diff --git a/src/pages/work/accounts/lendTransferRecord/list.vue b/src/pages/work/accounts/lendTransferRecord/list.vue
index 4c7530c..0822206 100644
--- a/src/pages/work/accounts/lendTransferRecord/list.vue
+++ b/src/pages/work/accounts/lendTransferRecord/list.vue
@@ -586,11 +586,11 @@ page {
       margin-bottom: -5rpx;
 
       .info-label {
-        font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+         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;
       }
diff --git a/src/pages/work/accounts/posTransferRecord/addEdit.vue b/src/pages/work/accounts/posTransferRecord/addEdit.vue
index c547724..0e66558 100644
--- a/src/pages/work/accounts/posTransferRecord/addEdit.vue
+++ b/src/pages/work/accounts/posTransferRecord/addEdit.vue
@@ -9,6 +9,7 @@
 		>
 		</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' }">
@@ -250,24 +251,56 @@ function handleCreditCard() {
   </script>
   
   <style lang="scss" scoped>
-  .container {
-    background: #f5f7fa;
-    min-height: 100vh;
-  }
-  
   .section {
     margin: 24rpx;
-    padding: 32rpx;
+    padding: 0;
     background-color: #fff;
     border-radius: 16rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+    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-top: 20rpx;
+      padding: 24rpx;
   
       .form-btn {
-        padding-top: 32rpx;
+        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/work/accounts/posTransferRecord/details.vue b/src/pages/work/accounts/posTransferRecord/details.vue
index 31276a9..de34bb5 100644
--- a/src/pages/work/accounts/posTransferRecord/details.vue
+++ b/src/pages/work/accounts/posTransferRecord/details.vue
@@ -14,7 +14,7 @@
             <uni-icons type="wallet-filled" size="28" color="#ffffff"></uni-icons>
           </view>
           <view class="header-info">
-            <text class="pos-name">{{ detailInfo.posName }}</text>
+            <text class="pos-name">{{ detailInfo.outAccountName }}</text>
             <text class="merchant-name">{{ detailInfo.merchantName }}</text>
           </view>
           <view class="amount-section">
@@ -25,13 +25,12 @@
         
         <view class="info-card">
           <view class="card-title">
-            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
             <text>交易信息</text>
           </view>
           
           <view class="detail-row">
-            <text class="detail-label">信用卡</text>
-            <text class="detail-value">{{ detailInfo.outAccountName }}</text>
+            <text class="detail-label">POS机</text>
+            <text class="detail-value">{{ detailInfo.posName }}</text>
           </view>
           
           <view class="detail-row">
@@ -41,7 +40,7 @@
           
           <view class="detail-row">
             <text class="detail-label">手续费</text>
-            <text class="detail-value">{{ detailInfo.commission }}元</text>
+            <text class="detail-value orange-highlight">{{ detailInfo.commission }}元</text>
           </view>
           
           <view class="detail-row">
@@ -51,7 +50,12 @@
           
           <view class="detail-row">
             <text class="detail-label">入账金额</text>
-            <text class="detail-value highlight">{{ detailInfo.actualAmount }}元</text>
+            <text class="detail-value orange-highlight">{{ detailInfo.actualAmount }}元</text>
+          </view>
+          
+          <view class="detail-row" v-if="detailInfo.remark">
+            <text class="detail-label">备注</text>
+            <text class="detail-value remark">{{ detailInfo.remark || "无" }}</text>
           </view>
         </view>
       </view>
@@ -81,9 +85,8 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .container {
-    background: #f5f7fa;
-    min-height: 100vh;
+  page {
+    overflow: hidden;
   }
   
   .section {
@@ -100,7 +103,7 @@ onLoad((option) => {
     padding: 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 16rpx;
-    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+    box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.25);
   
     .header-icon {
       width: 48rpx;
@@ -165,7 +168,7 @@ onLoad((option) => {
     padding: 32rpx;
     background-color: #fff;
     border-radius: 16rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
   
     .card-title {
       display: flex;
@@ -174,6 +177,18 @@ onLoad((option) => {
       padding-bottom: 24rpx;
       margin-bottom: 24rpx;
       border-bottom: 2rpx solid #f0f0f0;
+      position: relative;
+      padding-left: 20rpx;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 6rpx;
+        height: 32rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 3rpx;
+      }
   
       text {
         font-size: 30rpx;
@@ -212,6 +227,17 @@ onLoad((option) => {
           color: #667eea;
           font-size: 32rpx;
         }
+        
+        &.orange-highlight {
+          color: #fa8c16;
+          font-size: 32rpx;
+          font-weight: 700;
+        }
+        
+        &.remark {
+          word-break: break-all;
+          line-height: 1.5;
+        }
       }
     }
   }
diff --git a/src/pages/work/accounts/posTransferRecord/list.vue b/src/pages/work/accounts/posTransferRecord/list.vue
index 8156a0c..8f1827b 100644
--- a/src/pages/work/accounts/posTransferRecord/list.vue
+++ b/src/pages/work/accounts/posTransferRecord/list.vue
@@ -1,33 +1,29 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.creditCardName" border="false" type="select"  @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-       </view>
-       </u-sticky>
-       <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择POS机" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
-          <text>新增</text>
-        </view>
-       </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="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></u-icon>
+    <view class="search-view">
+      <u-input v-model="queryParams.creditCardName" border="false" type="select"  @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
+        suffixIconStyle="color: #909399" class="search-input">
+      </u-input>
+    </view>
+    <view class="search-view">
+      <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择POS机" suffixIcon="search"
+        suffixIconStyle="color: #909399" class="search-input">
+      </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-view">
+      <u-input v-model="queryParams.time" border="false" type="select" readonly placeholder="请选择刷卡时间" suffixIcon="calendar"
+        suffixIconStyle="color: #909399" class="search-input">
+      </u-input>
+      <view class="filter-btn" @click="filterPanel = !filterPanel">
+        <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+        <text>筛选</text>
+      </view>
 
-        <u-transition :show="filterPanel" mode="fade">
+      <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>
@@ -81,7 +77,6 @@
           </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)">
@@ -109,11 +104,11 @@
             <view class="info-row">
               <view class="info-item">
                 <text class="info-label">入账金额</text>
-                <text class="info-value highlight">{{ item.actualAmount }}元</text>
+                <text class="info-value orange-highlight">{{ item.actualAmount }}元</text>
               </view>
               <view class="info-item">
                 <text class="info-label">手续费</text>
-                <text class="info-value">{{ item.commission }}元</text>
+                <text class="info-value orange-highlight">{{ item.commission }}元</text>
               </view>
             </view>
             <view class="info-row">
@@ -380,6 +375,14 @@ function settingCancel() {
 </script>
 
 <style lang="scss" scoped>
+page {
+  overflow: hidden;
+}
+
+.container {
+  background-color: #f5f7fa;
+}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -395,16 +398,18 @@ function settingCancel() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
   }
   
   .add-btn {
@@ -412,22 +417,53 @@ function settingCancel() {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
       font-weight: 600;
     }
+    
+    uni-icons {
+      color: #667eea;
+    }
+  }
+  
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    
+    uni-icons {
+      color: #667eea;
+    }
   }
 
   .filter-panel {
@@ -446,24 +482,64 @@ function settingCancel() {
         color: #2c3e50;
         font-size: 32rpx;
         font-weight: 600;
-        padding: 32rpx 0 24rpx;
+        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;
+        }
       }
 
       .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 {
@@ -644,15 +720,15 @@ function settingCancel() {
   }
 
   .card-body {
-    padding: 16rpx 24rpx;
-    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+    padding: 24rpx;
+    background: #fff;
     display: flex;
     flex-direction: column;
     gap: 12rpx;
 
     .info-row {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       gap: 24rpx;
       
       &:last-child {
@@ -667,19 +743,19 @@ function settingCancel() {
       
       .info-item {
         display: flex;
-        align-items: center;
-        gap: 12rpx;
+        flex-direction: column;
+        gap: 8rpx;
         flex: 1;
         min-width: 0;
 
         .info-label {
-          font-size: 22rpx;
-          color: #999;
-          font-weight: 400;
-          flex-shrink: 0;
-          padding: 4rpx 12rpx;
-          background: rgba(102, 126, 234, 0.08);
-          border-radius: 8rpx;
+          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 {
@@ -689,24 +765,27 @@ function settingCancel() {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          flex: 1;
           
           &.highlight {
             color: #667eea;
             font-weight: 600;
             font-size: 26rpx;
           }
+          
+          &.orange-highlight {
+            color: #fa8c16;
+            font-weight: 600;
+            font-size: 26rpx;
+          }
         }
         
         .info-remark {
-          font-size: 24rpx;
-          color: #666;
-          line-height: 1.4;
-          flex: 1;
+         font-size: 24rpx;
+          color: #333;
+          font-weight: 500;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          font-style: italic;
         }
       }
     }
diff --git a/src/pages/work/accounts/posadvice/list.vue b/src/pages/work/accounts/posadvice/list.vue
index b925eb3..892d530 100644
--- a/src/pages/work/accounts/posadvice/list.vue
+++ b/src/pages/work/accounts/posadvice/list.vue
@@ -1,18 +1,14 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.creditCardName" border="false" type="select"  @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <view class="clear-btn" v-if="queryParams.creditCardName" @click="handleCreditCardCancel()">
-          <uni-icons type="close-filled" size="16" color="#ffffff"></uni-icons>
-          <text>清空</text>
-        </view>
-       </view>
-       </u-sticky>
-       <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-       </u-sticky>
+    <view class="search-view">
+      <u-input v-model="queryParams.creditCardName" border="false" type="select"  @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
+        suffixIconStyle="color: #909399" class="search-input">
+      </u-input>
+      <view class="clear-btn" v-if="queryParams.creditCardName" @click="handleCreditCardCancel()">
+        <uni-icons type="close-filled" size="16" color="#ffffff"></uni-icons>
+        <text>清空</text>
+      </view>
+    </view>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item">
@@ -321,16 +317,18 @@ function settingCancel() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
   }
   
   .clear-btn {
@@ -338,22 +336,26 @@ function settingCancel() {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 20rpx;
-    background: linear-gradient(135deg, #f5576c 0%, #ff8a80 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(245, 87, 108, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(245, 87, 108, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 26rpx;
       font-weight: 600;
     }
+    
+    uni-icons {
+      color: #667eea;
+    }
   }
 }
 
diff --git a/src/pages/work/base/creditCard/list.vue b/src/pages/work/base/creditCard/list.vue
index 5f59aa7..be42fce 100644
--- a/src/pages/work/base/creditCard/list.vue
+++ b/src/pages/work/base/creditCard/list.vue
@@ -20,7 +20,8 @@
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <view class="card-info">
-                <text class="card-name">{{ item.name }}<text class="card-code" v-if="item.code">({{ item.code }})</text></text>
+                <text class="card-name">{{ item.name }}</text>
+                <text class="card-code" v-if="item.code">{{ item.code }}</text>
               </view>
             </view>
             <view class="balance-section">
@@ -429,7 +430,9 @@ page {
     .card-info {
       flex: 1;
       min-width: 0;
-      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
       
       .card-name {
         color: #ffffff;
@@ -439,14 +442,13 @@ page {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        display: block;
-        
-        .card-code {
-          color: rgba(255, 255, 255, 0.85);
-          font-size: 22rpx;
-          font-weight: 400;
-          margin-left: 8rpx;
-        }
+      }
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 22rpx;
+        font-weight: 400;
+        line-height: 1;
       }
     }
     
@@ -498,10 +500,10 @@ page {
 
       .info-label {
        font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+        color: #667eea;
+        font-weight: 500;
         background: rgba(102, 126, 234, 0.08);
+        padding: 6rpx 12rpx;
         border-radius: 8rpx;
         align-self: flex-start;
       }
diff --git a/src/pages/work/base/debitCard/list.vue b/src/pages/work/base/debitCard/list.vue
index 96d55ac..a422da3 100644
--- a/src/pages/work/base/debitCard/list.vue
+++ b/src/pages/work/base/debitCard/list.vue
@@ -45,7 +45,8 @@
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <view class="card-info">
-                <text class="card-name">{{ item.name }}<text class="card-code" v-if="item.code">({{ item.code }})</text></text>
+                <text class="card-name">{{ item.name }}</text>
+                <text class="card-code" v-if="item.code">{{ item.code }}</text>
               </view>
             </view>
             <view class="balance-section">
@@ -525,7 +526,9 @@ page {
     .card-info {
       flex: 1;
       min-width: 0;
-      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
       
       .card-name {
         color: #ffffff;
@@ -535,14 +538,13 @@ page {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        display: block;
-        
-        .card-code {
-          color: rgba(255, 255, 255, 0.85);
-          font-size: 22rpx;
-          font-weight: 400;
-          margin-left: 8rpx;
-        }
+      }
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 22rpx;
+        font-weight: 400;
+        line-height: 1;
       }
     }
     
@@ -594,12 +596,12 @@ page {
 
       .info-label {
         font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
-        background: rgba(102, 126, 234, 0.08);
-        border-radius: 8rpx;
-        align-self: flex-start;
+          color: #667eea;
+          font-weight: 500;
+          background: rgba(102, 126, 234, 0.08);
+          padding: 6rpx 12rpx;
+          border-radius: 8rpx;
+          align-self: flex-start;
       }
 
       .info-value {
diff --git a/src/pages/work/base/financials/list.vue b/src/pages/work/base/financials/list.vue
index c7033f5..bb84ea4 100644
--- a/src/pages/work/base/financials/list.vue
+++ b/src/pages/work/base/financials/list.vue
@@ -378,10 +378,10 @@ page {
 
       .info-label {
         font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+        color: #667eea;
+        font-weight: 500;
         background: rgba(102, 126, 234, 0.08);
+        padding: 6rpx 12rpx;
         border-radius: 8rpx;
         align-self: flex-start;
       }
diff --git a/src/pages/work/base/futures/list.vue b/src/pages/work/base/futures/list.vue
index 699aca0..1392465 100644
--- a/src/pages/work/base/futures/list.vue
+++ b/src/pages/work/base/futures/list.vue
@@ -384,11 +384,11 @@ page {
       }
 
       .info-label {
-        font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+         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;
       }
diff --git a/src/pages/work/base/lend/list.vue b/src/pages/work/base/lend/list.vue
index 5ab8db4..e5a8c86 100644
--- a/src/pages/work/base/lend/list.vue
+++ b/src/pages/work/base/lend/list.vue
@@ -463,10 +463,10 @@ page {
 
       .info-label {
        font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+        color: #667eea;
+        font-weight: 500;
         background: rgba(102, 126, 234, 0.08);
+        padding: 6rpx 12rpx;
         border-radius: 8rpx;
         align-self: flex-start;
       }
diff --git a/src/pages/work/base/posmachine/list.vue b/src/pages/work/base/posmachine/list.vue
index 3051614..31c82c2 100644
--- a/src/pages/work/base/posmachine/list.vue
+++ b/src/pages/work/base/posmachine/list.vue
@@ -414,11 +414,11 @@ page {
       }
 
       .info-label {
-       font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+        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;
       }
diff --git a/src/pages/work/base/stocks/list.vue b/src/pages/work/base/stocks/list.vue
index 8e4d12d..73846dc 100644
--- a/src/pages/work/base/stocks/list.vue
+++ b/src/pages/work/base/stocks/list.vue
@@ -374,11 +374,11 @@ page {
       }
 
       .info-label {
-        font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+         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;
       }
diff --git a/src/pages/work/bill/creditCardBill/addEdit.vue b/src/pages/work/bill/creditCardBill/addEdit.vue
index 65d15d5..aeb056c 100644
--- a/src/pages/work/bill/creditCardBill/addEdit.vue
+++ b/src/pages/work/bill/creditCardBill/addEdit.vue
@@ -217,26 +217,49 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+page {
+  overflow: hidden;
+}
+
+
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
+    padding: 32rpx;
     background-color: #fff;
-    border-radius: 8rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
   
     .section-title {
       width: 360rpx;
-      color: #333333;
+      color: #2c3e50;
       line-height: 44rpx;
       font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+      font-weight: 600;
+      padding-left: 20rpx;
+      position: relative;
+      margin-bottom: 24rpx;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 6rpx;
+        height: 32rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 3rpx;
+      }
     }
   
     .form-view {
       padding: 20rpx 0rpx 0 10rpx;
   
       .form-btn {
-        padding-top: 20rpx;
+        padding-top: 32rpx;
+        
+        .u-button {
+          border-radius: 24rpx;
+          box-shadow: 0 6rpx 16rpx rgba(102, 126, 234, 0.25);
+        }
       }
     }
   }
diff --git a/src/pages/work/bill/creditCardBill/details.vue b/src/pages/work/bill/creditCardBill/details.vue
index 45e92c5..2d69953 100644
--- a/src/pages/work/bill/creditCardBill/details.vue
+++ b/src/pages/work/bill/creditCardBill/details.vue
@@ -9,15 +9,15 @@
     >
     </u-navbar>
     
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u--input v-model="queryParams.time" border="false" disabled placeholder="请输入时间" class="search-input"
-          @blur="searchBlur" suffixIcon="calendar" suffixIconStyle="color: #909399">
-        </u--input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></u-icon>
-        <u-transition :show="filterPanel" mode="fade">
+    <view class="search-view">
+      <u--input v-model="queryParams.time" border="false" disabled placeholder="请输入时间" class="search-input"
+        @blur="searchBlur" suffixIcon="calendar" 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>
+      <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>
@@ -49,28 +49,40 @@
           </view>
         </u-transition>
       </view>
-    </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">
-            <view class="header-row">
+            <view class="first-row">
               <view class="card-icon">
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
-              <text class="account-name">{{ item.accountName }}</text>
+              <text class="card-name">{{ item.accountName }}</text>
+              <text class="card-date">{{ item.createTime }}</text>
             </view>
-            <view class="info-row">
-              <text class="time-text">{{ item.createTime }}</text>
-              <text class="type-text">{{ dictStr(item.dealCategory, dealCategoryList) }}</text>
-              <text class="amount-value" :class="item.dealType === '1' ? 'income' : 'expense'">{{ item.dealType === '1' ? '+' : '-' }}{{ item.amount }}元</text>
+            <view class="second-row">
+              <text class="account-type">{{ dictStr(item.type, accountTypeList) }}</text>
+              <text class="deal-category">{{ dictStr(item.dealCategory, dealCategoryList) }}</text>
+              <text class="child-category" v-if="item.childCategory && item.childCategory != item.dealCategory">{{ item.childCategoryName }}</text>
+              <view class="right-group">
+                <view class="profit-tag" :class="item.dealType === '1' ? 'income' : 'expense'">
+                  <text>{{ dictStr(item.dealType, dealTypeList) }}</text>
+                </view>
+                <text class="card-amount" :class="item.dealType === '1' ? 'income' : 'expense'"><text class="amount-value">{{ item.amount }}</text>元</text>
+              </view>
             </view>
           </view>
           
-          <view class="card-body" v-if="item.remark">
-            <view class="remark-section">
-              <text class="remark-label">备注：</text>
-              <text class="remark-text">{{ item.remark }}</text>
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item info-item-balance">
+                <text class="info-label">余额</text>
+                <text class="info-value balance-color">{{ item.currentBalance }}元</text>
+              </view>
+              <view class="info-item info-item-remark" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-remark">{{ item.remark }}</text>
+              </view>
             </view>
           </view>
         </view>
@@ -256,6 +268,12 @@ function dictStr(val, arr) {
 </script>
 
 <style lang="scss" scoped>
+page {
+  overflow: hidden;
+}
+
+
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -271,16 +289,45 @@ function dictStr(val, arr) {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+  }
+  
+  .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 {
@@ -299,24 +346,44 @@ function dictStr(val, arr) {
         color: #2c3e50;
         font-size: 32rpx;
         font-weight: 600;
-        padding: 32rpx 0 24rpx;
+        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 {
@@ -331,10 +398,10 @@ function dictStr(val, arr) {
 
     .btn-box {
       display: flex;
-      gap: 20rpx;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
       
       .btn-reset,
       .btn-confirm {
@@ -375,11 +442,15 @@ function dictStr(val, arr) {
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
+  margin:10rpx 24rpx;
   background-color: #fff;
   border-radius: 16rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  
+  &:first-child {
+    margin-top: 10rpx;
+  }
 
   .item-header {
     display: flex;
@@ -387,11 +458,11 @@ function dictStr(val, arr) {
     gap: 12rpx;
     padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-
-    .header-row {
+    
+    .first-row {
       display: flex;
       align-items: center;
-      gap: 10rpx;
+      gap: 8rpx;
     }
 
     .card-icon {
@@ -404,50 +475,60 @@ function dictStr(val, arr) {
       justify-content: center;
       flex-shrink: 0;
     }
-
-    .account-name {
-      font-size: 24rpx;
+    
+    .account-type {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.85);
       font-weight: 500;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    .card-name {
+      font-size: 30rpx;
+      font-weight: 600;
       color: #ffffff;
-      line-height: 1.3;
+      line-height: 1.2;
       flex: 1;
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-
-    .info-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 12rpx;
-      padding-top: 10rpx;
-      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
-    }
-
-    .time-text {
-      font-size: 26rpx;
+    
+    .card-date {
+      font-size: 28rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
-      line-height: 1.3;
+      line-height: 1.2;
+      white-space: nowrap;
       flex-shrink: 0;
     }
-
-    .type-text {
+    
+    .profit-tag {
+      padding: 4rpx 12rpx;
+      border-radius: 10rpx;
+      font-size: 22rpx;
+      font-weight: 600;
+      line-height: 1;
+      flex-shrink: 0;
+      
+      &.income {
+        background: rgba(82, 196, 26, 0.25);
+        color: #52c41a;
+      }
+      
+      &.expense {
+        background: rgba(245, 87, 108, 0.25);
+        color: #f5576c;
+      }
+    }
+    
+    .card-amount {
       font-size: 24rpx;
       font-weight: 600;
-      color: #ffffff;
-      line-height: 1.3;
-      flex: 1;
-      min-width: 0;
-      text-align: center;
-    }
-
-    .amount-value {
-      font-size: 32rpx;
-      font-weight: 700;
-      line-height: 1.2;
+      line-height: 1;
+      white-space: nowrap;
       flex-shrink: 0;
       
       &.income {
@@ -457,29 +538,118 @@ function dictStr(val, arr) {
       &.expense {
         color: #f5576c;
       }
+      
+      .amount-value {
+        font-size: 32rpx;
+        font-weight: 700;
+        margin-right: 4rpx;
+      }
+    }
+
+     .second-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8rpx;
+      padding-top: 6rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+      min-height: 32rpx;
+    }
+    
+    .deal-category {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 400;
+      white-space: nowrap;
+      flex-shrink: 0;
+      line-height: 1;
+    }
+    
+    .account-type {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 500;
+      white-space: nowrap;
+      flex-shrink: 0;
+      padding: 4rpx 12rpx;
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 8rpx;
+      line-height: 1;
+    }
+    
+    .right-group {
+      display: flex;
+      align-items: center;
+      gap: 10rpx;
+      flex-shrink: 0;
+    }
+    
+    .child-category {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.8);
+      font-weight: 400;
+      white-space: nowrap;
+      flex-shrink: 0;
+      line-height: 1;
     }
   }
 
   .card-body {
-    padding: 20rpx 24rpx;
+    padding: 24rpx;
     background: #fff;
-    border-top: 1rpx solid #f5f7fa;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 24rpx;
+    margin-bottom: 0;
     
-    .remark-section {
+    .info-item {
       display: flex;
-      gap: 8rpx;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
       
-      .remark-label {
-        font-size: 24rpx;
-        color: #999;
-        font-weight: 500;
+      &.info-item-balance {
         flex-shrink: 0;
       }
       
-      .remark-text {
+      &.info-item-remark {
+        flex: 1;
+      }
+
+      .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;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 1.2;
+        
+        &.balance-color {
+          color: #fa8c16;
+          font-weight: 600;
+        }
+      }
+
+      .info-remark {
         font-size: 24rpx;
         color: #666;
-        line-height: 1.5;
+        line-height: 1.4;
         flex: 1;
         word-break: break-all;
       }
diff --git a/src/pages/work/bill/creditCardBill/list.vue b/src/pages/work/bill/creditCardBill/list.vue
index 4772c5f..a9fa28f 100644
--- a/src/pages/work/bill/creditCardBill/list.vue
+++ b/src/pages/work/bill/creditCardBill/list.vue
@@ -1,39 +1,29 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u-input v-model="queryParams.creditCardName" border="false" type="select"  @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
-          <text>新增</text>
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
+      <view class="sticky-container">
+        <view class="search-view">
+          <u-input v-model="queryParams.creditCardName" border="false" type="select" @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
+            suffixIconStyle="color: #909399" class="search-input">
+          </u-input>
+          <view class="add-btn" @click="handleAdd()">
+            <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+            <text>新增</text>
+          </view>
         </view>
-      </view>
-    </u-sticky>
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <view style="flex: 1;"></view>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></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 billStateList" :key="item.id" class="state-item"
-                  :class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
-              </view>
+        
+        <view class="filter-view">
+          <view class="filter-title">账单状态：</view>
+          <view class="type-list">
+            <view class="type-item" :class="!queryParams.billState ? 'active' : ''" @click="selectStatus('')">
+              <text>全部</text>
             </view>
-            <view class="btn-box">
-              <u-button text="重置" @click="resetQuery()" 
-                customStyle="flex: 1; background: #f5f7fa; color: #666666; border: none; border-radius: 12rpx; font-size: 30rpx; height: 88rpx;"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()" 
-                customStyle="flex: 2; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 12rpx; font-size: 30rpx; font-weight: 600; height: 88rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3); margin-left: 16rpx;"></u-button>
+            <view v-for="item in billStateList" :key="item.dictValue" class="type-item"
+              :class="queryParams.billState === item.dictValue ? 'active' : ''" @click="selectStatus(item.dictValue)">
+              <text>{{ item.dictLabel }}</text>
             </view>
           </view>
-        </u-transition>
+        </view>
       </view>
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
@@ -45,16 +35,18 @@
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="card-name">{{ item.bankNameCode }}</text>
+              <view class="bill-state-tag" v-if="item.billState" :class="getBillStateClass(item.billState)">
+                <text>{{ dictStr(item.billState, billStateList) }}</text>
+              </view>
+              <text class="bill-amount">{{ item.billAmount }}元</text>
+            </view>
+            <view class="info-row">
+              <text class="time-text">账单日 {{ item.billDate }}</text>
               <view class="available-amount">
                 <text class="amount-label">可用</text>
                 <text class="amount-value">{{ item.availableLimit }}元</text>
               </view>
             </view>
-            <view class="info-row">
-              <text class="time-text">{{ item.billDate }}</text>
-              <text class="type-text">{{ dictStr(item.billState, billStateList) }}</text>
-              <text class="bill-amount">{{ item.billAmount }}元</text>
-            </view>
           </view>
           
           <view class="card-body">
@@ -68,6 +60,13 @@
             </view>
           </view>
           
+          <view class="last-trans-section" v-if="auth.hasPermi('invest:posmachine:list')">
+            <view class="info-item">
+              <text class="info-label">最近交易</text>
+              <text class="info-value">{{ item.recentDealTime || '-' }}</text>
+            </view>
+          </view>
+          
           <view class="stats-body" v-if="auth.hasPermi('invest:posmachine:list')">
             <view class="stats-row">
               <view class="stats-item">
@@ -83,10 +82,6 @@
                 <text class="stats-value percent">{{ item.posRate || 0 }}</text>
               </view>
             </view>
-            <view class="last-trans-row">
-              <text class="last-trans-label">最近交易:</text>
-              <text class="last-trans-value">{{ item.recentDealTime || '-' }}</text>
-            </view>
           </view>
           
           <view class="operate" @click.stop>
@@ -137,7 +132,6 @@ const settingColumns = ref([])
 const showCreditCard = ref(false)
 const bankCardLendList = ref([])
 const data = reactive({
-  filterPanel: false,
   queryBankCardLendParams: {
     pageNum: 1,
     type: '2',
@@ -150,10 +144,7 @@ const data = reactive({
       type: '',
    } 
 })
-const { filterPanel, queryBankCardLendParams, queryParams} = toRefs(data)
-const windowHeight = computed(() => {
-			uni.getSystemInfoSync().windowHeight - 50
-		})	
+const { queryBankCardLendParams, queryParams} = toRefs(data)	
 onLoad(() => {
     getDict()
     getList()
@@ -213,16 +204,11 @@ function dictStr(val, arr) {
       })
       return str
     }
-function selectStatus(item) {
-      queryParams.value.billState = item.dictValue
-      billStateList.value.map(ele => {
-        if (ele.dictValue == item.dictValue) {
-          ele.selected = true
-          Reflect.set(ele, 'selected', true)
-        } else {
-          Reflect.set(ele, 'selected', false)
-        }
-      })
+function selectStatus(value) {
+      queryParams.value.billState = value
+      pageNum.value = 1
+      listData.value = []
+      getList()
     }
     function handleCreditCard() {
         if (bankCardLendList.value[0].length === 0) {
@@ -244,26 +230,29 @@ function selectStatus(item) {
  function handleCreditCardCancel() {
        showCreditCard.value = 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.creditCardName = '',
-    queryParams.value.creditCardId= '',
+        queryParams.value.name = ''
+        queryParams.value.creditCardName = ''
+        queryParams.value.creditCardId = ''
+        queryParams.value.billState = ''
         queryParams.value.type = ''
-      billStateList.value.map(ele => {
-        Reflect.set(ele, 'selected', false)
-      })
+        pageNum.value = 1
+        listData.value = []
+        getList()
     }
+    
+    const getBillStateClass = (billState) => {
+      // 根据实际的字典值判断
+      // 通常: 0-未出账单, 1-已出账单, 2-已还款等
+      if (billState === '0') {
+        return 'status-unpaid'  // 未出账单 - 橙色
+      } else if (billState === '1') {
+        return 'status-billed'  // 已出账单 - 绿色
+      } else {
+        return 'status-paid'    // 已还款等其他状态 - 蓝色
+      }
+    }
+    
     function enterDetails(item) {
       uni.navigateTo({ url: `/pages/work/bill/creditCardBill/details?id=${item.creditCardId}&billDatePeriod=${item.billDatePeriod}` })
     }
@@ -275,6 +264,7 @@ function selectStatus(item) {
       uni.navigateTo({ url: `/pages/work/bill/creditCardBill/addEdit` })
       isShow.value = true
     }
+    
     function handleDelete(item) {
       uni.showModal({
         title: '确认删除',
@@ -302,6 +292,19 @@ function selectStatus(item) {
 </script>
 
 <style lang="scss" scoped>
+page {
+  overflow: hidden;
+}
+
+.container {
+  background-color: #f5f7fa;
+}
+
+.sticky-container {
+  background-color: #f5f7fa;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -321,12 +324,12 @@ function selectStatus(item) {
   z-index: 100;
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
   }
   
   .add-btn {
@@ -334,76 +337,71 @@ function selectStatus(item) {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      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);
-
-    .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;
-      }
-
-      .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, #667eea 0%, #764ba2 100%);
-          border: 2rpx solid transparent;
-          color: #ffffff;
-          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
-          font-weight: 600;
-        }
-      }
+    
+    uni-icons {
+      color: #667eea;
     }
+  }
+}
 
-    .btn-box {
-      display: flex;
-      gap: 16rpx;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+.filter-view {
+  padding: 16rpx 32rpx 20rpx;
+  background-color: #ffffff;
+  border-bottom: 1rpx solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  
+  .filter-title {
+    color: #333333;
+    font-size: 28rpx;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+  
+  .type-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12rpx;
+    flex: 1;
+    
+    .type-item {
+      padding: 0 24rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      border-radius: 30rpx;
+      font-size: 26rpx;
+      color: #666666;
+      background: #f5f7fa;
+      border: 2rpx solid transparent;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
+        font-weight: 600;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      }
     }
   }
 }
@@ -440,8 +438,8 @@ function selectStatus(item) {
     }
 
     .card-name {
-      font-size: 24rpx;
-      font-weight: 500;
+      font-size: 28rpx;
+      font-weight: 600;
       color: #ffffff;
       line-height: 1.3;
       flex: 1;
@@ -450,6 +448,40 @@ function selectStatus(item) {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    
+    .bill-state-tag {
+      padding: 4rpx 12rpx;
+      border-radius: 10rpx;
+      font-size: 22rpx;
+      font-weight: 600;
+      line-height: 1;
+      flex-shrink: 0;
+      margin-right: 10rpx;
+      
+      &.status-unpaid {
+        background: rgba(250, 140, 22, 0.35);
+        
+        text {
+          color: #ffffff;
+        }
+      }
+      
+      &.status-billed {
+        background: rgba(82, 196, 26, 0.35);
+        
+        text {
+          color: #ffffff;
+        }
+      }
+      
+      &.status-paid {
+        background: rgba(24, 144, 255, 0.35);
+        
+        text {
+          color: #ffffff;
+        }
+      }
+    }
 
     .available-amount {
       display: flex;
@@ -472,9 +504,9 @@ function selectStatus(item) {
     }
 
     .bill-amount {
-      font-size: 28rpx;
-      font-weight: 600;
-      color: #ffffff;
+      font-size: 32rpx;
+      font-weight: 700;
+      color: #fa8c16;
       line-height: 1.2;
       flex-shrink: 0;
     }
@@ -489,25 +521,47 @@ function selectStatus(item) {
     }
 
     .time-text {
-      font-size: 28rpx;
-      color: rgba(255, 255, 255, 0.9);
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.85);
       font-weight: 500;
       line-height: 1.3;
-      flex-shrink: 0;
-    }
-
-    .type-text {
-      font-size: 26rpx;
-      font-weight: 600;
-      color: #ffffff;
-      line-height: 1.3;
       flex: 1;
-      min-width: 0;
-      text-align: center;
     }
 
   }
 
+  .last-trans-section {
+    padding: 0 24rpx 24rpx;
+    background: #fff;
+    
+    .info-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
   .stats-body {
     padding: 20rpx 24rpx;
     background: #f5f7fa;
@@ -527,14 +581,17 @@ function selectStatus(item) {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 6rpx;
+    gap: 8rpx;
     min-width: 0;
     align-items: flex-start;
 
     .stats-label {
       font-size: 22rpx;
-      color: #999;
-      font-weight: 400;
+      color: #667eea;
+      font-weight: 500;
+      background: rgba(102, 126, 234, 0.08);
+      padding: 6rpx 12rpx;
+      border-radius: 8rpx;
       white-space: nowrap;
     }
 
@@ -553,29 +610,6 @@ function selectStatus(item) {
     }
   }
 
-  .last-trans-row {
-    display: flex;
-    align-items: center;
-    gap: 8rpx;
-    padding-top: 12rpx;
-    border-top: 1rpx solid #e8edf3;
-
-    .last-trans-label {
-      font-size: 22rpx;
-      color: #999;
-      font-weight: 400;
-      min-width: 120rpx;
-    }
-
-    .last-trans-value {
-      font-size: 24rpx;
-      color: #666;
-      font-weight: 500;
-      flex: 1;
-      text-align: left;
-    }
-  }
-
   .card-body {
     padding: 24rpx;
     background: #fff;
@@ -587,13 +621,17 @@ function selectStatus(item) {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 6rpx;
+    gap: 8rpx;
     min-width: 0;
 
     .info-label {
       font-size: 22rpx;
-      color: #999;
-      font-weight: 400;
+      color: #667eea;
+      font-weight: 500;
+      background: rgba(102, 126, 234, 0.08);
+      padding: 6rpx 12rpx;
+      border-radius: 8rpx;
+      align-self: flex-start;
     }
 
     .info-value {
@@ -613,18 +651,18 @@ function selectStatus(item) {
 
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
-    background: #fff;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
     .btn-detail,
     .btn-edit,
     .btn-delete {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6rpx;
+      padding: 0 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
@@ -635,11 +673,11 @@ function selectStatus(item) {
         transform: scale(0.95);
       }
     }
-
+    
     .btn-detail {
-      background: rgba(102, 126, 234, 0.1);
-      color: #667eea;
-      border: 1rpx solid rgba(102, 126, 234, 0.3);
+     background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+      border: 1rpx solid rgba(82, 196, 26, 0.3);
     }
 
     .btn-edit {
diff --git a/src/pages/work/bill/creditInstallmentHistory/addEdit.vue b/src/pages/work/bill/creditInstallmentHistory/addEdit.vue
index 9632459..2ab2556 100644
--- a/src/pages/work/bill/creditInstallmentHistory/addEdit.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/addEdit.vue
@@ -2,11 +2,8 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
+			leftIconColor="#333333"
 			title="信用卡分期账单"
-			:titleStyle="{color: '#ffffff', fontSize: '36rpx', fontWeight: '600'}"
-			:bgColor="'transparent'"
-			:customStyle="{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', boxShadow: '0 4rpx 12rpx rgba(102, 126, 234, 0.3)'}"
 		>
 		</u-navbar>
       <view class="section">
@@ -62,17 +59,13 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit" 
-              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
+            <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="settleStateList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm" 
-        title="选择结清状态"
-        :confirmColor="'#667eea'"
-        :cancelColor="'#666666'"></u-picker>
+        @confirm="handleConfirm"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -81,9 +74,6 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
-			title="选择分期日期"
-			:confirmColor="'#667eea'"
-			:cancelColor="'#666666'"
 		></u-datetime-picker>
     <u-datetime-picker
 			:show="closeDatePickShow"
@@ -93,15 +83,9 @@
 			@cancel="closeDatePickShow=false"
 			@confirm="closeDatePickConfirm"
 			itemHeight="88"
-			title="选择关闭日期"
-			:confirmColor="'#667eea'"
-			:cancelColor="'#666666'"
 		></u-datetime-picker>
     <u-picker itemHeight="88" :show="showOnlineLend" :columns="bankCardLendList" keyName="nameCode" @cancel="handleOnlineLendCancel"
-        @confirm="handleOnlineLendConfirm" 
-        title="选择信用卡"
-        :confirmColor="'#667eea'"
-        :cancelColor="'#666666'"></u-picker>
+        @confirm="handleOnlineLendConfirm"></u-picker>
     </view>
   </template>
   
@@ -288,25 +272,54 @@ onLoad((option) => {
   <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/work/bill/creditInstallmentHistory/details.vue b/src/pages/work/bill/creditInstallmentHistory/details.vue
index c6ae2fb..d227a1a 100644
--- a/src/pages/work/bill/creditInstallmentHistory/details.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/details.vue
@@ -2,19 +2,17 @@
   <view class="container">
     <u-navbar
       leftIconSize="40rpx"
-      leftIconColor="#ffffff"
+      leftIconColor="#333333"
       title="还款明细"
-      :bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
-      :titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
     >
     </u-navbar>
     
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
       <view class="search-view">
         <u-input v-model="queryParams.name"  border="false" disabled ="false" type="select"  v-show="true" class="search-input">
         </u-input>
           <view class="summary-btn" @click="handleUpdateInterest()">
-            <uni-icons type="checkmark-circle-fill" size="18" color="#ffffff"></uni-icons>
+            <uni-icons type="checkmarkempty" size="18" color="#667eea"></uni-icons>
             <text>总利息汇总</text>
           </view>
       </view>
@@ -27,27 +25,23 @@
               <view class="card-icon">
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
-              <text class="account-name">信用卡分期还款</text>
-            </view>
-            <view class="info-row">
               <text class="time-text">{{ item.repaymentDate }}</text>
               <text class="type-text">第{{ item.periods }}期</text>
-              <text class="amount-value">{{ item.currentAmount }}元</text>
+              <text class="status-badge" :class="item.postingState === '1' ? 'paid' : 'unpaid'">
+                {{ dictStr(item.postingState, postingStateList) }}
+              </text>
+              <text class="amount-value" :class="item.postingState === '1' ? 'paid' : 'unpaid'">{{ item.currentAmount }}元</text>
             </view>
           </view>
           
           <view class="card-body">
             <view class="info-item">
               <text class="info-label">应还本金</text>
-              <text class="info-value">{{ item.principal }}元</text>
+              <text class="info-value orange">{{ item.principal }}元</text>
             </view>
             <view class="info-item">
               <text class="info-label">利息</text>
-              <text class="info-value">{{ item.interest }}元</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">还款状态</text>
-              <text class="info-value" :class="item.postingState === '1' ? 'paid' : 'unpaid'">{{ dictStr(item.postingState, postingStateList) }}</text>
+              <text class="info-value orange">{{ item.interest }}元</text>
             </view>
           </view>
           
@@ -229,14 +223,18 @@ function handleUpdateInterest() {
   align-items: center;
   position: relative;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
   }
   
   .summary-btn {
@@ -244,19 +242,19 @@ function handleUpdateInterest() {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
       font-weight: 600;
     }
@@ -294,29 +292,27 @@ function handleUpdateInterest() {
       flex-shrink: 0;
     }
 
-    .account-name {
+    .status-badge {
       font-size: 24rpx;
-      font-weight: 500;
-      color: #ffffff;
+      font-weight: 600;
+      padding: 4rpx 16rpx;
+      border-radius: 12rpx;
       line-height: 1.3;
-      flex: 1;
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .info-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 12rpx;
-      padding-top: 10rpx;
-      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+      flex-shrink: 0;
+      
+      &.paid {
+        background: rgba(82, 196, 26, 0.2);
+        color: #52c41a;
+      }
+      
+      &.unpaid {
+        background: rgba(255, 140, 0, 0.2);
+        color: #ff8c00;
+      }
     }
 
     .time-text {
-      font-size: 26rpx;
+      font-size: 24rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
       line-height: 1.3;
@@ -334,11 +330,18 @@ function handleUpdateInterest() {
     }
 
     .amount-value {
-      font-size: 32rpx;
+      font-size: 28rpx;
       font-weight: 700;
-      color: #52c41a;
       line-height: 1.2;
       flex-shrink: 0;
+      
+      &.paid {
+        color: #52c41a;
+      }
+      
+      &.unpaid {
+        color: #f5576c;
+      }
     }
   }
 
@@ -357,9 +360,13 @@ function handleUpdateInterest() {
     min-width: 0;
 
     .info-label {
-      font-size: 22rpx;
-      color: #999;
-      font-weight: 400;
+      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 {
@@ -370,13 +377,8 @@ function handleUpdateInterest() {
       text-overflow: ellipsis;
       white-space: nowrap;
       
-      &.paid {
-        color: #52c41a;
-        font-weight: 600;
-      }
-      
-      &.unpaid {
-        color: #ff8c00;
+      &.orange {
+        color: #fa8c16;
         font-weight: 600;
       }
     }
@@ -384,18 +386,18 @@ function handleUpdateInterest() {
 
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
-    background: #fff;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
     .btn-edit,
     .btn-delete,
     .btn-view {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6rpx;
+      padding: 0 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
diff --git a/src/pages/work/bill/creditInstallmentHistory/detailsAddEdit.vue b/src/pages/work/bill/creditInstallmentHistory/detailsAddEdit.vue
index a59e382..5b441f3 100644
--- a/src/pages/work/bill/creditInstallmentHistory/detailsAddEdit.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/detailsAddEdit.vue
@@ -2,11 +2,8 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
+			leftIconColor="#333333"
 			title="信用卡分期还款明细"
-			:titleStyle="{color: '#ffffff', fontSize: '36rpx', fontWeight: '600'}"
-			:bgColor="'transparent'"
-			:customStyle="{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', boxShadow: '0 4rpx 12rpx rgba(102, 126, 234, 0.3)'}"
 		>
 		</u-navbar>
       <view class="section">
@@ -46,17 +43,13 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit" 
-              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
+            <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="postingStateList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm" 
-        title="选择入账状态"
-        :confirmColor="'#667eea'"
-        :cancelColor="'#666666'"></u-picker>
+        @confirm="handleConfirm"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -65,9 +58,6 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
-			title="选择还款日期"
-			:confirmColor="'#667eea'"
-			:cancelColor="'#666666'"
 		></u-datetime-picker>
     </view>
   </template>
@@ -184,25 +174,54 @@ onLoad((option) => {
   <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/work/bill/creditInstallmentHistory/list.vue b/src/pages/work/bill/creditInstallmentHistory/list.vue
index fa34747..02362d6 100644
--- a/src/pages/work/bill/creditInstallmentHistory/list.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/list.vue
@@ -1,54 +1,47 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u-input v-model="queryParams.onlineLendName" border="false" type="select"  @click="handleOnlineLend" placeholder="请选择信用卡" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
-          <text>新增</text>
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
+      <view class="sticky-container">
+        <view class="search-view">
+          <u-input v-model="queryParams.onlineLendName" border="false" type="select"  @click="handleOnlineLend" placeholder="请选择信用卡" suffixIcon="search"
+            suffixIconStyle="color: #909399" class="search-input">
+          </u-input>
+          <view class="add-btn" @click="handleAdd()">
+            <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+            <text>新增</text>
+          </view>
         </view>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3); margin-left: 12rpx;"></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 settleStateList" :key="item.id" class="state-item"
-                  :class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
-              </view>
+        
+        <view class="filter-view">
+          <view class="filter-title">结清状态：</view>
+          <view class="type-list">
+            <view class="type-item" :class="!queryParams.state ? 'active' : ''" @click="selectStatus('')">
+              <text>全部</text>
             </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 v-for="item in settleStateList" :key="item.dictValue" class="type-item"
+              :class="queryParams.state === item.dictValue ? 'active' : ''" @click="selectStatus(item.dictValue)">
+              <text>{{ item.dictLabel }}</text>
             </view>
           </view>
-        </u-transition>
+        </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-row">
+            <view class="first-row">
               <view class="card-icon">
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="card-name">{{ item.bankNameCode }}</text>
+              <text class="card-date">{{ item.installmentDate }}</text>
+              <text class="card-amount">分期 {{ item.installmentAmount }}元</text>
             </view>
-            <view class="info-row">
-              <text class="time-text">分期{{ item.installmentAmount }}元</text>
-              <text class="type-text">共{{ item.period }}期</text>
-              <text class="amount-value">{{ dictStr(item.state, settleStateList) }}</text>
+            <view class="second-row">
+              <text class="state-text">{{ dictStr(item.state, settleStateList) }}</text>
+              <text class="repayment-date">最近还款日  {{ parseTime(item.repaymentDate, '{y}-{m}-{d}') || '-' }}</text>
+              <text class="balance-value">余额 {{ item.balance }}元</text>
             </view>
           </view>
           
@@ -62,47 +55,28 @@
               <text class="info-value">{{ item.repaidPeriod }}期</text>
             </view>
             <view class="info-item">
-              <text class="info-label">余额</text>
-              <text class="info-value highlight">{{ item.balance }}元</text>
+              <text class="info-label">年化利率</text>
+              <text class="info-value">{{ item.interestRate || '-' }}</text>
             </view>
-          </view>
-          
-          <view class="detail-body">
-            <view class="detail-row">
-              <view class="detail-item">
-                <text class="detail-label">年化利率</text>
-                <text class="detail-value">{{ item.interestRate || '-' }}</text>
-              </view>
-              <view class="detail-item">
-                <text class="detail-label">计算利率</text>
-                <text class="detail-value">{{ item.calculateInterestRate || '-' }}</text>
-              </view>
+            <view class="info-item">
+              <text class="info-label">计算利率</text>
+              <text class="info-value">{{ item.calculateInterestRate || '-' }}</text>
             </view>
-            <view class="detail-row">
-              <view class="detail-item">
-                <text class="detail-label">剩余本金</text>
-                <text class="detail-value">{{ item.outstandingPrincipal || '0' }}元</text>
-              </view>
-              <view class="detail-item">
-                <text class="detail-label">剩余利息</text>
-                <text class="detail-value">{{ item.outstandingInterest || '0' }}元</text>
-              </view>
+            <view class="info-item">
+              <text class="info-label">剩余本金</text>
+              <text class="info-value orange">{{ item.outstandingPrincipal || '0' }}元</text>
             </view>
-            <view class="detail-row">
-              <view class="detail-item">
-                <text class="detail-label">总利息</text>
-                <text class="detail-value">{{ item.totalInterest || '0' }}元</text>
-              </view>
-              <view class="detail-item">
-                <text class="detail-label">到期日期</text>
-                <text class="detail-value">{{ item.dueDate || '-' }}</text>
-              </view>
+            <view class="info-item">
+              <text class="info-label">剩余利息</text>
+              <text class="info-value orange">{{ item.outstandingInterest || '0' }}元</text>
             </view>
-            <view class="detail-row">
-              <view class="detail-item">
-                <text class="detail-label">最近还款日</text>
-                <text class="detail-value">{{ parseTime(item.repaymentDate, '{y}-{m}-{d}') }}</text>
-              </view>
+            <view class="info-item">
+              <text class="info-label">总利息</text>
+              <text class="info-value orange">{{ item.totalInterest || '0' }}元</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">到期日期</text>
+              <text class="info-value">{{ item.dueDate || '-' }}</text>
             </view>
           </view>
           
@@ -156,7 +130,6 @@ const settingColumns = ref([])
 const showOnlineLend = ref(false)
 const bankCardLendList = ref([])
 const data = reactive({
-  filterPanel: false,
   queryBankCardLendParams: {
     pageNum: 1,
     type: '2',
@@ -167,13 +140,10 @@ const data = reactive({
     name: null,
     type: '2',
     bankCardLendId: null,
-    state: '0'
+    state: ''
    } 
 })
-const { filterPanel, queryBankCardLendParams, queryParams} = toRefs(data)
-const windowHeight = computed(() => {
-			uni.getSystemInfoSync().windowHeight - 50
-		})	
+const { queryBankCardLendParams, queryParams} = toRefs(data)	
 onLoad(() => {
     getDict()
     getList()
@@ -233,16 +203,11 @@ function dictStr(val, arr) {
       })
       return str
     }
-function selectStatus(item) {
-      queryParams.value.state = item.dictValue
-      settleStateList.value.map(ele => {
-        if (ele.dictValue == item.dictValue) {
-          ele.selected = true
-          Reflect.set(ele, 'selected', true)
-        } else {
-          Reflect.set(ele, 'selected', false)
-        }
-      })
+function selectStatus(value) {
+      queryParams.value.state = value
+      pageNum.value = 1
+      listData.value = []
+      getList()
     }
     function handleOnlineLend() {
         if (bankCardLendList.value[0].length === 0) {
@@ -264,24 +229,14 @@ function selectStatus(item) {
  function handleOnlineLendCancel() {
        showOnlineLend.value = false
   }
-    function searchSubmit() {
-      pageNum.value = 1
-      listData.value = []
-      getList()
-      filterPanel.value = false
-    }
-    function searchBlur() {
-      pageNum.value = 1
-      listData.value = []
-      getList()
-    }
     function resetQuery() {
-        queryParams.value.bankCardLendId = '',
-        queryParams.value.state= '0',
-        queryParams.value.type = '3'
-      settleStateList.value.map(ele => {
-        Reflect.set(ele, 'selected', false)
-      })
+        queryParams.value.bankCardLendId = ''
+        queryParams.value.onlineLendName = ''
+        queryParams.value.state = ''
+        queryParams.value.type = '2'
+        pageNum.value = 1
+        listData.value = []
+        getList()
     }
     function enterDetails(item) {
       uni.navigateTo({ url: `/pages/work/bill/creditInstallmentHistory/details?id=${item.id}&name=${item.bankNameCode}` })
@@ -330,6 +285,11 @@ function selectStatus(item) {
       text-align: center;
     }
 
+.sticky-container {
+  background-color: #f5f7fa;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -353,118 +313,66 @@ function selectStatus(item) {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      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);
-
-    .filter-panel-content {
-      background-color: #ffffff;
-      padding: 0 30rpx 30rpx;
-      border-radius: 16rpx 16rpx 0 0;
-
-      .filter-title {
-        color: #2c3e50;
-        font-size: 32rpx;
+.filter-view {
+  padding: 16rpx 32rpx 20rpx;
+  background-color: #ffffff;
+  border-bottom: 1rpx solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  
+  .filter-title {
+    color: #333333;
+    font-size: 28rpx;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+  
+  .type-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12rpx;
+    flex: 1;
+    
+    .type-item {
+      padding: 0 24rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      border-radius: 30rpx;
+      font-size: 26rpx;
+      color: #666666;
+      background: #f5f7fa;
+      border: 2rpx solid transparent;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
         font-weight: 600;
-        padding: 32rpx 0 24rpx;
-      }
-
-      .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, #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;
-        }
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
       }
     }
   }
@@ -484,7 +392,7 @@ function selectStatus(item) {
     padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .header-row {
+    .first-row {
       display: flex;
       align-items: center;
       gap: 10rpx;
@@ -502,8 +410,8 @@ function selectStatus(item) {
     }
 
     .card-name {
-      font-size: 24rpx;
-      font-weight: 500;
+      font-size: 28rpx;
+      font-weight: 600;
       color: #ffffff;
       line-height: 1.3;
       flex: 1;
@@ -513,16 +421,7 @@ function selectStatus(item) {
       white-space: nowrap;
     }
 
-    .info-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 12rpx;
-      padding-top: 12rpx;
-      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
-    }
-
-    .time-text {
+    .card-date {
       font-size: 24rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
@@ -530,20 +429,47 @@ function selectStatus(item) {
       flex-shrink: 0;
     }
 
-    .type-text {
+    .card-amount {
+      font-size: 28rpx;
+      font-weight: 700;
+      color: #52c41a;
+      line-height: 1.2;
+      flex-shrink: 0;
+    }
+
+    .second-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 10rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+
+    .state-text {
       font-size: 24rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex-shrink: 0;
+      padding: 4rpx 16rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 12rpx;
+    }
+
+    .repayment-date {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
-      color: rgba(255, 255, 255, 0.85);
       line-height: 1.3;
       flex: 1;
-      min-width: 0;
       text-align: center;
     }
 
-    .amount-value {
+    .balance-value {
       font-size: 26rpx;
-      font-weight: 600;
-      color: #ffffff;
+      font-weight: 700;
+      color: #fa8c16;
       line-height: 1.2;
       flex-shrink: 0;
     }
@@ -552,21 +478,25 @@ function selectStatus(item) {
   .card-body {
     padding: 24rpx;
     background: #fff;
-    display: flex;
-    gap: 16rpx;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16rpx 24rpx;
   }
 
   .info-item {
-    flex: 1;
     display: flex;
     flex-direction: column;
     gap: 6rpx;
     min-width: 0;
 
     .info-label {
-      font-size: 22rpx;
-      color: #999;
-      font-weight: 400;
+      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 {
@@ -577,64 +507,27 @@ function selectStatus(item) {
       text-overflow: ellipsis;
       white-space: nowrap;
       
-      &.highlight {
-        color: #52c41a;
+      &.orange {
+        color: #fa8c16;
         font-weight: 600;
       }
     }
   }
 
-  .detail-body {
-    padding: 20rpx 24rpx;
-    background: #f5f7fa;
-    display: flex;
-    flex-direction: column;
-    gap: 16rpx;
-    border-top: 1rpx solid #e8edf3;
-  }
-
-  .detail-row {
-    display: flex;
-    gap: 24rpx;
-  }
-
-  .detail-item {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 6rpx;
-    min-width: 0;
-
-    .detail-label {
-      font-size: 22rpx;
-      color: #999;
-      font-weight: 400;
-    }
-
-    .detail-value {
-      font-size: 24rpx;
-      color: #333;
-      font-weight: 500;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
-    background: #fff;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
     .btn-detail,
     .btn-edit,
     .btn-delete {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6rpx;
+      padding: 0 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
@@ -647,9 +540,9 @@ function selectStatus(item) {
     }
 
     .btn-detail {
-      background: rgba(102, 126, 234, 0.1);
-      color: #667eea;
-      border: 1rpx solid rgba(102, 126, 234, 0.3);
+      background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+      border: 1rpx solid rgba(82, 196, 26, 0.3);
     }
 
     .btn-edit {
diff --git a/src/pages/work/bill/creditQueryRecord/addEdit.vue b/src/pages/work/bill/creditQueryRecord/addEdit.vue
index 4cf4d4f..25d8ae5 100644
--- a/src/pages/work/bill/creditQueryRecord/addEdit.vue
+++ b/src/pages/work/bill/creditQueryRecord/addEdit.vue
@@ -2,11 +2,8 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
+			leftIconColor="#333333"
 			title="征信记录查询"
-			:titleStyle="{color: '#ffffff', fontSize: '36rpx', fontWeight: '600'}"
-			:bgColor="'transparent'"
-			:customStyle="{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', boxShadow: '0 4rpx 12rpx rgba(102, 126, 234, 0.3)'}"
 		>
 		</u-navbar>
       <view class="section">
@@ -33,17 +30,13 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit" 
-              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
+            <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="typeList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm" 
-        title="选择查询原因"
-        :confirmColor="'#667eea'"
-        :cancelColor="'#666666'"></u-picker>
+        @confirm="handleConfirm"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -52,9 +45,6 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
-			title="选择查询日期"
-			:confirmColor="'#667eea'"
-			:cancelColor="'#666666'"
 		></u-datetime-picker>
     </view>
   </template>
@@ -196,12 +186,24 @@ onLoad((option) => {
     border-radius: 8rpx;
   
     .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;
+      margin: -16rpx -24rpx 20rpx;
+      
+      &::before {
+        content: '';
+        width: 6rpx;
+        height: 28rpx;
+        background: #ffffff;
+        border-radius: 3rpx;
+        margin-right: 12rpx;
+      }
     }
   
     .form-view {
@@ -212,4 +214,20 @@ onLoad((option) => {
       }
     }
   }
+  </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/work/bill/creditQueryRecord/analysis.vue b/src/pages/work/bill/creditQueryRecord/analysis.vue
index 56c3db4..fb554bd 100644
--- a/src/pages/work/bill/creditQueryRecord/analysis.vue
+++ b/src/pages/work/bill/creditQueryRecord/analysis.vue
@@ -2,51 +2,55 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
+			leftIconColor="#333333"
 			title="征信查询记录统计"
-			:titleStyle="{color: '#ffffff', fontSize: '36rpx', fontWeight: '600'}"
-			:bgColor="'transparent'"
-			:customStyle="{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', boxShadow: '0 4rpx 12rpx rgba(102, 126, 234, 0.3)'}"
 		>
 		</u-navbar>
       <view class="section">
-        <view class="stats-card">
-          <view class="card-header">
-            <view class="header-icon">
-              <uni-icons type="pie-chart-filled" size="24" color="#ffffff"></uni-icons>
-            </view>
-            <text class="header-title">查询次数统计</text>
+        <view class="summary-card">
+          <view class="summary-icon">
+            <uni-icons type="checkmarkempty" size="32" color="#52c41a"></uni-icons>
           </view>
-          
-          <view class="card-body">
-            <view class="stats-item">
-              <text class="stats-label">近1个月</text>
-              <text class="stats-value">{{ detailInfo.lastOneMonths || 0 }}次</text>
-            </view>
-            <view class="stats-item">
-              <text class="stats-label">近2个月</text>
-              <text class="stats-value">{{ detailInfo.lastTwoMonths || 0 }}次</text>
-            </view>
-            <view class="stats-item">
-              <text class="stats-label">近3个月</text>
-              <text class="stats-value">{{ detailInfo.lastThreeMonths || 0 }}次</text>
-            </view>
-            <view class="stats-item">
-              <text class="stats-label">近6个月</text>
-              <text class="stats-value">{{ detailInfo.lastSixMonths || 0 }}次</text>
-            </view>
-            <view class="stats-item">
-              <text class="stats-label">近1年</text>
-              <text class="stats-value">{{ detailInfo.lastOneYears || 0 }}次</text>
-            </view>
-            <view class="stats-item">
-              <text class="stats-label">近2年</text>
-              <text class="stats-value">{{ detailInfo.lastTwoYears || 0 }}次</text>
-            </view>
-            <view class="stats-item highlight">
-              <text class="stats-label">总查询次数</text>
-              <text class="stats-value">{{ detailInfo.lastAllYears || 0 }}次</text>
-            </view>
+          <view class="summary-info">
+            <text class="summary-label">总查询次数</text>
+            <text class="summary-value">{{ detailInfo.lastAllYears || 0 }}次</text>
+          </view>
+        </view>
+
+        <view class="stats-grid">
+          <view class="grid-item">
+            <text class="item-value">{{ detailInfo.lastOneMonths || 0 }}</text>
+            <text class="item-label">近1个月</text>
+          </view>
+          <view class="grid-item">
+            <text class="item-value">{{ detailInfo.lastTwoMonths || 0 }}</text>
+            <text class="item-label">近2个月</text>
+          </view>
+          <view class="grid-item">
+            <text class="item-value">{{ detailInfo.lastThreeMonths || 0 }}</text>
+            <text class="item-label">近3个月</text>
+          </view>
+          <view class="grid-item">
+            <text class="item-value">{{ detailInfo.lastSixMonths || 0 }}</text>
+            <text class="item-label">近6个月</text>
+          </view>
+          <view class="grid-item">
+            <text class="item-value">{{ detailInfo.lastOneYears || 0 }}</text>
+            <text class="item-label">近1年</text>
+          </view>
+          <view class="grid-item">
+            <text class="item-value">{{ detailInfo.lastTwoYears || 0 }}</text>
+            <text class="item-label">近2年</text>
+          </view>
+        </view>
+
+        <view class="tips-card">
+          <view class="tips-icon">
+            <uni-icons type="info-filled" size="20" color="#667eea"></uni-icons>
+          </view>
+          <view class="tips-content">
+            <text class="tips-title">温馨提示</text>
+            <text class="tips-text">过多的征信查询可能会影响信用评分，建议控制查询频率。</text>
           </view>
         </view>
       </view>
@@ -78,82 +82,123 @@ onLoad((option) => {
   
   <style lang="scss" scoped>
   .section {
-    margin: 24rpx;
+    padding: 24rpx;
   
-    .stats-card {
-      background-color: #fff;
+    .summary-card {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       border-radius: 24rpx;
-      overflow: hidden;
-      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+      padding: 24rpx 28rpx;
+      margin-bottom: 24rpx;
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+      box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
 
-      .card-header {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        padding: 32rpx;
+      .summary-icon {
+        width: 56rpx;
+        height: 56rpx;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.2);
         display: flex;
         align-items: center;
-        gap: 16rpx;
-
-        .header-icon {
-          width: 56rpx;
-          height: 56rpx;
-          border-radius: 50%;
-          background: rgba(255, 255, 255, 0.2);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .header-title {
-          font-size: 36rpx;
-          color: #ffffff;
-          font-weight: 600;
-          flex: 1;
-        }
+        justify-content: center;
+        flex-shrink: 0;
       }
 
-      .card-body {
-        padding: 32rpx;
+      .summary-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 4rpx;
 
-        .stats-item {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 28rpx 24rpx;
-          background: #f5f7fa;
-          border-radius: 16rpx;
-          margin-bottom: 16rpx;
+        .summary-label {
+          font-size: 24rpx;
+          color: rgba(255, 255, 255, 0.9);
+          font-weight: 500;
+        }
 
-          &:last-child {
-            margin-bottom: 0;
-          }
+        .summary-value {
+          font-size: 42rpx;
+          color: #ffffff;
+          font-weight: 700;
+          line-height: 1.2;
+        }
+      }
+    }
 
-          &.highlight {
-            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
-            border: 2rpx solid rgba(102, 126, 234, 0.3);
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 24rpx;
+      margin-bottom: 24rpx;
 
-            .stats-label {
-              font-size: 30rpx;
-              color: #667eea;
-              font-weight: 600;
-            }
+      .grid-item {
+        background: #ffffff;
+        border-radius: 20rpx;
+        padding: 32rpx 24rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
+        border: 2rpx solid #f0f0f0;
+        transition: all 0.3s ease;
 
-            .stats-value {
-              font-size: 36rpx;
-              color: #667eea;
-              font-weight: 700;
-            }
-          }
+        &:active {
+          transform: scale(0.98);
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+        }
 
-          .stats-label {
-            font-size: 28rpx;
-            color: #666;
-          }
+        .item-value {
+          font-size: 48rpx;
+          color: #667eea;
+          font-weight: 700;
+          line-height: 1;
+        }
 
-          .stats-value {
-            font-size: 32rpx;
-            color: #333;
-            font-weight: 600;
-          }
+        .item-label {
+          font-size: 26rpx;
+          color: #999;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .tips-card {
+      background: #fff9e6;
+      border-radius: 16rpx;
+      padding: 24rpx;
+      display: flex;
+      gap: 16rpx;
+      border-left: 6rpx solid #faad14;
+
+      .tips-icon {
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 50%;
+        background: rgba(102, 126, 234, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .tips-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8rpx;
+
+        .tips-title {
+          font-size: 28rpx;
+          color: #333;
+          font-weight: 600;
+        }
+
+        .tips-text {
+          font-size: 24rpx;
+          color: #666;
+          line-height: 1.6;
         }
       }
     }
diff --git a/src/pages/work/bill/creditQueryRecord/details.vue b/src/pages/work/bill/creditQueryRecord/details.vue
index d03bc05..1b25d0c 100644
--- a/src/pages/work/bill/creditQueryRecord/details.vue
+++ b/src/pages/work/bill/creditQueryRecord/details.vue
@@ -1,43 +1,56 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
+			leftIconColor="#333333"
 			title="征信查询记录详情"
-			:titleStyle="{color: '#ffffff', fontSize: '36rpx', fontWeight: '600'}"
-			:bgColor="'transparent'"
-			:customStyle="{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', boxShadow: '0 4rpx 12rpx rgba(102, 126, 234, 0.3)'}"
 		>
 		</u-navbar>
-      <view class="section">
-        <view class="detail-card">
-          <view class="card-header">
-            <view class="header-icon">
-              <uni-icons type="search" size="24" color="#ffffff"></uni-icons>
+      
+      <view class="detail-card">
+        <view class="card-header">
+          <view class="header-icon">
+            <uni-icons type="search" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.queryInstitution }}</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.queryDate }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">查询原因</text>
+                <text class="item-value">{{ detailInfo.type }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">查询类型</text>
+                <text class="item-value">{{ detailInfo.queryType }}</text>
+              </view>
             </view>
-            <text class="header-title">{{ detailInfo.queryInstitution }}</text>
           </view>
           
-          <view class="card-body">
-            <view class="info-item">
-              <text class="info-label">查询日期</text>
-              <text class="info-value">{{ detailInfo.queryDate }}</text>
+          <view class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
             </view>
-            <view class="info-item">
-              <text class="info-label">查询原因</text>
-              <text class="info-value">{{ detailInfo.type }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">查询类型</text>
-              <text class="info-value">{{ detailInfo.queryType }}</text>
-            </view>
-            <view class="info-item" v-if="detailInfo.remark">
-              <text class="info-label">备注</text>
-              <text class="info-value remark">{{ detailInfo.remark }}</text>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
             </view>
           </view>
         </view>
       </view>
+      
       <u-toast ref="uToast"></u-toast>
     </view>
   </template>
@@ -81,77 +94,124 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
+.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%);
   
-    .detail-card {
-      background-color: #fff;
-      border-radius: 24rpx;
+  .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;
-      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+      text-overflow: ellipsis;
+    }
+  }
+}
 
-      .card-header {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        padding: 20rpx 24rpx;
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
+.card-body {
+  padding: 24rpx;
+}
 
-        .header-icon {
-          width: 48rpx;
-          height: 48rpx;
-          border-radius: 50%;
-          background: rgba(255, 255, 255, 0.25);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .header-title {
-          font-size: 28rpx;
-          color: #ffffff;
-          font-weight: 600;
-          line-height: 1.2;
-          flex: 1;
-        }
+.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;
       }
-
-      .card-body {
-        padding: 32rpx;
-
-        .info-item {
-          display: flex;
-          justify-content: space-between;
-          align-items: flex-start;
-          padding: 24rpx 0;
-          border-bottom: 1rpx solid #f0f0f0;
-
-          &:last-child {
-            border-bottom: none;
-          }
-
-          .info-label {
-            font-size: 28rpx;
-            color: #999;
-            flex-shrink: 0;
-            width: 160rpx;
-          }
-
-          .info-value {
-            font-size: 28rpx;
-            color: #333;
-            font-weight: 500;
-            flex: 1;
-            text-align: right;
-
-            &.remark {
-              text-align: left;
-              line-height: 1.6;
-              margin-left: 32rpx;
-            }
-          }
-        }
+      
+      .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/work/bill/creditQueryRecord/list.vue b/src/pages/work/bill/creditQueryRecord/list.vue
index 562bb3b..7c4389c 100644
--- a/src/pages/work/bill/creditQueryRecord/list.vue
+++ b/src/pages/work/bill/creditQueryRecord/list.vue
@@ -1,21 +1,22 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
       <view class="search-view">
-        <u--input v-model="queryParams.name" border="false" placeholder="请输入查询机构" class="search-input"
+        <u--input v-model="queryParams.queryInstitution" 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="20" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
         <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <uni-icons type="plusempty" size="20" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
         <view class="stats-btn" @click="handleQueryAnalysis()">
-          <uni-icons type="pie-chart-filled" size="18" color="#ffffff"></uni-icons>
+          <uni-icons type="bars" size="20" color="#667eea"></uni-icons>
           <text>统计</text>
         </view>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3); margin-left: 12rpx;"></u-icon>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -61,10 +62,12 @@
             </view>
           </view>
           
-          <view class="card-body" v-if="item.remark">
-            <view class="remark-section">
-              <text class="remark-label">备注:</text>
-              <text class="remark-text">{{ item.remark }}</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>
           
@@ -276,36 +279,50 @@ function selectStatus(item) {
 
 <style lang="scss" scoped>
 .search-view {
-  padding: 12rpx 24rpx;
+  padding: 12rpx 32rpx;
   background-color: #ffffff;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
+  z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    flex: 1;
-    background: #F5F5F5;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
-    margin-right: 12rpx;
+    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,
   .add-btn,
   .stats-btn {
     display: flex;
     align-items: center;
     gap: 6rpx;
-    padding: 8rpx 20rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 20rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    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: 12rpx;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
 
     text {
-      font-size: 26rpx;
-      color: #ffffff;
-      font-weight: 500;
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
     }
   }
 
@@ -471,24 +488,45 @@ function selectStatus(item) {
   }
 
   .card-body {
-    padding: 24rpx 32rpx;
-    background: #ffffff;
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .remark-section {
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
+
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
-      gap: 12rpx;
-
-      .remark-label {
-        font-size: 26rpx;
-        color: #999;
-        flex-shrink: 0;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
+      
+      &.info-item-full {
+        flex: 0 0 100%;
       }
 
-      .remark-text {
+      .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.6;
+        line-height: 1.5;
+        word-break: break-all;
       }
     }
   }
@@ -497,19 +535,25 @@ function selectStatus(item) {
     display: flex;
     justify-content: flex-end;
     gap: 16rpx;
-    padding: 24rpx 32rpx;
-    background: #f5f7fa;
+    padding: 16rpx 24rpx 24rpx;
 
     .btn-edit,
     .btn-copy,
     .btn-delete {
       display: flex;
       align-items: center;
+      justify-content: center;
       gap: 6rpx;
-      padding: 12rpx 24rpx;
-      border-radius: 16rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
       font-size: 26rpx;
       font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
 
       text {
         font-size: 26rpx;
@@ -518,6 +562,7 @@ function selectStatus(item) {
 
     .btn-edit {
       background: rgba(102, 126, 234, 0.1);
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
 
       text {
         color: #667eea;
@@ -526,6 +571,7 @@ function selectStatus(item) {
 
     .btn-copy {
       background: rgba(82, 196, 26, 0.1);
+      border: 1rpx solid rgba(82, 196, 26, 0.3);
 
       text {
         color: #52c41a;
@@ -534,6 +580,7 @@ function selectStatus(item) {
 
     .btn-delete {
       background: rgba(245, 87, 108, 0.1);
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
 
       text {
         color: #f5576c;
diff --git a/src/pages/work/bill/futuresBill/addEdit.vue b/src/pages/work/bill/futuresBill/addEdit.vue
index 4fd84f3..5d5427a 100644
--- a/src/pages/work/bill/futuresBill/addEdit.vue
+++ b/src/pages/work/bill/futuresBill/addEdit.vue
@@ -1,14 +1,13 @@
 <template>
-    <view class="container">
+    <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
-			:title="title"
-			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
-			titleStyle="color: #ffffff; font-weight: 600;"
+			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' }">
@@ -31,8 +30,7 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"
-              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 12rpx; font-size: 32rpx; font-weight: 600; height: 88rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
+            <u-button type="primary" text="提交" @click="submit"></u-button>
           </view>
         </view>
       </view>
@@ -55,11 +53,6 @@
       keyName="nameCode" 
       @cancel="handleFutureStocksCancel"
       @confirm="handleFutureStocksConfirm"
-      :closeOnClickOverlay="true"
-      :defaultIndex="[0]"
-      cancelColor="#666666"
-      confirmColor="#667eea"
-      title="选择期货账户"
       ></u-picker>
     </view>
   </template>
@@ -193,24 +186,55 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-.container {
-  background: #f5f7fa;
-  min-height: 100vh;
-}
-
 .section {
   margin: 24rpx;
-  padding: 32rpx;
+  padding: 16rpx 24rpx;
   background-color: #fff;
-  border-radius: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  border-radius: 8rpx;
+
+  .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;
+    margin: -16rpx -24rpx 20rpx;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+  }
 
   .form-view {
-    padding: 0;
+    padding: 20rpx 0rpx 0 10rpx;
 
     .form-btn {
-      padding-top: 40rpx;
+      padding-top: 20rpx;
     }
   }
 }
+  </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/work/bill/futuresBill/details.vue b/src/pages/work/bill/futuresBill/details.vue
index ea69ecb..ba2c427 100644
--- a/src/pages/work/bill/futuresBill/details.vue
+++ b/src/pages/work/bill/futuresBill/details.vue
@@ -1,44 +1,25 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u--input v-model="queryParams.time" border="false" disabled placeholder="请输入时间" class="search-input"
-          @blur="searchBlur" suffixIcon="calendar" suffixIconStyle="color: #909399">
-        </u--input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></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 dealTypeList" :key="item.id" class="state-item"
-                  :class="item.selected ? 'active' : ''" @click="selectDealType(item)">{{ item.dictLabel }}</view>
-              </view>
-     
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
+      <view class="sticky-container">
+        <view class="search-view">
+          <u--input v-model="queryParams.time" border="false" disabled placeholder="请输入时间" class="search-input"
+            @blur="searchBlur" suffixIcon="calendar" suffixIconStyle="color: #909399">
+          </u--input>
+        </view>
+        
+        <view class="filter-view">
+          <view class="filter-title">收益类型：</view>
+          <view class="type-list">
+            <view class="type-item" :class="!queryParams.dealType ? 'active' : ''" @click="selectDealType(null)">
+              <text>全部</text>
             </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 v-for="item in dealTypeList" :key="item.dictValue" class="type-item"
+              :class="queryParams.dealType === item.dictValue ? 'active' : ''" @click="selectDealType(item.dictValue)">
+              <text>{{ item.dictLabel }}</text>
             </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>
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
@@ -47,12 +28,14 @@
           <view class="item-header">
             <view class="card-name-section">
               <view class="card-icon">
-                <uni-icons type="checkmark-circle-filled" size="20" :color="item.dealType === '1' ? '#52c41a' : '#f5576c'"></uni-icons>
+                <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="card-date">{{ item.createTime }}</text>
             </view>
-            <text class="card-name">{{ dictStr(item.dealType, dealTypeList) }}</text>
-            <text class="card-amount" :class="item.dealType === '1' ? 'profit' : 'loss'"><text class="amount-value">{{ item.amount }}</text>元</text>
+            <view class="profit-tag" :class="item.dealType === '1' ? 'profit' : 'loss'">
+              <text>{{ dictStr(item.dealType, dealTypeList) }}</text>
+            </view>
+            <text class="card-amount" :class="item.dealType === '1' ? 'profit' : 'loss'"><text class="amount-value">{{ item.amount }} 元</text></text>
           </view>
           
           <view class="card-body">
@@ -63,7 +46,11 @@
               </view>
               <view class="info-item">
                 <text class="info-label">当前余额</text>
-                <text class="info-value">{{ item.currentBalance }}元</text>
+                <text class="info-value balance-value">{{ item.currentBalance }}元</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>
@@ -185,22 +172,11 @@ function dictStr(val, arr) {
       })
       return str
     }
-    function selectDealType(item) {
-      queryParams.value.dealType = item.dictValue
-      dealTypeList.value.map(ele => {
-        if (ele.dictValue == item.dictValue) {
-          ele.selected = true
-          Reflect.set(ele, 'selected', true)
-        } else {
-          Reflect.set(ele, 'selected', false)
-        }
-      })
-    }
-    function searchSubmit() {
+    function selectDealType(value) {
+      queryParams.value.dealType = value
       pageNum.value = 1
       listData.value = []
       getList()
-      filterPanel.value = false
     }
     function searchBlur() {
       pageNum.value = 1
@@ -210,17 +186,11 @@ function dictStr(val, arr) {
     function resetQuery() {
         queryParams.value.name = ''
         queryParams.value.type = ''
-        queryParams.value.dealType = ''
+        queryParams.value.dealType = null
         queryParams.value.dealCategory = '2'
-      accountTypeList.value.map(ele => {
-        Reflect.set(ele, 'selected', false)
-      })
-      dealTypeList.value.map(ele => {
-        Reflect.set(ele, 'selected', false)
-      })
-      dealCategoryList.value.map(ele => {
-        Reflect.set(ele, 'selected', false)
-      })
+      pageNum.value = 1
+      listData.value = []
+      getList()
     }
     function enterDetails(item) {
       uni.navigateTo({ url: `/pages/work/accounts/accountDealRecord/details?id=${item.id}` })
@@ -229,6 +199,11 @@ function dictStr(val, arr) {
 </script>
 
 <style lang="scss" scoped>
+.sticky-container {
+  background-color: #f5f7fa;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -245,105 +220,61 @@ function dictStr(val, arr) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
   z-index: 100;
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
-    margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    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);
-    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;
+.filter-view {
+  padding: 16rpx 32rpx 20rpx;
+  background-color: #ffffff;
+  border-bottom: 1rpx solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  
+  .filter-title {
+    color: #333333;
+    font-size: 28rpx;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+  
+  .type-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12rpx;
+    flex: 1;
+    
+    .type-item {
+      padding: 0 24rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      border-radius: 30rpx;
+      font-size: 26rpx;
+      color: #666666;
+      background: #f5f7fa;
+      border: 2rpx solid transparent;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
         font-weight: 600;
-        padding: 32rpx 0 24rpx;
-      }
-
-      .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, #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;
-        
-        text {
-          line-height: 1;
-        }
-      }
-      
-      .btn-reset {
-        flex: 1;
-        background: #f5f7fa;
-        border: 2rpx solid #dcdfe6;
-        
-        text {
-          color: #606266;
-        }
-      }
-      
-      .btn-confirm {
-        flex: 1;
-        background: #667eea;
-        
-        text {
-          color: #ffffff;
-        }
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
       }
     }
   }
@@ -389,17 +320,29 @@ function dictStr(val, arr) {
       flex-shrink: 0;
       font-weight: 600;
       line-height: 1;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    .card-name {
-      font-size: 26rpx;
-      font-weight: 600;
-      color: #ffffff;
-      white-space: nowrap;
-      flex-shrink: 0;
-      flex: 1;
-      text-align: center;
+    .profit-tag {
+      padding: 6rpx 16rpx;
+      border-radius: 12rpx;
+      font-size: 24rpx;
+      font-weight: 500;
       line-height: 1;
+      flex-shrink: 0;
+      
+      &.profit {
+        background: rgba(82, 196, 26, 0.25);
+        color: #52c41a;
+      }
+      
+      &.loss {
+        background: rgba(245, 87, 108, 0.25);
+        color: #f5576c;
+      }
     }
 
     .card-amount {
@@ -438,24 +381,47 @@ function dictStr(val, arr) {
 
   .info-row {
     display: flex;
+    flex-wrap: wrap;
     gap: 24rpx;
+    margin-bottom: 0;
 
     .info-item {
-      flex: 1;
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
       flex-direction: column;
-      gap: 8rpx;
+      gap: 4rpx;
       min-width: 0;
+      margin-bottom: -5rpx;
+      
+      &.info-item-full {
+        flex: 0 0 100%;
+      }
 
       .info-label {
         font-size: 24rpx;
-        color: #999;
+        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;
+        
+        &.balance-value {
+          color: #fa8c16;
+          font-weight: 600;
+        }
+      }
+      
+      &:not(.info-item-full) .info-value {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
diff --git a/src/pages/work/bill/futuresBill/list.vue b/src/pages/work/bill/futuresBill/list.vue
index 12bdaee..fa4efb3 100644
--- a/src/pages/work/bill/futuresBill/list.vue
+++ b/src/pages/work/bill/futuresBill/list.vue
@@ -1,12 +1,12 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
       <view class="search-view">
         <u-input v-model="queryParams.futureStocksName" border="false" type="select"  @click="handleFutureStocks" placeholder="请选择期货账户" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
         <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <uni-icons type="plusempty" size="20" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
       </view>
@@ -17,7 +17,7 @@
           <view class="item-header">
             <view class="date-row">
               <view class="card-icon">
-                <uni-icons type="chart-filled" size="20" color="#ffffff"></uni-icons>
+                <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="bill-name" v-if="item.name">{{ item.name }}</text>
               <text class="card-date">({{ item.billDatePeriod }})</text>
@@ -27,7 +27,7 @@
               <view class="profit-tag" :class="item.billAmount >= 0 ? 'profit' : 'loss'">
                 <text>{{ item.billAmount >= 0 ? '盈利' : '亏损' }}</text>
               </view>
-              <text class="card-amount" :class="item.billAmount >= 0 ? 'profit' : 'loss'"><text class="amount-value">{{ item.billAmount }}</text>元</text>
+              <text class="card-amount" :class="item.billAmount >= 0 ? 'profit' : 'loss'"><text class="amount-value">{{ item.billAmount >= 0 ? '+' : '' }}{{ item.billAmount }}</text>元</text>
             </view>
           </view>
           
@@ -93,7 +93,6 @@ const data = reactive({
   queryFutureStocksListParams: {
     pageNum: 1,
     type: '1',
-    status: '1',
     pageSize: 100
   },
   queryParams: {
@@ -261,16 +260,19 @@ function selectStatus(item) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
   }
   
   .add-btn {
@@ -278,19 +280,19 @@ function selectStatus(item) {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
       font-weight: 600;
     }
@@ -399,7 +401,7 @@ function selectStatus(item) {
       }
       
       .amount-value {
-        font-size: 40rpx;
+        font-size: 32rpx;
         font-weight: 700;
         margin-right: 4rpx;
       }
@@ -408,18 +410,18 @@ function selectStatus(item) {
 
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
-    background: #fff;
+    justify-content: flex-end;
+    gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
 
     .btn-detail,
     .btn-edit,
     .btn-delete {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6rpx;
+      padding: 0 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
diff --git a/src/pages/work/bill/onlineLendHistory/addEdit.vue b/src/pages/work/bill/onlineLendHistory/addEdit.vue
index 8b60170..06c2645 100644
--- a/src/pages/work/bill/onlineLendHistory/addEdit.vue
+++ b/src/pages/work/bill/onlineLendHistory/addEdit.vue
@@ -2,10 +2,8 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
+			leftIconColor="#333333"
 			title="贷款账单"
-			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
-			:titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
 		>
 		</u-navbar>
       <view class="section">
@@ -66,14 +64,13 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"
-              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
+            <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="settleStateList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择结清状态"></u-picker>
+        @confirm="handleConfirm"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -82,9 +79,6 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
-      :closeOnClickOverlay="true"
-      cancelColor="#666666"
-      confirmColor="#667eea"
 		></u-datetime-picker>
     <u-datetime-picker
 			:show="closeDatePickShow"
@@ -94,14 +88,11 @@
 			@cancel="closeDatePickShow=false"
 			@confirm="closeDatePickConfirm"
 			itemHeight="88"
-      :closeOnClickOverlay="true"
-      cancelColor="#666666"
-      confirmColor="#667eea"
 		></u-datetime-picker>
     <u-picker itemHeight="88" :show="showOnlineLend" :columns="bankCardLendList" keyName="nameCode" @cancel="handleOnlineLendCancel"
-        @confirm="handleOnlineLendConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择贷款机构"></u-picker>
+        @confirm="handleOnlineLendConfirm"></u-picker>
         <u-picker itemHeight="88" :show="showDebitCard" :columns="debitCardList" keyName="nameCode" @cancel="handleDebitCardCancel"
-        @confirm="handleDebitCardConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择收款账户"></u-picker>
+        @confirm="handleDebitCardConfirm"></u-picker>
     </view>
   </template>
   
@@ -320,25 +311,54 @@ onLoad((option) => {
   <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/work/bill/onlineLendHistory/details.vue b/src/pages/work/bill/onlineLendHistory/details.vue
index c5dd7d8..6950cfc 100644
--- a/src/pages/work/bill/onlineLendHistory/details.vue
+++ b/src/pages/work/bill/onlineLendHistory/details.vue
@@ -2,19 +2,17 @@
   <view class="container">
     <u-navbar
       leftIconSize="40rpx"
-      leftIconColor="#ffffff"
+      leftIconColor="#333333"
       title="还款明细"
-      :bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
-      :titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
     >
     </u-navbar>
     
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
       <view class="search-view">
         <u-input v-model="queryParams.name"  border="false" disabled ="false" type="select"  v-show="true" class="search-input">
         </u-input>
           <view class="summary-btn" @click="handleUpdateInterest()">
-            <uni-icons type="checkmark-circle-fill" size="18" color="#ffffff"></uni-icons>
+            <uni-icons type="checkmarkempty" size="18" color="#667eea"></uni-icons>
             <text>总利息汇总</text>
           </view>
       </view>
@@ -28,26 +26,23 @@
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="account-name">{{ item.repaymentAccountName }}</text>
+              <text class="status-badge" :class="item.postingState === '1' ? 'paid' : 'unpaid'">{{ dictStr(item.postingState, postingStateList) }}</text>
             </view>
             <view class="info-row">
               <text class="time-text">{{ item.repaymentDate }}</text>
               <text class="type-text">第{{ item.periods }}期</text>
-              <text class="amount-value">{{ item.currentAmount }}元</text>
+              <text class="amount-value" :class="item.postingState === '1' ? 'paid' : 'unpaid'">{{ item.currentAmount }}元</text>
             </view>
           </view>
           
           <view class="card-body">
             <view class="info-item">
               <text class="info-label">应还本金</text>
-              <text class="info-value">{{ item.principal }}元</text>
+              <text class="info-value orange">{{ item.principal }}元</text>
             </view>
             <view class="info-item">
               <text class="info-label">利息</text>
-              <text class="info-value">{{ item.interest }}元</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">还款状态</text>
-              <text class="info-value" :class="item.postingState === '1' ? 'paid' : 'unpaid'">{{ dictStr(item.postingState, postingStateList) }}</text>
+              <text class="info-value orange">{{ item.interest }}元</text>
             </view>
           </view>
           
@@ -238,14 +233,18 @@ function handleUpdateInterest() {
   align-items: center;
   position: relative;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
   }
   
   .summary-btn {
@@ -253,19 +252,19 @@ function handleUpdateInterest() {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
       font-weight: 600;
     }
@@ -315,6 +314,25 @@ function handleUpdateInterest() {
       white-space: nowrap;
     }
 
+    .status-badge {
+      font-size: 22rpx;
+      font-weight: 600;
+      padding: 4rpx 12rpx;
+      border-radius: 12rpx;
+      line-height: 1.2;
+      flex-shrink: 0;
+      
+      &.paid {
+        background: rgba(82, 196, 26, 0.2);
+        color: #52c41a;
+      }
+      
+      &.unpaid {
+        background: rgba(255, 140, 0, 0.2);
+        color: #ff8c00;
+      }
+    }
+
     .info-row {
       display: flex;
       justify-content: space-between;
@@ -345,9 +363,16 @@ function handleUpdateInterest() {
     .amount-value {
       font-size: 32rpx;
       font-weight: 700;
-      color: #52c41a;
       line-height: 1.2;
       flex-shrink: 0;
+      
+      &.paid {
+        color: #52c41a;
+      }
+      
+      &.unpaid {
+        color: #f5576c;
+      }
     }
   }
 
@@ -367,8 +392,11 @@ function handleUpdateInterest() {
 
     .info-label {
       font-size: 22rpx;
-      color: #999;
-      font-weight: 400;
+        color: #667eea;
+        font-weight: 500;
+        background: rgba(102, 126, 234, 0.08);
+         border-radius: 8rpx;
+        align-self: flex-start;
     }
 
     .info-value {
@@ -379,13 +407,8 @@ function handleUpdateInterest() {
       text-overflow: ellipsis;
       white-space: nowrap;
       
-      &.paid {
-        color: #52c41a;
-        font-weight: 600;
-      }
-      
-      &.unpaid {
-        color: #ff8c00;
+      &.orange {
+        color: #fa8c16;
         font-weight: 600;
       }
     }
@@ -393,18 +416,18 @@ function handleUpdateInterest() {
 
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
-    background: #fff;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
     .btn-edit,
     .btn-delete,
     .btn-view {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6rpx;
+      padding: 0 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
diff --git a/src/pages/work/bill/onlineLendHistory/detailsAddEdit.vue b/src/pages/work/bill/onlineLendHistory/detailsAddEdit.vue
index 70920d8..1b46c99 100644
--- a/src/pages/work/bill/onlineLendHistory/detailsAddEdit.vue
+++ b/src/pages/work/bill/onlineLendHistory/detailsAddEdit.vue
@@ -2,10 +2,8 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
+			leftIconColor="#333333"
 			title="贷款账单还款明细"
-			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
-			:titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
 		>
 		</u-navbar>
       <view class="section">
@@ -50,14 +48,13 @@
             </u-form-item>
           </u--form>
           <view class="form-btn" v-if="!viewOnly">
-            <u-button type="primary" text="提交" @click="submit"
-              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
+            <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="postingStateList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择还款状态"></u-picker>
+        @confirm="handleConfirm"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -66,12 +63,9 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
-      :closeOnClickOverlay="true"
-      cancelColor="#666666"
-      confirmColor="#667eea"
 		></u-datetime-picker>
       <u-picker itemHeight="88" :show="showDebitCard" :columns="debitCardList" keyName="nameCode" @cancel="handleDebitCardCancel"
-        @confirm="handleDebitCardConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择还款账户"></u-picker>
+        @confirm="handleDebitCardConfirm"></u-picker>
     </view>
   </template>
   
@@ -222,25 +216,54 @@ onLoad((option) => {
   <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/work/bill/onlineLendHistory/list.vue b/src/pages/work/bill/onlineLendHistory/list.vue
index 4063052..0ecfabc 100644
--- a/src/pages/work/bill/onlineLendHistory/list.vue
+++ b/src/pages/work/bill/onlineLendHistory/list.vue
@@ -1,54 +1,47 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u-input v-model="queryParams.onlineLendName" border="false" type="select"  @click="handleOnlineLend" placeholder="请选择贷款机构" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
-          <text>新增</text>
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
+      <view class="sticky-container">
+        <view class="search-view">
+          <u-input v-model="queryParams.onlineLendName" border="false" type="select" @click="handleOnlineLend" placeholder="请选择贷款机构" suffixIcon="search"
+            suffixIconStyle="color: #909399" class="search-input">
+          </u-input>
+          <view class="add-btn" @click="handleAdd()">
+            <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+            <text>新增</text>
+          </view>
         </view>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3); margin-left: 12rpx;"></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 settleStateList" :key="item.id" class="state-item"
-                  :class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
-              </view>
+        
+        <view class="filter-view">
+          <view class="filter-title">结清状态：</view>
+          <view class="type-list">
+            <view class="type-item" :class="!queryParams.state ? 'active' : ''" @click="selectStatus('')">
+              <text>全部</text>
             </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 v-for="item in settleStateList" :key="item.dictValue" class="type-item"
+              :class="queryParams.state === item.dictValue ? 'active' : ''" @click="selectStatus(item.dictValue)">
+              <text>{{ item.dictLabel }}</text>
             </view>
           </view>
-        </u-transition>
+        </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-row">
+            <view class="first-row">
               <view class="card-icon">
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="card-name">{{ item.bankNameCode }}</text>
+              <text class="card-date">{{ item.installmentDate }}</text>
+              <text class="card-amount"> 借款 {{ item.installmentAmount }}元</text>
             </view>
-            <view class="info-row">
-              <text class="time-text">{{ item.installmentDate }}</text>
-              <text class="type-text">{{ dictStr(item.state, settleStateList) }}</text>
-              <text class="amount-value">{{ item.installmentAmount }}元</text>
+            <view class="second-row">
+              <text class="state-text">{{ dictStr(item.state, settleStateList) }}</text>
+              <text class="repayment-date">最近还款日 {{ formatRepaymentDate(item.repaymentDate) || '-' }}</text>
+              <text class="balance-value">余额 {{ item.balance }}元</text>
             </view>
           </view>
           
@@ -62,51 +55,28 @@
               <text class="info-value">{{ item.repaidPeriod }}期</text>
             </view>
             <view class="info-item">
-              <text class="info-label">余额</text>
-              <text class="info-value highlight">{{ item.balance }}元</text>
+              <text class="info-label">年化利率</text>
+              <text class="info-value">{{ item.interestRate || '-' }}</text>
             </view>
-          </view>
-          
-          <view class="detail-body">
-            <view class="detail-row">
-              <view class="detail-item">
-                <text class="detail-label">年化利率</text>
-                <text class="detail-value">{{ item.interestRate || '-' }}</text>
-              </view>
-              <view class="detail-item">
-                <text class="detail-label">计算利率</text>
-                <text class="detail-value">{{ item.calculateInterestRate || '-' }}</text>
-              </view>
+            <view class="info-item">
+              <text class="info-label">计算利率</text>
+              <text class="info-value">{{ item.calculateInterestRate || '-' }}</text>
             </view>
-            <view class="detail-row">
-              <view class="detail-item">
-                <text class="detail-label">剩余本金</text>
-                <text class="detail-value">{{ item.outstandingPrincipal || '0' }}元</text>
-              </view>
-              <view class="detail-item">
-                <text class="detail-label">剩余利息</text>
-                <text class="detail-value">{{ item.outstandingInterest || '0' }}元</text>
-              </view>
+            <view class="info-item">
+              <text class="info-label">剩余本金</text>
+              <text class="info-value orange">{{ item.outstandingPrincipal || '0' }}元</text>
             </view>
-            <view class="detail-row">
-              <view class="detail-item">
-                <text class="detail-label">到期日期</text>
-                <text class="detail-value">{{ item.dueDate || '-' }}</text>
-              </view>
-              <view class="detail-item">
-                <text class="detail-label">收款账户</text>
-                <text class="detail-value">{{ item.receivingAccountName || '-' }}</text>
-              </view>
+            <view class="info-item">
+              <text class="info-label">剩余利息</text>
+              <text class="info-value orange">{{ item.outstandingInterest || '0' }}元</text>
             </view>
-            <view class="detail-row">
-              <view class="detail-item">
-                <text class="detail-label">贷款天数</text>
-                <text class="detail-value">{{ item.loanDays || '-' }}</text>
-              </view>
-              <view class="detail-item">
-                <text class="detail-label">最近还款日</text>
-                <text class="detail-value">{{ formatRepaymentDate(item.repaymentDate) || '-' }}</text>
-              </view>
+            <view class="info-item">
+              <text class="info-label">到期日期</text>
+              <text class="info-value">{{ item.dueDate || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">收款账户</text>
+              <text class="info-value">{{ item.receivingAccountNameCode || '-' }}</text>
             </view>
           </view>
           
@@ -161,7 +131,6 @@ const settingColumns = ref([])
 const showOnlineLend = ref(false)
 const bankCardLendList = ref([])
 const data = reactive({
-  filterPanel: false,
   queryBankCardLendParams: {
     pageNum: 1,
     type: '3',
@@ -173,13 +142,10 @@ const data = reactive({
     name: null,
     type: '3',
     bankCardLendId: null,
-    state: '0'
+    state: ''
    } 
 })
-const { filterPanel, queryBankCardLendParams, queryParams} = toRefs(data)
-const windowHeight = computed(() => {
-			uni.getSystemInfoSync().windowHeight - 50
-		})	
+const { queryBankCardLendParams, queryParams} = toRefs(data)	
 onLoad(() => {
     getDict()
     getList()
@@ -239,16 +205,11 @@ function dictStr(val, arr) {
       })
       return str
     }
-function selectStatus(item) {
-      queryParams.value.state = item.dictValue
-      settleStateList.value.map(ele => {
-        if (ele.dictValue == item.dictValue) {
-          ele.selected = true
-          Reflect.set(ele, 'selected', true)
-        } else {
-          Reflect.set(ele, 'selected', false)
-        }
-      })
+function selectStatus(value) {
+      queryParams.value.state = value
+      pageNum.value = 1
+      listData.value = []
+      getList()
     }
     function handleOnlineLend() {
         if (bankCardLendList.value[0].length === 0) {
@@ -270,24 +231,14 @@ function selectStatus(item) {
  function handleOnlineLendCancel() {
        showOnlineLend.value = false
   }
-    function searchSubmit() {
-      pageNum.value = 1
-      listData.value = []
-      getList()
-      filterPanel.value = false
-    }
-    function searchBlur() {
-      pageNum.value = 1
-      listData.value = []
-      getList()
-    }
     function resetQuery() {
-        queryParams.value.bankCardLendId = '',
-        queryParams.value.state= '0',
+        queryParams.value.bankCardLendId = ''
+        queryParams.value.onlineLendName = ''
+        queryParams.value.state = ''
         queryParams.value.type = '3'
-      settleStateList.value.map(ele => {
-        Reflect.set(ele, 'selected', false)
-      })
+        pageNum.value = 1
+        listData.value = []
+        getList()
     }
     function enterDetails(item) {
       uni.navigateTo({ url: `/pages/work/bill/onlineLendHistory/details?id=${item.id}&name=${item.bankNameCode}` })
@@ -341,6 +292,11 @@ function selectStatus(item) {
       text-align: center;
     }
 
+.sticky-container {
+  background-color: #f5f7fa;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -349,14 +305,18 @@ function selectStatus(item) {
   align-items: center;
   position: relative;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
   }
   
   .add-btn {
@@ -364,118 +324,66 @@ function selectStatus(item) {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      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);
-
-    .filter-panel-content {
-      background-color: #ffffff;
-      padding: 0 30rpx 30rpx;
-      border-radius: 16rpx 16rpx 0 0;
-
-      .filter-title {
-        color: #2c3e50;
-        font-size: 32rpx;
+.filter-view {
+  padding: 16rpx 32rpx 20rpx;
+  background-color: #ffffff;
+  border-bottom: 1rpx solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  
+  .filter-title {
+    color: #333333;
+    font-size: 28rpx;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+  
+  .type-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12rpx;
+    flex: 1;
+    
+    .type-item {
+      padding: 0 24rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      border-radius: 30rpx;
+      font-size: 26rpx;
+      color: #666666;
+      background: #f5f7fa;
+      border: 2rpx solid transparent;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
         font-weight: 600;
-        padding: 32rpx 0 24rpx;
-      }
-
-      .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, #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;
-        }
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
       }
     }
   }
@@ -495,7 +403,7 @@ function selectStatus(item) {
     padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .header-row {
+    .first-row {
       display: flex;
       align-items: center;
       gap: 10rpx;
@@ -513,8 +421,8 @@ function selectStatus(item) {
     }
 
     .card-name {
-      font-size: 24rpx;
-      font-weight: 500;
+      font-size: 28rpx;
+      font-weight: 600;
       color: #ffffff;
       line-height: 1.3;
       flex: 1;
@@ -524,7 +432,23 @@ function selectStatus(item) {
       white-space: nowrap;
     }
 
-    .info-row {
+    .card-date {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
+
+    .card-amount {
+      font-size: 28rpx;
+      font-weight: 700;
+      color: #52c41a;
+      line-height: 1.2;
+      flex-shrink: 0;
+    }
+
+    .second-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -533,28 +457,30 @@ function selectStatus(item) {
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
     }
 
-    .time-text {
-      font-size: 26rpx;
-      color: rgba(255, 255, 255, 0.9);
-      font-weight: 500;
-      line-height: 1.3;
-      flex-shrink: 0;
-    }
-
-    .type-text {
+    .state-text {
       font-size: 24rpx;
       font-weight: 600;
       color: #ffffff;
       line-height: 1.3;
+      flex-shrink: 0;
+      padding: 4rpx 16rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 12rpx;
+    }
+
+    .repayment-date {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
       flex: 1;
-      min-width: 0;
       text-align: center;
     }
 
-    .amount-value {
-      font-size: 32rpx;
+    .balance-value {
+      font-size: 26rpx;
       font-weight: 700;
-      color: #52c41a;
+      color: #fa8c16;
       line-height: 1.2;
       flex-shrink: 0;
     }
@@ -563,21 +489,25 @@ function selectStatus(item) {
   .card-body {
     padding: 24rpx;
     background: #fff;
-    display: flex;
-    gap: 16rpx;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16rpx 24rpx;
   }
 
   .info-item {
-    flex: 1;
     display: flex;
     flex-direction: column;
     gap: 6rpx;
     min-width: 0;
 
     .info-label {
-      font-size: 22rpx;
-      color: #999;
-      font-weight: 400;
+     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 {
@@ -588,68 +518,27 @@ function selectStatus(item) {
       text-overflow: ellipsis;
       white-space: nowrap;
       
-      &.highlight {
-        color: #52c41a;
+      &.orange {
+        color: #fa8c16;
         font-weight: 600;
       }
     }
   }
 
-  .detail-body {
-    padding: 20rpx 24rpx;
-    background: #f5f7fa;
-    display: flex;
-    flex-direction: column;
-    gap: 16rpx;
-    border-top: 1rpx solid #e8edf3;
-  }
-
-  .detail-row {
-    display: flex;
-    gap: 24rpx;
-  }
-
-  .detail-item {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 6rpx;
-    min-width: 0;
-
-    &.full-width {
-      flex: 2;
-    }
-
-    .detail-label {
-      font-size: 22rpx;
-      color: #999;
-      font-weight: 400;
-    }
-
-    .detail-value {
-      font-size: 24rpx;
-      color: #333;
-      font-weight: 500;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
-    background: #fff;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
 
     .btn-detail,
     .btn-edit,
     .btn-delete {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6rpx;
+      padding: 0 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
@@ -662,9 +551,9 @@ function selectStatus(item) {
     }
 
     .btn-detail {
-      background: rgba(102, 126, 234, 0.1);
-      color: #667eea;
-      border: 1rpx solid rgba(102, 126, 234, 0.3);
+      background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+      border: 1rpx solid rgba(82, 196, 26, 0.3);
     }
 
     .btn-edit {
diff --git a/src/pages/work/bill/peopleLendHistory/addEdit.vue b/src/pages/work/bill/peopleLendHistory/addEdit.vue
index 0a34e13..1cf5a04 100644
--- a/src/pages/work/bill/peopleLendHistory/addEdit.vue
+++ b/src/pages/work/bill/peopleLendHistory/addEdit.vue
@@ -1,14 +1,13 @@
 <template>
-    <view class="container">
+    <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
-			:title="title"
-			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
-			titleStyle="color: #ffffff; font-weight: 600;"
+			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' }">
@@ -40,8 +39,7 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"
-              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 12rpx; font-size: 32rpx; font-weight: 600; height: 88rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
+            <u-button type="primary" text="提交" @click="submit"></u-button>
           </view>
         </view>
       </view>
@@ -53,11 +51,6 @@
         keyName="dictLabel" 
         @cancel="handleCancel"
         @confirm="handleConfirm"
-        :closeOnClickOverlay="true"
-        :defaultIndex="[0]"
-        cancelColor="#666666"
-        confirmColor="#667eea"
-        title="选择结清状态"
         ></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
@@ -84,11 +77,6 @@
       keyName="nameCode" 
       @cancel="handleOnlineLendCancel"
       @confirm="handleOnlineLendConfirm"
-      :closeOnClickOverlay="true"
-      :defaultIndex="[0]"
-      cancelColor="#666666"
-      confirmColor="#667eea"
-      title="选择人情借贷"
       ></u-picker>
     </view>
   </template>
@@ -270,24 +258,55 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-.container {
-  background: #f5f7fa;
-  min-height: 100vh;
-}
-
 .section {
   margin: 24rpx;
-  padding: 32rpx;
+  padding: 16rpx 24rpx;
   background-color: #fff;
-  border-radius: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  border-radius: 8rpx;
+
+  .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;
+    margin: -16rpx -24rpx 20rpx;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+  }
 
   .form-view {
-    padding: 0;
+    padding: 20rpx 0rpx 0 10rpx;
 
     .form-btn {
-      padding-top: 40rpx;
+      padding-top: 20rpx;
     }
   }
 }
+  </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/work/bill/peopleLendHistory/list.vue b/src/pages/work/bill/peopleLendHistory/list.vue
index b8601a4..cca625c 100644
--- a/src/pages/work/bill/peopleLendHistory/list.vue
+++ b/src/pages/work/bill/peopleLendHistory/list.vue
@@ -1,70 +1,57 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u-input v-model="queryParams.onlineLendName" border="false" type="select"  @click="handleOnlineLend" placeholder="请选择人情借贷" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></u-icon>
-        <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
-          <text>新增</text>
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
+      <view class="sticky-container">
+        <view class="search-view">
+          <u-input v-model="queryParams.onlineLendName" border="false" type="select"  @click="handleOnlineLend" placeholder="请选择人情借贷" suffixIcon="search"
+            suffixIconStyle="color: #909399" class="search-input">
+          </u-input>
+          <view class="add-btn" @click="handleAdd()">
+            <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+            <text>新增</text>
+          </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="state-list">
-                <view v-for="item in settleStateList" :key="item.id" class="state-item"
-                  :class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
-              </view>
+        
+        <view class="filter-view">
+          <view class="filter-title">结清状态：</view>
+          <view class="type-list">
+            <view class="type-item" :class="!queryParams.state ? 'active' : ''" @click="selectStatus(null)">
+              <text>全部</text>
             </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 v-for="item in settleStateList" :key="item.dictValue" class="type-item"
+              :class="queryParams.state === item.dictValue ? 'active' : ''" @click="selectStatus(item.dictValue)">
+              <text>{{ item.dictLabel }}</text>
             </view>
           </view>
-        </u-transition>
+        </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="card-name-section">
-              <view class="card-icon">
-                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
-              </view>
-              <text class="card-date">{{ item.installmentDate }}</text>
+            <view class="card-icon">
+              <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
             </view>
-            <text class="card-name">借{{ item.bankNameCode }}</text>
-            <text class="card-amount"><text class="amount-value">{{ item.installmentAmount }}</text>元</text>
+            <text class="card-status">{{ dictStr(item.state, settleStateList) }}</text>
+            <text class="card-date">{{ item.installmentDate }}</text>
+            <text class="card-name">{{ item.installmentAmount < 0 ? '借给' : '借' }} {{ item.bankNameCode }}</text>
+            <text class="card-amount"><text class="amount-value">{{ Math.abs(item.installmentAmount) }}</text>元</text>
           </view>
           
           <view class="card-body">
             <view class="info-row">
               <view class="info-item">
-                <text class="info-label">结清状态</text>
-                <text class="info-value">{{ dictStr(item.state, settleStateList) }}</text>
+                <text class="info-label">还款日期</text>
+                <text class="info-value">{{ item.closeDate || '--' }}</text>
               </view>
               <view class="info-item">
                 <text class="info-label">借款时长</text>
                 <text class="info-value">{{ item.loanDays }}天</text>
               </view>
-            </view>
-            
-            <view class="info-row" v-if="item.closeDate">
-              <view class="info-item">
-                <text class="info-label">还款日期</text>
-                <text class="info-value">{{ item.closeDate }}</text>
+              <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>
@@ -94,11 +81,6 @@
         keyName="nameCode" 
         @cancel="handleOnlineLendCancel"
         @confirm="handleOnlineLendConfirm"
-        :closeOnClickOverlay="true"
-        :defaultIndex="[0]"
-        cancelColor="#666666"
-        confirmColor="#667eea"
-        title="选择人情借贷"
         ></u-picker>
   </view>
   <!-- 悬停按钮返回工作台-->
@@ -131,7 +113,6 @@ const data = reactive({
     pageNum: 1,
     type: '3',
     lendType: '2',
-    status: '1',
     pageSize: 100
   },
   queryParams: {
@@ -203,16 +184,11 @@ function dictStr(val, arr) {
       })
       return str
     }
-function selectStatus(item) {
-      queryParams.value.state = item.dictValue
-      settleStateList.value.map(ele => {
-        if (ele.dictValue == item.dictValue) {
-          ele.selected = true
-          Reflect.set(ele, 'selected', true)
-        } else {
-          Reflect.set(ele, 'selected', false)
-        }
-      })
+function selectStatus(val) {
+      queryParams.value.state = val
+      pageNum.value = 1
+      listData.value = []
+      getList()
     }
     function handleOnlineLend() {
         if (bankCardLendList.value[0].length === 0) {
@@ -238,7 +214,6 @@ function selectStatus(item) {
       pageNum.value = 1
       listData.value = []
       getList()
-      filterPanel.value = false
     }
     function searchBlur() {
       pageNum.value = 1
@@ -246,12 +221,12 @@ function selectStatus(item) {
       getList()
     }
     function resetQuery() {
-        queryParams.value.bankCardLendId = '',
-        queryParams.value.state= '0',
-        queryParams.value.type = '4'
-      settleStateList.value.map(ele => {
-        Reflect.set(ele, 'selected', false)
-      })
+      queryParams.value.bankCardLendId = ''
+      queryParams.value.state = null
+      queryParams.value.type = '4'
+      pageNum.value = 1
+      listData.value = []
+      getList()
     }
     function enterDetails(item) {
       uni.navigateTo({ url: `/pages/work/bill/peopleLendHistory/addEdit?id=${item.id}` })
@@ -291,6 +266,10 @@ function selectStatus(item) {
 </script>
 
 <style lang="scss" scoped>
+.container {
+  background-color: #f5f7fa;
+}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -306,17 +285,14 @@ function selectStatus(item) {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
-  margin-bottom: 24rpx;
-  z-index: 100;
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
   }
   
   .add-btn {
@@ -324,119 +300,73 @@ function selectStatus(item) {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      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: #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;
-      }
-
-      .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, #667eea 0%, #764ba2 100%);
-          border: 2rpx solid transparent;
-          color: #ffffff;
-          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
-          font-weight: 600;
-        }
-      }
+    
+    uni-icons {
+      color: #667eea;
     }
+  }
+}
 
-    .btn-box {
-      display: flex;
-      gap: 20rpx;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+.sticky-container {
+  background: #ffffff;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.filter-view {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 32rpx;
+  border-top: 1rpx solid #f0f0f0;
+  flex-wrap: wrap;
+  
+  .filter-title {
+    font-size: 28rpx;
+    color: #606266;
+    font-weight: 500;
+    flex-shrink: 0;
+    margin-right: 16rpx;
+  }
+  
+  .type-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16rpx;
+    flex: 1;
+    
+    .type-item {
+      padding: 8rpx 24rpx;
+      font-size: 26rpx;
+      color: #606266;
+      background: #f5f7fa;
+      border-radius: 30rpx;
+      transition: all 0.3s ease;
+      flex-shrink: 0;
       
-      .btn-reset,
-      .btn-confirm {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8rpx;
-        height: 88rpx;
-        border-radius: 12rpx;
-        font-size: 30rpx;
+      &:active {
+        transform: scale(0.95);
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
         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;
-        }
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
       }
     }
   }
@@ -451,18 +381,10 @@ function selectStatus(item) {
 
   .item-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    gap: 12rpx;
     padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 64rpx;
-    
-    .card-name-section {
-      display: flex;
-      align-items: center;
-      gap: 12rpx;
-      flex-shrink: 0;
-    }
 
     .card-icon {
       width: 40rpx;
@@ -475,24 +397,32 @@ function selectStatus(item) {
       flex-shrink: 0;
     }
     
-    .card-date {
-      font-size: 26rpx;
-      color: rgba(255, 255, 255, 0.95);
-      white-space: nowrap;
+    .card-status {
+      font-size: 24rpx;
+      color: #ffffff;
+      font-weight: 500;
+      line-height: 1.3;
       flex-shrink: 0;
-      font-weight: 600;
-      line-height: 1;
+      padding: 4rpx 12rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 8rpx;
     }
-
+    
     .card-name {
       font-size: 26rpx;
-      font-weight: 600;
-      color: #ffffff;
-      white-space: nowrap;
+      color: rgba(255, 255, 255, 0.95);
+      font-weight: 500;
+      line-height: 1.3;
       flex-shrink: 0;
+    }
+    
+    .card-date {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 400;
+      line-height: 1.3;
       flex: 1;
       text-align: center;
-      line-height: 1;
     }
 
     .card-amount {
@@ -506,7 +436,7 @@ function selectStatus(item) {
       .amount-value {
         font-size: 28rpx;
         font-weight: 700;
-        color: #ffffff;
+        color: #fa8c16;
         margin-right: 4rpx;
       }
     }
@@ -519,29 +449,40 @@ function selectStatus(item) {
 
   .info-row {
     display: flex;
+    flex-wrap: wrap;
     gap: 24rpx;
-    margin-bottom: 20rpx;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
 
     .info-item {
-      flex: 1;
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
       flex-direction: column;
-      gap: 8rpx;
+      gap: 4rpx;
       min-width: 0;
+      
+      &.info-item-full {
+        flex: 0 0 100%;
+      }
 
       .info-label {
         font-size: 24rpx;
-        color: #999;
+        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;
@@ -551,17 +492,17 @@ function selectStatus(item) {
 
   .operate {
     display: flex;
+    justify-content: flex-end;
     gap: 16rpx;
-    padding: 0 24rpx 24rpx;
-    background: #fff;
+    padding: 16rpx 24rpx 24rpx;
 
     .btn-edit,
     .btn-delete {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8rpx;
+      padding: 0 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
diff --git a/src/pages/work/bill/stocksBill/addEdit.vue b/src/pages/work/bill/stocksBill/addEdit.vue
index 6d1fba9..e151eee 100644
--- a/src/pages/work/bill/stocksBill/addEdit.vue
+++ b/src/pages/work/bill/stocksBill/addEdit.vue
@@ -1,14 +1,13 @@
 <template>
-    <view class="container">
+    <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
-			:title="title"
-			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
-			titleStyle="color: #ffffff; font-weight: 600;"
+			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' }">
@@ -31,8 +30,7 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"
-              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 12rpx; font-size: 32rpx; font-weight: 600; height: 88rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
+            <u-button type="primary" text="提交" @click="submit"></u-button>
           </view>
         </view>
       </view>
@@ -55,11 +53,6 @@
       keyName="nameCode" 
       @cancel="handleFutureStocksCancel"
       @confirm="handleFutureStocksConfirm"
-      :closeOnClickOverlay="true"
-      :defaultIndex="[0]"
-      cancelColor="#666666"
-      confirmColor="#667eea"
-      title="选择股票账户"
       ></u-picker>
     </view>
   </template>
@@ -193,24 +186,55 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-.container {
-  background: #f5f7fa;
-  min-height: 100vh;
-}
-
 .section {
   margin: 24rpx;
-  padding: 32rpx;
+  padding: 16rpx 24rpx;
   background-color: #fff;
-  border-radius: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  border-radius: 8rpx;
+
+  .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;
+    margin: -16rpx -24rpx 20rpx;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+  }
 
   .form-view {
-    padding: 0;
+    padding: 20rpx 0rpx 0 10rpx;
 
     .form-btn {
-      padding-top: 40rpx;
+      padding-top: 20rpx;
     }
   }
 }
+  </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/work/bill/stocksBill/details.vue b/src/pages/work/bill/stocksBill/details.vue
index b50debd..052c551 100644
--- a/src/pages/work/bill/stocksBill/details.vue
+++ b/src/pages/work/bill/stocksBill/details.vue
@@ -1,44 +1,25 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-      <view class="search-view">
-        <u--input v-model="queryParams.time" border="false" disabled placeholder="请输入时间" class="search-input"
-          @blur="searchBlur" suffixIcon="calendar" suffixIconStyle="color: #909399">
-        </u--input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
-          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
-          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></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 dealTypeList" :key="item.id" class="state-item"
-                  :class="item.selected ? 'active' : ''" @click="selectDealType(item)">{{ item.dictLabel }}</view>
-              </view>
-     
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
+      <view class="sticky-container">
+        <view class="search-view">
+          <u--input v-model="queryParams.time" border="false" disabled placeholder="请输入时间" class="search-input"
+            @blur="searchBlur" suffixIcon="calendar" suffixIconStyle="color: #909399">
+          </u--input>
+        </view>
+        
+        <view class="filter-view">
+          <view class="filter-title">收益类型：</view>
+          <view class="type-list">
+            <view class="type-item" :class="!queryParams.dealType ? 'active' : ''" @click="selectDealType(null)">
+              <text>全部</text>
             </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 v-for="item in dealTypeList" :key="item.dictValue" class="type-item"
+              :class="queryParams.dealType === item.dictValue ? 'active' : ''" @click="selectDealType(item.dictValue)">
+              <text>{{ item.dictLabel }}</text>
             </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>
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
@@ -47,11 +28,13 @@
           <view class="item-header">
             <view class="card-name-section">
               <view class="card-icon">
-                <uni-icons type="checkmark-circle-filled" size="20" :color="item.dealType === '1' ? '#52c41a' : '#f5576c'"></uni-icons>
+                <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="card-date">{{ item.createTime }}</text>
             </view>
-            <text class="card-name">{{ dictStr(item.dealType, dealTypeList) }}</text>
+            <view class="profit-tag" :class="item.dealType === '1' ? 'profit' : 'loss'">
+              <text>{{ dictStr(item.dealType, dealTypeList) }}</text>
+            </view>
             <text class="card-amount" :class="item.dealType === '1' ? 'profit' : 'loss'"><text class="amount-value">{{ item.amount }}</text>元</text>
           </view>
           
@@ -63,7 +46,11 @@
               </view>
               <view class="info-item">
                 <text class="info-label">当前余额</text>
-                <text class="info-value">{{ item.currentBalance }}元</text>
+                <text class="info-value balance-value">{{ item.currentBalance }}元</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>
@@ -185,22 +172,11 @@ function dictStr(val, arr) {
       })
       return str
     }
-    function selectDealType(item) {
-      queryParams.value.dealType = item.dictValue
-      dealTypeList.value.map(ele => {
-        if (ele.dictValue == item.dictValue) {
-          ele.selected = true
-          Reflect.set(ele, 'selected', true)
-        } else {
-          Reflect.set(ele, 'selected', false)
-        }
-      })
-    }
-    function searchSubmit() {
+    function selectDealType(value) {
+      queryParams.value.dealType = value
       pageNum.value = 1
       listData.value = []
       getList()
-      filterPanel.value = false
     }
     function searchBlur() {
       pageNum.value = 1
@@ -210,17 +186,11 @@ function dictStr(val, arr) {
     function resetQuery() {
         queryParams.value.name = ''
         queryParams.value.type = ''
-        queryParams.value.endTime = ''
+        queryParams.value.dealType = null
         queryParams.value.dealCategory = '2'
-      accountTypeList.value.map(ele => {
-        Reflect.set(ele, 'selected', false)
-      })
-      dealTypeList.value.map(ele => {
-        Reflect.set(ele, 'selected', false)
-      })
-      dealCategoryList.value.map(ele => {
-        Reflect.set(ele, 'selected', false)
-      })
+      pageNum.value = 1
+      listData.value = []
+      getList()
     }
     function enterDetails(item) {
       uni.navigateTo({ url: `/pages/work/accounts/accountDealRecord/details?id=${item.id}` })
@@ -229,6 +199,11 @@ function dictStr(val, arr) {
 </script>
 
 <style lang="scss" scoped>
+.sticky-container {
+  background-color: #f5f7fa;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -245,105 +220,61 @@ function dictStr(val, arr) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
   z-index: 100;
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
-    margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    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);
-    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;
+.filter-view {
+  padding: 16rpx 32rpx 20rpx;
+  background-color: #ffffff;
+  border-bottom: 1rpx solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  
+  .filter-title {
+    color: #333333;
+    font-size: 28rpx;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+  
+  .type-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12rpx;
+    flex: 1;
+    
+    .type-item {
+      padding: 0 24rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      border-radius: 30rpx;
+      font-size: 26rpx;
+      color: #666666;
+      background: #f5f7fa;
+      border: 2rpx solid transparent;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
         font-weight: 600;
-        padding: 32rpx 0 24rpx;
-      }
-
-      .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, #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;
-        
-        text {
-          line-height: 1;
-        }
-      }
-      
-      .btn-reset {
-        flex: 1;
-        background: #f5f7fa;
-        border: 2rpx solid #dcdfe6;
-        
-        text {
-          color: #606266;
-        }
-      }
-      
-      .btn-confirm {
-        flex: 1;
-        background: #667eea;
-        
-        text {
-          color: #ffffff;
-        }
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
       }
     }
   }
@@ -389,17 +320,29 @@ function dictStr(val, arr) {
       flex-shrink: 0;
       font-weight: 600;
       line-height: 1;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    .card-name {
-      font-size: 26rpx;
-      font-weight: 600;
-      color: #ffffff;
-      white-space: nowrap;
-      flex-shrink: 0;
-      flex: 1;
-      text-align: center;
+    .profit-tag {
+      padding: 6rpx 16rpx;
+      border-radius: 12rpx;
+      font-size: 24rpx;
+      font-weight: 500;
       line-height: 1;
+      flex-shrink: 0;
+      
+      &.profit {
+        background: rgba(82, 196, 26, 0.25);
+        color: #52c41a;
+      }
+      
+      &.loss {
+        background: rgba(245, 87, 108, 0.25);
+        color: #f5576c;
+      }
     }
 
     .card-amount {
@@ -438,24 +381,47 @@ function dictStr(val, arr) {
 
   .info-row {
     display: flex;
+    flex-wrap: wrap;
     gap: 24rpx;
+    margin-bottom: 0;
 
     .info-item {
-      flex: 1;
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
       flex-direction: column;
-      gap: 8rpx;
+      gap: 4rpx;
       min-width: 0;
+      margin-bottom: -5rpx;
+      
+      &.info-item-full {
+        flex: 0 0 100%;
+      }
 
       .info-label {
         font-size: 24rpx;
-        color: #999;
+        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;
+        
+        &.balance-value {
+          color: #fa8c16;
+          font-weight: 600;
+        }
+      }
+      
+      &:not(.info-item-full) .info-value {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
diff --git a/src/pages/work/bill/stocksBill/list.vue b/src/pages/work/bill/stocksBill/list.vue
index 5ad3a56..29bec26 100644
--- a/src/pages/work/bill/stocksBill/list.vue
+++ b/src/pages/work/bill/stocksBill/list.vue
@@ -1,12 +1,12 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
       <view class="search-view">
         <u-input v-model="queryParams.futureStocksName" border="false" type="select"  @click="handleFutureStocks" placeholder="请选择股票账户" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
         <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <uni-icons type="plusempty" size="20" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
       </view>
@@ -17,7 +17,7 @@
           <view class="item-header">
             <view class="date-row">
               <view class="card-icon">
-                <uni-icons type="stock-filled" size="20" color="#ffffff"></uni-icons>
+                <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="bill-name" v-if="item.name">{{ item.name }}</text>
               <text class="card-date">({{ item.billDatePeriod }})</text>
@@ -27,7 +27,7 @@
               <view class="profit-tag" :class="item.billAmount >= 0 ? 'profit' : 'loss'">
                 <text>{{ item.billAmount >= 0 ? '盈利' : '亏损' }}</text>
               </view>
-              <text class="card-amount" :class="item.billAmount >= 0 ? 'profit' : 'loss'"><text class="amount-value">{{ item.billAmount }}</text>元</text>
+              <text class="card-amount" :class="item.billAmount >= 0 ? 'profit' : 'loss'"><text class="amount-value">{{ item.billAmount >= 0 ? '+' : '' }}{{ item.billAmount }}</text>元</text>
             </view>
           </view>
           
@@ -93,7 +93,6 @@ const data = reactive({
   queryFutureStocksListParams: {
     pageNum: 1,
     type: '2',
-    status: '1',
     pageSize: 100
   },
   queryParams: {
@@ -254,16 +253,19 @@ function selectStatus(item) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #f5f7fa;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
     flex: 1;
     margin-right: 16rpx;
     border-radius: 24rpx;
-    border: 1rpx solid #e8edf3;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
   }
   
   .add-btn {
@@ -271,19 +273,19 @@ function selectStatus(item) {
     align-items: center;
     gap: 6rpx;
     padding: 12rpx 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: rgba(102, 126, 234, 0.08);
     border-radius: 24rpx;
-    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
     flex-shrink: 0;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.12);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
       font-weight: 600;
     }
@@ -392,7 +394,7 @@ function selectStatus(item) {
       }
       
       .amount-value {
-        font-size: 40rpx;
+        font-size: 32rpx;
         font-weight: 700;
         margin-right: 4rpx;
       }
@@ -401,18 +403,18 @@ function selectStatus(item) {
 
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
-    background: #fff;
+    justify-content: flex-end;
+    gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
 
     .btn-detail,
     .btn-edit,
     .btn-delete {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6rpx;
+      padding: 0 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
diff --git a/src/pages/work/heartJourney/list.vue b/src/pages/work/heartJourney/list.vue
index d469aca..f7f9a52 100644
--- a/src/pages/work/heartJourney/list.vue
+++ b/src/pages/work/heartJourney/list.vue
@@ -48,24 +48,23 @@
                 <text class="card-name">{{ item.name }}</text>
               </view>
             </view>
-            <view class="arrow-icon">
-              <uni-icons type="right" size="16" color="rgba(255, 255, 255, 0.8)"></uni-icons>
-            </view>
           </view>
           
           <view class="card-body">
-            <view class="info-row single">
-              <text class="info-label">类型：</text>
-              <text class="info-value">{{ dictStr(item.type, journeyTypeList) }}</text>
+            <view class="info-row-horizontal">
+              <view class="info-item">
+                <text class="info-label">类型</text>
+                <text class="info-value">{{ dictStr(item.type, journeyTypeList) }}</text>
+              </view>
+              
+              <view class="info-item">
+                <text class="info-label">记录时间</text>
+                <text class="info-value">{{ item.createTime || '-' }}</text>
+              </view>
             </view>
             
-            <view class="info-row single">
-              <text class="info-label">记录时间：</text>
-              <text class="info-value">{{ item.createTime || '-' }}</text>
-            </view>
-            
-            <view class="info-row remark" v-if="item.remark">
-              <text class="info-label">内容：</text>
+            <view class="info-row-remark" v-if="item.remark">
+              <text class="info-label">内容</text>
               <text class="info-value">{{ item.remark }}</text>
             </view>
           </view>
@@ -475,45 +474,61 @@ function selectStatus(item) {
   .card-body {
     padding: 24rpx;
     background: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
     
-    .info-row {
+    .info-row-horizontal {
+      display: flex;
+      gap: 16rpx;
+      
+      .info-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8rpx;
+        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;
+        }
+        
+        .info-value {
+          font-size: 26rpx;
+          color: #333;
+          font-weight: 500;
+          line-height: 1.5;
+        }
+      }
+    }
+    
+    .info-row-remark {
       display: flex;
       flex-direction: column;
-      gap: 4rpx;
-      padding: 20rpx;
-      background: #f8f9fa;
-      border-radius: 8rpx;
-      margin-bottom: 12rpx;
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
+      gap: 8rpx;
       
       .info-label {
-        font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+        font-size: 22rpx;
+        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;
-      }
-    }
-    
-    .info-row.remark {
-      .info-value {
-        text-align: left;
-        line-height: 1.6;
         color: #666;
-        width: 100%;
+        font-weight: 500;
+        line-height: 1.6;
+        text-align: left;
       }
     }
   }
diff --git a/src/pages/work/index.vue b/src/pages/work/index.vue
index a954649..d44860e 100644
--- a/src/pages/work/index.vue
+++ b/src/pages/work/index.vue
@@ -114,7 +114,7 @@ import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
       ])
       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: 'eye-filled', color: 'linear-gradient(135deg, #636e72 0%, #2d3436 100%)', permission: 'invest:futureStocksBill:list'  },
+        { 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([
diff --git a/src/pages/work/product/productInfor/list.vue b/src/pages/work/product/productInfor/list.vue
index 3930155..3b7e102 100644
--- a/src/pages/work/product/productInfor/list.vue
+++ b/src/pages/work/product/productInfor/list.vue
@@ -522,11 +522,11 @@ page {
       }
 
       .info-label {
-        font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+         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;
       }
diff --git a/src/pages/work/product/productPriceRecord/list.vue b/src/pages/work/product/productPriceRecord/list.vue
index 2d5ca50..4ed8d88 100644
--- a/src/pages/work/product/productPriceRecord/list.vue
+++ b/src/pages/work/product/productPriceRecord/list.vue
@@ -594,11 +594,11 @@ page {
       margin-bottom: -5rpx;
 
       .info-label {
-        font-size: 24rpx;
-        color: #999;
-        line-height: 1.2;
-        padding: 4rpx 12rpx;
+         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;
       }