From 0e8db750d978c002af9be4a8ab8fb467e4873864 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Sun, 16 Nov 2025 23:15:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=EF=BC=8C=E6=A0=B7=E5=BC=8F=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                                |   7 +
 src/pages/calendar/index.vue                  |  12 +-
 src/pages/calendar/list.vue                   | 233 ++++-----
 src/pages/index.vue                           |   2 +-
 .../accounts/accountDealRecord/addEdit.vue    |  63 ++-
 .../accounts/accountDealRecord/details.vue    | 381 ++++++++-------
 .../work/accounts/accountDealRecord/list.vue  | 372 ++++++++------
 src/pages/work/accounts/accounts/details.vue  | 432 +++++++++--------
 src/pages/work/accounts/accounts/list.vue     | 350 +++++++++----
 .../accounts/creditTransferRecord/details.vue |  26 +-
 .../accounts/creditTransferRecord/list.vue    | 131 +++--
 .../accounts/debitTransferRecord/list.vue     | 210 +++++---
 .../accounts/investAccountDeal/details.vue    |  28 +-
 .../work/accounts/investAccountDeal/list.vue  | 130 +++--
 .../accounts/investTransferRecord/details.vue |  28 +-
 .../accounts/investTransferRecord/list.vue    | 131 +++--
 .../accounts/lendTransferRecord/addEdit.vue   |  63 ++-
 .../accounts/lendTransferRecord/details.vue   | 251 +++++-----
 .../work/accounts/lendTransferRecord/list.vue | 270 +++++++----
 .../accounts/posTransferRecord/details.vue    |  26 +-
 .../work/accounts/posTransferRecord/list.vue  | 352 +++++++++-----
 src/pages/work/accounts/posadvice/list.vue    | 123 +++--
 src/pages/work/base/creditCard/addEdit.vue    |  30 +-
 src/pages/work/base/creditCard/details.vue    | 166 +++----
 src/pages/work/base/creditCard/list.vue       | 410 ++++++++--------
 src/pages/work/base/debitCard/addEdit.vue     |  30 +-
 src/pages/work/base/debitCard/details.vue     |  55 ++-
 src/pages/work/base/debitCard/list.vue        | 398 +++++++++------
 src/pages/work/base/financials/addEdit.vue    |  84 ++--
 src/pages/work/base/financials/details.vue    | 345 +++++++------
 src/pages/work/base/financials/list.vue       | 382 +++++++++------
 src/pages/work/base/futures/addEdit.vue       |  99 ++--
 src/pages/work/base/futures/details.vue       | 363 ++++++++------
 src/pages/work/base/futures/list.vue          | 350 +++++++------
 src/pages/work/base/lend/addEdit.vue          |  10 +-
 src/pages/work/base/lend/details.vue          | 117 ++---
 src/pages/work/base/lend/list.vue             | 458 +++++++++---------
 src/pages/work/base/posmachine/addEdit.vue    |  42 +-
 src/pages/work/base/posmachine/details.vue    | 264 +++++-----
 src/pages/work/base/posmachine/list.vue       | 313 +++++++-----
 src/pages/work/base/stocks/addEdit.vue        |  86 ++--
 src/pages/work/base/stocks/details.vue        | 346 +++++++------
 src/pages/work/base/stocks/list.vue           | 331 +++++++------
 .../work/bill/creditCardBill/details.vue      |  71 ++-
 src/pages/work/bill/creditCardBill/list.vue   |  43 +-
 .../bill/creditInstallmentHistory/details.vue |  20 +-
 .../bill/creditInstallmentHistory/list.vue    | 102 +++-
 .../work/bill/creditQueryRecord/details.vue   |  13 +-
 .../work/bill/creditQueryRecord/list.vue      | 120 +++--
 src/pages/work/bill/futuresBill/details.vue   |  69 ++-
 src/pages/work/bill/futuresBill/list.vue      |  14 +-
 .../work/bill/onlineLendHistory/details.vue   |  20 +-
 .../work/bill/onlineLendHistory/list.vue      | 110 +++--
 .../work/bill/peopleLendHistory/list.vue      | 108 ++++-
 src/pages/work/bill/stocksBill/details.vue    |  69 ++-
 src/pages/work/bill/stocksBill/list.vue       |  14 +-
 src/pages/work/heartJourney/addEdit.vue       |  60 +--
 src/pages/work/heartJourney/details.vue       | 154 +++---
 src/pages/work/heartJourney/list.vue          | 177 ++++---
 .../work/product/productInfor/addEdit.vue     |  43 +-
 .../work/product/productInfor/details.vue     | 278 ++++++-----
 src/pages/work/product/productInfor/list.vue  | 348 +++++++------
 .../product/productPriceRecord/addEdit.vue    |  55 ++-
 .../product/productPriceRecord/details.vue    | 265 ++++++++++
 .../work/product/productPriceRecord/list.vue  | 261 ++++++----
 65 files changed, 6498 insertions(+), 4216 deletions(-)
 create mode 100644 src/pages/work/product/productPriceRecord/details.vue

diff --git a/src/pages.json b/src/pages.json
index b254760..b299ac0 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -382,6 +382,13 @@
         "navigationBarTitleText": "物价记录"
       }
     } ,
+    {
+      "path": "pages/work/product/productPriceRecord/details",
+      "style": {
+        "navigationBarTitleText": "物价记录详情"
+      }
+    }
+    ,
     {
       "path": "pages/work/product/productPriceRecord/addEdit",
       "style": {
diff --git a/src/pages/calendar/index.vue b/src/pages/calendar/index.vue
index 19550e8..1f0556a 100644
--- a/src/pages/calendar/index.vue
+++ b/src/pages/calendar/index.vue
@@ -470,7 +470,7 @@ page {
 }
 
 .calendar-view {
-  min-height: 400rpx;
+  min-height: 320rpx;
   overflow: visible;
 }
 
@@ -604,10 +604,10 @@ page {
 
 :deep(.fc-col-header-cell) {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 10rpx 0;
+  padding: 6rpx 0;
   font-weight: 600;
   color: #ffffff;
-  font-size: 24rpx;
+  font-size: 22rpx;
   border: none;
 }
 
@@ -624,7 +624,7 @@ page {
 }
 
 :deep(.fc-daygrid-day-frame) {
-  min-height: 45px;
+  min-height: 35px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -663,14 +663,14 @@ page {
 }
 
 :deep(.solar-date) {
-  font-size: 24rpx;
+  font-size: 22rpx;
   font-weight: 600;
   color: #333;
   line-height: 1;
 }
 
 :deep(.lunar-date) {
-  font-size: 18rpx;
+  font-size: 16rpx;
   color: #999;
   line-height: 1;
   margin-top: 2rpx;
diff --git a/src/pages/calendar/list.vue b/src/pages/calendar/list.vue
index 74d4be1..02e310a 100644
--- a/src/pages/calendar/list.vue
+++ b/src/pages/calendar/list.vue
@@ -1,43 +1,13 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
       <view class="search-view">
         <u--input v-model="queryParams.time" border="false" 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 dealCategoryList" :key="item.id" class="state-item"
-                  :class="item.selected ? 'active' : ''" @click="selectDealCategory(item)">{{ item.dictLabel }}</view>
-              </view>
-     
-            </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);"></u-button>
-            </view>
-            <u-datetime-picker
-              :closeOnClickOverlay="true"
-              :show="timeShow"
-              v-model="time"
-              mode="datetime"
-              @close="openOrCloseDate"
-              @cancel="openOrCloseDate"
-              @confirm="confirm"
-            ></u-datetime-picker>
-          </view>
-        </u-transition>
       </view>
     </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" @click="enterDetails(item)">
           <view class="item-header">
@@ -63,11 +33,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">{{ 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>
@@ -260,6 +230,11 @@ function dictStr(val, arr) {
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -267,98 +242,48 @@ function dictStr(val, arr) {
   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;
-  }
-
-  .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;
-        }
-      }
-    }
-
-    .btn-box {
-      display: flex;
-      gap: 16rpx;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
-    }
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
   }
 }
 
 .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;
     flex-direction: column;
-    gap: 20rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
     .first-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 8rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -379,7 +304,7 @@ function dictStr(val, arr) {
       font-size: 30rpx;
       font-weight: 600;
       color: #ffffff;
-      line-height: 1.3;
+      line-height: 1.2;
       flex: 1;
       min-width: 0;
       overflow: hidden;
@@ -388,18 +313,18 @@ function dictStr(val, arr) {
     }
     
     .card-date {
-      font-size: 30rpx;
+      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;
     }
     
     .profit-tag {
-      padding: 6rpx 14rpx;
-      border-radius: 12rpx;
-      font-size: 24rpx;
+      padding: 4rpx 12rpx;
+      border-radius: 10rpx;
+      font-size: 22rpx;
       font-weight: 600;
       line-height: 1;
       flex-shrink: 0;
@@ -416,9 +341,9 @@ function dictStr(val, arr) {
     }
     
     .card-amount {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 600;
-      line-height: 1.3;
+      line-height: 1;
       white-space: nowrap;
       flex-shrink: 0;
       
@@ -431,93 +356,112 @@ function dictStr(val, arr) {
       }
       
       .amount-value {
-        font-size: 34rpx;
+        font-size: 32rpx;
         font-weight: 700;
         margin-right: 4rpx;
       }
     }
 
-    .second-row {
+     .second-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 12rpx;
-      padding-top: 12rpx;
+      gap: 8rpx;
+      padding-top: 6rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+      min-height: 32rpx;
     }
     
     .deal-category {
-      font-size: 28rpx;
-      color: rgba(255, 255, 255, 0.9);
-      font-weight: 500;
+      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: 28rpx;
+      font-size: 22rpx;
       color: rgba(255, 255, 255, 0.85);
       font-weight: 500;
       white-space: nowrap;
-      flex: 1;
+      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: 12rpx;
+      gap: 10rpx;
       flex-shrink: 0;
     }
     
     .child-category {
-      font-size: 26rpx;
+      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: 16rpx 24rpx;
-    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-    display: flex;
-    flex-direction: column;
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .info-row {
+  .info-row {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 24rpx;
+    margin-bottom: 0;
+    
+    .info-item {
       display: flex;
-      align-items: center;
-      gap: 24rpx;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
       
-      .info-item {
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
+      &.info-item-balance {
         flex-shrink: 0;
-        
-        &:last-child {
-          flex: 1;
-          min-width: 0;
-        }
+      }
+      
+      &.info-item-remark {
+        flex: 1;
       }
 
       .info-label {
-        font-size: 22rpx;
+        font-size: 24rpx;
         color: #999;
-        font-weight: 400;
-        flex-shrink: 0;
+        line-height: 1.2;
         padding: 4rpx 12rpx;
         background: rgba(102, 126, 234, 0.08);
         border-radius: 8rpx;
+        align-self: flex-start;
       }
 
       .info-value {
-        font-size: 28rpx;
-        color: #667eea;
-        font-weight: 600;
-        flex-shrink: 0;
+       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;
@@ -526,7 +470,6 @@ function dictStr(val, arr) {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        font-style: italic;
       }
     }
   }
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 33d81bd..cbedfdf 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -5,7 +5,7 @@
     </view>
     <div class="app-container">
     <div class="header-title" ref="searchHeightRef">
-      <view class="title-line"></view>
+      <!-- <view class="title-line"></view> -->
       <text class="title-text">资产总览</text>
     </div>
     <div class="header-con" ref="searchHeightRef">
diff --git a/src/pages/work/accounts/accountDealRecord/addEdit.vue b/src/pages/work/accounts/accountDealRecord/addEdit.vue
index 1c64cf2..823806c 100644
--- a/src/pages/work/accounts/accountDealRecord/addEdit.vue
+++ b/src/pages/work/accounts/accountDealRecord/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;"
-		>
-		</u-navbar>
+		leftIconSize="40rpx"
+		leftIconColor="#333333"
+		title="账户交易记录"
+	>
+	</u-navbar>
       <view class="section">
+        <view class="section-title">{{ title}}</view>
         <view class="form-view">
           <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
             :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -56,8 +55,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>
@@ -488,17 +486,54 @@ getDicts('deal_category').then(result => {
 
 .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>
\ No newline at end of file
+  </style>
+  
+  <style lang="scss">
+  .form-btn .u-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    border-radius: 24rpx !important;
+    height: 80rpx !important;
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+  }
+  
+  .form-btn .u-button__text {
+    font-size: 30rpx !important;
+    font-weight: 500 !important;
+    letter-spacing: 2rpx !important;
+  }
+  </style>
diff --git a/src/pages/work/accounts/accountDealRecord/details.vue b/src/pages/work/accounts/accountDealRecord/details.vue
index 6681b5f..831793d 100644
--- a/src/pages/work/accounts/accountDealRecord/details.vue
+++ b/src/pages/work/accounts/accountDealRecord/details.vue
@@ -1,57 +1,69 @@
 <template>
     <view class="container">
       <u-navbar
-			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
-			title="账户交易记录详情"
-			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
-			titleStyle="color: #ffffff; font-weight: 600;"
-		>
-		</u-navbar>
-      <view class="section">
-        <view class="header-card">
+		leftIconSize="40rpx"
+		leftIconColor="#333333"
+		title="账户交易记录详情"
+	>
+	</u-navbar>
+      
+      <view class="detail-card">
+        <view class="card-header">
           <view class="header-icon">
-            <uni-icons type="wallet-filled" size="28" color="#ffffff"></uni-icons>
+            <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
           </view>
           <view class="header-info">
-            <text class="account-name">{{ detailInfo.accountName }}</text>
-            <text class="account-type">{{ detailInfo.type }}</text>
+            <text class="card-name">{{ detailInfo.accountName }}</text>
           </view>
-          <view class="amount-section" :class="detailInfo.dealType === '收入' ? 'income' : 'expense'">
-            <text class="amount-label">{{ detailInfo.dealType }}</text>
-            <text class="amount-value">{{ detailInfo.amount }}元</text>
+          <view class="amount-group">
+            <view class="status-badge" :class="detailInfo.dealType === '收入' ? 'status-income' : 'status-expense'">
+              <text>{{ detailInfo.dealType }}</text>
+            </view>
+            <text class="amount-value" :class="detailInfo.dealType === '收入' ? 'status-income' : 'status-expense'">{{ detailInfo.amount }}元</text>
           </view>
         </view>
         
-        <view class="info-card">
-          <view class="card-title">
-            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
-            <text>交易信息</text>
+        <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.createTime }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">交易类别</text>
+                <text class="item-value">{{ detailInfo.dealCategory }}</text>
+              </view>
+              <view class="list-item" v-if="detailInfo.childCategory && detailInfo.childCategory != detailInfo.dealCategory">
+                <text class="item-label">交易子类别</text>
+                <text class="item-value">{{ detailInfo.childCategoryName }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">当前余额</text>
+                <text class="item-value orange">{{ detailInfo.currentBalance }}元</text>
+              </view>
+      
+     
+            </view>
           </view>
+
           
-          <view class="detail-row">
-            <text class="detail-label">交易时间</text>
-            <text class="detail-value">{{ detailInfo.createTime }}</text>
-          </view>
-          
-          <view class="detail-row">
-            <text class="detail-label">当前余额</text>
-            <text class="detail-value">{{ detailInfo.currentBalance }}元</text>
-          </view>
-          
-          <view class="detail-row">
-            <text class="detail-label">交易类别</text>
-            <text class="detail-value">{{ detailInfo.dealCategory }}</text>
-          </view>
-          
-          <view class="detail-row" v-if="detailInfo.childCategory && detailInfo.childCategory != detailInfo.dealCategory">
-            <text class="detail-label">交易子类别</text>
-            <text class="detail-value">{{ detailInfo.childCategoryName }}</text>
-          </view>
-          
-          <view class="detail-row" v-if="detailInfo.remark">
-            <text class="detail-label">备注</text>
-            <text class="detail-remark">{{ detailInfo.remark }}</text>
+          <view class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
           </view>
         </view>
       </view>
@@ -81,14 +93,20 @@ onLoad((option) => {
         getDicts('account_type').then(result => {
           detailInfo.value.type=dictStr(detailInfo.value.type, result.data)
       })
-       // 类型
+       // 交易类型
           getDicts('deal_type').then(result => {
          detailInfo.value.dealType=dictStr(detailInfo.value.dealType, result.data)
       })
-          // 类型
+          // 交易类别
         getDicts('deal_category').then(result => {
          detailInfo.value.dealCategory=dictStr(detailInfo.value.dealCategory, result.data)
       })
+      // 交易子类别（如果需要）
+      if(detailInfo.value.childCategory && detailInfo.value.childCategory != detailInfo.value.dealCategory) {
+        getDicts('daily_expenses').then(result => {
+          detailInfo.value.childCategoryName=dictStr(detailInfo.value.childCategory, result.data)
+        })
+      }
         })
   }
   function dictStr(val, arr) {
@@ -105,158 +123,185 @@ onLoad((option) => {
   <style lang="scss" scoped>
 .container {
   background: #f5f7fa;
-  min-height: 100vh;
+  padding-bottom: 24rpx;
 }
 
-.section {
+.detail-card {
   margin: 24rpx;
-  display: flex;
-  flex-direction: column;
-  gap: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 }
 
-.header-card {
+.card-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 20rpx;
-  padding: 32rpx;
+  padding: 16rpx 20rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 16rpx;
-  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
-
+  min-height: 80rpx;
+  
   .header-icon {
-    width: 64rpx;
-    height: 64rpx;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.25);
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    
+    .card-name {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  
+  .amount-group {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    flex-shrink: 0;
+    
+    .amount-value {
+      font-size: 32rpx;
+      font-weight: 700;
+      line-height: 1;
+      white-space: nowrap;
+      
+      &.status-income {
+        color: #52c41a;
+      }
+      
+      &.status-expense {
+        color: #ff4d4f;
+      }
+    }
+  }
+  
+  .status-badge {
+    padding: 12rpx 28rpx;
+    border-radius: 24rpx;
+    font-size: 26rpx;
+    font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-  }
-
-  .header-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 8rpx;
-    min-width: 0;
-
-    .account-name {
-      font-size: 32rpx;
-      font-weight: 700;
+    line-height: 1;
+    
+    text {
+      line-height: 1;
+    }
+    
+    &.status-income {
+      background: #52c41a;
       color: #ffffff;
-      line-height: 1.3;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3);
     }
-
-    .account-type {
-      font-size: 24rpx;
-      color: rgba(255, 255, 255, 0.85);
-      font-weight: 400;
-    }
-  }
-
-  .amount-section {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 6rpx;
-    flex-shrink: 0;
-
-    .amount-label {
-      font-size: 22rpx;
-      padding: 4rpx 12rpx;
-      border-radius: 8rpx;
-      font-weight: 500;
-    }
-
-    .amount-value {
-      font-size: 36rpx;
-      font-weight: 700;
-      line-height: 1.2;
-    }
-
-    &.income {
-      .amount-label {
-        background: rgba(82, 196, 26, 0.25);
-        color: #52c41a;
-      }
-      .amount-value {
-        color: #52c41a;
-      }
-    }
-
-    &.expense {
-      .amount-label {
-        background: rgba(245, 87, 108, 0.25);
-        color: #f5576c;
-      }
-      .amount-value {
-        color: #f5576c;
-      }
+    
+    &.status-expense {
+      background: #ff4d4f;
+      color: #ffffff;
+      box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
     }
   }
 }
 
-.info-card {
-  padding: 32rpx;
-  background-color: #fff;
-  border-radius: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+.card-body {
+  padding: 24rpx;
+}
 
-  .card-title {
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
     display: flex;
     align-items: center;
-    gap: 8rpx;
-    padding-bottom: 24rpx;
-    margin-bottom: 24rpx;
-    border-bottom: 2rpx solid #f0f0f0;
-
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
     text {
-      font-size: 30rpx;
-      font-weight: 700;
-      color: #333;
+      color: #2c3e50;
+      font-size: 28rpx;
+      font-weight: 600;
     }
   }
-
-  .detail-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding: 16rpx 0;
-    border-bottom: 1rpx solid #f5f5f5;
-
-    &:last-child {
-      border-bottom: none;
+  
+  .info-list {
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+        
+        &.orange {
+          color: #fa8c16;
+        }
+        
+        &.status-income {
+          color: #52c41a;
+        }
+        
+        &.status-expense {
+          color: #ff4d4f;
+        }
+      }
     }
-
-    .detail-label {
+  }
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
       font-size: 26rpx;
-      color: #999;
-      font-weight: 400;
-      flex-shrink: 0;
-      width: 160rpx;
-    }
-
-    .detail-value {
-      font-size: 28rpx;
-      color: #333;
-      font-weight: 600;
-      text-align: right;
-      flex: 1;
-    }
-
-    .detail-remark {
-      font-size: 26rpx;
-      color: #666;
       line-height: 1.6;
-      text-align: right;
-      flex: 1;
-      word-break: break-all;
     }
   }
 }
-  </style>
\ No newline at end of file
+  </style>
diff --git a/src/pages/work/accounts/accountDealRecord/list.vue b/src/pages/work/accounts/accountDealRecord/list.vue
index 15b8a78..9279e8b 100644
--- a/src/pages/work/accounts/accountDealRecord/list.vue
+++ b/src/pages/work/accounts/accountDealRecord/list.vue
@@ -1,24 +1,18 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择记账账户" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
+      <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="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
         <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <uni-icons type="plusempty" size="18" color="#667eea"></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>
         
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
@@ -33,11 +27,6 @@
                 <view v-for="item in dealTypeList" :key="item.id" class="state-item"
                   :class="item.selected ? 'active' : ''" @click="selectDealType(item)">{{ item.dictLabel }}</view>
               </view>
-              <!-- <view class="filter-title">交易类别</view>
-              <view class="state-list">
-                <view v-for="item in dealCategoryList" :key="item.id" class="state-item"
-                  :class="item.selected ? 'active' : ''" @click="selectDealCategory(item)">{{ item.dictLabel }}</view>
-              </view> -->
               <view class="select-header">交易日期</view>
             <view class="selcet-content" style="padding: 0 24rpx">
               <u-input
@@ -67,10 +56,14 @@
             </view>
             </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);"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -86,7 +79,7 @@
         </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" @click="enterDetails(item)">
           <view class="item-header">
@@ -114,7 +107,7 @@
             <view class="info-row">
               <view class="info-item">
                 <text class="info-label">余额</text>
-                <text class="info-value">{{ item.currentBalance }}元</text>
+                <text class="info-value balance">{{ item.currentBalance }}元</text>
               </view>
               <view class="info-item" v-if="item.remark">
                 <text class="info-label">备注</text>
@@ -406,22 +399,35 @@ function selectAccountType(item) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delAccountDealRecord(item.id)
-              uni.navigateTo({ url: `/pages/work/accounts/accountDealRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delAccountDealRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: hidden;
+}
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -439,14 +445,41 @@ function selectAccountType(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;
+  }
+  
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
   
   .add-btn {
@@ -454,19 +487,20 @@ 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;
+    margin-left: 10rpx;
     
     &: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;
     }
@@ -489,7 +523,7 @@ function selectAccountType(item) {
         color: #2c3e50;
         font-size: 32rpx;
         font-weight: 600;
-        padding: 32rpx 0 24rpx;
+        padding: 30rpx 0;
       }
 
       .state-list {
@@ -521,37 +555,71 @@ function selectAccountType(item) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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: 500;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        color: #666666;
+      }
+      
+      .btn-confirm {
+        flex: 2;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
+        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+      }
     }
   }
 }
 
 .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;
     flex-direction: column;
-    gap: 20rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
     .first-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 8rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -561,10 +629,10 @@ function selectAccountType(item) {
     }
 
     .card-name {
-      font-size: 30rpx;
+      font-size: 28rpx;
       font-weight: 600;
       color: #ffffff;
-      line-height: 1.3;
+      line-height: 1.2;
       flex: 1;
       min-width: 0;
       overflow: hidden;
@@ -573,58 +641,18 @@ function selectAccountType(item) {
     }
     
     .card-date {
-      font-size: 30rpx;
-      color: rgba(255, 255, 255, 0.9);
-      font-weight: 500;
-      line-height: 1.3;
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-    
-    .second-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12rpx;
-      padding-top: 12rpx;
-      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
-    }
-    
-    .deal-category {
-      font-size: 28rpx;
-      color: rgba(255, 255, 255, 0.9);
-      font-weight: 500;
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-    
-    .account-type {
-      font-size: 28rpx;
-      color: rgba(255, 255, 255, 0.85);
-      font-weight: 500;
-      white-space: nowrap;
-      flex: 1;
-    }
-    
-    .child-category {
       font-size: 26rpx;
-      color: rgba(255, 255, 255, 0.8);
+      color: rgba(255, 255, 255, 0.85);
       font-weight: 400;
+      line-height: 1;
       white-space: nowrap;
       flex-shrink: 0;
     }
     
-    .right-group {
-      display: flex;
-      align-items: center;
-      gap: 12rpx;
-      flex-shrink: 0;
-    }
-
     .profit-tag {
-      padding: 6rpx 14rpx;
-      border-radius: 12rpx;
-      font-size: 24rpx;
+      padding: 4rpx 12rpx;
+      border-radius: 10rpx;
+      font-size: 22rpx;
       font-weight: 600;
       line-height: 1;
       flex-shrink: 0;
@@ -639,11 +667,11 @@ function selectAccountType(item) {
         color: #f5576c;
       }
     }
-
+    
     .card-amount {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 600;
-      line-height: 1.3;
+      line-height: 1;
       white-space: nowrap;
       flex-shrink: 0;
       
@@ -656,80 +684,132 @@ function selectAccountType(item) {
       }
       
       .amount-value {
-        font-size: 34rpx;
+        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);
+    }
+    
+    .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: 16rpx 24rpx;
-    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-    display: flex;
-    flex-direction: column;
+    padding: 24rpx;
+    background: #fff;
 
     .info-row {
       display: flex;
-      align-items: center;
+      flex-wrap: wrap;
       gap: 24rpx;
+      margin-bottom: 0;
       
       .info-item {
+        flex: 0 0 calc(50% - 12rpx);
         display: flex;
-        align-items: center;
-        gap: 12rpx;
-        flex-shrink: 0;
-        
-        &:last-child {
-          flex: 1;
-          min-width: 0;
+        flex-direction: column;
+        gap: 4rpx;
+        min-width: 0;
+        margin-bottom: -5rpx;
+
+        .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;
         }
-      }
 
-      .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;
-      }
-
-      .info-value {
-        font-size: 28rpx;
-        color: #667eea;
-        font-weight: 600;
-        flex-shrink: 0;
-      }
-      
-      .info-remark {
-        font-size: 24rpx;
-        color: #666;
-        line-height: 1.4;
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-style: italic;
+        .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;
+          }
+        }
+        
+        .info-remark {
+          font-size: 26rpx;
+          color: #333;
+          font-weight: 500;
+          flex: 1;
+          line-height: 1.5;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
     }
   }
 
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
+    justify-content: flex-end;
+    gap: 16rpx;
+    padding: 0 24rpx 24rpx;
     background: #fff;
 
     .btn-edit,
     .btn-copy,
     .btn-delete {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6rpx;
+      padding: 12rpx 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
diff --git a/src/pages/work/accounts/accounts/details.vue b/src/pages/work/accounts/accounts/details.vue
index 03fd721..191f0ca 100644
--- a/src/pages/work/accounts/accounts/details.vue
+++ b/src/pages/work/accounts/accounts/details.vue
@@ -2,84 +2,90 @@
   <view class="container">
     <u-navbar
       leftIconSize="40rpx"
-      leftIconColor="#ffffff"
+      leftIconColor="#333333"
       title="记账账户详情"
-      :bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
-      titleStyle="color: #ffffff; font-weight: 600;"
     >
     </u-navbar>
     
-    <view class="header-card">
-      <view class="account-icon-wrapper">
-        <view class="account-icon">
-          <uni-icons :type="detailInfo.type === '储蓄卡账户' ? 'wallet' : 'vip'" size="32" color="#ffffff"></uni-icons>
-        </view>
-      </view>
-      <text class="account-name">{{ detailInfo.name }}</text>
-      <text class="account-type">{{ detailInfo.type }}</text>
-    </view>
-
-    <view class="info-section">
-      <view class="info-grid">
-        <view class="grid-item">
-          <text class="item-label">账号</text>
-          <text class="item-value">{{ detailInfo.code }}</text>
-        </view>
-        <view class="grid-item">
-          <text class="item-label">余额</text>
-          <text class="item-value highlight">{{ detailInfo.balance }}</text>
-        </view>
-      </view>
-    </view>
-
     <view class="detail-card">
-      <view class="card-title">
-        <view class="title-icon"></view>
-        <text>账户信息</text>
-      </view>
-      
-      <view class="detail-item">
-        <text class="detail-label">可用额度</text>
-        <text class="detail-value">{{ detailInfo.availableLimit }}</text>
-      </view>
-      
-      <view v-if="detailInfo.type === '信用卡账户'">
-        <view class="detail-item">
-          <text class="detail-label">信用卡额度</text>
-          <text class="detail-value">{{ detailInfo.creditLimit }}</text>
+      <view class="card-header">
+        <view class="header-icon">
+          <uni-icons :type="detailInfo.type === '储蓄卡账户' ? 'wallet-filled' : 'vip-filled'" size="24" color="#ffffff"></uni-icons>
         </view>
-        <view class="detail-item">
-          <text class="detail-label">账单日</text>
-          <text class="detail-value">{{ detailInfo.billDateName }}</text>
-        </view>
-        <view class="detail-item">
-          <text class="detail-label">还款日</text>
-          <text class="detail-value">{{ detailInfo.payDateName }}</text>
+        <view class="header-info">
+          <text class="card-name">{{ detailInfo.name }}<text class="card-code" v-if="detailInfo.code">({{ detailInfo.code }})</text></text>
         </view>
       </view>
       
-      <view v-if="detailInfo.type === '储蓄卡账户'">
-        <view class="detail-item">
-          <text class="detail-label">储蓄卡类型</text>
-          <text class="detail-value">{{ detailInfo.debitType }}</text>
+      <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" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">{{ detailInfo.statusText }}</text>
+            </view>
+            <view class="list-item">
+              <text class="item-label">余额</text>
+              <text class="item-value orange">{{ detailInfo.balance }}元</text>
+            </view>
+            <view class="list-item">
+              <text class="item-label">可用额度</text>
+              <text class="item-value">{{ detailInfo.availableLimit }}</text>
+            </view>
+          </view>
         </view>
-      </view>
-      
-      <view class="detail-item">
-        <text class="detail-label">账户状态</text>
-        <view :class="['status-badge', detailInfo.status === '暂停使用' ? 'status-suspended' : 'status-active']">
-          {{ detailInfo.status }}
+        
+        <view class="info-section" v-if="detailInfo.type === '信用卡账户'">
+          <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.creditLimit }}</text>
+            </view>
+            <view class="list-item">
+              <text class="item-label">账单日</text>
+              <text class="item-value">{{ detailInfo.billDateName }}</text>
+            </view>
+            <view class="list-item">
+              <text class="item-label">还款日</text>
+              <text class="item-value">{{ detailInfo.payDateName }}</text>
+            </view>
+          </view>
+        </view>
+        
+        <view class="info-section" v-if="detailInfo.type === '储蓄卡账户'">
+          <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.debitType }}</text>
+            </view>
+          </view>
+        </view>
+        
+        <view class="info-section" v-if="detailInfo.remark">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>备注</text>
+          </view>
+          <view class="remark-content">
+            <text>{{ detailInfo.remark }}</text>
+          </view>
         </view>
-      </view>
-    </view>
-    
-    <view class="detail-card" v-if="detailInfo.remark">
-      <view class="card-title">
-        <view class="title-icon"></view>
-        <text>备注</text>
-      </view>
-      <view class="remark-content">
-        <text>{{ detailInfo.remark }}</text>
       </view>
     </view>
     
@@ -98,6 +104,28 @@ const data = reactive({
   detailInfo: {} 
 })
 const {detailInfo} = toRefs(data)
+
+function getStatusClass(status, statusText) {
+  // 优先根据状态文字判断
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('暂停') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  
+  // 备用：根据状态值判断
+  const statusStr = String(status)
+  if (statusStr === '1') {
+    return 'status-normal'
+  }
+  if (statusStr === '0' || statusStr === '2') {
+    return 'status-error'
+  }
+  
+  return 'status-default'
+}
+
 onLoad((option) => {
     id.value = option.id
     getInfo()
@@ -105,15 +133,15 @@ onLoad((option) => {
   function getInfo() {
     getAccounts(id.value).then(res => {
           detailInfo.value = res.data
-            // 类型
+            // 账户类型
             getDicts('account_type').then(result => {
          detailInfo.value.type=dictStr(detailInfo.value.type, result.data)
       })
-        // 类型
+        // 账户状态
         getDicts('account_status').then(result => {
-         detailInfo.value.status=dictStr(detailInfo.value.status, result.data)
+         detailInfo.value.statusText=dictStr(detailInfo.value.status, result.data)
       })
-        // 类型
+        // 储蓄卡类型
         getDicts('debit_type').then(result => {
          detailInfo.value.debitType=dictStr(detailInfo.value.debitType, result.data)
       })
@@ -131,162 +159,148 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  page {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    min-height: 100%;
-    height: auto;
-  }
+.container {
+  background: #f5f7fa;
+  padding-bottom: 24rpx;
+}
 
-  .container {
-    background: #f5f7fa;
-    flex: 1;
-  }
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
 
-  .header-card {
-    margin: 24rpx;
-    padding: 48rpx 32rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 80rpx;
+  
+  .header-icon {
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(255, 255, 255, 0.2);
     border-radius: 16rpx;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
-
-    .account-icon-wrapper {
-      margin-bottom: 24rpx;
-    }
-
-    .account-icon {
-      width: 80rpx;
-      height: 80rpx;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.2);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .account-name {
-      font-size: 36rpx;
-      font-weight: 600;
+    justify-content: center;
+    margin-right: 12rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    
+    .card-name {
       color: #ffffff;
-      margin-bottom: 8rpx;
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 28rpx;
+        font-weight: 400;
+        margin-left: 8rpx;
+      }
+    }
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
     }
     
-    .account-type {
-      font-size: 24rpx;
-      color: rgba(255, 255, 255, 0.85);
+    text {
+      color: #2c3e50;
+      font-size: 28rpx;
+      font-weight: 600;
     }
   }
-
-  .info-section {
-    margin: 0 24rpx 24rpx;
-  }
-
-  .info-grid {
-    display: flex;
-    gap: 16rpx;
-
-    .grid-item {
-      flex: 1;
-      padding: 24rpx;
-      background: #ffffff;
-      border-radius: 16rpx;
+  
+  .info-list {
+    .list-item {
       display: flex;
-      flex-direction: column;
-      gap: 12rpx;
-      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
-
-      .item-label {
-        font-size: 24rpx;
-        color: #999;
+      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 {
-        font-size: 32rpx;
-        font-weight: 600;
-        color: #333;
-
-        &.highlight {
-          color: #ff6b00;
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+        
+        &.orange {
+          color: #fa8c16;
+        }
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
         }
       }
     }
   }
-
-  .detail-card {
-    margin: 0 24rpx 24rpx;
-    padding: 0;
-    background: #ffffff;
-    border-radius: 16rpx;
-    overflow: hidden;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
-
-    .card-title {
-      padding: 24rpx;
-      font-size: 28rpx;
-      font-weight: 600;
-      color: #333;
-      display: flex;
-      align-items: center;
-      gap: 12rpx;
-      border-bottom: 1rpx solid #f0f0f0;
-
-      .title-icon {
-        width: 6rpx;
-        height: 28rpx;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 3rpx;
-      }
-    }
-
-    .detail-item {
-      padding: 24rpx;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 1rpx solid #f5f5f5;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      .detail-label {
-        font-size: 26rpx;
-        color: #666;
-      }
-
-      .detail-value {
-        font-size: 26rpx;
-        color: #333;
-        font-weight: 500;
-      }
-
-      .status-badge {
-        padding: 8rpx 20rpx;
-        border-radius: 20rpx;
-        font-size: 22rpx;
-        font-weight: 500;
-      }
-
-      .status-active {
-        background: rgba(82, 196, 26, 0.1);
-        color: #52c41a;
-      }
-
-      .status-suspended {
-        background: #f0f0f0;
-        color: #666666;
-      }
-    }
-
-    .remark-content {
-      padding: 24rpx;
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
       font-size: 26rpx;
-      color: #666;
-      line-height: 1.8;
+      line-height: 1.6;
     }
   }
+}
   </style>
\ No newline at end of file
diff --git a/src/pages/work/accounts/accounts/list.vue b/src/pages/work/accounts/accounts/list.vue
index 4843305..85472e5 100644
--- a/src/pages/work/accounts/accounts/list.vue
+++ b/src/pages/work/accounts/accounts/list.vue
@@ -1,13 +1,14 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+    <u-sticky offsetTop="-10rpx" customNavHeight="0rpx">
       <view class="search-view">
         <u--input v-model="queryParams.accountName" border="false" placeholder="请选择记账账户" class="search-input"
           @click="handleAccount" suffixIcon="search" 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="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">
@@ -23,10 +24,14 @@
               </view>
             </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);"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
           </view>
         </u-transition>
@@ -36,17 +41,16 @@
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item" @click="enterDetails(item)">
           <view class="item-header">
-            <view class="header-left">
+            <view class="card-name-section">
               <view class="account-icon">
                 <uni-icons :type="item.type === '1' ? 'wallet-filled' : 'vip-filled'" size="20" color="#ffffff"></uni-icons>
               </view>
-              <view class="header-info">
-                <text class="account-name">{{ item.name }}</text>
-                <text class="account-code">{{ item.code }}</text>
+              <view class="card-info">
+                <text class="card-name">{{ item.name }}<text class="card-code" v-if="item.code">({{ item.code }})</text></text>
               </view>
             </view>
-            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, accountStatus))">
-              <text>{{ dictStr(item.status, accountStatus) }}</text>
+            <view class="balance-section">
+              <text class="balance-value"><text class="balance-label">余额</text>{{ item.balance }}元</text>
             </view>
           </view>
           
@@ -57,12 +61,9 @@
                 <text class="info-value">{{ dictStr(item.type, accountType) }}</text>
               </view>
               <view class="info-item">
-                <text class="info-label">余额</text>
-                <text class="info-value orange">{{ item.balance }}元</text>
+                <text class="info-label">账户状态</text>
+                <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, accountStatus))">{{ dictStr(item.status, accountStatus) }}</text>
               </view>
-            </view>
-            
-            <view class="info-row">
               <view class="info-item">
                 <text class="info-label">可用额度</text>
                 <text class="info-value">{{ item.availableLimit }}</text>
@@ -75,26 +76,31 @@
                 <text class="info-label">信用卡额度</text>
                 <text class="info-value">{{ item.creditLimit }}</text>
               </view>
-            </view>
-            
-            <view class="info-row" v-if="item.type === '2'">
-              <view class="info-item">
+              <view class="info-item" v-if="item.type === '2'">
                 <text class="info-label">账单日</text>
                 <text class="info-value">{{ item.billDateName }}</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="item.type === '2'">
                 <text class="info-label">还款日</text>
                 <text class="info-value">{{ item.payDateName }}</text>
               </view>
-            </view>
-            
-            <view class="info-row" v-if="item.remark">
-              <view class="info-item full-width">
+              <view class="info-item info-item-full" v-if="item.remark">
                 <text class="info-label">备注</text>
                 <text class="info-value">{{ item.remark }}</text>
               </view>
             </view>
           </view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
+          </view>
         </view>
       </u-list-item>
       <view>
@@ -296,10 +302,6 @@ function selectType(item) {
       uni.navigateTo({ url: `/pages/work/accounts/accounts/addEdit?id=${item.id}` })
       isShow.value = true
     }
-    function handleAdd() {
-      uni.navigateTo({ url: `/pages/work/heartJourney/addEdit` })
-      isShow.value = true
-    }
     function getStatusClass(status, statusText) {
       if (statusText && statusText.includes('正常')) {
         return 'status-normal'
@@ -328,6 +330,10 @@ function selectType(item) {
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: hidden;
+}
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -344,16 +350,46 @@ function selectType(item) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
   z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #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-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 {
@@ -425,90 +461,141 @@ function selectType(item) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
+      .btn-reset,
+      .btn-confirm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
+        text {
+          line-height: 1;
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
+      }
+      
+      .btn-confirm {
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
+      }
     }
   }
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
-  padding: 0;
+  margin: 10rpx 24rpx;
   background-color: #fff;
   border-radius: 16rpx;
   overflow: hidden;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.2s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20rpx 24rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-
-    .header-left {
+    
+    .card-name-section {
       display: flex;
       align-items: center;
-      gap: 16rpx;
       flex: 1;
       min-width: 0;
+      margin-right: 16rpx;
     }
-
+    
     .account-icon {
-      width: 52rpx;
-      height: 52rpx;
-      border-radius: 50%;
+      width: 40rpx;
+      height: 40rpx;
       background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
+      margin-right: 12rpx;
       flex-shrink: 0;
     }
-
-    .header-info {
-      display: flex;
-      flex-direction: column;
-      gap: 4rpx;
-      flex: 1;
-      min-width: 0;
-    }
-
-    .account-name {
-      font-size: 30rpx;
-      font-weight: 600;
-      color: #ffffff;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .account-code {
-      font-size: 24rpx;
-      color: rgba(255, 255, 255, 0.9);
-    }
     
-    .status-badge {
-      padding: 6rpx 16rpx;
-      border-radius: 20rpx;
-      font-size: 22rpx;
-      font-weight: 500;
-      flex-shrink: 0;
+    .card-info {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
       
-      text {
+      .card-name {
+        color: #ffffff;
+        font-size: 28rpx;
+        font-weight: 600;
+        line-height: 1.2;
+        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;
+        }
       }
     }
-
-    .status-normal {
-      background: rgba(255, 255, 255, 0.25);
-      color: #ffffff;
-    }
-
-    .status-default {
-      background: rgba(255, 255, 255, 0.15);
-      color: rgba(255, 255, 255, 0.8);
+    
+    .balance-section {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      white-space: nowrap;
+      
+      .balance-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        
+        .balance-label {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 22rpx;
+          font-weight: 400;
+          margin-right: 8rpx;
+        }
+      }
     }
   }
 
@@ -519,45 +606,116 @@ function selectType(item) {
 
   .info-row {
     display: flex;
+    flex-wrap: wrap;
     gap: 24rpx;
-    margin-bottom: 20rpx;
+    margin-bottom: 0;
 
     &: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;
+      margin-bottom: -5rpx;
       
       &.full-width {
-        flex: none;
-        width: 100%;
+        flex: 0 0 100%;
       }
 
       .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;
       }
 
       .info-value {
         font-size: 26rpx;
         color: #333;
         font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+
+        &.orange {
+          color: #fa8c16;
+          font-weight: 600;
+        }
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
+        }
+      }
+      
+      &.info-item-full {
+        flex: 0 0 100%;
+        
+        .info-value {
+          white-space: normal;
+          word-break: break-all;
+          line-height: 1.6;
+        }
+      }
+      
+      &:not(.info-item-full) .info-value {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-
-        &.orange {
-          color: #ff6b00;
-          font-weight: 600;
-        }
       }
     }
   }
 
+  .operate {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
+
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
+    }
+  }
+
 }
 </style>
\ 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 1757067..f92e535 100644
--- a/src/pages/work/accounts/creditTransferRecord/details.vue
+++ b/src/pages/work/accounts/creditTransferRecord/details.vue
@@ -95,15 +95,15 @@ onLoad((option) => {
   .header-card {
     display: flex;
     align-items: center;
-    gap: 20rpx;
-    padding: 32rpx;
+    gap: 16rpx;
+    padding: 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 16rpx;
     box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
   
     .header-icon {
-      width: 64rpx;
-      height: 64rpx;
+      width: 48rpx;
+      height: 48rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -116,23 +116,24 @@ onLoad((option) => {
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 8rpx;
+      gap: 6rpx;
       min-width: 0;
   
       .card-name {
-        font-size: 32rpx;
-        font-weight: 700;
+        font-size: 28rpx;
+        font-weight: 600;
         color: #ffffff;
-        line-height: 1.3;
+        line-height: 1.2;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
   
       .type-text {
-        font-size: 24rpx;
+        font-size: 22rpx;
         color: rgba(255, 255, 255, 0.85);
         font-weight: 400;
+        line-height: 1;
       }
     }
   
@@ -144,16 +145,17 @@ onLoad((option) => {
       flex-shrink: 0;
   
       .amount-label {
-        font-size: 22rpx;
+        font-size: 20rpx;
         color: rgba(255, 255, 255, 0.7);
         font-weight: 400;
+        line-height: 1;
       }
   
       .amount-value {
-        font-size: 36rpx;
+        font-size: 32rpx;
         font-weight: 700;
         color: #52c41a;
-        line-height: 1.2;
+        line-height: 1;
       }
     }
   }
diff --git a/src/pages/work/accounts/creditTransferRecord/list.vue b/src/pages/work/accounts/creditTransferRecord/list.vue
index 1406d4e..66f0fce 100644
--- a/src/pages/work/accounts/creditTransferRecord/list.vue
+++ b/src/pages/work/accounts/creditTransferRecord/list.vue
@@ -57,10 +57,14 @@
             </view>
             </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 class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -302,17 +306,26 @@ function dictStr(val, arr) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delAccountsTransferRecord(item.id)
-              uni.navigateTo({ url: `/pages/work/accounts/creditTransferRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delAccountsTransferRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
@@ -416,10 +429,53 @@ function dictStr(val, arr) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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;
+        }
+      }
     }
   }
 }
@@ -434,19 +490,19 @@ function dictStr(val, arr) {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
     .header-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 8rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -456,10 +512,10 @@ function dictStr(val, arr) {
     }
 
     .credit-card-name {
-      font-size: 26rpx;
-      font-weight: 500;
+      font-size: 28rpx;
+      font-weight: 600;
       color: #ffffff;
-      line-height: 1.3;
+      line-height: 1.2;
       flex: 1;
       min-width: 0;
       overflow: hidden;
@@ -468,10 +524,10 @@ function dictStr(val, arr) {
     }
 
     .amount-value {
-      font-size: 36rpx;
+      font-size: 32rpx;
       font-weight: 700;
       color: #52c41a;
-      line-height: 1.2;
+      line-height: 1;
       flex-shrink: 0;
     }
 
@@ -480,23 +536,23 @@ function dictStr(val, arr) {
       justify-content: space-between;
       align-items: center;
       gap: 12rpx;
-      padding-top: 12rpx;
+      padding-top: 6rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
     }
 
     .time-text {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
-      line-height: 1.3;
+      line-height: 1;
       flex-shrink: 0;
     }
 
     .type-text {
-      font-size: 26rpx;
-      font-weight: 600;
-      color: #ffffff;
-      line-height: 1.3;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.85);
+      line-height: 1;
       flex: 1;
       min-width: 0;
       text-align: center;
@@ -528,17 +584,18 @@ function dictStr(val, arr) {
 
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
+    justify-content: flex-end;
+    gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
     background: #fff;
 
     .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/accounts/debitTransferRecord/list.vue b/src/pages/work/accounts/debitTransferRecord/list.vue
index 7c3a271..e5a1a04 100644
--- a/src/pages/work/accounts/debitTransferRecord/list.vue
+++ b/src/pages/work/accounts/debitTransferRecord/list.vue
@@ -52,10 +52,14 @@
             </view>
             </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);"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -75,20 +79,28 @@
       <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="first-row">
               <view class="card-icon">
                 <uni-icons type="redo-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="card-name">{{ item.outAccountName }} → {{ item.inAccountName }}</text>
             </view>
-            <text class="card-amount"><text class="amount-value">{{ item.amount }}</text>元</text>
+            <view class="second-row">
+              <text class="card-date">{{ item.createTime }}</text>
+              <view class="right-group">
+                <view class="transfer-tag">
+                  <text>转账</text>
+                </view>
+                <text class="card-amount"><text class="amount-value">{{ item.amount }}</text>元</text>
+              </view>
+            </view>
           </view>
           
-          <view class="card-body">
+          <view class="card-body" v-if="item.remark">
             <view class="info-row">
               <view class="info-item full-width">
-                <text class="info-label">转账时间</text>
-                <text class="info-value">{{ item.createTime }}</text>
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
               </view>
             </view>
           </view>
@@ -318,17 +330,26 @@ function dictStr(val, arr) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delAccountsTransferRecord(item.id)
-              uni.navigateTo({ url: `/pages/work/accounts/debitTransferRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delAccountsTransferRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
@@ -434,10 +455,53 @@ function dictStr(val, arr) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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;
+        }
+      }
     }
   }
 }
@@ -451,22 +515,20 @@ function dictStr(val, arr) {
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 24rpx;
+    flex-direction: column;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
-    .card-name-section {
+    .first-row {
       display: flex;
       align-items: center;
-      flex: 1;
-      min-width: 0;
-      gap: 12rpx;
+      gap: 8rpx;
     }
 
     .card-icon {
-      width: 48rpx;
-      height: 48rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -476,7 +538,7 @@ function dictStr(val, arr) {
     }
 
     .card-name {
-      font-size: 24rpx;
+      font-size: 28rpx;
       font-weight: 600;
       color: #ffffff;
       overflow: hidden;
@@ -484,17 +546,55 @@ function dictStr(val, arr) {
       white-space: nowrap;
       flex: 1;
       min-width: 0;
+      line-height: 1.2;
+    }
+    
+    .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);
+    }
+    
+    .card-date {
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 500;
+      line-height: 1;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+    
+    .right-group {
+      display: flex;
+      align-items: center;
+      gap: 10rpx;
+      flex-shrink: 0;
+    }
+    
+    .transfer-tag {
+      padding: 4rpx 12rpx;
+      border-radius: 10rpx;
+      font-size: 22rpx;
+      font-weight: 600;
+      line-height: 1;
+      flex-shrink: 0;
+      background: rgba(102, 126, 234, 0.25);
+      color: #ffffff;
     }
 
     .card-amount {
-      font-size: 20rpx;
+      font-size: 24rpx;
       color: rgba(255, 255, 255, 0.9);
-      font-weight: 500;
+      font-weight: 600;
       white-space: nowrap;
       flex-shrink: 0;
+      line-height: 1;
       
       .amount-value {
-        font-size: 28rpx;
+        font-size: 32rpx;
         font-weight: 700;
         color: #ffffff;
         margin-right: 4rpx;
@@ -503,24 +603,19 @@ function dictStr(val, arr) {
   }
 
   .card-body {
-    padding: 24rpx;
-    background: #fff;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   }
 
   .info-row {
     display: flex;
     gap: 24rpx;
-    margin-bottom: 20rpx;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
 
     .info-item {
       flex: 1;
       display: flex;
-      flex-direction: column;
-      gap: 8rpx;
+      align-items: center;
+      gap: 12rpx;
       min-width: 0;
       
       &.full-width {
@@ -529,40 +624,43 @@ function dictStr(val, arr) {
       }
 
       .info-label {
-        font-size: 24rpx;
+        font-size: 22rpx;
         color: #999;
+        font-weight: 400;
+        flex-shrink: 0;
+        padding: 4rpx 12rpx;
+        background: rgba(102, 126, 234, 0.08);
+        border-radius: 8rpx;
       }
 
       .info-value {
-        font-size: 26rpx;
-        color: #333;
+        font-size: 24rpx;
+        color: #666;
         font-weight: 500;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-      }
-      
-      .info-value-multiline {
-        white-space: normal;
-        word-break: break-all;
-        line-height: 1.5;
+        flex: 1;
+        line-height: 1.4;
+        font-style: italic;
       }
     }
   }
 
   .operate {
     display: flex;
+    justify-content: flex-end;
     gap: 16rpx;
-    padding: 0 24rpx 24rpx;
+    padding: 16rpx 24rpx 24rpx;
     background: #fff;
 
     .btn-edit,
     .btn-delete {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 8rpx;
+      gap: 6rpx;
+      padding: 0 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
diff --git a/src/pages/work/accounts/investAccountDeal/details.vue b/src/pages/work/accounts/investAccountDeal/details.vue
index bf61e73..f0a0f47 100644
--- a/src/pages/work/accounts/investAccountDeal/details.vue
+++ b/src/pages/work/accounts/investAccountDeal/details.vue
@@ -92,16 +92,16 @@ onLoad((option) => {
   <style lang="scss" scoped>
 .header-card {
   margin: 24rpx;
-  padding: 32rpx;
+  padding: 24rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 24rpx;
-  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
   display: flex;
-  gap: 24rpx;
+  gap: 16rpx;
   
   .header-icon {
-    width: 72rpx;
-    height: 72rpx;
+    width: 48rpx;
+    height: 48rpx;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.25);
     display: flex;
@@ -114,7 +114,7 @@ onLoad((option) => {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
+    gap: 6rpx;
     
     .info-row {
       display: flex;
@@ -122,15 +122,17 @@ onLoad((option) => {
       align-items: center;
       
       .label {
-        font-size: 24rpx;
+        font-size: 20rpx;
         color: rgba(255, 255, 255, 0.8);
         font-weight: 400;
+        line-height: 1;
       }
       
       .value {
-        font-size: 28rpx;
+        font-size: 24rpx;
         color: #ffffff;
         font-weight: 600;
+        line-height: 1;
       }
     }
     
@@ -138,18 +140,20 @@ onLoad((option) => {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
-      padding-top: 12rpx;
+      padding-top: 8rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
       
       .amount-label {
-        font-size: 24rpx;
+        font-size: 20rpx;
         color: rgba(255, 255, 255, 0.8);
         font-weight: 400;
+        line-height: 1;
       }
       
       .amount-value {
-        font-size: 40rpx;
+        font-size: 32rpx;
         font-weight: 700;
+        line-height: 1;
         
         &.profit {
           color: #52c41a;
diff --git a/src/pages/work/accounts/investAccountDeal/list.vue b/src/pages/work/accounts/investAccountDeal/list.vue
index 46b0b36..da63fec 100644
--- a/src/pages/work/accounts/investAccountDeal/list.vue
+++ b/src/pages/work/accounts/investAccountDeal/list.vue
@@ -57,10 +57,14 @@
             </view>
             </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 class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -304,17 +308,26 @@ function selectAccountType(item) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delAccountDealRecord(item.id)
-              uni.navigateTo({ url: `/pages/work/accounts/investAccountDeal/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delAccountDealRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
@@ -418,10 +431,53 @@ function selectAccountType(item) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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;
+        }
+      }
     }
   }
 }
@@ -436,19 +492,19 @@ function selectAccountType(item) {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
     .header-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 8rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -458,10 +514,10 @@ function selectAccountType(item) {
     }
 
     .account-name {
-      font-size: 26rpx;
-      font-weight: 500;
+      font-size: 28rpx;
+      font-weight: 600;
       color: #ffffff;
-      line-height: 1.3;
+      line-height: 1.2;
       flex: 1;
       min-width: 0;
       overflow: hidden;
@@ -474,32 +530,32 @@ function selectAccountType(item) {
       justify-content: space-between;
       align-items: center;
       gap: 12rpx;
-      padding-top: 12rpx;
+      padding-top: 6rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
     }
 
     .time-text {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
-      line-height: 1.3;
+      line-height: 1;
       flex-shrink: 0;
     }
 
     .type-text {
-      font-size: 26rpx;
-      font-weight: 600;
-      color: #ffffff;
-      line-height: 1.3;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.85);
+      line-height: 1;
       flex: 1;
       min-width: 0;
       text-align: center;
     }
 
     .amount-value {
-      font-size: 36rpx;
+      font-size: 32rpx;
       font-weight: 700;
-      line-height: 1.2;
+      line-height: 1;
       flex-shrink: 0;
       
       &.profit {
@@ -540,8 +596,8 @@ function selectAccountType(item) {
 
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
+    gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
     background: #fff;
     justify-content: flex-end;
 
@@ -550,7 +606,7 @@ function selectAccountType(item) {
       align-items: center;
       justify-content: center;
       gap: 6rpx;
-      padding: 0 32rpx;
+      padding: 0 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
diff --git a/src/pages/work/accounts/investTransferRecord/details.vue b/src/pages/work/accounts/investTransferRecord/details.vue
index fe2c435..14f057c 100644
--- a/src/pages/work/accounts/investTransferRecord/details.vue
+++ b/src/pages/work/accounts/investTransferRecord/details.vue
@@ -81,16 +81,16 @@ onLoad((option) => {
   <style lang="scss" scoped>
 .header-card {
   margin: 24rpx;
-  padding: 32rpx;
+  padding: 24rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 24rpx;
-  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
   display: flex;
-  gap: 24rpx;
+  gap: 16rpx;
   
   .header-icon {
-    width: 72rpx;
-    height: 72rpx;
+    width: 48rpx;
+    height: 48rpx;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.25);
     display: flex;
@@ -103,7 +103,7 @@ onLoad((option) => {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
+    gap: 6rpx;
     
     .info-row {
       display: flex;
@@ -111,15 +111,17 @@ onLoad((option) => {
       align-items: center;
       
       .label {
-        font-size: 24rpx;
+        font-size: 20rpx;
         color: rgba(255, 255, 255, 0.8);
         font-weight: 400;
+        line-height: 1;
       }
       
       .value {
-        font-size: 28rpx;
+        font-size: 24rpx;
         color: #ffffff;
         font-weight: 600;
+        line-height: 1;
       }
     }
     
@@ -127,19 +129,21 @@ onLoad((option) => {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
-      padding-top: 12rpx;
+      padding-top: 8rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
       
       .amount-label {
-        font-size: 24rpx;
+        font-size: 20rpx;
         color: rgba(255, 255, 255, 0.8);
         font-weight: 400;
+        line-height: 1;
       }
       
       .amount-value {
-        font-size: 40rpx;
+        font-size: 32rpx;
         color: #52c41a;
         font-weight: 700;
+        line-height: 1;
       }
     }
   }
diff --git a/src/pages/work/accounts/investTransferRecord/list.vue b/src/pages/work/accounts/investTransferRecord/list.vue
index b76a244..9c3e463 100644
--- a/src/pages/work/accounts/investTransferRecord/list.vue
+++ b/src/pages/work/accounts/investTransferRecord/list.vue
@@ -57,10 +57,14 @@
             </view>
             </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 class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -280,17 +284,26 @@ function dictStr(val, arr) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delAccountsTransferRecord(item.id)
-              uni.navigateTo({ url: `/pages/work/accounts/investTransferRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delAccountsTransferRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
@@ -394,10 +407,53 @@ function dictStr(val, arr) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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;
+        }
+      }
     }
   }
 }
@@ -412,19 +468,19 @@ function dictStr(val, arr) {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
     .header-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 8rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -434,10 +490,10 @@ function dictStr(val, arr) {
     }
 
     .account-name {
-      font-size: 26rpx;
-      font-weight: 500;
+      font-size: 28rpx;
+      font-weight: 600;
       color: #ffffff;
-      line-height: 1.3;
+      line-height: 1.2;
       flex: 1;
       min-width: 0;
       overflow: hidden;
@@ -450,51 +506,52 @@ function dictStr(val, arr) {
       justify-content: space-between;
       align-items: center;
       gap: 12rpx;
-      padding-top: 12rpx;
+      padding-top: 6rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
     }
 
     .time-text {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
-      line-height: 1.3;
+      line-height: 1;
       flex-shrink: 0;
     }
 
     .type-text {
-      font-size: 26rpx;
-      font-weight: 600;
-      color: #ffffff;
-      line-height: 1.3;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.85);
+      line-height: 1;
       flex: 1;
       min-width: 0;
       text-align: center;
     }
 
     .amount-value {
-      font-size: 36rpx;
+      font-size: 32rpx;
       font-weight: 700;
       color: #52c41a;
-      line-height: 1.2;
+      line-height: 1;
       flex-shrink: 0;
     }
   }
 
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
+    justify-content: flex-end;
+    gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
     background: #fff;
 
     .btn-edit,
     .btn-copy,
     .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/accounts/lendTransferRecord/addEdit.vue b/src/pages/work/accounts/lendTransferRecord/addEdit.vue
index 5a8a527..9428de6 100644
--- a/src/pages/work/accounts/lendTransferRecord/addEdit.vue
+++ b/src/pages/work/accounts/lendTransferRecord/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;"
-		>
-		</u-navbar>
+		leftIconSize="40rpx"
+		leftIconColor="#333333"
+		title="借贷账户记账"
+	>
+	</u-navbar>
       <view class="section">
+        <view class="section-title">{{ title}}</view>
         <view class="form-view">
           <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
             :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -45,8 +44,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>
@@ -309,17 +307,54 @@ function handleInAccount() {
 
 .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>
\ No newline at end of file
+  </style>
+  
+  <style lang="scss">
+  .form-btn .u-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    border-radius: 24rpx !important;
+    height: 80rpx !important;
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+  }
+  
+  .form-btn .u-button__text {
+    font-size: 30rpx !important;
+    font-weight: 500 !important;
+    letter-spacing: 2rpx !important;
+  }
+  </style>
diff --git a/src/pages/work/accounts/lendTransferRecord/details.vue b/src/pages/work/accounts/lendTransferRecord/details.vue
index 229085d..f10bbdb 100644
--- a/src/pages/work/accounts/lendTransferRecord/details.vue
+++ b/src/pages/work/accounts/lendTransferRecord/details.vue
@@ -1,48 +1,49 @@
 <template>
     <view class="container">
       <u-navbar
-			leftIconSize="40rpx"
-			leftIconColor="#ffffff"
-			title="借贷账户记账详情"
-			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
-			titleStyle="color: #ffffff; font-weight: 600;"
-		>
-		</u-navbar>
+		leftIconSize="40rpx"
+		leftIconColor="#333333"
+		title="借贷账户记账详情"
+	>
+	</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 class="detail-card">
+        <view class="card-header">
+          <view class="header-icon">
+            <uni-icons type="redo-filled" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="card-time">{{ detailInfo.createTime }}</text>
+            <text class="card-name">{{ detailInfo.dealType }}</text>
           </view>
         </view>
-        <text class="transfer-type">{{ detailInfo.dealType }}</text>
-        <text class="transfer-amount">{{ detailInfo.amount }}元</text>
-      </view>
-
-      <view class="detail-card">
-        <view class="card-title">
-          <view class="title-icon"></view>
-          <text>借贷信息</text>
-        </view>
         
-        <view class="detail-item">
-          <text class="detail-label">转出账户</text>
-          <text class="detail-value">{{ detailInfo.outAccountName }}</text>
-        </view>
-        
-        <view class="detail-item">
-          <text class="detail-label">转入账户</text>
-          <text class="detail-value">{{ detailInfo.inAccountName }}</text>
-        </view>
-        
-        <view class="detail-item">
-          <text class="detail-label">借贷时间</text>
-          <text class="detail-value">{{ detailInfo.createTime }}</text>
-        </view>
-        
-        <view class="detail-item" v-if="detailInfo.commission">
-          <text class="detail-label">还款利息</text>
-          <text class="detail-value">{{ detailInfo.commission }}元</text>
+        <view class="card-body">
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>借贷信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">借贷金额</text>
+                <text class="item-value orange">{{ detailInfo.amount }}元</text>
+              </view>
+              <view class="list-item" v-if="detailInfo.commission">
+                <text class="item-label">还款利息</text>
+                <text class="item-value">{{ detailInfo.commission }}元</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">{{ detailInfo.inAccountName }}</text>
+              </view>
+            
+            </view>
+          </view>
         </view>
       </view>
       
@@ -85,103 +86,129 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  page {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    min-height: 100%;
-    height: auto;
-  }
+.container {
+  background: #f5f7fa;
+  padding-bottom: 24rpx;
+}
 
-  .container {
-    background: #f5f7fa;
-    flex: 1;
-  }
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
 
-  .header-card {
-    margin: 24rpx;
-    padding: 48rpx 32rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 80rpx;
+  
+  .header-icon {
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(255, 255, 255, 0.2);
     border-radius: 16rpx;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
-
-    .transfer-icon-wrapper {
-      margin-bottom: 24rpx;
-    }
-
-    .transfer-icon {
-      width: 80rpx;
-      height: 80rpx;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.2);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .transfer-type {
+    justify-content: center;
+    margin-right: 12rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    
+    .card-time {
+      color: rgba(255, 255, 255, 0.85);
       font-size: 28rpx;
-      color: rgba(255, 255, 255, 0.9);
-      margin-bottom: 12rpx;
+      font-weight: 500;
+      line-height: 1;
+      white-space: nowrap;
+      flex-shrink: 0;
     }
-
-    .transfer-amount {
-      font-size: 48rpx;
-      font-weight: 600;
+    
+    .card-name {
       color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
+}
 
-  .detail-card {
-    margin: 0 24rpx 24rpx;
-    padding: 0;
-    background: #ffffff;
-    border-radius: 16rpx;
-    overflow: hidden;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
+.card-body {
+  padding: 24rpx;
+}
 
-    .card-title {
-      padding: 24rpx;
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
       font-size: 28rpx;
       font-weight: 600;
-      color: #333;
-      display: flex;
-      align-items: center;
-      gap: 12rpx;
-      border-bottom: 1rpx solid #f0f0f0;
-
-      .title-icon {
-        width: 6rpx;
-        height: 28rpx;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 3rpx;
-      }
     }
-
-    .detail-item {
-      padding: 24rpx;
+  }
+  
+  .info-list {
+    .list-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      border-bottom: 1rpx solid #f5f5f5;
-
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
       &:last-child {
-        border-bottom: none;
+        margin-bottom: 0;
       }
-
-      .detail-label {
+      
+      .item-label {
+        color: #7f8c8d;
         font-size: 26rpx;
-        color: #666;
       }
-
-      .detail-value {
-        font-size: 26rpx;
-        color: #333;
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
         font-weight: 500;
+        text-align: right;
+        
+        &.orange {
+          color: #fa8c16;
+        }
       }
     }
   }
-  </style>
\ No newline at end of file
+}
+  </style>
diff --git a/src/pages/work/accounts/lendTransferRecord/list.vue b/src/pages/work/accounts/lendTransferRecord/list.vue
index 9ec5e83..4c7530c 100644
--- a/src/pages/work/accounts/lendTransferRecord/list.vue
+++ b/src/pages/work/accounts/lendTransferRecord/list.vue
@@ -1,29 +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"
           @blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
         </u--input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
         <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <uni-icons type="plusempty" size="18" color="#667eea"></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>
-
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
-              <view class="select-header">借贷日期</view>
+              <view class="filter-title">借贷日期</view>
             <view class="selcet-content" style="padding: 0 24rpx">
               <u-input
                 :disabled="true"
@@ -52,10 +45,14 @@
             </view>
             </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);"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -69,8 +66,8 @@
             ></u-datetime-picker>
           </view>
         </u-transition>
-      </view>
-    </u-sticky>
+       </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)">
@@ -81,8 +78,9 @@
               </view>
               <text class="card-date">{{ item.createTime }}</text>
             </view>
-            <text class="card-name">{{ dictStr(item.dealType, dealTypeList) }}</text>
-            <text class="card-amount"><text class="amount-value">{{ item.amount }}</text>元</text>
+            <text class="card-type">{{ dictStr(item.dealType, dealTypeList) }}</text>
+            <text class="card-amount">{{ item.amount }}元</text>
+            <text class="card-interest" v-if="item.commission">利息{{ item.commission }}元</text>
           </view>
           
           <view class="card-body">
@@ -96,13 +94,6 @@
                 <text class="info-value">{{ item.inAccountName }}</text>
               </view>
             </view>
-            
-            <view class="info-row" v-if="item.commission">
-              <view class="info-item">
-                <text class="info-label">还款利息</text>
-                <text class="info-value">{{ item.commission }}元</text>
-              </view>
-            </view>
           </view>
           
           <view class="operate" @click.stop>
@@ -284,22 +275,35 @@ function dictStr(val, arr) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delAccountsTransferRecord(item.id)
-              uni.navigateTo({ url: `/pages/work/accounts/lendTransferRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delAccountsTransferRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: hidden;
+}
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -316,40 +320,48 @@ function dictStr(val, arr) {
   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;
   }
   
+  .filter-btn,
   .add-btn {
     display: flex;
     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;
       font-size: 28rpx;
+      color: #667eea;
       font-weight: 600;
     }
   }
+  
+  .add-btn {
+    margin-left: 10rpx;
+  }
 
   .filter-panel {
     width: 100%;
@@ -368,24 +380,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 {
@@ -400,39 +432,92 @@ function dictStr(val, arr) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
+      .btn-reset,
+      .btn-confirm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
+        text {
+          line-height: 1;
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
+      }
+      
+      .btn-confirm {
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
+      }
     }
   }
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
+  margin: 10rpx 24rpx;
   background-color: #fff;
   border-radius: 16rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.2s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
+  
+  &:first-child {
+    margin-top: 10rpx;
+  }
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 80rpx;
     
     .card-name-section {
       display: flex;
       align-items: center;
-      gap: 16rpx;
+      gap: 8rpx;
       flex-shrink: 0;
     }
 
     .card-icon {
-      width: 48rpx;
-      height: 48rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -442,7 +527,7 @@ function dictStr(val, arr) {
     }
     
     .card-date {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.95);
       white-space: nowrap;
       flex-shrink: 0;
@@ -450,31 +535,34 @@ function dictStr(val, arr) {
       line-height: 1;
     }
 
-    .card-name {
-      font-size: 28rpx;
-      font-weight: 600;
-      color: #ffffff;
+    .card-type {
+      font-size: 22rpx;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.85);
       white-space: nowrap;
       flex-shrink: 0;
-      flex: 1;
-      text-align: center;
       line-height: 1;
+      margin-left: 16rpx;
     }
 
     .card-amount {
+      font-size: 30rpx;
+      color: #fa8c16;
+      font-weight: 700;
+      white-space: nowrap;
+      flex-shrink: 0;
+      line-height: 1;
+      margin-left: auto;
+    }
+    
+    .card-interest {
       font-size: 22rpx;
-      color: rgba(255, 255, 255, 0.9);
+      color: rgba(255, 255, 255, 0.85);
       font-weight: 500;
       white-space: nowrap;
       flex-shrink: 0;
       line-height: 1;
-      
-      .amount-value {
-        font-size: 32rpx;
-        font-weight: 700;
-        color: #ffffff;
-        margin-right: 4rpx;
-      }
+      margin-left: 12rpx;
     }
   }
 
@@ -485,29 +573,35 @@ function dictStr(val, arr) {
 
   .info-row {
     display: flex;
+    flex-wrap: wrap;
     gap: 24rpx;
-    margin-bottom: 20rpx;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
+    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-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;
       }
 
       .info-value {
         font-size: 26rpx;
         color: #333;
         font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -517,17 +611,17 @@ function dictStr(val, arr) {
 
   .operate {
     display: flex;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
     gap: 16rpx;
-    padding: 0 24rpx 24rpx;
-    background: #fff;
 
     .btn-edit,
     .btn-delete {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 8rpx;
+      gap: 6rpx;
+      padding: 0 24rpx;
       height: 64rpx;
       border-radius: 12rpx;
       font-size: 26rpx;
diff --git a/src/pages/work/accounts/posTransferRecord/details.vue b/src/pages/work/accounts/posTransferRecord/details.vue
index 81bff49..31276a9 100644
--- a/src/pages/work/accounts/posTransferRecord/details.vue
+++ b/src/pages/work/accounts/posTransferRecord/details.vue
@@ -96,15 +96,15 @@ onLoad((option) => {
   .header-card {
     display: flex;
     align-items: center;
-    gap: 20rpx;
-    padding: 32rpx;
+    gap: 16rpx;
+    padding: 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 16rpx;
     box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
   
     .header-icon {
-      width: 64rpx;
-      height: 64rpx;
+      width: 48rpx;
+      height: 48rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -117,23 +117,24 @@ onLoad((option) => {
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 8rpx;
+      gap: 6rpx;
       min-width: 0;
   
       .pos-name {
-        font-size: 32rpx;
-        font-weight: 700;
+        font-size: 28rpx;
+        font-weight: 600;
         color: #ffffff;
-        line-height: 1.3;
+        line-height: 1.2;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
   
       .merchant-name {
-        font-size: 24rpx;
+        font-size: 22rpx;
         color: rgba(255, 255, 255, 0.85);
         font-weight: 400;
+        line-height: 1;
       }
     }
   
@@ -145,16 +146,17 @@ onLoad((option) => {
       flex-shrink: 0;
   
       .amount-label {
-        font-size: 22rpx;
+        font-size: 20rpx;
         color: rgba(255, 255, 255, 0.7);
         font-weight: 400;
+        line-height: 1;
       }
   
       .amount-value {
-        font-size: 36rpx;
+        font-size: 32rpx;
         font-weight: 700;
         color: #52c41a;
-        line-height: 1.2;
+        line-height: 1;
       }
     }
   }
diff --git a/src/pages/work/accounts/posTransferRecord/list.vue b/src/pages/work/accounts/posTransferRecord/list.vue
index d6cfb9d..8156a0c 100644
--- a/src/pages/work/accounts/posTransferRecord/list.vue
+++ b/src/pages/work/accounts/posTransferRecord/list.vue
@@ -59,10 +59,14 @@
             </view>
             </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 class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -82,37 +86,45 @@
       <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="credit-card-name">{{ item.outAccountName }}</text>
-              <view class="amount-info">
-                <text class="amount-label">刷卡金额</text>
-                <text class="amount-value">{{ item.amount }}元</text>
-              </view>
+              <text class="card-name">{{ item.outAccountName }}</text>
+              <text class="card-date">{{ item.createTime }}</text>
             </view>
-            <view class="info-row">
-              <text class="time-text">{{ item.createTime }}</text>
-              <view class="pos-info">
-                <text class="pos-name">{{ item.posName }}</text>
-                <text class="merchant-name">{{ item.merchantName }}</text>
+            <view class="second-row">
+              <text class="pos-name">{{ item.posName }}</text>
+              <text class="merchant-name">{{ item.merchantName }}</text>
+              <view class="right-group">
+                <view class="amount-label-tag">
+                  <text>刷卡</text>
+                </view>
+                <text class="card-amount"><text class="amount-value">{{ item.amount }}</text>元</text>
               </view>
             </view>
           </view>
           
           <view class="card-body">
-            <view class="info-item">
-              <text class="info-label">储蓄卡</text>
-              <text class="info-value">{{ item.inAccountName }}</text>
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">入账金额</text>
+                <text class="info-value highlight">{{ item.actualAmount }}元</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">手续费</text>
+                <text class="info-value">{{ item.commission }}元</text>
+              </view>
             </view>
-            <view class="info-item">
-              <text class="info-label">入账金额</text>
-              <text class="info-value highlight">{{ item.actualAmount }}元</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">手续费</text>
-              <text class="info-value">{{ item.commission }}元</text>
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">储蓄卡</text>
+                <text class="info-value">{{ item.inAccountName }}</text>
+              </view>
+              <view class="info-item" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-remark">{{ item.remark }}</text>
+              </view>
             </view>
           </view>
           
@@ -343,17 +355,26 @@ function settingCancel() {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delAccountsTransferRecord(item.id)
-              uni.navigateTo({ url: `/pages/work/accounts/posTransferRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delAccountsTransferRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
@@ -457,10 +478,53 @@ function settingCancel() {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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;
+        }
+      }
     }
   }
 }
@@ -475,19 +539,19 @@ function settingCancel() {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-
-    .header-row {
+    
+    .first-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 8rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -496,128 +560,172 @@ function settingCancel() {
       flex-shrink: 0;
     }
 
-    .credit-card-name {
+    .card-name {
       font-size: 28rpx;
       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;
     }
-
-    .amount-info {
-      display: flex;
-      align-items: baseline;
-      gap: 8rpx;
+    
+    .card-date {
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 500;
+      line-height: 1;
+      white-space: nowrap;
       flex-shrink: 0;
     }
 
-    .amount-label {
-      font-size: 22rpx;
-      color: rgba(255, 255, 255, 0.7);
-      font-weight: 400;
-    }
-
-    .amount-value {
-      font-size: 36rpx;
-      font-weight: 700;
-      color: #52c41a;
-      line-height: 1.2;
-    }
-
-    .info-row {
+    .second-row {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      padding-top: 12rpx;
+      justify-content: space-between;
+      gap: 8rpx;
+      padding-top: 6rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
     }
 
-    .time-text {
-      font-size: 24rpx;
-      color: rgba(255, 255, 255, 0.85);
-      font-weight: 400;
-      line-height: 1.3;
-    }
-
-    .pos-info {
-      display: flex;
-      align-items: center;
-      gap: 12rpx;
-      flex-shrink: 0;
-    }
-
     .pos-name {
-      font-size: 26rpx;
-      font-weight: 600;
-      color: #ffffff;
-      line-height: 1.3;
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      white-space: nowrap;
+      flex-shrink: 0;
+      line-height: 1;
     }
 
     .merchant-name {
       font-size: 24rpx;
-      color: rgba(255, 255, 255, 0.85);
+      color: rgba(255, 255, 255, 0.8);
       font-weight: 400;
-      line-height: 1.3;
+      white-space: nowrap;
+      flex: 1;
+      line-height: 1;
+      text-align: center;
+    }
+    
+    .right-group {
+      display: flex;
+      align-items: center;
+      gap: 10rpx;
+      flex-shrink: 0;
+    }
+    
+    .amount-label-tag {
+      padding: 4rpx 12rpx;
+      border-radius: 10rpx;
+      font-size: 22rpx;
+      font-weight: 600;
+      line-height: 1;
+      flex-shrink: 0;
+      background: rgba(102, 126, 234, 0.25);
+      color: #ffffff;
+    }
+
+    .card-amount {
+      font-size: 24rpx;
+      font-weight: 600;
+      line-height: 1;
+      white-space: nowrap;
+      flex-shrink: 0;
+      color: #52c41a;
+      
+      .amount-value {
+        font-size: 32rpx;
+        font-weight: 700;
+        margin-right: 4rpx;
+      }
     }
   }
 
   .card-body {
-    padding: 24rpx;
-    background: #fff;
-    display: flex;
-    gap: 16rpx;
-  }
-
-  .info-item {
-    flex: 1;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
     display: flex;
     flex-direction: column;
-    gap: 6rpx;
-    min-width: 0;
-    
-    &:first-child {
-      flex: 2;
-    }
+    gap: 12rpx;
 
-    .info-label {
-      font-size: 22rpx;
-      color: #999;
-      font-weight: 400;
-    }
-
-    .info-value {
-      font-size: 26rpx;
-      color: #333;
-      font-weight: 500;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .info-row {
+      display: flex;
+      align-items: center;
+      gap: 24rpx;
       
-      &.highlight {
-        color: #667eea;
-        font-weight: 600;
-        font-size: 28rpx;
+      &:last-child {
+        .info-item {
+          flex: 1;
+          
+          &:last-child {
+            min-width: 0;
+          }
+        }
+      }
+      
+      .info-item {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+        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;
+        }
+
+        .info-value {
+          font-size: 24rpx;
+          color: #333;
+          font-weight: 500;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+          
+          &.highlight {
+            color: #667eea;
+            font-weight: 600;
+            font-size: 26rpx;
+          }
+        }
+        
+        .info-remark {
+          font-size: 24rpx;
+          color: #666;
+          line-height: 1.4;
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-style: italic;
+        }
       }
     }
   }
 
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 24rpx;
+    justify-content: flex-end;
+    gap: 16rpx;
+    padding: 0 24rpx 24rpx;
     background: #fff;
 
     .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/accounts/posadvice/list.vue b/src/pages/work/accounts/posadvice/list.vue
index 13eb333..b925eb3 100644
--- a/src/pages/work/accounts/posadvice/list.vue
+++ b/src/pages/work/accounts/posadvice/list.vue
@@ -17,20 +17,24 @@
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item">
           <view class="item-header">
-            <view class="card-icon">
-              <uni-icons type="creditcard-filled" size="24" color="#ffffff"></uni-icons>
+            <view class="left-section">
+              <view class="card-icon">
+                <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="header-info">
+                <view class="card-name-row">
+                  <text class="card-name">{{ item.name }}</text>
+                  <text class="card-code">{{ item.code }}</text>
+                </view>
+                <view class="card-limit-row">
+                  <text class="limit-label">账单日</text>
+                  <text class="bill-date">{{ item.billDateName }}</text>
+                </view>
+              </view>
             </view>
-            <view class="header-info">
-              <view class="card-name-row">
-                <text class="card-name">{{ item.name }}</text>
-                <text class="card-code">{{ item.code }}</text>
-              </view>
-              <view class="card-limit-row">
-                <text class="limit-label">账单日</text>
-                <text class="bill-date">{{ item.billDateName }}</text>
-                <text class="limit-label">可用额度</text>
-                <text class="limit-value">{{ item.availableLimit }}</text>
-              </view>
+            <view class="right-section">
+              <text class="limit-label-right">可用额度</text>
+              <text class="limit-value">{{ item.availableLimit }}</text>
             </view>
           </view>
           
@@ -363,13 +367,22 @@ function settingCancel() {
   .item-header {
     display: flex;
     align-items: center;
-    gap: 16rpx;
-    padding: 24rpx;
+    justify-content: space-between;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .left-section {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+      flex: 1;
+      min-width: 0;
+    }
 
     .card-icon {
-      width: 56rpx;
-      height: 56rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -382,25 +395,25 @@ function settingCancel() {
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 12rpx;
+      gap: 8rpx;
       min-width: 0;
     }
     
     .card-name-row {
       display: flex;
       align-items: baseline;
-      gap: 12rpx;
+      gap: 10rpx;
     }
     
     .card-name {
-      font-size: 32rpx;
-      font-weight: 700;
+      font-size: 28rpx;
+      font-weight: 600;
       color: #ffffff;
       line-height: 1.2;
     }
     
     .card-code {
-      font-size: 28rpx;
+      font-size: 24rpx;
       color: rgba(255, 255, 255, 0.75);
       font-weight: 400;
       line-height: 1.2;
@@ -410,35 +423,51 @@ function settingCancel() {
       display: flex;
       align-items: center;
       gap: 8rpx;
-      flex-wrap: wrap;
     }
     
     .limit-label {
-      font-size: 24rpx;
+      font-size: 22rpx;
       color: rgba(255, 255, 255, 0.7);
       font-weight: 400;
+      line-height: 1;
     }
     
     .bill-date {
-      font-size: 30rpx;
-      font-weight: 600;
+      font-size: 26rpx;
+      font-weight: 500;
       color: #ffffff;
-      margin-right: 16rpx;
+      line-height: 1;
+    }
+    
+    .right-section {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 6rpx;
+      flex-shrink: 0;
+    }
+    
+    .limit-label-right {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.7);
+      font-weight: 400;
+      line-height: 1;
     }
     
     .limit-value {
       font-size: 32rpx;
       font-weight: 700;
       color: #52c41a;
+      line-height: 1;
     }
   }
 
   .card-body {
-    padding: 24rpx;
+    padding: 20rpx 24rpx 24rpx;
     background: #fff;
     display: flex;
     flex-direction: column;
-    gap: 24rpx;
+    gap: 20rpx;
   }
 
   .pos-section,
@@ -446,25 +475,32 @@ function settingCancel() {
     display: flex;
     flex-direction: column;
     gap: 12rpx;
+    padding: 16rpx;
+    background: linear-gradient(135deg, #f8f9ff 0%, #fefeff 100%);
+    border-radius: 12rpx;
+    border: 1rpx solid rgba(102, 126, 234, 0.1);
   }
 
   .section-header {
     display: flex;
     align-items: center;
     gap: 8rpx;
-    margin-bottom: 4rpx;
+    padding-bottom: 8rpx;
+    border-bottom: 1rpx solid rgba(102, 126, 234, 0.15);
     
     .section-title {
       font-size: 26rpx;
       color: #333;
       font-weight: 600;
+      line-height: 1.2;
     }
   }
   
   .pos-tags {
     display: flex;
     flex-wrap: wrap;
-    gap: 12rpx;
+    gap: 10rpx;
+    padding-top: 4rpx;
   }
   
   .pos-tag {
@@ -472,23 +508,38 @@ function settingCancel() {
     color: #667eea;
     font-weight: 500;
     padding: 8rpx 16rpx;
-    background: rgba(102, 126, 234, 0.1);
-    border: 1rpx solid rgba(102, 126, 234, 0.3);
-    border-radius: 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border: 1rpx solid rgba(102, 126, 234, 0.2);
+    border-radius: 20rpx;
     line-height: 1.3;
+    transition: all 0.3s ease;
   }
   
   .record-list {
     display: flex;
     flex-direction: column;
-    gap: 8rpx;
+    gap: 10rpx;
+    padding-top: 4rpx;
   }
   
   .record-text {
     font-size: 24rpx;
     color: #666;
     line-height: 1.6;
-    padding-left: 8rpx;
+    padding: 6rpx 0 6rpx 20rpx;
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: 4rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 6rpx;
+      height: 6rpx;
+      background: #faad14;
+      border-radius: 50%;
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/work/base/creditCard/addEdit.vue b/src/pages/work/base/creditCard/addEdit.vue
index 09d8563..a46f929 100644
--- a/src/pages/work/base/creditCard/addEdit.vue
+++ b/src/pages/work/base/creditCard/addEdit.vue
@@ -317,6 +317,10 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+  }
+  
   .section {
     margin: 24rpx;
     padding: 0;
@@ -326,11 +330,11 @@ onLoad((option) => {
     overflow: hidden;
   
     .section-title {
-      padding: 24rpx;
+      padding: 16rpx 24rpx;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       color: #ffffff;
-      line-height: 44rpx;
-      font-size: 32rpx;
+      line-height: 1.2;
+      font-size: 28rpx;
       font-weight: 600;
       display: flex;
       align-items: center;
@@ -338,8 +342,8 @@ onLoad((option) => {
       &::before {
         content: '';
         width: 6rpx;
-        height: 32rpx;
-        background: rgba(255, 255, 255, 0.5);
+        height: 28rpx;
+        background: #ffffff;
         border-radius: 3rpx;
         margin-right: 12rpx;
       }
@@ -353,4 +357,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/base/creditCard/details.vue b/src/pages/work/base/creditCard/details.vue
index c14a4ee..8b27a59 100644
--- a/src/pages/work/base/creditCard/details.vue
+++ b/src/pages/work/base/creditCard/details.vue
@@ -13,11 +13,7 @@
             <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
           </view>
           <view class="header-info">
-            <text class="card-name">{{ detailInfo.name }}</text>
-            <text class="card-code">{{ detailInfo.code }}</text>
-          </view>
-          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
-            <text>{{ detailInfo.statusText }}</text>
+            <text class="card-name">{{ detailInfo.name }}<text class="card-code" v-if="detailInfo.code">({{ detailInfo.code }})</text></text>
           </view>
         </view>
         
@@ -25,22 +21,24 @@
           <view class="info-section">
             <view class="section-title">
               <view class="title-icon"></view>
-              <text>额度信息</text>
+              <text>账户信息</text>
             </view>
             <view class="info-list">
-              <view class="list-row">
-                <view class="list-item">
-                  <text class="item-label">信用额度</text>
-                  <text class="item-value primary">{{ detailInfo.creditLimit }}元</text>
-                </view>
-                <view class="list-item">
-                  <text class="item-label">可用额度</text>
-                  <text class="item-value orange">{{ detailInfo.availableLimit }}元</text>
-                </view>
+              <view class="list-item">
+                <text class="item-label">信用额度</text>
+                <text class="item-value primary">{{ detailInfo.creditLimit }}元</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">可用额度</text>
+                <text class="item-value orange">{{ detailInfo.availableLimit }}元</text>
               </view>
               <view class="list-item">
                 <text class="item-label">余额</text>
-                <text class="item-value">{{ detailInfo.balance }}元</text>
+                <text class="item-value orange">{{ detailInfo.balance }}元</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">账户状态</text>
+                <text class="item-value" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">{{ detailInfo.statusText }}</text>
               </view>
             </view>
           </view>
@@ -122,6 +120,17 @@ const data = reactive({
 })
 const {detailInfo} = toRefs(data)
 
+function formatCardCode(code) {
+  if (!code) return ''
+  // 去除所有空格和特殊字符
+  const cleanCode = code.replace(/\s+/g, '')
+  // 如果卡号长度小于等于4位，直接返回
+  if (cleanCode.length <= 4) return code
+  // 只显示后4位，前面用 XX 替代
+  const suffix = cleanCode.substring(cleanCode.length - 4)
+  return `XX ${suffix}`
+}
+
 function getStatusClass(status, statusText) {
   // 优先根据状态文字判断
   if (statusText && statusText.includes('正常')) {
@@ -178,8 +187,8 @@ onLoad((option) => {
   
   <style lang="scss" scoped>
 .container {
-  min-height: 100vh;
   background: #f5f7fa;
+  padding-bottom: 24rpx;
 }
 
 .detail-card {
@@ -194,70 +203,51 @@ onLoad((option) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 24rpx;
+  padding: 16rpx 20rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   
   .header-icon {
-    width: 56rpx;
-    height: 56rpx;
+    width: 48rpx;
+    height: 48rpx;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 16rpx;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 16rpx;
+    margin-right: 12rpx;
     backdrop-filter: blur(10rpx);
   }
   
   .header-info {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 6rpx;
+    min-width: 0;
+    overflow: hidden;
     
     .card-name {
       color: #ffffff;
-      font-size: 32rpx;
+      font-size: 28rpx;
       font-weight: 600;
-    }
-    
-    .card-code {
-      color: rgba(255, 255, 255, 0.8);
-      font-size: 24rpx;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+        .card-code {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 28rpx;
+          font-weight: 400;
+          margin-left: 8rpx;
+        }
+      }
     }
   }
-  
-  .status-badge {
-    padding: 12rpx 28rpx;
-    border-radius: 24rpx;
-    font-size: 26rpx;
-    font-weight: 600;
-    
-    &.status-default {
-      background: #f0f0f0;
-      color: #666666;
-    }
-    
-    &.status-normal {
-      background: #fa8c16;
-      color: #ffffff;
-      box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
-    }
-    
-    &.status-error {
-      background: #ff4d4f;
-      color: #ffffff;
-      box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
-    }
+
+  .card-body {
+    padding: 16rpx;
   }
-}
 
-.card-body {
-  padding: 24rpx;
-}
-
-.info-section {
-  margin-bottom: 32rpx;
+  .info-section {
+  margin-bottom: 20rpx;
   
   &:last-child {
     margin-bottom: 0;
@@ -266,7 +256,7 @@ onLoad((option) => {
   .section-title {
     display: flex;
     align-items: center;
-    margin-bottom: 20rpx;
+    margin-bottom: 12rpx;
     
     .title-icon {
       width: 6rpx;
@@ -284,50 +274,16 @@ onLoad((option) => {
   }
   
   .info-list {
-    .list-row {
-      display: flex;
-      gap: 12rpx;
-      margin-bottom: 12rpx;
-      
-      .list-item {
-        flex: 1;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 20rpx;
-        background: #f8f9fa;
-        border-radius: 8rpx;
-        
-        .item-label {
-          color: #7f8c8d;
-          font-size: 26rpx;
-        }
-        
-        .item-value {
-          color: #2c3e50;
-          font-size: 28rpx;
-          font-weight: 500;
-          text-align: right;
-          
-          &.primary {
-            color: #667eea;
-          }
-          
-          &.orange {
-            color: #fa8c16;
-          }
-        }
-      }
-    }
+
     
     .list-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 20rpx;
+      padding: 16rpx;
       background: #f8f9fa;
       border-radius: 8rpx;
-      margin-bottom: 12rpx;
+      margin-bottom: 5rpx;
       
       &:last-child {
         margin-bottom: 0;
@@ -351,12 +307,24 @@ onLoad((option) => {
         &.orange {
           color: #fa8c16;
         }
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
+        }
       }
     }
   }
   
   .remark-content {
-    padding: 20rpx;
+    padding: 16rpx;
     background: #f8f9fa;
     border-radius: 8rpx;
     
diff --git a/src/pages/work/base/creditCard/list.vue b/src/pages/work/base/creditCard/list.vue
index 6136a24..f634c29 100644
--- a/src/pages/work/base/creditCard/list.vue
+++ b/src/pages/work/base/creditCard/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.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>
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
       </view>
@@ -20,65 +20,59 @@
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <view class="card-info">
-                <text class="card-name">{{ item.name }}</text>
-                <text class="card-code">{{ item.code }}</text>
+                <text class="card-name">{{ item.name }}<text class="card-code" v-if="item.code">({{ item.code }})</text></text>
               </view>
             </view>
-            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
-              <text>{{ dictStr(item.status, statusList) }}</text>
+            <view class="balance-section">
+              <text class="balance-value"><text class="balance-label">可用</text>{{ item.availableLimit || 0 }}元</text>
             </view>
           </view>
           
           <view class="card-body">
-            <view class="credit-info">
-              <view class="credit-item">
-                <text class="credit-label">信用额度</text>
-                <text class="credit-value primary">{{ item.creditLimit }}元</text>
-              </view>
-              <view class="credit-divider"></view>
-              <view class="credit-item">
-                <text class="credit-label">可用额度</text>
-                <text class="credit-value success">{{ item.availableLimit }}元</text>
-              </view>
-            </view>
-            
             <view class="info-row">
-              <view class="info-item">
+              <view class="info-item" v-if="item.creditLimit || true">
+                <text class="info-label">信用额度</text>
+                <text class="info-value primary">{{ item.creditLimit ? item.creditLimit + '元' : '--' }}</text>
+              </view>
+               <view class="info-item" v-if="item.balance || true">
+                <text class="info-label">余额</text>
+                <text class="info-value orange">{{ item.balance ? item.balance + '元' : '--' }}</text>
+              </view>
+              <view class="info-item" v-if="dictStr(item.status, statusList) || true">
+                <text class="info-label">账户状态</text>
+                <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="item.billDateName || true">
                 <text class="info-label">账单日</text>
-                <text class="info-value">{{ item.billDateName }}</text>
+                <text class="info-value">{{ item.billDateName || '--' }}</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="item.payDateName || true">
                 <text class="info-label">还款日</text>
-                <text class="info-value">{{ item.payDateName }}</text>
+                <text class="info-value">{{ item.payDateName || '--' }}</text>
               </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item">
+              <view class="info-item" v-if="item.delayPeriod || true">
                 <text class="info-label">延缓期限</text>
-                <text class="info-value">{{ item.delayPeriod }}</text>
+                <text class="info-value">{{ item.delayPeriod || '--' }}</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="item.activationDate || true">
                 <text class="info-label">开户日期</text>
-                <text class="info-value">{{ item.activationDate }}</text>
+                <text class="info-value">{{ item.activationDate || '--' }}</text>
               </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item">
+              <view class="info-item" v-if="item.effectiveDate || true">
                 <text class="info-label">有效期</text>
-                <text class="info-value">{{ item.effectiveDate }}</text>
+                <text class="info-value">{{ item.effectiveDate || '--' }}</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="dictStr(item.isNextBillDate, isNextBillDateList) || true">
                 <text class="info-label">账单日消费</text>
-                <text class="info-value">{{ dictStr(item.isNextBillDate, isNextBillDateList) }}</text>
+                <text class="info-value">{{ dictStr(item.isNextBillDate, isNextBillDateList) || '--' }}</text>
               </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item">
+              <view class="info-item" v-if="dictStr(item.isZeroBill, isZeroBillList) || true">
                 <text class="info-label">0账单操作</text>
-                <text class="info-value">{{ dictStr(item.isZeroBill, isZeroBillList) }}</text>
+                <text class="info-value">{{ dictStr(item.isZeroBill, isZeroBillList) || '--' }}</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>
@@ -198,7 +192,18 @@ function dictStr(val, arr) {
       return str
     }
     
-function getStatusClass(status, statusText) {
+function formatCardCode(code) {
+      if (!code) return ''
+      // 去除所有空格和特殊字符
+      const cleanCode = code.replace(/\s+/g, '')
+      // 如果卡号长度小于等于4位，直接返回
+      if (cleanCode.length <= 4) return code
+      // 只显示后4位，前面用 XX 替代
+      const suffix = cleanCode.substring(cleanCode.length - 4)
+      return `${suffix}`
+    }
+    
+    function getStatusClass(status, statusText) {
       // 根据状态文字判断（更可靠）
       if (statusText && statusText.includes('正常')) {
         return 'status-normal'
@@ -243,22 +248,36 @@ function getStatusClass(status, statusText) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delBankcardLend(item.id)
-              uni.navigateTo({ url: `/pages/work/base/creditCard/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delBankcardLend(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -275,15 +294,19 @@ function getStatusClass(status, statusText) {
   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 {
@@ -291,22 +314,26 @@ function getStatusClass(status, statusText) {
     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-panel {
@@ -361,7 +388,7 @@ function getStatusClass(status, statusText) {
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
+  margin: 10rpx 24rpx;
   background: #ffffff;
   border-radius: 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
@@ -376,154 +403,143 @@ function getStatusClass(status, statusText) {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
     .card-name-section {
       display: flex;
       align-items: center;
       flex: 1;
+      min-width: 0;
+      margin-right: 16rpx;
+    }
+    
+    .card-icon {
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 12rpx;
+      flex-shrink: 0;
+    }
+    
+    .card-info {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
       
-      .card-icon {
-        width: 56rpx;
-        height: 56rpx;
-        background: rgba(255, 255, 255, 0.2);
-        border-radius: 16rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 16rpx;
-        backdrop-filter: blur(10rpx);
-      }
-      
-      .card-info {
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
-        line-height: 1;
-        
-        .card-name {
-          color: #ffffff;
-          font-size: 32rpx;
-          font-weight: 600;
-          line-height: 1;
-        }
+      .card-name {
+        color: #ffffff;
+        font-size: 28rpx;
+        font-weight: 600;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
         
         .card-code {
-          color: rgba(255, 255, 255, 0.8);
-          font-size: 28rpx;
-          line-height: 1;
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 22rpx;
+          font-weight: 400;
+          margin-left: 8rpx;
         }
       }
     }
     
-    .status-badge {
-      padding: 12rpx 28rpx;
-      border-radius: 24rpx;
-      font-size: 26rpx;
-      font-weight: 600;
-      letter-spacing: 0.5rpx;
+    .balance-section {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      white-space: nowrap;
       
-      // 默认：灰色
-      &.status-default {
-        background: #f0f0f0;
-        color: #666666;
-      }
-      
-      // 正常使用 - 橙色实底白字
-      &.status-normal {
-        background: #fa8c16 !important;
-        color: #ffffff !important;
-        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
-      }
-      
-      // 销卡销户 - 醒目的红色实底
-      &.status-error {
-        background: #ff4d4f;
-        color: #ffffff;
-        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+      .balance-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        
+        .balance-label {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 22rpx;
+          font-weight: 400;
+          margin-right: 8rpx;
+        }
       }
     }
   }
   
   .card-body {
     padding: 24rpx;
-    
-    .credit-info {
+    background: #fff;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
+
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
-      padding: 20rpx 24rpx;
-      background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
-      border-radius: 12rpx;
-      margin-bottom: 20rpx;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
       
-      .credit-item {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 8rpx;
-        min-width: 0;
-        
-        .credit-label {
-          color: #7f8c8d;
-          font-size: 26rpx;
-          flex-shrink: 0;
-        }
-        
-        .credit-value {
-          font-size: 28rpx;
-          font-weight: 600;
-          
-          &.primary {
-            color: #667eea;
-          }
-          
-          &.success {
-            color: #fa8c16;
-          }
-        }
+      &.info-item-full {
+        flex: 0 0 100%;
       }
-      
-      .credit-divider {
-        width: 1rpx;
-        background: rgba(0, 0, 0, 0.1);
-        margin: 0 24rpx;
-      }
-    }
-    
-    .info-row {
-      display: flex;
-      margin-bottom: 12rpx;
-      gap: 12rpx;
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
-      
-      .info-item {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 16rpx 20rpx;
-        background: #f8f9fa;
+
+      .info-label {
+       font-size: 24rpx;
+        color: #999;
+        line-height: 1.2;
+        padding: 4rpx 12rpx;
+        background: rgba(102, 126, 234, 0.08);
         border-radius: 8rpx;
-        min-height: 72rpx;
+        align-self: flex-start;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
         
-        .info-label {
-          color: #7f8c8d;
-          font-size: 26rpx;
-          flex-shrink: 0;
+        &.primary {
+          color: #667eea;
         }
         
-        .info-value {
-          color: #2c3e50;
-          font-size: 28rpx;
-          font-weight: 500;
-          text-align: right;
-          flex: 1;
-          margin-left: 16rpx;
+        &.orange {
+          color: #fa8c16;
+          font-weight: 600;
         }
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
+        }
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
   }
@@ -532,38 +548,36 @@ function getStatusClass(status, statusText) {
     display: flex;
     justify-content: flex-end;
     gap: 16rpx;
-    padding: 0 24rpx 24rpx;
+    padding: 16rpx 24rpx 24rpx;
 
     .btn-edit,
     .btn-delete {
       display: flex;
       align-items: center;
-      gap: 8rpx;
-      padding: 12rpx 24rpx;
-      border-radius: 8rpx;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
       font-size: 26rpx;
+      font-weight: 500;
       border: 1rpx solid;
-      transition: all 0.2s ease;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
     
     .btn-edit {
-      background: #ffffff;
+      background: rgba(102, 126, 234, 0.1);
       color: #667eea;
-      border-color: #667eea;
-      
-      &:active {
-        background: rgba(102, 126, 234, 0.1);
-      }
+      border-color: rgba(102, 126, 234, 0.3);
     }
     
     .btn-delete {
-      background: #ffffff;
+      background: rgba(245, 87, 108, 0.1);
       color: #f5576c;
-      border-color: #f5576c;
-      
-      &:active {
-        background: rgba(245, 87, 108, 0.1);
-      }
+      border-color: rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/work/base/debitCard/addEdit.vue b/src/pages/work/base/debitCard/addEdit.vue
index 76cfb35..b020dc5 100644
--- a/src/pages/work/base/debitCard/addEdit.vue
+++ b/src/pages/work/base/debitCard/addEdit.vue
@@ -51,7 +51,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: 24rpx; font-size: 32rpx; font-weight: 600; box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);"></u-button>
+            <u-button type="primary" text="提交" @click="submit"></u-button>
           </view>
         </view>
       </view>
@@ -252,11 +252,11 @@ onLoad((option) => {
     overflow: hidden;
   
     .section-title {
-      padding: 24rpx;
+      padding: 16rpx 24rpx;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       color: #ffffff;
-      line-height: 44rpx;
-      font-size: 32rpx;
+      line-height: 1.2;
+      font-size: 28rpx;
       font-weight: 600;
       display: flex;
       align-items: center;
@@ -264,8 +264,8 @@ onLoad((option) => {
       &::before {
         content: '';
         width: 6rpx;
-        height: 32rpx;
-        background: rgba(255, 255, 255, 0.5);
+        height: 28rpx;
+        background: #ffffff;
         border-radius: 3rpx;
         margin-right: 12rpx;
       }
@@ -275,8 +275,24 @@ onLoad((option) => {
       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/base/debitCard/details.vue b/src/pages/work/base/debitCard/details.vue
index 0f0a9fa..a53c00c 100644
--- a/src/pages/work/base/debitCard/details.vue
+++ b/src/pages/work/base/debitCard/details.vue
@@ -13,11 +13,7 @@
             <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
           </view>
           <view class="header-info">
-            <text class="card-name">{{ detailInfo.name }}</text>
-            <text class="card-code">{{ detailInfo.code }}</text>
-          </view>
-          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
-            <text>{{ detailInfo.statusText }}</text>
+            <text class="card-name">{{ detailInfo.name }}<text class="card-code">({{ detailInfo.code }})</text></text>
           </view>
         </view>
         
@@ -36,6 +32,10 @@
                 <text class="item-label">账户类型</text>
                 <text class="item-value">{{ detailInfo.debitType }}</text>
               </view>
+              <view class="list-item">
+                <text class="item-label">账户状态</text>
+                <text class="item-value" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">{{ detailInfo.statusText }}</text>
+              </view>
             </view>
           </view>
           
@@ -139,8 +139,8 @@ onLoad((option) => {
   
   <style lang="scss" scoped>
 .container {
-  min-height: 100vh;
   background: #f5f7fa;
+  padding-bottom: 24rpx;
 }
 
 .detail-card {
@@ -155,36 +155,41 @@ onLoad((option) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 24rpx;
+  padding: 16rpx 20rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   
   .header-icon {
-    width: 56rpx;
-    height: 56rpx;
+    width: 48rpx;
+    height: 48rpx;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 16rpx;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 16rpx;
+    margin-right: 12rpx;
     backdrop-filter: blur(10rpx);
   }
   
   .header-info {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 6rpx;
+    min-width: 0;
+    overflow: hidden;
     
     .card-name {
       color: #ffffff;
-      font-size: 32rpx;
+      font-size: 28rpx;
       font-weight: 600;
-    }
-    
-    .card-code {
-      color: rgba(255, 255, 255, 0.8);
-      font-size: 24rpx;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 28rpx;
+        font-weight: 400;
+        margin-left: 8rpx;
+      }
     }
   }
   
@@ -272,6 +277,18 @@ onLoad((option) => {
         &.orange {
           color: #fa8c16;
         }
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
+        }
       }
     }
   }
diff --git a/src/pages/work/base/debitCard/list.vue b/src/pages/work/base/debitCard/list.vue
index 1822d18..f826323 100644
--- a/src/pages/work/base/debitCard/list.vue
+++ b/src/pages/work/base/debitCard/list.vue
@@ -1,15 +1,16 @@
 <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.name" border="false" placeholder="请输入账户名称" class="search-input"
           @blur="searchBlur" suffixIcon="search" 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="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
         <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
         <u-transition :show="filterPanel" mode="fade">
@@ -22,10 +23,14 @@
               </view>
             </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);"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
           </view>
         </u-transition>
@@ -40,42 +45,39 @@
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <view class="card-info">
-                <text class="card-name">{{ item.name }}</text>
-                <text class="card-code">{{ item.code }}</text>
+                <text class="card-name">{{ item.name }}<text class="card-code" v-if="item.code">({{ item.code }})</text></text>
               </view>
             </view>
-            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
-              <text>{{ dictStr(item.status, statusList) }}</text>
+            <view class="balance-section">
+              <text class="balance-value"><text class="balance-label">余额</text>{{ item.balance }}元</text>
             </view>
           </view>
           
           <view class="card-body">
             <view class="info-row">
-              <view class="info-item">
+              <view class="info-item" v-if="dictStr(item.debitType, debitTypeList) || true">
                 <text class="info-label">账户类型</text>
-                <text class="info-value">{{ dictStr(item.debitType, debitTypeList) }}</text>
+                <text class="info-value">{{ dictStr(item.debitType, debitTypeList) || '--' }}</text>
               </view>
-              <view class="info-item">
-                <text class="info-label">余额</text>
-                <text class="info-value orange">{{ item.balance }}元</text>
+              <view class="info-item" v-if="dictStr(item.status, statusList) || true">
+                <text class="info-label">账户状态</text>
+                <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
               </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item">
+              <view class="info-item" v-if="item.activationDate || true">
                 <text class="info-label">开户日期</text>
-                <text class="info-value">{{ item.activationDate }}</text>
+                <text class="info-value">{{ item.activationDate || '--' }}</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="item.effectiveDate || true">
                 <text class="info-label">有效期</text>
-                <text class="info-value">{{ item.effectiveDate }}</text>
+                <text class="info-value">{{ item.effectiveDate || '--' }}</text>
               </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item">
+              <view class="info-item info-item-full" v-if="item.openingBank || true">
                 <text class="info-label">开户行</text>
-                <text class="info-value">{{ item.openingBank || '-' }}</text>
+                <text class="info-value">{{ item.openingBank || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
               </view>
             </view>
           </view>
@@ -199,6 +201,17 @@ function dictStr(val, arr) {
       })
       return str
     }
+
+function formatCardCode(code) {
+  if (!code) return ''
+  // 去除所有空格和特殊字符
+  const cleanCode = code.replace(/\s+/g, '')
+  // 如果卡号长度小于等于4位，直接返回
+  if (cleanCode.length <= 4) return code
+  // 只显示后4位，前面用 XX 替代
+  const suffix = cleanCode.substring(cleanCode.length - 4)
+  return `${suffix}`
+}
 function selectStatus(item) {
       queryParams.value.debitType = item.dictValue
       debitTypeList.value.map(ele => {
@@ -242,22 +255,36 @@ function selectStatus(item) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delBankcardLend(item.id)
-              uni.navigateTo({ url: `/pages/work/base/debitCard/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delBankcardLend(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -265,16 +292,46 @@ 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;
+  }
+  
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    
+    uni-icons {
+      color: #667eea;
+    }
   }
   
   .add-btn {
@@ -282,23 +339,27 @@ 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;
     margin-left: 10rpx;
     
     &: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-panel {
@@ -370,26 +431,75 @@ function selectStatus(item) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
+      .btn-reset,
+      .btn-confirm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
+        text {
+          line-height: 1;
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
+      }
+      
+      .btn-confirm {
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
+      }
     }
   }
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
+  margin: 10rpx 24rpx;
   background-color: #fff;
   border-radius: 16rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.2s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
     .card-name-section {
@@ -397,115 +507,126 @@ function selectStatus(item) {
       align-items: center;
       flex: 1;
       min-width: 0;
+      margin-right: 16rpx;
     }
     
     .card-icon {
-      width: 56rpx;
-      height: 56rpx;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 16rpx;
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-right: 16rpx;
+      margin-right: 12rpx;
       flex-shrink: 0;
-      backdrop-filter: blur(10rpx);
     }
     
     .card-info {
-      display: flex;
-      flex-direction: column;
-      gap: 6rpx;
       flex: 1;
       min-width: 0;
+      overflow: hidden;
       
       .card-name {
         color: #ffffff;
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: 600;
         line-height: 1.2;
-      }
-      
-      .card-code {
-        color: rgba(255, 255, 255, 0.8);
-        font-size: 26rpx;
-        line-height: 1.2;
+        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;
+        }
       }
     }
     
-    .status-badge {
-      padding: 12rpx 28rpx;
-      border-radius: 24rpx;
-      font-size: 26rpx;
-      font-weight: 600;
-      letter-spacing: 0.5rpx;
+    .balance-section {
+      display: flex;
+      align-items: center;
       flex-shrink: 0;
+      white-space: nowrap;
       
-      &.status-default {
-        background: #f0f0f0;
-        color: #666666;
-      }
-      
-      &.status-normal {
-        background: #fa8c16 !important;
-        color: #ffffff !important;
-        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
-      }
-      
-      &.status-error {
-        background: #ff4d4f;
-        color: #ffffff;
-        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+      .balance-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        
+        .balance-label {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 22rpx;
+          font-weight: 400;
+          margin-right: 8rpx;
+        }
       }
     }
   }
 
   .card-body {
     padding: 24rpx;
-    
-    .info-row {
+    background: #fff;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
+
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
-      margin-bottom: 12rpx;
-      gap: 12rpx;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
       
-      &:last-child {
-        margin-bottom: 0;
+      &.info-item-full {
+        flex: 0 0 100%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
+        }
       }
       
-      .info-item {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 16rpx 20rpx;
-        background: #f8f9fa;
-        border-radius: 8rpx;
-        min-height: 72rpx;
-        
-        .info-label {
-          color: #7f8c8d;
-          font-size: 26rpx;
-          flex-shrink: 0;
-          white-space: nowrap;
-          min-width: 120rpx;
-        }
-        
-        .info-value {
-          color: #2c3e50;
-          font-size: 28rpx;
-          font-weight: 500;
-          text-align: right;
-          flex: 1;
-          margin-left: 16rpx;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          
-          &.orange {
-            color: #fa8c16;
-            font-weight: 600;
-          }
-        }
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
   }
@@ -513,17 +634,20 @@ function selectStatus(item) {
   .operate {
     display: flex;
     justify-content: flex-end;
-    padding: 0 24rpx 24rpx;
+    padding: 16rpx 24rpx 24rpx;
     gap: 16rpx;
 
     .btn-edit,
     .btn-delete {
       display: flex;
       align-items: center;
+      justify-content: center;
       gap: 6rpx;
-      padding: 12rpx 24rpx;
-      border-radius: 8rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
       font-size: 26rpx;
+      font-weight: 500;
       transition: all 0.3s ease;
       
       &:active {
@@ -535,20 +659,12 @@ function selectStatus(item) {
       background: rgba(102, 126, 234, 0.1);
       color: #667eea;
       border: 1rpx solid rgba(102, 126, 234, 0.3);
-      
-      text {
-        color: #667eea;
-      }
     }
     
     .btn-delete {
       background: rgba(245, 87, 108, 0.1);
       color: #f5576c;
       border: 1rpx solid rgba(245, 87, 108, 0.3);
-      
-      text {
-        color: #f5576c;
-      }
     }
   }
 }
diff --git a/src/pages/work/base/financials/addEdit.vue b/src/pages/work/base/financials/addEdit.vue
index 591f2ad..f616e33 100644
--- a/src/pages/work/base/financials/addEdit.vue
+++ b/src/pages/work/base/financials/addEdit.vue
@@ -33,15 +33,16 @@
               <u--input v-model="form.password"  placeholder="请填写密码"
                 inputAlign="right" border="none"></u--input>
             </u-form-item> -->
+             <u-form-item label="开户日期" prop="activationDate"  @click="selectDate()">
+              <u--input v-model="form.activationDate" disabled disabledColor="#ffffff" placeholder="请选择开户日期" inputAlign="right" border="none"></u--input>
+						<u-icon slot="right" name="arrow-right"></u-icon>
+            </u-form-item>
             <u-form-item label="关联储蓄卡" prop="bankNameCode"  @click="handleDebitCard">
               <u--input v-model="form.bankNameCode" disabled disabledColor="#ffffff" placeholder="请选择关联储蓄卡"
                 inputAlign="right" border="none"></u--input>
               <u-icon slot="right" name="arrow-down"></u-icon>
             </u-form-item>
-            <u-form-item label="开户日期" prop="activationDate"  @click="selectDate()">
-              <u--input v-model="form.activationDate" disabled disabledColor="#ffffff" placeholder="请选择开户日期" inputAlign="right" border="none"></u--input>
-						<u-icon slot="right" name="arrow-right"></u-icon>
-            </u-form-item>
+           
           
             <u-form-item label="佣金费率" prop="commission" >
               <u--input v-model="form.commission"  placeholder="请填写佣金费率"
@@ -241,53 +242,72 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+  }
+  
   .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: #fff;
-      line-height: 44rpx;
-      font-size: 30rpx;
+      padding: 16rpx 24rpx;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      padding: 16rpx 26rpx;
-      margin: -16rpx -24rpx 20rpx;
-      border-radius: 8rpx 8rpx 0 0;
-      position: relative;
+      color: #ffffff;
+      line-height: 1.2;
+      font-size: 28rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
       
       &::before {
         content: '';
-        position: absolute;
-        left: 26rpx;
-        top: 50%;
-        transform: translateY(-50%);
         width: 6rpx;
         height: 28rpx;
-        background-color: #fff;
+        background: #ffffff;
         border-radius: 3rpx;
+        margin-right: 12rpx;
       }
-      
-      padding-left: 52rpx;
     }
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding: 24rpx;
   
       .form-btn {
-        padding-top: 20rpx;
-        
-        ::v-deep .u-button {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border: none;
-          border-radius: 12rpx;
-          height: 88rpx;
-          font-size: 32rpx;
-          box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
-        }
+        padding-top: 32rpx;
       }
     }
   }
+  </style>
+  
+  <style lang="scss">
+  .form-view {
+    ::v-deep .u-form-item--required::before {
+      color: #f5576c !important;
+      font-size: 28rpx !important;
+      margin-right: 4rpx !important;
+      line-height: 1 !important;
+      vertical-align: middle !important;
+      position: relative !important;
+      top: -2rpx !important;
+    }
+  }
+  
+  .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/base/financials/details.vue b/src/pages/work/base/financials/details.vue
index 7742cde..fc7284f 100644
--- a/src/pages/work/base/financials/details.vue
+++ b/src/pages/work/base/financials/details.vue
@@ -8,51 +8,53 @@
 		</u-navbar>
       <view class="detail-card">
         <view class="card-header">
-          <view class="card-title">
-            <uni-icons type="wallet" size="24" color="#fff"></uni-icons>
-            <text class="card-name">{{ detailInfo.name }}</text>
+          <view class="header-icon">
+            <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
           </view>
-          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
-            <text>{{ detailInfo.statusText }}</text>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.name }}<text class="card-code" v-if="detailInfo.code">({{ detailInfo.code }})</text></text>
+          </view>
+          <view class="balance-section">
+            <text class="balance-label">余额</text>
+            <text class="balance-value">{{ detailInfo.balance || '0' }}元</text>
           </view>
         </view>
 
-        <view class="section">
-          <view class="section-title">
-            <view class="title-icon"></view>
-            <text>账户信息</text>
-          </view>
-          <view class="info-grid">
-            <view class="info-item">
-              <text class="info-label">账号</text>
-              <text class="info-value">{{ detailInfo.code || '-' }}</text>
+        <view class="card-body">
+          <view class="info-section">
+            <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 orange">{{ detailInfo.balance || '0' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">佣金费率</text>
-              <text class="info-value orange">{{ detailInfo.commission || '-' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">关联储蓄卡</text>
-              <text class="info-value">{{ detailInfo.bankNameCode || '-' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">开户日期</text>
-              <text class="info-value">{{ detailInfo.activationDate || '-' }}</text>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">账户状态</text>
+                <text class="item-value" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">{{ detailInfo.statusText }}</text>
+              </view>
+             
+                <view class="list-item">
+                <text class="item-label">开户日期</text>
+                <text class="item-value">{{ detailInfo.activationDate || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">关联储蓄卡</text>
+                <text class="item-value">{{ detailInfo.bankNameCode || '-' }}</text>
+              </view>
+             <view class="list-item">
+                <text class="item-label">佣金费率</text>
+                <text class="item-value">{{ detailInfo.commission || '-' }}</text>
+              </view>
             </view>
           </view>
-        </view>
 
-        <view class="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 class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
           </view>
         </view>
       </view>
@@ -73,15 +75,15 @@ const data = reactive({
 const {detailInfo} = toRefs(data)
 onLoad((option) => {
     id.value = option.id
-    getDicts('account_status').then(res => {
-      statusList.value = res.data
-    })
     getInfo()
   })
   function getInfo() {
     getFutureStocks(id.value).then(res => {
           detailInfo.value = res.data
-          detailInfo.value.statusText = dictStr(detailInfo.value.status, statusList.value)
+          // 获取状态字典
+          getDicts('account_status').then(result => {
+            detailInfo.value.statusText = dictStr(detailInfo.value.status, result.data)
+          })
         })
   }
   function dictStr(val, arr) {
@@ -116,117 +118,160 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .detail-card {
-    margin: 24rpx;
-    background-color: #fff;
-    border-radius: 12rpx;
+.container {
+  background: #f5f7fa;
+  padding-bottom: 24rpx;
+}
+
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  
+  .header-icon {
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    min-width: 0;
     overflow: hidden;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
-
-    .card-header {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      padding: 32rpx;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .card-title {
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
-
-        .card-name {
-          color: #fff;
-          font-size: 36rpx;
-          font-weight: bold;
-        }
-      }
-
-      .status-badge {
-        padding: 8rpx 20rpx;
-        border-radius: 24rpx;
-        font-size: 24rpx;
-        font-weight: 600;
-
-        &.status-default {
-          background: #f0f0f0;
-          color: #666666;
-        }
-
-        &.status-normal {
-          background: #fa8c16;
-          color: #ffffff;
-          box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
-        }
-
-        &.status-error {
-          background: #ff4d4f;
-          color: #ffffff;
-          box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
-        }
-      }
-    }
-
-    .section {
-      padding: 32rpx;
-      border-bottom: 1rpx solid #f0f0f0;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      .section-title {
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
-        margin-bottom: 24rpx;
-        font-size: 32rpx;
-        font-weight: bold;
-        color: #333;
-
-        .title-icon {
-          width: 6rpx;
-          height: 32rpx;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border-radius: 3rpx;
-        }
-      }
-
-      .info-grid {
-        display: flex;
-        flex-direction: column;
-        gap: 24rpx;
-
-        .info-item {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .info-label {
-            font-size: 28rpx;
-            color: #999;
-          }
-
-          .info-value {
-            font-size: 28rpx;
-            color: #333;
-            font-weight: 500;
-
-            &.orange {
-              color: #fa8c16;
-              font-weight: bold;
-              font-size: 32rpx;
-            }
-          }
-        }
-      }
-
-      .remark-content {
+    
+    .card-name {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
         font-size: 28rpx;
-        color: #666;
-        line-height: 1.6;
-        text-align: justify;
+        font-weight: 400;
+        margin-left: 8rpx;
       }
     }
   }
-  </style>
\ No newline at end of file
+  
+  .balance-section {
+    flex-shrink: 0;
+    text-align: right;
+    
+    .balance-label {
+      color: rgba(255, 255, 255, 0.85);
+      font-size: 24rpx;
+      margin-right: 8rpx;
+    }
+    
+    .balance-value {
+      color: #fa8c16;
+      font-size: 32rpx;
+      font-weight: 600;
+    }
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
+  .info-list {
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
+        }
+      }
+    }
+  }
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
+      font-size: 26rpx;
+      line-height: 1.6;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/work/base/financials/list.vue b/src/pages/work/base/financials/list.vue
index f5395f0..b47d16c 100644
--- a/src/pages/work/base/financials/list.vue
+++ b/src/pages/work/base/financials/list.vue
@@ -1,67 +1,66 @@
 <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"
           @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>
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
       </view>
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="card" @click="enterDetails(item)">
-          <view class="card-header">
-            <view class="card-title">
-              <uni-icons type="wallet" size="20" color="#fff"></uni-icons>
-              <text class="card-name">{{ item.name }}</text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.name }}</text>
+              </view>
             </view>
-            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
-              <text>{{ dictStr(item.status, statusList) }}</text>
+            <view class="balance-section">
+              <text class="balance-value"><text class="balance-label">余额</text>{{ item.balance || '0' }}元</text>
             </view>
           </view>
-
-          <view class="card-content">
+          
+          <view class="card-body">
             <view class="info-row">
-              <view class="info-item">
-                <text class="info-label">余额</text>
-                <text class="info-value orange">{{ item.balance || '0' }}</text>
+              <view class="info-item" v-if="dictStr(item.status, statusList) || true">
+                <text class="info-label">账户状态</text>
+                <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
               </view>
-              <view class="info-item">
-                <text class="info-label">佣金费率</text>
-                <text class="info-value orange">{{ item.commission || '-' }}</text>
-              </view>
-            </view>
-
-            <view class="info-row">
-              <view class="info-item">
-                <text class="info-label">关联储蓄卡</text>
-                <text class="info-value">{{ item.bankNameCode || '-' }}</text>
-              </view>
-              <view class="info-item">
+            
+               <view class="info-item" v-if="item.activationDate || true">
                 <text class="info-label">开户日期</text>
-                <text class="info-value">{{ item.activationDate || '-' }}</text>
+                <text class="info-value">{{ item.activationDate || '--' }}</text>
               </view>
-            </view>
-
-            <view class="info-row" v-if="item.remark">
-              <view class="info-item full-width">
+              <view class="info-item" v-if="item.bankNameCode || true">
+                <text class="info-label">关联储蓄卡</text>
+                <text class="info-value">{{ item.bankNameCode || '--' }}</text>
+              </view>
+               <view class="info-item" v-if="item.commission || true">
+                <text class="info-label">佣金费率</text>
+                <text class="info-value">{{ item.commission || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
                 <text class="info-label">备注</text>
                 <text class="info-value">{{ item.remark }}</text>
               </view>
             </view>
           </view>
-
-          <view class="card-footer">
-            <view class="action-btn edit-btn" @click.stop="handleEdit(item)">
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
               <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
-              <text>编辑</text>
+              <text>修改</text>
             </view>
-            <view class="action-btn delete-btn" @click.stop="handleDelete(item)">
-              <uni-icons type="trash" size="16" color="#ff4d4f"></uni-icons>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
               <text>删除</text>
             </view>
           </view>
@@ -199,30 +198,39 @@ function dictStr(val, arr) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delFutureStocks(item.id)
-              uni.navigateTo({ url: `/pages/work/base/financials/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delFutureStocks(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
+.container {
+  background: #f5f7fa;
+}
 
 .search-view {
   padding: 12rpx 32rpx;
@@ -231,15 +239,19 @@ function dictStr(val, arr) {
   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 {
@@ -247,144 +259,192 @@ 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;
-    margin-left: 10rpx;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.15);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
-      font-weight: 600;
+      font-weight: 500;
     }
   }
 }
 
-.card {
-  margin: 0 24rpx 24rpx;
-  background-color: #fff;
-  border-radius: 12rpx;
+.list-item {
+  margin: 10rpx 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
   overflow: hidden;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
-  .card-header {
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+  }
+
+  .item-header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    padding: 24rpx 32rpx;
+    padding: 20rpx 24rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    .card-title {
+    
+    .card-name-section {
       display: flex;
       align-items: center;
-      gap: 12rpx;
-
-      .card-name {
-        color: #fff;
-        font-size: 32rpx;
-        font-weight: bold;
-      }
-    }
-
-    .status-badge {
-      padding: 8rpx 20rpx;
-      border-radius: 24rpx;
-      font-size: 24rpx;
-      font-weight: 600;
-
-      &.status-default {
-        background: #f0f0f0;
-        color: #666666;
-      }
-
-      &.status-normal {
-        background: #fa8c16;
-        color: #ffffff;
-        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
-      }
-
-      &.status-error {
-        background: #ff4d4f;
-        color: #ffffff;
-        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
-      }
-    }
-  }
-
-  .card-content {
-    padding: 24rpx 32rpx;
-
-    .info-row {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 20rpx;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .info-item {
-        flex: 1;
+      flex: 1;
+      min-width: 0;
+      
+      .card-icon {
+        width: 48rpx;
+        height: 48rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 16rpx;
         display: flex;
-        flex-direction: column;
-        gap: 8rpx;
-
-        &.full-width {
-          flex: none;
-          width: 100%;
-        }
-
-        .info-label {
-          font-size: 24rpx;
-          color: #999;
-        }
-
-        .info-value {
+        align-items: center;
+        justify-content: center;
+        margin-right: 12rpx;
+        flex-shrink: 0;
+        backdrop-filter: blur(10rpx);
+      }
+      
+      .card-info {
+        flex: 1;
+        min-width: 0;
+        
+        .card-name {
+          color: #ffffff;
           font-size: 28rpx;
-          color: #333;
-          font-weight: 500;
-
-          &.orange {
-            color: #fa8c16;
-            font-weight: bold;
-          }
+          font-weight: 600;
+          line-height: 1.2;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+    
+    .balance-section {
+      flex-shrink: 0;
+      text-align: right;
+      
+      .balance-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 1;
+        
+        .balance-label {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 24rpx;
+          margin-right: 8rpx;
         }
       }
     }
   }
 
-  .card-footer {
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
+    
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
+      
+      &.info-item-full {
+        flex: 0 0 100%;
+      }
+
+      .info-label {
+        font-size: 24rpx;
+        color: #999;
+        line-height: 1.2;
+        padding: 4rpx 12rpx;
+        background: rgba(102, 126, 234, 0.08);
+        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;
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
+        }
+      }
+    }
+  }
+
+  .operate {
     display: flex;
     justify-content: flex-end;
-    gap: 24rpx;
-    padding: 20rpx 32rpx;
-    border-top: 1rpx solid #f0f0f0;
+    gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
 
-    .action-btn {
+    .btn-edit,
+    .btn-delete {
       display: flex;
       align-items: center;
-      gap: 8rpx;
-      padding: 12rpx 24rpx;
-      border-radius: 8rpx;
-      font-size: 28rpx;
-      transition: all 0.3s;
-
-      &.edit-btn {
-        background-color: rgba(102, 126, 234, 0.1);
-        color: #667eea;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
       }
+    }
 
-      &.delete-btn {
-        background-color: rgba(255, 77, 79, 0.1);
-        color: #ff4d4f;
-      }
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
+    }
+
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/work/base/futures/addEdit.vue b/src/pages/work/base/futures/addEdit.vue
index 07731f1..6620b61 100644
--- a/src/pages/work/base/futures/addEdit.vue
+++ b/src/pages/work/base/futures/addEdit.vue
@@ -29,31 +29,33 @@
                 inputAlign="right" border="none"></u--input>
               <u-icon slot="right" name="arrow-down"></u-icon>
             </u-form-item>
-            <u-form-item label="密码" prop="password"  >
-              <u--input v-model="form.password"  placeholder="请填写密码"
-                inputAlign="right" border="none"></u--input>
+     
+              <u-form-item label="开户日期" prop="activationDate"  @click="selectDate()">
+              <u--input v-model="form.activationDate" disabled disabledColor="#ffffff" placeholder="请选择开户日期" inputAlign="right" border="none"></u--input>
+						<u-icon slot="right" name="arrow-right"></u-icon>
             </u-form-item>
             <u-form-item label="关联储蓄卡" prop="bankNameCode"  @click="handleDebitCard">
               <u--input v-model="form.bankNameCode" disabled disabledColor="#ffffff" placeholder="请选择关联储蓄卡"
                 inputAlign="right" border="none"></u--input>
               <u-icon slot="right" name="arrow-down"></u-icon>
             </u-form-item>
+                   <!-- <u-form-item label="密码" prop="password"  >
+              <u--input v-model="form.password"  placeholder="请填写密码"
+                inputAlign="right" border="none"></u--input>
+            </u-form-item> -->
             <u-form-item label="期货交易中心账号"  prop="tradingCenterCode" >
               <u--input v-model="form.tradingCenterCode"  placeholder="请填写期货交易中心账号"
                 inputAlign="right" border="none"></u--input>
             </u-form-item>
-            <u-form-item label="期货交易中心密码"  prop="tradingCenterPassword" >
+            <!-- <u-form-item label="期货交易中心密码"  prop="tradingCenterPassword" >
               <u--input v-model="form.tradingCenterPassword"  placeholder="请填写期货交易中心密码"
                 inputAlign="right" border="none"></u--input>
-            </u-form-item>
-            <u-form-item label="资金密码"  prop="fundPassword" >
+            </u-form-item> -->
+            <!-- <u-form-item label="资金密码"  prop="fundPassword" >
               <u--input v-model="form.fundPassword"  placeholder="请填写资金密码"
                 inputAlign="right" border="none"></u--input>
-            </u-form-item>
-            <u-form-item label="开户日期" prop="activationDate"  @click="selectDate()">
-              <u--input v-model="form.activationDate" disabled disabledColor="#ffffff" placeholder="请选择开户日期" inputAlign="right" border="none"></u--input>
-						<u-icon slot="right" name="arrow-right"></u-icon>
-            </u-form-item>
+            </u-form-item> -->
+          
           
             <u-form-item label="手续费" prop="commission" >
               <u--input v-model="form.commission"  placeholder="请填写手续费"
@@ -258,53 +260,72 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+  }
+  
   .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: #fff;
-      line-height: 44rpx;
-      font-size: 30rpx;
+      padding: 16rpx 24rpx;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      padding: 16rpx 26rpx;
-      margin: -16rpx -24rpx 20rpx;
-      border-radius: 8rpx 8rpx 0 0;
-      position: relative;
+      color: #ffffff;
+      line-height: 1.2;
+      font-size: 28rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
       
       &::before {
         content: '';
-        position: absolute;
-        left: 26rpx;
-        top: 50%;
-        transform: translateY(-50%);
         width: 6rpx;
         height: 28rpx;
-        background-color: #fff;
+        background: #ffffff;
         border-radius: 3rpx;
+        margin-right: 12rpx;
       }
-      
-      padding-left: 52rpx;
     }
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding: 24rpx;
   
       .form-btn {
-        padding-top: 20rpx;
-        
-        ::v-deep .u-button {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border: none;
-          border-radius: 12rpx;
-          height: 88rpx;
-          font-size: 32rpx;
-          box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
-        }
+        padding-top: 32rpx;
       }
     }
   }
+  </style>
+  
+  <style lang="scss">
+  .form-view {
+    ::v-deep .u-form-item--required::before {
+      color: #f5576c !important;
+      font-size: 28rpx !important;
+      margin-right: 4rpx !important;
+      line-height: 1 !important;
+      vertical-align: middle !important;
+      position: relative !important;
+      top: -2rpx !important;
+    }
+  }
+  
+  .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/base/futures/details.vue b/src/pages/work/base/futures/details.vue
index f2d779f..cc216be 100644
--- a/src/pages/work/base/futures/details.vue
+++ b/src/pages/work/base/futures/details.vue
@@ -8,59 +8,63 @@
 		</u-navbar>
       <view class="detail-card">
         <view class="card-header">
-          <view class="card-title">
-            <uni-icons type="wallet" size="24" color="#fff"></uni-icons>
-            <text class="card-name">{{ detailInfo.name }}</text>
+          <view class="header-icon">
+            <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
           </view>
-          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
-            <text>{{ detailInfo.statusText }}</text>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.name }}<text class="card-code" v-if="detailInfo.code">({{ detailInfo.code }})</text></text>
+          </view>
+          <view class="balance-section">
+            <text class="balance-label">余额</text>
+            <text class="balance-value">{{ detailInfo.balance || '0' }}元</text>
           </view>
         </view>
 
-        <view class="section">
-          <view class="section-title">
-            <view class="title-icon"></view>
-            <text>账户信息</text>
-          </view>
-          <view class="info-grid">
-            <view class="info-item">
-              <text class="info-label">账号</text>
-              <text class="info-value">{{ detailInfo.code || '-' }}</text>
+        <view class="card-body">
+          <view class="info-section">
+            <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 orange">{{ detailInfo.balance || '0' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">手续费</text>
-              <text class="info-value orange">{{ detailInfo.commission || '-' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">保证金比例</text>
-              <text class="info-value">{{ detailInfo.bond || '-' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">交易中心账号</text>
-              <text class="info-value">{{ detailInfo.tradingCenterCode || '-' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">关联储蓄卡</text>
-              <text class="info-value">{{ detailInfo.bankNameCode || '-' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">开户日期</text>
-              <text class="info-value">{{ detailInfo.activationDate || '-' }}</text>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">账户状态</text>
+                <text class="item-value" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">{{ detailInfo.statusText }}</text>
+              </view>
+                <view class="list-item">
+                <text class="item-label">开户日期</text>
+                <text class="item-value">{{ detailInfo.activationDate || '-' }}</text>
+              </view>
+               <view class="list-item">
+                <text class="item-label">关联储蓄卡</text>
+                <text class="item-value">{{ detailInfo.bankNameCode || '-' }}</text>
+              </view>
+               <view class="list-item">
+                <text class="item-label">交易中心账号</text>
+                <text class="item-value">{{ detailInfo.tradingCenterCode || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">手续费</text>
+                <text class="item-value">{{ detailInfo.commission || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">保证金比例</text>
+                <text class="item-value">{{ detailInfo.bond || '-' }}</text>
+              </view>
+             
+             
+            
             </view>
           </view>
-        </view>
 
-        <view class="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 class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
           </view>
         </view>
       </view>
@@ -81,15 +85,15 @@ const data = reactive({
 const {detailInfo} = toRefs(data)
 onLoad((option) => {
     id.value = option.id
-    getDicts('account_status').then(res => {
-      statusList.value = res.data
-    })
     getInfo()
   })
   function getInfo() {
     getFutureStocks(id.value).then(res => {
           detailInfo.value = res.data
-          detailInfo.value.statusText = dictStr(detailInfo.value.status, statusList.value)
+          // 获取状态字典
+          getDicts('account_status').then(result => {
+            detailInfo.value.statusText = dictStr(detailInfo.value.status, result.data)
+          })
         })
   }
   function dictStr(val, arr) {
@@ -113,117 +117,160 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .detail-card {
-    margin: 24rpx;
-    background-color: #fff;
-    border-radius: 12rpx;
+.container {
+  background: #f5f7fa;
+  padding-bottom: 24rpx;
+}
+
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  
+  .header-icon {
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    min-width: 0;
     overflow: hidden;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
-
-    .card-header {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      padding: 32rpx;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .card-title {
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
-
-        .card-name {
-          color: #fff;
-          font-size: 36rpx;
-          font-weight: bold;
-        }
-      }
-
-      .status-badge {
-        padding: 8rpx 20rpx;
-        border-radius: 24rpx;
-        font-size: 24rpx;
-        font-weight: 600;
-
-        &.status-default {
-          background: #f0f0f0;
-          color: #666666;
-        }
-
-        &.status-normal {
-          background: #fa8c16;
-          color: #ffffff;
-          box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
-        }
-
-        &.status-error {
-          background: #ff4d4f;
-          color: #ffffff;
-          box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
-        }
-      }
-    }
-
-    .section {
-      padding: 32rpx;
-      border-bottom: 1rpx solid #f0f0f0;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      .section-title {
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
-        margin-bottom: 24rpx;
-        font-size: 32rpx;
-        font-weight: bold;
-        color: #333;
-
-        .title-icon {
-          width: 6rpx;
-          height: 32rpx;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border-radius: 3rpx;
-        }
-      }
-
-      .info-grid {
-        display: flex;
-        flex-direction: column;
-        gap: 24rpx;
-
-        .info-item {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .info-label {
-            font-size: 28rpx;
-            color: #999;
-          }
-
-          .info-value {
-            font-size: 28rpx;
-            color: #333;
-            font-weight: 500;
-
-            &.orange {
-              color: #fa8c16;
-              font-weight: bold;
-              font-size: 32rpx;
-            }
-          }
-        }
-      }
-
-      .remark-content {
+    
+    .card-name {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
         font-size: 28rpx;
-        color: #666;
-        line-height: 1.6;
-        text-align: justify;
+        font-weight: 400;
+        margin-left: 8rpx;
       }
     }
   }
-  </style>
\ No newline at end of file
+  
+  .balance-section {
+    flex-shrink: 0;
+    text-align: right;
+    
+    .balance-label {
+      color: rgba(255, 255, 255, 0.85);
+      font-size: 24rpx;
+      margin-right: 8rpx;
+    }
+    
+    .balance-value {
+      color: #fa8c16;
+      font-size: 32rpx;
+      font-weight: 600;
+    }
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
+  .info-list {
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
+        }
+      }
+    }
+  }
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
+      font-size: 26rpx;
+      line-height: 1.6;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/work/base/futures/list.vue b/src/pages/work/base/futures/list.vue
index ba8c885..6a1dd63 100644
--- a/src/pages/work/base/futures/list.vue
+++ b/src/pages/work/base/futures/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.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>
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
       </view>
@@ -20,56 +20,44 @@
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <view class="card-info">
-                <view class="name-code-row">
-                  <text class="card-name">{{ item.name }}</text>
-                  <text class="card-code">{{ item.code }}</text>
-                </view>
+                <text class="card-name">{{ item.name }}<text class="card-code" v-if="item.code">({{ item.code }})</text></text>
               </view>
             </view>
-            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
-              <text>{{ dictStr(item.status, statusList) }}</text>
+            <view class="balance-section">
+              <text class="balance-value"><text class="balance-label">余额</text>{{ item.balance || '0' }}元</text>
             </view>
           </view>
           
           <view class="card-body">
             <view class="info-row">
-              <view class="info-item">
-                <text class="info-label">余额</text>
-                <text class="info-value orange">{{ item.balance || '0' }}元</text>
+              <view class="info-item" v-if="dictStr(item.status, statusList) || true">
+                <text class="info-label">账户状态</text>
+                <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
               </view>
-              <view class="info-item">
-                <text class="info-label">手续费</text>
-                <text class="info-value orange">{{ item.commission || '-' }}</text>
-              </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item">
-                <text class="info-label">保证金比例</text>
-                <text class="info-value">{{ item.bond || '-' }}</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">交易中心账号</text>
-                <text class="info-value">{{ item.tradingCenterCode || '-' }}</text>
-              </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item full-width">
-                <text class="info-label">关联储蓄卡</text>
-                <text class="info-value">{{ item.bankNameCode || '-' }}</text>
-              </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item full-width">
+                 <view class="info-item" v-if="item.activationDate || true">
                 <text class="info-label">开户日期</text>
-                <text class="info-value">{{ item.activationDate || '-' }}</text>
+                <text class="info-value">{{ item.activationDate || '--' }}</text>
               </view>
-            </view>
+              <view class="info-item" v-if="item.bankNameCode || true">
+                <text class="info-label">关联储蓄卡</text>
+                <text class="info-value">{{ item.bankNameCode || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="item.commission || true">
+                <text class="info-label">手续费</text>
+                <text class="info-value">{{ item.commission || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="item.bond || true">
+                <text class="info-label">保证金比例</text>
+                <text class="info-value">{{ item.bond || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="item.tradingCenterCode || true">
+                <text class="info-label">交易中心账号</text>
+                <text class="info-value">{{ item.tradingCenterCode || '--' }}</text>
+              </view>
+
+             
             
-            <view class="info-row" v-if="item.remark">
-              <view class="info-item full-width">
+              <view class="info-item info-item-full" v-if="item.remark">
                 <text class="info-label">备注</text>
                 <text class="info-value">{{ item.remark }}</text>
               </view>
@@ -210,30 +198,39 @@ function dictStr(val, arr) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delFutureStocks(item.id)
-              uni.navigateTo({ url: `/pages/work/base/futures/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delFutureStocks(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
+.container {
+  background: #f5f7fa;
+}
 
 .search-view {
   padding: 12rpx 32rpx;
@@ -242,15 +239,19 @@ function dictStr(val, arr) {
   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 {
@@ -258,164 +259,160 @@ 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;
-    margin-left: 10rpx;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.15);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
-      font-weight: 600;
+      font-weight: 500;
     }
   }
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
-  background-color: #fff;
+  margin: 10rpx 24rpx;
+  background: #ffffff;
   border-radius: 16rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+  }
 
   .item-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 20rpx 24rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
     .card-name-section {
       display: flex;
       align-items: center;
       flex: 1;
       min-width: 0;
-    }
-    
-    .card-icon {
-      width: 56rpx;
-      height: 56rpx;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 16rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 16rpx;
-      flex-shrink: 0;
-      backdrop-filter: blur(10rpx);
-    }
-    
-    .card-info {
-      display: flex;
-      flex-direction: column;
-      gap: 6rpx;
-      flex: 1;
-      min-width: 0;
       
-      .name-code-row {
+      .card-icon {
+        width: 48rpx;
+        height: 48rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 16rpx;
         display: flex;
         align-items: center;
-        gap: 16rpx;
+        justify-content: center;
+        margin-right: 12rpx;
+        flex-shrink: 0;
+        backdrop-filter: blur(10rpx);
       }
       
-      .card-name {
-        color: #ffffff;
-        font-size: 32rpx;
-        font-weight: 600;
-        line-height: 1.2;
-      }
-      
-      .card-code {
-        color: rgba(255, 255, 255, 0.8);
-        font-size: 26rpx;
-        line-height: 1.2;
+      .card-info {
+        flex: 1;
+        min-width: 0;
+        
+        .card-name {
+          color: #ffffff;
+          font-size: 28rpx;
+          font-weight: 600;
+          line-height: 1.2;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          
+          .card-code {
+            color: rgba(255, 255, 255, 0.85);
+            font-size: 28rpx;
+            font-weight: 400;
+            margin-left: 8rpx;
+          }
+        }
       }
     }
     
-    .status-badge {
-      padding: 12rpx 28rpx;
-      border-radius: 24rpx;
-      font-size: 26rpx;
-      font-weight: 600;
-      letter-spacing: 0.5rpx;
+    .balance-section {
       flex-shrink: 0;
+      text-align: right;
       
-      &.status-default {
-        background: #f0f0f0;
-        color: #666666;
-      }
-      
-      &.status-normal {
-        background: #fa8c16 !important;
-        color: #ffffff !important;
-        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
-      }
-      
-      &.status-error {
-        background: #ff4d4f;
-        color: #ffffff;
-        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+      .balance-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 1;
+        
+        .balance-label {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 24rpx;
+          margin-right: 8rpx;
+        }
       }
     }
   }
 
   .card-body {
     padding: 24rpx;
+    background: #fff;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
     
-    .info-row {
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
-      margin-bottom: 12rpx;
-      gap: 12rpx;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
       
-      &:last-child {
-        margin-bottom: 0;
+      &.info-item-full {
+        flex: 0 0 100%;
       }
-      
-      .info-item {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 16rpx 20rpx;
-        background: #f8f9fa;
+
+      .info-label {
+        font-size: 24rpx;
+        color: #999;
+        line-height: 1.2;
+        padding: 4rpx 12rpx;
+        background: rgba(102, 126, 234, 0.08);
         border-radius: 8rpx;
-        min-height: 72rpx;
+        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;
         
-        &.full-width {
-          flex: none;
-          width: 100%;
+        &.status-normal {
+          color: #52c41a;
         }
         
-        .info-label {
-          color: #7f8c8d;
-          font-size: 26rpx;
-          flex-shrink: 0;
-          white-space: nowrap;
-          min-width: 120rpx;
+        &.status-error {
+          color: #ff4d4f;
         }
         
-        .info-value {
-          color: #2c3e50;
-          font-size: 28rpx;
-          font-weight: 500;
-          text-align: right;
-          flex: 1;
-          margin-left: 16rpx;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          
-          &.orange {
-            color: #fa8c16;
-            font-weight: 600;
-          }
+        &.status-default {
+          color: #666666;
         }
       }
     }
@@ -424,42 +421,37 @@ function dictStr(val, arr) {
   .operate {
     display: flex;
     justify-content: flex-end;
-    padding: 0 24rpx 24rpx;
     gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
 
     .btn-edit,
     .btn-delete {
       display: flex;
       align-items: center;
+      justify-content: center;
       gap: 6rpx;
-      padding: 12rpx 24rpx;
-      border-radius: 8rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
       font-size: 26rpx;
+      font-weight: 500;
       transition: all 0.3s ease;
       
       &:active {
         transform: scale(0.95);
       }
     }
-    
+
     .btn-edit {
       background: rgba(102, 126, 234, 0.1);
       color: #667eea;
       border: 1rpx solid rgba(102, 126, 234, 0.3);
-      
-      text {
-        color: #667eea;
-      }
     }
-    
+
     .btn-delete {
       background: rgba(245, 87, 108, 0.1);
       color: #f5576c;
       border: 1rpx solid rgba(245, 87, 108, 0.3);
-      
-      text {
-        color: #f5576c;
-      }
     }
   }
 }
diff --git a/src/pages/work/base/lend/addEdit.vue b/src/pages/work/base/lend/addEdit.vue
index e56199d..a86b47e 100644
--- a/src/pages/work/base/lend/addEdit.vue
+++ b/src/pages/work/base/lend/addEdit.vue
@@ -243,11 +243,11 @@ onLoad((option) => {
     overflow: hidden;
   
     .section-title {
-      padding: 24rpx;
+      padding: 16rpx 24rpx;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       color: #ffffff;
-      line-height: 44rpx;
-      font-size: 32rpx;
+      line-height: 1.2;
+      font-size: 28rpx;
       font-weight: 600;
       display: flex;
       align-items: center;
@@ -255,8 +255,8 @@ onLoad((option) => {
       &::before {
         content: '';
         width: 6rpx;
-        height: 32rpx;
-        background: rgba(255, 255, 255, 0.5);
+        height: 28rpx;
+        background: #ffffff;
         border-radius: 3rpx;
         margin-right: 12rpx;
       }
diff --git a/src/pages/work/base/lend/details.vue b/src/pages/work/base/lend/details.vue
index d0ecb92..a3caa59 100644
--- a/src/pages/work/base/lend/details.vue
+++ b/src/pages/work/base/lend/details.vue
@@ -13,10 +13,11 @@
             <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
           </view>
           <view class="header-info">
-            <text class="card-name">{{ detailInfo.name }}</text>
+            <text class="card-name">{{ detailInfo.name }}<text class="card-code" v-if="detailInfo.code">({{ detailInfo.code }})</text></text>
           </view>
-          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
-            <text>{{ detailInfo.statusText }}</text>
+          <view class="balance-section">
+            <text class="balance-label">余额</text>
+            <text class="balance-value">{{ detailInfo.balance }}元</text>
           </view>
         </view>
         
@@ -32,12 +33,8 @@
                 <text class="item-value">{{ detailInfo.lendTypeText }}</text>
               </view>
               <view class="list-item">
-                <text class="item-label">账号</text>
-                <text class="item-value">{{ detailInfo.code }}</text>
-              </view>
-              <view class="list-item">
-                <text class="item-label">余额</text>
-                <text class="item-value orange">{{ detailInfo.balance }}元</text>
+                <text class="item-label">账户状态</text>
+                <text class="item-value" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">{{ detailInfo.statusText }}</text>
               </view>
             </view>
           </view>
@@ -122,8 +119,8 @@ onLoad((option) => {
   
   <style lang="scss" scoped>
 .container {
-  min-height: 100vh;
   background: #f5f7fa;
+  padding-bottom: 24rpx;
 }
 
 .detail-card {
@@ -138,54 +135,58 @@ onLoad((option) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 24rpx;
+  padding: 16rpx 20rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   
   .header-icon {
-    width: 56rpx;
-    height: 56rpx;
+    width: 48rpx;
+    height: 48rpx;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 16rpx;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 16rpx;
+    margin-right: 12rpx;
     backdrop-filter: blur(10rpx);
   }
   
   .header-info {
     flex: 1;
-    display: flex;
-    align-items: center;
+    min-width: 0;
+    overflow: hidden;
     
     .card-name {
       color: #ffffff;
-      font-size: 32rpx;
+      font-size: 28rpx;
       font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 28rpx;
+        font-weight: 400;
+        margin-left: 8rpx;
+      }
     }
   }
   
-  .status-badge {
-    padding: 12rpx 28rpx;
-    border-radius: 24rpx;
-    font-size: 26rpx;
-    font-weight: 600;
+  .balance-section {
+    flex-shrink: 0;
+    text-align: right;
     
-    &.status-default {
-      background: #f0f0f0;
-      color: #666666;
+    .balance-label {
+      color: rgba(255, 255, 255, 0.85);
+      font-size: 24rpx;
+      margin-right: 8rpx;
     }
     
-    &.status-normal {
-      background: #fa8c16;
-      color: #ffffff;
-      box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
-    }
-    
-    &.status-error {
-      background: #ff4d4f;
-      color: #ffffff;
-      box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+    .balance-value {
+      color: #fa8c16;
+      font-size: 32rpx;
+      font-weight: 600;
     }
   }
 }
@@ -222,39 +223,6 @@ onLoad((option) => {
   }
   
   .info-list {
-    .list-row {
-      display: flex;
-      gap: 12rpx;
-      margin-bottom: 12rpx;
-      
-      .list-item {
-        flex: 1;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 20rpx;
-        background: #f8f9fa;
-        border-radius: 8rpx;
-        
-        .item-label {
-          color: #7f8c8d;
-          font-size: 26rpx;
-        }
-        
-        .item-value {
-          color: #2c3e50;
-          font-size: 28rpx;
-          font-weight: 500;
-          text-align: right;
-          
-          &.orange {
-            color: #fa8c16;
-            font-weight: 600;
-          }
-        }
-      }
-    }
-    
     .list-item {
       display: flex;
       justify-content: space-between;
@@ -281,7 +249,18 @@ onLoad((option) => {
         
         &.orange {
           color: #fa8c16;
-          font-weight: 600;
+        }
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
         }
       }
     }
diff --git a/src/pages/work/base/lend/list.vue b/src/pages/work/base/lend/list.vue
index a9ac1e4..77c3c2b 100644
--- a/src/pages/work/base/lend/list.vue
+++ b/src/pages/work/base/lend/list.vue
@@ -1,34 +1,29 @@
 <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>
-        <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.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>
-        <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 lendTypeList" :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.lendType ? 'active' : ''" @click="selectType('')">
+              <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);"></u-button>
+            <view v-for="item in lendTypeList" :key="item.dictValue" class="type-item"
+              :class="queryParams.lendType === item.dictValue ? 'active' : ''" @click="selectType(item.dictValue)">
+              <text>{{ item.dictLabel }}</text>
             </view>
           </view>
-        </u-transition>
+        </view>
       </view>
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
@@ -40,28 +35,27 @@
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <view class="card-info">
-                <text class="card-name">{{ dictStr(item.lendType, lendTypeList) }} - {{ item.name }}</text>
+                <text class="card-name">{{ item.name }}<text class="card-code" v-if="item.code">({{ item.code }})</text></text>
               </view>
             </view>
-            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
-              <text>{{ dictStr(item.status, statusList) }}</text>
+            <view class="balance-section">
+              <text class="balance-value"><text class="balance-label">余额</text>{{ item.balance || 0 }}元</text>
             </view>
           </view>
           
           <view class="card-body">
             <view class="info-row">
-              <view class="info-item">
-                <text class="info-label">账号</text>
-                <text class="info-value">{{ item.code }}</text>
+              <view class="info-item" v-if="dictStr(item.lendType, lendTypeList) || true">
+                <text class="info-label">账户类型</text>
+                <text class="info-value">{{ dictStr(item.lendType, lendTypeList) || '--' }}</text>
               </view>
-              <view class="info-item">
-                <text class="info-label">余额</text>
-                <text class="info-value orange">{{ item.balance }}元</text>
+              <view class="info-item" v-if="dictStr(item.status, statusList) || true">
+                <text class="info-label">账户状态</text>
+                <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
               </view>
             </view>
-            
-            <view class="info-row" v-if="item.remark">
-              <view class="info-item">
+            <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>
@@ -168,13 +162,24 @@ function settingCancel() {
       settingPickShow.value = false
     }
 function getStatusClass(status, statusText) {
-  if (statusText && statusText.includes('正常')) {
-    return 'status-normal'
-  }
-  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
-    return 'status-error'
-  }
-  return 'status-default'
+  // 根据状态文字判断（更可靠）
+      if (statusText && statusText.includes('正常')) {
+        return 'status-normal'
+      }
+      if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+        return 'status-error'
+      }
+      
+      // 备用：根据状态值判断
+      const statusStr = String(status)
+      if (statusStr === '2') {
+        return 'status-normal'
+      }
+      if (statusStr === '0' || statusStr === '3' || statusStr === '4') {
+        return 'status-error'
+      }
+      
+      return 'status-default'
 }
 
 function dictStr(val, arr) {
@@ -186,35 +191,24 @@ function dictStr(val, arr) {
       })
       return str
     }
-function selectStatus(item) {
-      queryParams.value.lendType = item.dictValue
-      lendTypeList.value.map(ele => {
-        if (ele.dictValue == item.dictValue) {
-          ele.selected = true
-          Reflect.set(ele, 'selected', true)
-        } else {
-          Reflect.set(ele, 'selected', false)
-        }
-      })
-    }
-    function searchSubmit() {
-      pageNum.value = 1
-      listData.value = []
-      getList()
-      filterPanel.value = false
-    }
+function selectType(value) {
+  queryParams.value.lendType = value
+  pageNum.value = 1
+  listData.value = []
+  getList()
+}
     function searchBlur() {
       pageNum.value = 1
       listData.value = []
       getList()
     }
     function resetQuery() {
-        queryParams.value.name = '',
-        queryParams.value.type = '3'
+      queryParams.value.name = ''
+      queryParams.value.type = '3'
       queryParams.value.lendType = ''
-      lendTypeList.value.map(ele => {
-        Reflect.set(ele, 'selected', false)
-      })
+      pageNum.value = 1
+      listData.value = []
+      getList()
     }
     function enterDetails(item) {
       uni.navigateTo({ url: `/pages/work/base/lend/details?id=${item.id}` })
@@ -229,22 +223,41 @@ function selectStatus(item) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delBankcardLend(item.id)
-              uni.navigateTo({ url: `/pages/work/base/lend/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delBankcardLend(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
+.sticky-container {
+  background-color: #f5f7fa;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -252,16 +265,18 @@ function selectStatus(item) {
   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;
   }
   
   .add-btn {
@@ -269,114 +284,93 @@ 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;
-    margin-left: 10rpx;
     
     &: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-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;
   }
   
-  .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;
+  .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 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;
-        }
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
       }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        gap: 16rpx;
-
-        .state-item {
-          padding: 0 32rpx;
-          height: 68rpx;
-          border: 2rpx solid #e8edf3;
-          border-radius: 34rpx;
-          text-align: center;
-          line-height: 68rpx;
-          font-size: 28rpx;
-          color: #666666;
-          transition: all 0.3s ease;
-          background: #ffffff;
-          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
-          
-          &:active {
-            transform: scale(0.95);
-          }
-        }
-
-        .active {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border: 2rpx solid transparent;
-          color: #ffffff;
-          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
-          font-weight: 600;
-        }
-      }
-    }
-
-    .btn-box {
-      display: flex;
-      gap: 16rpx;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .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);
+  transition: all 0.2s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
     .card-name-section {
@@ -384,107 +378,123 @@ function selectStatus(item) {
       align-items: center;
       flex: 1;
       min-width: 0;
+      margin-right: 16rpx;
     }
     
     .card-icon {
-      width: 56rpx;
-      height: 56rpx;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 16rpx;
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-right: 16rpx;
+      margin-right: 12rpx;
       flex-shrink: 0;
-      backdrop-filter: blur(10rpx);
     }
     
     .card-info {
-      display: flex;
-      align-items: center;
       flex: 1;
       min-width: 0;
+      overflow: hidden;
       
       .card-name {
         color: #ffffff;
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: 600;
         line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        
+        .card-code {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 28rpx;
+          font-weight: 400;
+          margin-left: 8rpx;
+        }
       }
     }
     
-    .status-badge {
-      padding: 12rpx 28rpx;
-      border-radius: 24rpx;
-      font-size: 26rpx;
-      font-weight: 600;
-      letter-spacing: 0.5rpx;
+    .balance-section {
+      display: flex;
+      align-items: center;
       flex-shrink: 0;
+      white-space: nowrap;
       
-      &.status-default {
-        background: #f0f0f0;
-        color: #666666;
-      }
-      
-      &.status-normal {
-        background: #fa8c16 !important;
-        color: #ffffff !important;
-        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
-      }
-      
-      &.status-error {
-        background: #ff4d4f;
-        color: #ffffff;
-        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+      .balance-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        
+        .balance-label {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 22rpx;
+          font-weight: 400;
+          margin-right: 8rpx;
+        }
       }
     }
   }
 
   .card-body {
     padding: 24rpx;
-    
-    .info-row {
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
+
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
-      margin-bottom: 12rpx;
-      gap: 12rpx;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: 15rpx;
       
-      &:last-child {
-        margin-bottom: 0;
+      &.info-item-full {
+        flex: 0 0 100%;
       }
-      
-      .info-item {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 16rpx 20rpx;
-        background: #f8f9fa;
+
+      .info-label {
+       font-size: 24rpx;
+        color: #999;
+        line-height: 1.2;
+        padding: 4rpx 12rpx;
+        background: rgba(102, 126, 234, 0.08);
         border-radius: 8rpx;
-        min-height: 72rpx;
+        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;
         
-        .info-label {
-          color: #7f8c8d;
-          font-size: 26rpx;
-          flex-shrink: 0;
-          white-space: nowrap;
-          min-width: 120rpx;
+        &.orange {
+          color: #fa8c16;
         }
         
-        .info-value {
-          color: #2c3e50;
-          font-size: 28rpx;
-          font-weight: 500;
-          text-align: right;
-          flex: 1;
-          margin-left: 16rpx;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          
-          &.orange {
-            color: #fa8c16;
-            font-weight: 600;
-          }
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
         }
       }
     }
diff --git a/src/pages/work/base/posmachine/addEdit.vue b/src/pages/work/base/posmachine/addEdit.vue
index 9298a21..8f748a0 100644
--- a/src/pages/work/base/posmachine/addEdit.vue
+++ b/src/pages/work/base/posmachine/addEdit.vue
@@ -71,7 +71,7 @@
               <u--input v-model="form.activationDate" disabled disabledColor="#ffffff" placeholder="请选择启用日期" inputAlign="right" border="none"></u--input>
 						<u-icon slot="right" name="arrow-right"></u-icon>
             </u-form-item>
-            <u-form-item label="商户类型" prop="merchantTypeName"  @click="handleShowMerchantType">
+            <!-- <u-form-item label="商户类型" prop="merchantTypeName"  @click="handleShowMerchantType">
               <u--input v-model="form.merchantTypeName" disabled disabledColor="#ffffff" placeholder="请选择商户类型"
                 inputAlign="right" border="none"></u--input>
               <u-icon slot="right" name="arrow-down"></u-icon>
@@ -79,11 +79,11 @@
             <u-form-item label="商户码" prop="merchantCode" >
               <u--input v-model="form.merchantCode"  placeholder="请填写商户码"
                 inputAlign="right" border="none"></u--input>
-            </u-form-item>
-            <u-form-item label="备注" prop="remark"  labelPosition="top">
+            </u-form-item> -->
+            <!-- <u-form-item label="备注" prop="remark"  labelPosition="top">
               <u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
                 maxlength="20000" style="padding:18rpx 0;"></u--textarea>
-            </u-form-item>
+            </u-form-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: 24rpx; font-size: 32rpx; font-weight: 600; box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);"></u-button>
@@ -366,6 +366,10 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+  }
+  
   .section {
     margin: 24rpx;
     padding: 0;
@@ -375,11 +379,11 @@ onLoad((option) => {
     overflow: hidden;
   
     .section-title {
-      padding: 24rpx;
+      padding: 16rpx 24rpx;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       color: #ffffff;
-      line-height: 44rpx;
-      font-size: 32rpx;
+      line-height: 1.2;
+      font-size: 28rpx;
       font-weight: 600;
       display: flex;
       align-items: center;
@@ -387,19 +391,35 @@ onLoad((option) => {
       &::before {
         content: '';
         width: 6rpx;
-        height: 32rpx;
-        background: rgba(255, 255, 255, 0.5);
+        height: 28rpx;
+        background: #ffffff;
         border-radius: 3rpx;
         margin-right: 12rpx;
       }
     }
   
     .form-view {
-      padding: 24rpx;
+      padding: 20rpx;
   
       .form-btn {
-        padding-top: 32rpx;
+        padding-top: 24rpx;
       }
     }
   }
+  </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/base/posmachine/details.vue b/src/pages/work/base/posmachine/details.vue
index 660bf19..c7b11f7 100644
--- a/src/pages/work/base/posmachine/details.vue
+++ b/src/pages/work/base/posmachine/details.vue
@@ -13,10 +13,7 @@
             <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
           </view>
           <view class="header-info">
-            <text class="card-name">{{ detailInfo.name }}</text>
-          </view>
-          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
-            <text>{{ detailInfo.statusText }}</text>
+            <text class="card-name">{{ detailInfo.name }}<text class="merchant-name" v-if="detailInfo.merchantName"> - {{ detailInfo.merchantName }}</text></text>
           </view>
         </view>
         
@@ -28,8 +25,8 @@
             </view>
             <view class="info-list">
               <view class="list-item">
-                <text class="item-label">商户名称</text>
-                <text class="item-value">{{ detailInfo.merchantName }}</text>
+                <text class="item-label">账户状态</text>
+                <text class="item-value" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">{{ detailInfo.statusText }}</text>
               </view>
               <view class="list-item">
                 <text class="item-label">类型</text>
@@ -77,14 +74,14 @@
                 <text class="item-label">结算卡</text>
                 <text class="item-value">{{ detailInfo.bankNameCode }}</text>
               </view>
-              <view class="list-item">
+              <!-- <view class="list-item">
                 <text class="item-label">商户类型</text>
                 <text class="item-value">{{ detailInfo.merchantType }}</text>
               </view>
               <view class="list-item">
                 <text class="item-label">商户码</text>
                 <text class="item-value">{{ detailInfo.merchantCode }}</text>
-              </view>
+              </view> -->
               <view class="list-item">
                 <text class="item-label">供货商</text>
                 <text class="item-value">{{ detailInfo.manufacture }}</text>
@@ -96,7 +93,7 @@
             </view>
           </view>
           
-          <view class="info-section" v-if="detailInfo.remark">
+          <!-- <view class="info-section" v-if="detailInfo.remark">
             <view class="section-title">
               <view class="title-icon"></view>
               <text>备注</text>
@@ -104,7 +101,7 @@
             <view class="remark-content">
               <text>{{ detailInfo.remark }}</text>
             </view>
-          </view>
+          </view> -->
         </view>
       </view>
       
@@ -181,147 +178,156 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .detail-card {
-    margin: 24rpx;
-    background-color: #fff;
-    border-radius: 16rpx;
-    overflow: hidden;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+.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: 12rpx 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   
-    .card-header {
+  .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;
+    flex-shrink: 0;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    
+    .card-name {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      .merchant-name {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 28rpx;
+        font-weight: 400;
+        margin-left: 8rpx;
+      }
+    }
+  }
+}
+
+.card-body {
+  padding: 20rpx;
+}
+
+.info-section {
+  margin-bottom: 20rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16rpx;
+    
+    .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: 24rpx;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 16rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 10rpx;
       
-      .header-icon {
-        width: 56rpx;
-        height: 56rpx;
-        background: rgba(255, 255, 255, 0.2);
-        border-radius: 16rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 16rpx;
-        flex-shrink: 0;
-        backdrop-filter: blur(10rpx);
+      &:last-child {
+        margin-bottom: 0;
       }
       
-      .header-info {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        
-        .card-name {
-          color: #ffffff;
-          font-size: 32rpx;
-          font-weight: 600;
-        }
-      }
-      
-      .status-badge {
-        padding: 12rpx 28rpx;
-        border-radius: 24rpx;
+      .item-label {
+        color: #7f8c8d;
         font-size: 26rpx;
-        font-weight: 600;
-        letter-spacing: 0.5rpx;
         flex-shrink: 0;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+        flex: 1;
+        margin-left: 16rpx;
+        word-wrap: break-word;
+        word-break: break-all;
         
-        &.status-default {
-          background: #f0f0f0;
-          color: #666666;
+        &.orange {
+          color: #fa8c16;
+          font-weight: 600;
         }
         
         &.status-normal {
-          background: #fa8c16 !important;
-          color: #ffffff !important;
-          box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
+          color: #52c41a;
         }
         
         &.status-error {
-          background: #ff4d4f;
-          color: #ffffff;
-          box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
         }
       }
     }
-    
-    .card-body {
-      padding: 24rpx;
-    }
   }
   
-  .info-section {
-    margin-bottom: 24rpx;
+  .remark-content {
+    padding: 16rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
     
-    &:last-child {
-      margin-bottom: 0;
-    }
-    
-    .section-title {
-      display: flex;
-      align-items: center;
-      margin-bottom: 20rpx;
-      
-      .title-icon {
-        width: 6rpx;
-        height: 28rpx;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 3rpx;
-        margin-right: 12rpx;
-      }
-      
-      text {
-        color: #2c3e50;
-        font-size: 28rpx;
-        font-weight: 600;
-      }
-    }
-    
-    .info-list {
-      .list-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 20rpx;
-        background: #f8f9fa;
-        border-radius: 8rpx;
-        margin-bottom: 12rpx;
-        
-        &:last-child {
-          margin-bottom: 0;
-        }
-        
-        .item-label {
-          color: #7f8c8d;
-          font-size: 26rpx;
-        }
-        
-        .item-value {
-          color: #2c3e50;
-          font-size: 28rpx;
-          font-weight: 500;
-          text-align: right;
-          
-          &.orange {
-            color: #fa8c16;
-            font-weight: 600;
-          }
-        }
-      }
-    }
-    
-    .remark-content {
-      padding: 20rpx;
-      background: #f8f9fa;
-      border-radius: 8rpx;
-      
-      text {
-        color: #2c3e50;
-        font-size: 28rpx;
-        line-height: 1.6;
-      }
+    text {
+      color: #2c3e50;
+      font-size: 28rpx;
+      line-height: 1.6;
+      word-wrap: break-word;
+      word-break: break-all;
     }
   }
+}
   </style>
\ No newline at end of file
diff --git a/src/pages/work/base/posmachine/list.vue b/src/pages/work/base/posmachine/list.vue
index f283f74..aefaf43 100644
--- a/src/pages/work/base/posmachine/list.vue
+++ b/src/pages/work/base/posmachine/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.name" border="false" placeholder="请输入POS机名称" 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>
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
       </view>
@@ -20,43 +20,56 @@
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <view class="card-info">
-                <text class="card-name">{{ item.name }} - {{ dictStr(item.type, posTypeList) }}</text>
-                <text class="card-code">{{ item.merchantName }}</text>
+                <text class="card-name">{{ item.name }}<text class="card-code" v-if="dictStr(item.type, posTypeList)"> - {{ dictStr(item.type, posTypeList) }}</text></text>
               </view>
             </view>
-            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
-              <text>{{ dictStr(item.status, statusList) }}</text>
+            <view class="balance-section">
+              <text class="balance-value"><text class="balance-label">费率</text>{{ item.rateName }}+{{ item.ratePlus }}</text>
             </view>
           </view>
           
           <view class="card-body">
             <view class="info-row">
-              <view class="info-item">
-                <text class="info-label">刷卡费率</text>
-                <text class="info-value orange">{{ item.rateName }}+{{ item.ratePlus }}</text>
+              <view class="info-item" v-if="item.merchantName || true">
+                <text class="info-label">商户名称</text>
+                <text class="info-value wrap-text">{{ item.merchantName || '--' }}</text>
               </view>
-              <view class="info-item">
+                <view class="info-item" v-if="dictStr(item.status, statusList) || true">
+                <text class="info-label">账户状态</text>
+                <text class="info-value wrap-text" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
+              </view>
+               <view class="info-item" v-if="item.code || true">
+                <text class="info-label">编号</text>
+                <text class="info-value wrap-text">{{ item.code || '--' }}</text>
+              </view>
+               <view class="info-item" v-if="item.activationDate || true">
+                <text class="info-label">启用日期</text>
+                <text class="info-value wrap-text">{{ item.activationDate || '--' }}</text>
+              </view>
+              <!-- <view class="info-item" v-if="dictStr(item.merchantType, merchantTypeList) || true">
                 <text class="info-label">商户类型</text>
-                <text class="info-value">{{ dictStr(item.merchantType, merchantTypeList) }}</text>
+                <text class="info-value wrap-text">{{ dictStr(item.merchantType, merchantTypeList) || '--' }}</text>
               </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item">
+             <view class="info-item" v-if="item.merchantCode || true">
+                <text class="info-label">商户码</text>
+                <text class="info-value wrap-text">{{ item.merchantCode || '--' }}</text>
+              </view> -->
+              <view class="info-item" v-if="item.bankNameCode || true">
                 <text class="info-label">结算卡</text>
-                <text class="info-value">{{ item.bankNameCode || '-' }}</text>
+                <text class="info-value wrap-text">{{ item.bankNameCode || '--' }}</text>
               </view>
-              <view class="info-item" v-if="item.manufacture">
+              
+               <view class="info-item" v-if="item.manufacture || true">
                 <text class="info-label">供货商</text>
-                <text class="info-value">{{ item.manufacture }}</text>
+                <text class="info-value wrap-text">{{ item.manufacture || '--' }}</text>
               </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item">
+                
+              
+              <view class="info-item info-item-full" v-if="item.payCompany || true">
                 <text class="info-label">支付公司</text>
-                <text class="info-value">{{ item.payCompany || '-' }}</text>
+                <text class="info-value">{{ item.payCompany || '--' }}</text>
               </view>
+             
             </view>
           </view>
           
@@ -208,22 +221,40 @@ function dictStr(val, arr) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delPosmachine(item.id)
-              uni.navigateTo({ url: `/pages/work/base/posmachine/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delPosmachine(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
+.container {
+  background: #f5f7fa;
+}
+
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -231,15 +262,19 @@ function dictStr(val, arr) {
   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 {
@@ -247,37 +282,47 @@ 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;
+    }
   }
 }
 
 .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);
+  transition: all 0.3s ease;
+
+  
+  &:active {
+    transform: scale(0.99);
+  }
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
     .card-name-section {
@@ -285,114 +330,129 @@ function dictStr(val, arr) {
       align-items: center;
       flex: 1;
       min-width: 0;
+      margin-right: 16rpx;
     }
     
     .card-icon {
-      width: 56rpx;
-      height: 56rpx;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 16rpx;
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-right: 16rpx;
+      margin-right: 12rpx;
       flex-shrink: 0;
-      backdrop-filter: blur(10rpx);
     }
     
     .card-info {
-      display: flex;
-      flex-direction: column;
-      gap: 6rpx;
       flex: 1;
       min-width: 0;
+      overflow: hidden;
       
       .card-name {
         color: #ffffff;
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: 600;
         line-height: 1.2;
-      }
-      
-      .card-code {
-        color: rgba(255, 255, 255, 0.8);
-        font-size: 26rpx;
-        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        
+        .card-code {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 28rpx;
+          font-weight: 400;
+          margin-left: 8rpx;
+        }
       }
     }
     
-    .status-badge {
-      padding: 12rpx 28rpx;
-      border-radius: 24rpx;
-      font-size: 26rpx;
-      font-weight: 600;
-      letter-spacing: 0.5rpx;
+    .balance-section {
+      display: flex;
+      align-items: center;
       flex-shrink: 0;
+      white-space: nowrap;
       
-      &.status-default {
-        background: #f0f0f0;
-        color: #666666;
-      }
-      
-      &.status-normal {
-        background: #fa8c16 !important;
-        color: #ffffff !important;
-        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
-      }
-      
-      &.status-error {
-        background: #ff4d4f;
-        color: #ffffff;
-        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+      .balance-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        
+        .balance-label {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 22rpx;
+          font-weight: 400;
+          margin-right: 8rpx;
+        }
       }
     }
   }
 
   .card-body {
     padding: 24rpx;
-    
-    .info-row {
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
+
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
-      margin-bottom: 12rpx;
-      gap: 12rpx;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
       
-      &:last-child {
-        margin-bottom: 0;
+      &.info-item-full {
+        flex: 0 0 100%;
       }
-      
-      .info-item {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 16rpx 20rpx;
-        background: #f8f9fa;
+
+      .info-label {
+       font-size: 24rpx;
+        color: #999;
+        line-height: 1.2;
+        padding: 4rpx 12rpx;
+        background: rgba(102, 126, 234, 0.08);
         border-radius: 8rpx;
-        min-height: 72rpx;
+        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;
         
-        .info-label {
-          color: #7f8c8d;
-          font-size: 26rpx;
-          flex-shrink: 0;
-          white-space: nowrap;
-          min-width: 120rpx;
+        &.wrap-text {
+          white-space: normal;
+          word-wrap: break-word;
+          word-break: break-all;
         }
         
-        .info-value {
-          color: #2c3e50;
-          font-size: 28rpx;
-          font-weight: 500;
-          text-align: right;
-          flex: 1;
-          margin-left: 16rpx;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          
-          &.orange {
-            color: #fa8c16;
-            font-weight: 600;
-          }
+        &.orange {
+          color: #fa8c16;
+        }
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
         }
       }
     }
@@ -401,17 +461,20 @@ function dictStr(val, arr) {
   .operate {
     display: flex;
     justify-content: flex-end;
-    padding: 0 24rpx 24rpx;
     gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
 
     .btn-edit,
     .btn-delete {
       display: flex;
       align-items: center;
       gap: 6rpx;
-      padding: 12rpx 24rpx;
-      border-radius: 8rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
       font-size: 26rpx;
+      font-weight: 500;
+      border: 1rpx solid;
       transition: all 0.3s ease;
       
       &:active {
@@ -422,21 +485,13 @@ function dictStr(val, arr) {
     .btn-edit {
       background: rgba(102, 126, 234, 0.1);
       color: #667eea;
-      border: 1rpx solid rgba(102, 126, 234, 0.3);
-      
-      text {
-        color: #667eea;
-      }
+      border-color: rgba(102, 126, 234, 0.3);
     }
     
     .btn-delete {
       background: rgba(245, 87, 108, 0.1);
       color: #f5576c;
-      border: 1rpx solid rgba(245, 87, 108, 0.3);
-      
-      text {
-        color: #f5576c;
-      }
+      border-color: rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/work/base/stocks/addEdit.vue b/src/pages/work/base/stocks/addEdit.vue
index f5c3193..24bdcfa 100644
--- a/src/pages/work/base/stocks/addEdit.vue
+++ b/src/pages/work/base/stocks/addEdit.vue
@@ -29,19 +29,20 @@
                 inputAlign="right" border="none"></u--input>
               <u-icon slot="right" name="arrow-down"></u-icon>
             </u-form-item>
-            <u-form-item label="密码" prop="password"  >
+            <!-- <u-form-item label="密码" prop="password"  >
               <u--input v-model="form.password"  placeholder="请填写密码"
                 inputAlign="right" border="none"></u--input>
+            </u-form-item> -->
+            <u-form-item label="开户日期" prop="activationDate"  @click="selectDate()">
+              <u--input v-model="form.activationDate" disabled disabledColor="#ffffff" placeholder="请选择开户日期" inputAlign="right" border="none"></u--input>
+						<u-icon slot="right" name="arrow-right"></u-icon>
             </u-form-item>
             <u-form-item label="关联储蓄卡" prop="bankNameCode"  @click="handleDebitCard">
               <u--input v-model="form.bankNameCode" disabled disabledColor="#ffffff" placeholder="请选择关联储蓄卡"
                 inputAlign="right" border="none"></u--input>
               <u-icon slot="right" name="arrow-down"></u-icon>
             </u-form-item>
-            <u-form-item label="开户日期" prop="activationDate"  @click="selectDate()">
-              <u--input v-model="form.activationDate" disabled disabledColor="#ffffff" placeholder="请选择开户日期" inputAlign="right" border="none"></u--input>
-						<u-icon slot="right" name="arrow-right"></u-icon>
-            </u-form-item>
+   
           
             <u-form-item label="佣金费率" prop="commission" >
               <u--input v-model="form.commission"  placeholder="请填写佣金费率"
@@ -241,53 +242,72 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+  }
+  
   .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: #fff;
-      line-height: 44rpx;
-      font-size: 30rpx;
+      padding: 16rpx 24rpx;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      padding: 16rpx 26rpx;
-      margin: -16rpx -24rpx 20rpx;
-      border-radius: 8rpx 8rpx 0 0;
-      position: relative;
+      color: #ffffff;
+      line-height: 1.2;
+      font-size: 28rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
       
       &::before {
         content: '';
-        position: absolute;
-        left: 26rpx;
-        top: 50%;
-        transform: translateY(-50%);
         width: 6rpx;
         height: 28rpx;
-        background-color: #fff;
+        background: #ffffff;
         border-radius: 3rpx;
+        margin-right: 12rpx;
       }
-      
-      padding-left: 52rpx;
     }
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding: 24rpx;
   
       .form-btn {
-        padding-top: 20rpx;
-        
-        ::v-deep .u-button {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border: none;
-          border-radius: 12rpx;
-          height: 88rpx;
-          font-size: 32rpx;
-          box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
-        }
+        padding-top: 32rpx;
       }
     }
   }
+  </style>
+  
+  <style lang="scss">
+  .form-view {
+    ::v-deep .u-form-item--required::before {
+      color: #f5576c !important;
+      font-size: 28rpx !important;
+      margin-right: 4rpx !important;
+      line-height: 1 !important;
+      vertical-align: middle !important;
+      position: relative !important;
+      top: -2rpx !important;
+    }
+  }
+  
+  .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/base/stocks/details.vue b/src/pages/work/base/stocks/details.vue
index 1c62f1a..5d7dfaf 100644
--- a/src/pages/work/base/stocks/details.vue
+++ b/src/pages/work/base/stocks/details.vue
@@ -8,51 +8,54 @@
 		</u-navbar>
       <view class="detail-card">
         <view class="card-header">
-          <view class="card-title">
-            <uni-icons type="wallet" size="24" color="#fff"></uni-icons>
-            <text class="card-name">{{ detailInfo.name }}</text>
+          <view class="header-icon">
+            <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
           </view>
-          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
-            <text>{{ detailInfo.statusText }}</text>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.name }}<text class="card-code" v-if="detailInfo.code">({{ detailInfo.code }})</text></text>
+          </view>
+          <view class="balance-section">
+            <text class="balance-label">余额</text>
+            <text class="balance-value">{{ detailInfo.balance || '0' }}元</text>
           </view>
         </view>
 
-        <view class="section">
-          <view class="section-title">
-            <view class="title-icon"></view>
-            <text>账户信息</text>
-          </view>
-          <view class="info-grid">
-            <view class="info-item">
-              <text class="info-label">账号</text>
-              <text class="info-value">{{ detailInfo.code || '-' }}</text>
+        <view class="card-body">
+          <view class="info-section">
+            <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 orange">{{ detailInfo.balance || '0' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">佣金费率</text>
-              <text class="info-value orange">{{ detailInfo.commission || '-' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">关联储蓄卡</text>
-              <text class="info-value">{{ detailInfo.bankNameCode || '-' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">开户日期</text>
-              <text class="info-value">{{ detailInfo.activationDate || '-' }}</text>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">账户状态</text>
+                <text class="item-value" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">{{ detailInfo.statusText }}</text>
+              </view>
+             
+               <view class="list-item">
+                <text class="item-label">开户日期</text>
+                <text class="item-value">{{ detailInfo.activationDate || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">关联储蓄卡</text>
+                <text class="item-value">{{ detailInfo.bankNameCode || '-' }}</text>
+              </view>
+               <view class="list-item">
+                <text class="item-label">佣金费率</text>
+                <text class="item-value">{{ detailInfo.commission || '-' }}</text>
+              </view>
+             
             </view>
           </view>
-        </view>
 
-        <view class="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 class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
           </view>
         </view>
       </view>
@@ -73,15 +76,15 @@ const data = reactive({
 const {detailInfo} = toRefs(data)
 onLoad((option) => {
     id.value = option.id
-    getDicts('account_status').then(res => {
-      statusList.value = res.data
-    })
     getInfo()
   })
   function getInfo() {
     getFutureStocks(id.value).then(res => {
           detailInfo.value = res.data
-          detailInfo.value.statusText = dictStr(detailInfo.value.status, statusList.value)
+          // 获取状态字典
+          getDicts('account_status').then(result => {
+            detailInfo.value.statusText = dictStr(detailInfo.value.status, result.data)
+          })
         })
   }
   function dictStr(val, arr) {
@@ -105,117 +108,160 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .detail-card {
-    margin: 24rpx;
-    background-color: #fff;
-    border-radius: 12rpx;
+.container {
+  background: #f5f7fa;
+  padding-bottom: 24rpx;
+}
+
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  
+  .header-icon {
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    min-width: 0;
     overflow: hidden;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
-
-    .card-header {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      padding: 32rpx;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .card-title {
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
-
-        .card-name {
-          color: #fff;
-          font-size: 36rpx;
-          font-weight: bold;
-        }
-      }
-
-      .status-badge {
-        padding: 8rpx 20rpx;
-        border-radius: 24rpx;
-        font-size: 24rpx;
-        font-weight: 600;
-
-        &.status-default {
-          background: #f0f0f0;
-          color: #666666;
-        }
-
-        &.status-normal {
-          background: #fa8c16;
-          color: #ffffff;
-          box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
-        }
-
-        &.status-error {
-          background: #ff4d4f;
-          color: #ffffff;
-          box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
-        }
-      }
-    }
-
-    .section {
-      padding: 32rpx;
-      border-bottom: 1rpx solid #f0f0f0;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      .section-title {
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
-        margin-bottom: 24rpx;
-        font-size: 32rpx;
-        font-weight: bold;
-        color: #333;
-
-        .title-icon {
-          width: 6rpx;
-          height: 32rpx;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border-radius: 3rpx;
-        }
-      }
-
-      .info-grid {
-        display: flex;
-        flex-direction: column;
-        gap: 24rpx;
-
-        .info-item {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .info-label {
-            font-size: 28rpx;
-            color: #999;
-          }
-
-          .info-value {
-            font-size: 28rpx;
-            color: #333;
-            font-weight: 500;
-
-            &.orange {
-              color: #fa8c16;
-              font-weight: bold;
-              font-size: 32rpx;
-            }
-          }
-        }
-      }
-
-      .remark-content {
+    
+    .card-name {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
         font-size: 28rpx;
-        color: #666;
-        line-height: 1.6;
-        text-align: justify;
+        font-weight: 400;
+        margin-left: 8rpx;
       }
     }
   }
-  </style>
\ No newline at end of file
+  
+  .balance-section {
+    flex-shrink: 0;
+    text-align: right;
+    
+    .balance-label {
+      color: rgba(255, 255, 255, 0.85);
+      font-size: 24rpx;
+      margin-right: 8rpx;
+    }
+    
+    .balance-value {
+      color: #fa8c16;
+      font-size: 32rpx;
+      font-weight: 600;
+    }
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
+  .info-list {
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+        
+        &.status-normal {
+          color: #52c41a;
+        }
+        
+        &.status-error {
+          color: #ff4d4f;
+        }
+        
+        &.status-default {
+          color: #666666;
+        }
+      }
+    }
+  }
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
+      font-size: 26rpx;
+      line-height: 1.6;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/work/base/stocks/list.vue b/src/pages/work/base/stocks/list.vue
index 85b1918..68c3619 100644
--- a/src/pages/work/base/stocks/list.vue
+++ b/src/pages/work/base/stocks/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.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>
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
       </view>
@@ -20,45 +20,33 @@
                 <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
               </view>
               <view class="card-info">
-                <view class="name-code-row">
-                  <text class="card-name">{{ item.name }}</text>
-                  <text class="card-code">{{ item.code }}</text>
-                </view>
+                <text class="card-name">{{ item.name }}<text class="card-code" v-if="item.code">({{ item.code }})</text></text>
               </view>
             </view>
-            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
-              <text>{{ dictStr(item.status, statusList) }}</text>
+            <view class="balance-section">
+              <text class="balance-value"><text class="balance-label">余额</text>{{ item.balance || '0' }}元</text>
             </view>
           </view>
           
           <view class="card-body">
             <view class="info-row">
-              <view class="info-item">
-                <text class="info-label">余额</text>
-                <text class="info-value orange">{{ item.balance || '0' }}元</text>
+              <view class="info-item" v-if="dictStr(item.status, statusList) || true">
+                <text class="info-label">账户状态</text>
+                <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
               </view>
-              <view class="info-item">
-                <text class="info-label">佣金费率</text>
-                <text class="info-value orange">{{ item.commission || '-' }}</text>
-              </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item full-width">
-                <text class="info-label">关联储蓄卡</text>
-                <text class="info-value">{{ item.bankNameCode || '-' }}</text>
-              </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item full-width">
+               <view class="info-item" v-if="item.activationDate || true">
                 <text class="info-label">开户日期</text>
-                <text class="info-value">{{ item.activationDate || '-' }}</text>
+                <text class="info-value">{{ item.activationDate || '--' }}</text>
               </view>
-            </view>
-            
-            <view class="info-row" v-if="item.remark">
-              <view class="info-item full-width">
+              <view class="info-item" v-if="item.bankNameCode || true">
+                <text class="info-label">关联储蓄卡</text>
+                <text class="info-value">{{ item.bankNameCode || '--' }}</text>
+              </view>
+              <view class="info-item" v-if="item.commission || true">
+                <text class="info-label">佣金费率</text>
+                <text class="info-value">{{ item.commission || '--' }}</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>
@@ -199,30 +187,39 @@ function dictStr(val, arr) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delFutureStocks(item.id)
-              uni.navigateTo({ url: `/pages/work/base/stocks/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delFutureStocks(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
+.container {
+  background: #f5f7fa;
+}
 
 .search-view {
   padding: 12rpx 32rpx;
@@ -231,15 +228,19 @@ function dictStr(val, arr) {
   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 {
@@ -247,164 +248,161 @@ 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;
-    margin-left: 10rpx;
     
     &:active {
       transform: scale(0.95);
-      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+      background: rgba(102, 126, 234, 0.15);
     }
     
     text {
-      color: #ffffff;
+      color: #667eea;
       font-size: 28rpx;
-      font-weight: 600;
+      font-weight: 500;
     }
   }
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
-  background-color: #fff;
+ margin: 10rpx 24rpx;
+  background: #ffffff;
   border-radius: 16rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+  }
 
   .item-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 20rpx 24rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
     .card-name-section {
       display: flex;
       align-items: center;
       flex: 1;
       min-width: 0;
-    }
-    
-    .card-icon {
-      width: 56rpx;
-      height: 56rpx;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 16rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 16rpx;
-      flex-shrink: 0;
-      backdrop-filter: blur(10rpx);
-    }
-    
-    .card-info {
-      display: flex;
-      flex-direction: column;
-      gap: 6rpx;
-      flex: 1;
-      min-width: 0;
       
-      .name-code-row {
+      .card-icon {
+        width: 48rpx;
+        height: 48rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 16rpx;
         display: flex;
         align-items: center;
-        gap: 16rpx;
+        justify-content: center;
+        margin-right: 12rpx;
+        flex-shrink: 0;
+        backdrop-filter: blur(10rpx);
       }
       
-      .card-name {
-        color: #ffffff;
-        font-size: 32rpx;
-        font-weight: 600;
-        line-height: 1.2;
-      }
-      
-      .card-code {
-        color: rgba(255, 255, 255, 0.8);
-        font-size: 26rpx;
-        line-height: 1.2;
+      .card-info {
+        flex: 1;
+        min-width: 0;
+        
+        .card-name {
+          color: #ffffff;
+          font-size: 28rpx;
+          font-weight: 600;
+          line-height: 1.2;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          
+          .card-code {
+            color: rgba(255, 255, 255, 0.85);
+            font-size: 28rpx;
+            font-weight: 400;
+            margin-left: 8rpx;
+          }
+        }
       }
     }
     
-    .status-badge {
-      padding: 12rpx 28rpx;
-      border-radius: 24rpx;
-      font-size: 26rpx;
-      font-weight: 600;
-      letter-spacing: 0.5rpx;
+    .balance-section {
       flex-shrink: 0;
+      text-align: right;
       
-      &.status-default {
-        background: #f0f0f0;
-        color: #666666;
-      }
-      
-      &.status-normal {
-        background: #fa8c16 !important;
-        color: #ffffff !important;
-        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
-      }
-      
-      &.status-error {
-        background: #ff4d4f;
-        color: #ffffff;
-        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+      .balance-value {
+        color: #fa8c16;
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 1;
+        
+        .balance-label {
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 24rpx;
+          margin-right: 8rpx;
+        }
       }
     }
   }
 
   .card-body {
     padding: 24rpx;
+    background: #fff;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
     
-    .info-row {
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
-      margin-bottom: 12rpx;
-      gap: 12rpx;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
       
-      &:last-child {
-        margin-bottom: 0;
+      &.info-item-full {
+        flex: 0 0 100%;
       }
-      
-      .info-item {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 16rpx 20rpx;
-        background: #f8f9fa;
+
+      .info-label {
+        font-size: 24rpx;
+        color: #999;
+        line-height: 1.2;
+        padding: 4rpx 12rpx;
+        background: rgba(102, 126, 234, 0.08);
         border-radius: 8rpx;
-        min-height: 72rpx;
+        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;
         
-        &.full-width {
-          flex: none;
-          width: 100%;
+        &.status-normal {
+          color: #52c41a;
         }
         
-        .info-label {
-          color: #7f8c8d;
-          font-size: 26rpx;
-          flex-shrink: 0;
-          white-space: nowrap;
-          min-width: 120rpx;
+        &.status-error {
+          color: #ff4d4f;
         }
         
-        .info-value {
-          color: #2c3e50;
-          font-size: 28rpx;
-          font-weight: 500;
-          text-align: right;
-          flex: 1;
-          margin-left: 16rpx;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          
-          &.orange {
-            color: #fa8c16;
-            font-weight: 600;
-          }
+        &.status-default {
+          color: #666666;
         }
       }
     }
@@ -413,42 +411,37 @@ function dictStr(val, arr) {
   .operate {
     display: flex;
     justify-content: flex-end;
-    padding: 0 24rpx 24rpx;
     gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
 
     .btn-edit,
     .btn-delete {
       display: flex;
       align-items: center;
+      justify-content: center;
       gap: 6rpx;
-      padding: 12rpx 24rpx;
-      border-radius: 8rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
       font-size: 26rpx;
+      font-weight: 500;
       transition: all 0.3s ease;
       
       &:active {
         transform: scale(0.95);
       }
     }
-    
+
     .btn-edit {
       background: rgba(102, 126, 234, 0.1);
       color: #667eea;
       border: 1rpx solid rgba(102, 126, 234, 0.3);
-      
-      text {
-        color: #667eea;
-      }
     }
-    
+
     .btn-delete {
       background: rgba(245, 87, 108, 0.1);
       color: #f5576c;
       border: 1rpx solid rgba(245, 87, 108, 0.3);
-      
-      text {
-        color: #f5576c;
-      }
     }
   }
 }
diff --git a/src/pages/work/bill/creditCardBill/details.vue b/src/pages/work/bill/creditCardBill/details.vue
index 68fe471..45e92c5 100644
--- a/src/pages/work/bill/creditCardBill/details.vue
+++ b/src/pages/work/bill/creditCardBill/details.vue
@@ -28,10 +28,14 @@
      
             </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 class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -327,10 +331,45 @@ function dictStr(val, arr) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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;
+        }
+      }
     }
   }
 }
@@ -345,19 +384,19 @@ function dictStr(val, arr) {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
     .header-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 10rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -367,7 +406,7 @@ function dictStr(val, arr) {
     }
 
     .account-name {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 500;
       color: #ffffff;
       line-height: 1.3;
@@ -383,12 +422,12 @@ function dictStr(val, arr) {
       justify-content: space-between;
       align-items: center;
       gap: 12rpx;
-      padding-top: 12rpx;
+      padding-top: 10rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
     }
 
     .time-text {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
       line-height: 1.3;
@@ -396,7 +435,7 @@ function dictStr(val, arr) {
     }
 
     .type-text {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 600;
       color: #ffffff;
       line-height: 1.3;
@@ -406,7 +445,7 @@ function dictStr(val, arr) {
     }
 
     .amount-value {
-      font-size: 36rpx;
+      font-size: 32rpx;
       font-weight: 700;
       line-height: 1.2;
       flex-shrink: 0;
diff --git a/src/pages/work/bill/creditCardBill/list.vue b/src/pages/work/bill/creditCardBill/list.vue
index 6cdf908..4772c5f 100644
--- a/src/pages/work/bill/creditCardBill/list.vue
+++ b/src/pages/work/bill/creditCardBill/list.vue
@@ -277,17 +277,26 @@ function selectStatus(item) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delCreditCardBill(item.id)
-              uni.navigateTo({ url: `/pages/work/bill/creditCardBill/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delCreditCardBill(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
@@ -409,19 +418,19 @@ function selectStatus(item) {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
     .header-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 10rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -431,7 +440,7 @@ function selectStatus(item) {
     }
 
     .card-name {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 500;
       color: #ffffff;
       line-height: 1.3;
diff --git a/src/pages/work/bill/creditInstallmentHistory/details.vue b/src/pages/work/bill/creditInstallmentHistory/details.vue
index 1292011..c6ae2fb 100644
--- a/src/pages/work/bill/creditInstallmentHistory/details.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/details.vue
@@ -273,19 +273,19 @@ function handleUpdateInterest() {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
     .header-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 10rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -295,7 +295,7 @@ function handleUpdateInterest() {
     }
 
     .account-name {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 500;
       color: #ffffff;
       line-height: 1.3;
@@ -311,12 +311,12 @@ function handleUpdateInterest() {
       justify-content: space-between;
       align-items: center;
       gap: 12rpx;
-      padding-top: 12rpx;
+      padding-top: 10rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
     }
 
     .time-text {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
       line-height: 1.3;
@@ -324,7 +324,7 @@ function handleUpdateInterest() {
     }
 
     .type-text {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 600;
       color: #ffffff;
       line-height: 1.3;
@@ -334,7 +334,7 @@ function handleUpdateInterest() {
     }
 
     .amount-value {
-      font-size: 36rpx;
+      font-size: 32rpx;
       font-weight: 700;
       color: #52c41a;
       line-height: 1.2;
diff --git a/src/pages/work/bill/creditInstallmentHistory/list.vue b/src/pages/work/bill/creditInstallmentHistory/list.vue
index 74f4157..fa34747 100644
--- a/src/pages/work/bill/creditInstallmentHistory/list.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/list.vue
@@ -22,10 +22,14 @@
               </view>
             </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 class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
           </view>
         </u-transition>
@@ -292,17 +296,26 @@ function selectStatus(item) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delInstallmentHistory(item.id)
-              uni.navigateTo({ url: `/pages/work/bill/creditInstallmentHistory/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delInstallmentHistory(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
@@ -406,10 +419,53 @@ function selectStatus(item) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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;
+        }
+      }
     }
   }
 }
@@ -424,19 +480,19 @@ function selectStatus(item) {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
     .header-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 10rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -446,7 +502,7 @@ function selectStatus(item) {
     }
 
     .card-name {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 500;
       color: #ffffff;
       line-height: 1.3;
diff --git a/src/pages/work/bill/creditQueryRecord/details.vue b/src/pages/work/bill/creditQueryRecord/details.vue
index 5fd7b73..d03bc05 100644
--- a/src/pages/work/bill/creditQueryRecord/details.vue
+++ b/src/pages/work/bill/creditQueryRecord/details.vue
@@ -92,25 +92,26 @@ onLoad((option) => {
 
       .card-header {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        padding: 32rpx;
+        padding: 20rpx 24rpx;
         display: flex;
         align-items: center;
-        gap: 16rpx;
+        gap: 12rpx;
 
         .header-icon {
-          width: 56rpx;
-          height: 56rpx;
+          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;
         }
 
         .header-title {
-          font-size: 36rpx;
+          font-size: 28rpx;
           color: #ffffff;
           font-weight: 600;
+          line-height: 1.2;
           flex: 1;
         }
       }
diff --git a/src/pages/work/bill/creditQueryRecord/list.vue b/src/pages/work/bill/creditQueryRecord/list.vue
index 0937868..562bb3b 100644
--- a/src/pages/work/bill/creditQueryRecord/list.vue
+++ b/src/pages/work/bill/creditQueryRecord/list.vue
@@ -31,10 +31,14 @@
               </view>
             </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 class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
           </view>
         </u-transition>
@@ -246,17 +250,26 @@ function selectStatus(item) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delCreditQueryRecord(item.id)
-              uni.navigateTo({ url: `/pages/work/bill/creditQueryRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delCreditQueryRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
@@ -342,10 +355,53 @@ function selectStatus(item) {
 
     .btn-box {
       display: flex;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
       box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
-      gap: 16rpx;
+      
+      .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;
+        }
+      }
     }
   }
 }
@@ -359,26 +415,26 @@ function selectStatus(item) {
 
   .item-header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    padding: 24rpx 32rpx;
+    padding: 16rpx 24rpx;
 
     .header-row {
       display: flex;
       align-items: center;
-      gap: 16rpx;
-      margin-bottom: 16rpx;
+      gap: 12rpx;
+      margin-bottom: 12rpx;
 
       .card-icon {
-        width: 48rpx;
-        height: 48rpx;
+        width: 40rpx;
+        height: 40rpx;
         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;
       }
 
       .card-name {
-        font-size: 32rpx;
+        font-size: 28rpx;
         color: #ffffff;
         font-weight: 600;
         flex: 1;
@@ -388,28 +444,28 @@ function selectStatus(item) {
     .info-row {
       display: flex;
       align-items: center;
-      gap: 24rpx;
-      padding-left: 64rpx;
+      gap: 16rpx;
+      padding-left: 52rpx;
 
       .time-text {
-        font-size: 26rpx;
+        font-size: 24rpx;
         color: rgba(255, 255, 255, 0.9);
       }
 
       .type-text {
-        font-size: 24rpx;
+        font-size: 22rpx;
         color: rgba(255, 255, 255, 0.8);
-        padding: 4rpx 16rpx;
+        padding: 4rpx 12rpx;
         background: rgba(255, 255, 255, 0.2);
-        border-radius: 12rpx;
+        border-radius: 10rpx;
       }
 
       .query-type {
-        font-size: 24rpx;
+        font-size: 22rpx;
         color: rgba(255, 255, 255, 0.8);
-        padding: 4rpx 16rpx;
+        padding: 4rpx 12rpx;
         background: rgba(255, 255, 255, 0.2);
-        border-radius: 12rpx;
+        border-radius: 10rpx;
       }
     }
   }
diff --git a/src/pages/work/bill/futuresBill/details.vue b/src/pages/work/bill/futuresBill/details.vue
index 11a8784..ea69ecb 100644
--- a/src/pages/work/bill/futuresBill/details.vue
+++ b/src/pages/work/bill/futuresBill/details.vue
@@ -19,10 +19,14 @@
      
             </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);"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -302,10 +306,45 @@ function dictStr(val, arr) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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;
+        }
+      }
     }
   }
 }
@@ -321,20 +360,20 @@ function dictStr(val, arr) {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 80rpx;
+    min-height: 64rpx;
     
     .card-name-section {
       display: flex;
       align-items: center;
-      gap: 16rpx;
+      gap: 12rpx;
       flex-shrink: 0;
     }
 
     .card-icon {
-      width: 48rpx;
-      height: 48rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -344,7 +383,7 @@ function dictStr(val, arr) {
     }
     
     .card-date {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.95);
       white-space: nowrap;
       flex-shrink: 0;
@@ -353,7 +392,7 @@ function dictStr(val, arr) {
     }
 
     .card-name {
-      font-size: 28rpx;
+      font-size: 26rpx;
       font-weight: 600;
       color: #ffffff;
       white-space: nowrap;
@@ -364,7 +403,7 @@ function dictStr(val, arr) {
     }
 
     .card-amount {
-      font-size: 22rpx;
+      font-size: 20rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
       white-space: nowrap;
@@ -372,7 +411,7 @@ function dictStr(val, arr) {
       line-height: 1;
       
       .amount-value {
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: 700;
         color: #ffffff;
         margin-right: 4rpx;
diff --git a/src/pages/work/bill/futuresBill/list.vue b/src/pages/work/bill/futuresBill/list.vue
index adb1ebd..12bdaee 100644
--- a/src/pages/work/bill/futuresBill/list.vue
+++ b/src/pages/work/bill/futuresBill/list.vue
@@ -307,20 +307,20 @@ function selectStatus(item) {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 20rpx;
-    padding: 24rpx;
+    gap: 16rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
     .date-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 10rpx;
       flex-wrap: wrap;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -330,14 +330,14 @@ function selectStatus(item) {
     }
     
     .card-date {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.85);
       font-weight: 400;
       line-height: 1.3;
     }
 
     .bill-name {
-      font-size: 30rpx;
+      font-size: 28rpx;
       color: rgba(255, 255, 255, 0.95);
       font-weight: 600;
       line-height: 1.3;
diff --git a/src/pages/work/bill/onlineLendHistory/details.vue b/src/pages/work/bill/onlineLendHistory/details.vue
index 92f1e89..c5dd7d8 100644
--- a/src/pages/work/bill/onlineLendHistory/details.vue
+++ b/src/pages/work/bill/onlineLendHistory/details.vue
@@ -282,19 +282,19 @@ function handleUpdateInterest() {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
     .header-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 10rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -304,7 +304,7 @@ function handleUpdateInterest() {
     }
 
     .account-name {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 500;
       color: #ffffff;
       line-height: 1.3;
@@ -320,12 +320,12 @@ function handleUpdateInterest() {
       justify-content: space-between;
       align-items: center;
       gap: 12rpx;
-      padding-top: 12rpx;
+      padding-top: 10rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
     }
 
     .time-text {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
       line-height: 1.3;
@@ -333,7 +333,7 @@ function handleUpdateInterest() {
     }
 
     .type-text {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 600;
       color: #ffffff;
       line-height: 1.3;
@@ -343,7 +343,7 @@ function handleUpdateInterest() {
     }
 
     .amount-value {
-      font-size: 36rpx;
+      font-size: 32rpx;
       font-weight: 700;
       color: #52c41a;
       line-height: 1.2;
diff --git a/src/pages/work/bill/onlineLendHistory/list.vue b/src/pages/work/bill/onlineLendHistory/list.vue
index a612132..4063052 100644
--- a/src/pages/work/bill/onlineLendHistory/list.vue
+++ b/src/pages/work/bill/onlineLendHistory/list.vue
@@ -22,10 +22,14 @@
               </view>
             </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 class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
           </view>
         </u-transition>
@@ -298,17 +302,26 @@ function selectStatus(item) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delInstallmentHistory(item.id)
-              uni.navigateTo({ url: `/pages/work/bill/onlineLendHistory/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delInstallmentHistory(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 
     function formatRepaymentDate(timestamp) {
@@ -417,10 +430,53 @@ function selectStatus(item) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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;
+        }
+      }
     }
   }
 }
@@ -435,19 +491,19 @@ function selectStatus(item) {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 16rpx;
-    padding: 24rpx;
+    gap: 12rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
     .header-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 10rpx;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -457,7 +513,7 @@ function selectStatus(item) {
     }
 
     .card-name {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 500;
       color: #ffffff;
       line-height: 1.3;
@@ -473,12 +529,12 @@ function selectStatus(item) {
       justify-content: space-between;
       align-items: center;
       gap: 12rpx;
-      padding-top: 12rpx;
+      padding-top: 10rpx;
       border-top: 1rpx solid rgba(255, 255, 255, 0.2);
     }
 
     .time-text {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
       line-height: 1.3;
@@ -486,7 +542,7 @@ function selectStatus(item) {
     }
 
     .type-text {
-      font-size: 26rpx;
+      font-size: 24rpx;
       font-weight: 600;
       color: #ffffff;
       line-height: 1.3;
@@ -496,7 +552,7 @@ function selectStatus(item) {
     }
 
     .amount-value {
-      font-size: 36rpx;
+      font-size: 32rpx;
       font-weight: 700;
       color: #52c41a;
       line-height: 1.2;
diff --git a/src/pages/work/bill/peopleLendHistory/list.vue b/src/pages/work/bill/peopleLendHistory/list.vue
index 7cf196c..b8601a4 100644
--- a/src/pages/work/bill/peopleLendHistory/list.vue
+++ b/src/pages/work/bill/peopleLendHistory/list.vue
@@ -22,10 +22,14 @@
               </view>
             </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);"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
           </view>
         </u-transition>
@@ -262,17 +266,26 @@ function selectStatus(item) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delInstallmentHistory(item.id)
-              uni.navigateTo({ url: `/pages/work/bill/peopleLendHistory/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delInstallmentHistory(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
@@ -378,10 +391,53 @@ function selectStatus(item) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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;
+        }
+      }
     }
   }
 }
@@ -397,20 +453,20 @@ function selectStatus(item) {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 80rpx;
+    min-height: 64rpx;
     
     .card-name-section {
       display: flex;
       align-items: center;
-      gap: 16rpx;
+      gap: 12rpx;
       flex-shrink: 0;
     }
 
     .card-icon {
-      width: 48rpx;
-      height: 48rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -420,7 +476,7 @@ function selectStatus(item) {
     }
     
     .card-date {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.95);
       white-space: nowrap;
       flex-shrink: 0;
@@ -429,7 +485,7 @@ function selectStatus(item) {
     }
 
     .card-name {
-      font-size: 28rpx;
+      font-size: 26rpx;
       font-weight: 600;
       color: #ffffff;
       white-space: nowrap;
@@ -440,7 +496,7 @@ function selectStatus(item) {
     }
 
     .card-amount {
-      font-size: 22rpx;
+      font-size: 20rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
       white-space: nowrap;
@@ -448,7 +504,7 @@ function selectStatus(item) {
       line-height: 1;
       
       .amount-value {
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: 700;
         color: #ffffff;
         margin-right: 4rpx;
diff --git a/src/pages/work/bill/stocksBill/details.vue b/src/pages/work/bill/stocksBill/details.vue
index 905120a..b50debd 100644
--- a/src/pages/work/bill/stocksBill/details.vue
+++ b/src/pages/work/bill/stocksBill/details.vue
@@ -19,10 +19,14 @@
      
             </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);"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -302,10 +306,45 @@ function dictStr(val, arr) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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;
+        }
+      }
     }
   }
 }
@@ -321,20 +360,20 @@ function dictStr(val, arr) {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 80rpx;
+    min-height: 64rpx;
     
     .card-name-section {
       display: flex;
       align-items: center;
-      gap: 16rpx;
+      gap: 12rpx;
       flex-shrink: 0;
     }
 
     .card-icon {
-      width: 48rpx;
-      height: 48rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -344,7 +383,7 @@ function dictStr(val, arr) {
     }
     
     .card-date {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.95);
       white-space: nowrap;
       flex-shrink: 0;
@@ -353,7 +392,7 @@ function dictStr(val, arr) {
     }
 
     .card-name {
-      font-size: 28rpx;
+      font-size: 26rpx;
       font-weight: 600;
       color: #ffffff;
       white-space: nowrap;
@@ -364,7 +403,7 @@ function dictStr(val, arr) {
     }
 
     .card-amount {
-      font-size: 22rpx;
+      font-size: 20rpx;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
       white-space: nowrap;
@@ -372,7 +411,7 @@ function dictStr(val, arr) {
       line-height: 1;
       
       .amount-value {
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: 700;
         color: #ffffff;
         margin-right: 4rpx;
diff --git a/src/pages/work/bill/stocksBill/list.vue b/src/pages/work/bill/stocksBill/list.vue
index c4f2a14..5ad3a56 100644
--- a/src/pages/work/bill/stocksBill/list.vue
+++ b/src/pages/work/bill/stocksBill/list.vue
@@ -300,20 +300,20 @@ function selectStatus(item) {
   .item-header {
     display: flex;
     flex-direction: column;
-    gap: 20rpx;
-    padding: 24rpx;
+    gap: 16rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
     .date-row {
       display: flex;
       align-items: center;
-      gap: 12rpx;
+      gap: 10rpx;
       flex-wrap: wrap;
     }
 
     .card-icon {
-      width: 44rpx;
-      height: 44rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -323,14 +323,14 @@ function selectStatus(item) {
     }
     
     .card-date {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.85);
       font-weight: 400;
       line-height: 1.3;
     }
 
     .bill-name {
-      font-size: 30rpx;
+      font-size: 28rpx;
       color: rgba(255, 255, 255, 0.95);
       font-weight: 600;
       line-height: 1.3;
diff --git a/src/pages/work/heartJourney/addEdit.vue b/src/pages/work/heartJourney/addEdit.vue
index 51253e2..be5cdc3 100644
--- a/src/pages/work/heartJourney/addEdit.vue
+++ b/src/pages/work/heartJourney/addEdit.vue
@@ -7,6 +7,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' }">
@@ -159,51 +160,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: #fff;
-      line-height: 44rpx;
-      font-size: 30rpx;
+      padding: 16rpx 24rpx;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      padding: 16rpx 26rpx;
-      margin: -16rpx -24rpx 20rpx;
-      border-radius: 8rpx 8rpx 0 0;
-      position: relative;
+      color: #ffffff;
+      line-height: 1.2;
+      font-size: 28rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
       
       &::before {
         content: '';
-        position: absolute;
-        left: 26rpx;
-        top: 50%;
-        transform: translateY(-50%);
         width: 6rpx;
         height: 28rpx;
-        background-color: #fff;
+        background: #ffffff;
         border-radius: 3rpx;
+        margin-right: 12rpx;
       }
-      
-      padding-left: 52rpx;
     }
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding: 24rpx;
   
       .form-btn {
-        padding-top: 20rpx;
-        
-        ::v-deep .u-button {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border: none;
-          border-radius: 12rpx;
-          height: 88rpx;
-          font-size: 32rpx;
-          box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
-        }
+        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/heartJourney/details.vue b/src/pages/work/heartJourney/details.vue
index 6000e27..69c912e 100644
--- a/src/pages/work/heartJourney/details.vue
+++ b/src/pages/work/heartJourney/details.vue
@@ -6,32 +6,35 @@
 			title="心路历程详情"
 		>
 		</u-navbar>
-      <view class="detail-card">
-        <view class="card-header">
-          <view class="card-title">
-            <uni-icons type="heart" size="20" color="#fff"></uni-icons>
-            <text class="card-name">{{ detailInfo.name }}</text>
-          </view>
+    <view class="detail-card">
+      <view class="card-header">
+        <view class="header-icon">
+          <uni-icons type="heart" size="24" color="#ffffff"></uni-icons>
         </view>
+        <view class="header-info">
+          <text class="card-name">{{ detailInfo.name }}</text>
+        </view>
+      </view>
 
-        <view class="section">
+      <view class="card-body">
+        <view class="info-section">
           <view class="section-title">
             <view class="title-icon"></view>
             <text>基本信息</text>
           </view>
-          <view class="info-grid">
-            <view class="info-item">
-              <text class="info-label">类型</text>
-              <text class="info-value">{{ detailInfo.type || '-' }}</text>
+          <view class="info-list">
+            <view class="list-item">
+              <text class="item-label">类型</text>
+              <text class="item-value">{{ detailInfo.type || '-' }}</text>
             </view>
-            <view class="info-item">
-              <text class="info-label">记录时间</text>
-              <text class="info-value">{{ detailInfo.createTime || '-' }}</text>
+            <view class="list-item">
+              <text class="item-label">记录时间</text>
+              <text class="item-value">{{ detailInfo.createTime || '-' }}</text>
             </view>
           </view>
         </view>
 
-        <view class="section" v-if="detailInfo.remark">
+        <view class="info-section" v-if="detailInfo.remark">
           <view class="section-title">
             <view class="title-icon"></view>
             <text>内容</text>
@@ -41,6 +44,7 @@
           </view>
         </view>
       </view>
+    </view>
       <u-toast ref="uToast"></u-toast>
     </view>
   </template>
@@ -80,87 +84,123 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+    padding-bottom: 24rpx;
+  }
+  
   .detail-card {
     margin: 24rpx;
     background-color: #fff;
-    border-radius: 12rpx;
+    border-radius: 16rpx;
     overflow: hidden;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
     .card-header {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      padding: 12rpx 20rpx;
       display: flex;
       justify-content: space-between;
       align-items: center;
-
-      .card-title {
+      padding: 16rpx 20rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-icon {
+        width: 48rpx;
+        height: 48rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 16rpx;
         display: flex;
         align-items: center;
-        gap: 8rpx;
-
+        justify-content: center;
+        margin-right: 12rpx;
+        backdrop-filter: blur(10rpx);
+      }
+      
+      .header-info {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        
         .card-name {
-          color: #fff;
+          color: #ffffff;
           font-size: 28rpx;
-          font-weight: bold;
-          line-height: 1;
+          font-weight: 600;
+          line-height: 1.2;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
       }
     }
 
-    .section {
-      padding: 32rpx;
-      border-bottom: 1rpx solid #f0f0f0;
+    .card-body {
+      padding: 24rpx;
+    }
 
+    .info-section {
+      margin-bottom: 32rpx;
+      
       &:last-child {
-        border-bottom: none;
+        margin-bottom: 0;
       }
-
+      
       .section-title {
         display: flex;
         align-items: center;
-        gap: 12rpx;
-        margin-bottom: 24rpx;
-        font-size: 32rpx;
-        font-weight: bold;
-        color: #333;
-
+        margin-bottom: 20rpx;
+        
         .title-icon {
           width: 6rpx;
-          height: 32rpx;
+          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-grid {
-        display: flex;
-        flex-direction: column;
-        gap: 24rpx;
-
-        .info-item {
+      
+      .info-list {
+        .list-item {
           display: flex;
           justify-content: space-between;
           align-items: center;
-
-          .info-label {
-            font-size: 28rpx;
-            color: #999;
+          padding: 20rpx;
+          background: #f8f9fa;
+          border-radius: 8rpx;
+          margin-bottom: 12rpx;
+          
+          &:last-child {
+            margin-bottom: 0;
           }
-
-          .info-value {
+          
+          .item-label {
+            color: #7f8c8d;
+            font-size: 26rpx;
+          }
+          
+          .item-value {
+            color: #2c3e50;
             font-size: 28rpx;
-            color: #333;
             font-weight: 500;
+            text-align: right;
           }
         }
       }
-
+      
       .remark-content {
-        font-size: 28rpx;
-        color: #666;
-        line-height: 1.6;
-        text-align: justify;
+        padding: 20rpx;
+        background: #f8f9fa;
+        border-radius: 8rpx;
+        
+        text {
+          color: #2c3e50;
+          font-size: 26rpx;
+          line-height: 1.6;
+        }
       }
     }
   }
diff --git a/src/pages/work/heartJourney/list.vue b/src/pages/work/heartJourney/list.vue
index bb6c563..d469aca 100644
--- a/src/pages/work/heartJourney/list.vue
+++ b/src/pages/work/heartJourney/list.vue
@@ -1,15 +1,16 @@
 <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"
           @blur="searchBlur" suffixIcon="search" 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="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
         <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
         <u-transition :show="filterPanel" mode="fade">
@@ -47,6 +48,9 @@
                 <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">
@@ -236,6 +240,10 @@ function selectStatus(item) {
 </script>
 
 <style lang="scss" scoped>
+.container {
+  background: #f5f7fa;
+}
+
 .btnAdd {
       width: 146rpx;
       height: 56rpx;
@@ -252,16 +260,42 @@ 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;
+  }
+  
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
   
   .add-btn {
@@ -269,20 +303,20 @@ 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;
     margin-left: 10rpx;
     
     &: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;
     }
@@ -326,9 +360,11 @@ function selectStatus(item) {
         }
 
         .active {
-          background-color: rgba(102, 126, 234, 0.1);
-          border: 1rpx solid #667eea;
-          color: #667eea;
+          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;
         }
       }
     }
@@ -349,75 +385,67 @@ function selectStatus(item) {
         height: 88rpx;
         border-radius: 12rpx;
         font-size: 30rpx;
-        font-weight: 600;
+        font-weight: 500;
         transition: all 0.3s ease;
         
         &:active {
-          transform: scale(0.98);
-          opacity: 0.9;
-        }
-        
-        text {
-          line-height: 1;
+          transform: scale(0.95);
         }
       }
       
       .btn-reset {
         flex: 1;
         background: #f5f7fa;
-        border: 2rpx solid #dcdfe6;
-        
-        text {
-          color: #606266;
-        }
+        color: #666666;
       }
       
       .btn-confirm {
-        flex: 1;
-        background: #667eea;
-        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
-        border: none;
-        
-        text {
-          color: #ffffff;
-        }
+        flex: 2;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
+        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
       }
     }
   }
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
-  background-color: #fff;
+  margin: 10rpx 24rpx;
+  background: #ffffff;
   border-radius: 16rpx;
-  overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: scale(0.99);
+  }
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12rpx 20rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 80rpx;
     
     .card-name-section {
       display: flex;
       align-items: center;
       flex: 1;
       min-width: 0;
+      gap: 12rpx;
     }
     
     .card-icon {
       width: 40rpx;
       height: 40rpx;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 10rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-right: 10rpx;
       flex-shrink: 0;
-      backdrop-filter: blur(10rpx);
     }
     
     .card-info {
@@ -431,18 +459,28 @@ function selectStatus(item) {
         color: #ffffff;
         font-size: 28rpx;
         font-weight: 600;
-        line-height: 1.3;
+        line-height: 1;
       }
     }
+    
+    .arrow-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      padding-left: 12rpx;
+    }
   }
 
   .card-body {
     padding: 24rpx;
+    background: #fff;
     
     .info-row {
       display: flex;
-      align-items: center;
-      padding: 16rpx 20rpx;
+      flex-direction: column;
+      gap: 4rpx;
+      padding: 20rpx;
       background: #f8f9fa;
       border-radius: 8rpx;
       margin-bottom: 12rpx;
@@ -451,34 +489,28 @@ function selectStatus(item) {
         margin-bottom: 0;
       }
       
-      &.single {
-        justify-content: space-between;
-      }
-      
-      &.remark {
-        flex-direction: column;
-        align-items: flex-start;
-      }
-      
       .info-label {
-        color: #7f8c8d;
-        font-size: 28rpx;
-        flex-shrink: 0;
+        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;
       }
       
       .info-value {
-        color: #2c3e50;
-        font-size: 28rpx;
+        font-size: 26rpx;
+        color: #333;
         font-weight: 500;
         flex: 1;
-        text-align: right;
+        line-height: 1.5;
       }
     }
     
     .info-row.remark {
       .info-value {
         text-align: left;
-        margin-top: 8rpx;
         line-height: 1.6;
         color: #666;
         width: 100%;
@@ -489,17 +521,20 @@ function selectStatus(item) {
   .operate {
     display: flex;
     justify-content: flex-end;
-    padding: 0 24rpx 24rpx;
     gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
 
     .btn-edit,
     .btn-delete {
       display: flex;
       align-items: center;
       gap: 6rpx;
-      padding: 12rpx 24rpx;
-      border-radius: 8rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
       font-size: 26rpx;
+      font-weight: 500;
+      border: 1rpx solid;
       transition: all 0.3s ease;
       
       &:active {
@@ -510,21 +545,13 @@ function selectStatus(item) {
     .btn-edit {
       background: rgba(102, 126, 234, 0.1);
       color: #667eea;
-      border: 1rpx solid rgba(102, 126, 234, 0.3);
-      
-      text {
-        color: #667eea;
-      }
+      border-color: rgba(102, 126, 234, 0.3);
     }
     
     .btn-delete {
       background: rgba(245, 87, 108, 0.1);
       color: #f5576c;
-      border: 1rpx solid rgba(245, 87, 108, 0.3);
-      
-      text {
-        color: #f5576c;
-      }
+      border-color: rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/work/product/productInfor/addEdit.vue b/src/pages/work/product/productInfor/addEdit.vue
index 513e79e..e543e34 100644
--- a/src/pages/work/product/productInfor/addEdit.vue
+++ b/src/pages/work/product/productInfor/addEdit.vue
@@ -197,50 +197,55 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+  }
+  
   .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: #fff;
-      line-height: 44rpx;
-      font-size: 30rpx;
+      padding: 16rpx 24rpx;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      padding: 16rpx 26rpx;
-      margin: -16rpx -24rpx 20rpx;
-      border-radius: 8rpx 8rpx 0 0;
-      position: relative;
+      color: #ffffff;
+      line-height: 1.2;
+      font-size: 28rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
       
       &::before {
         content: '';
-        position: absolute;
-        left: 26rpx;
-        top: 50%;
-        transform: translateY(-50%);
         width: 6rpx;
         height: 28rpx;
-        background-color: #fff;
+        background: #ffffff;
         border-radius: 3rpx;
+        margin-right: 12rpx;
       }
-      
-      padding-left: 52rpx;
     }
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding: 20rpx 24rpx;
   
       .form-btn {
         padding-top: 20rpx;
+        display: flex;
+        justify-content: center;
         
         ::v-deep .u-button {
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           border: none;
           border-radius: 12rpx;
           height: 88rpx;
-          font-size: 32rpx;
+          width: 50%;
+          font-size: 34rpx;
+          font-weight: 500;
+          letter-spacing: 2rpx;
           box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
         }
       }
diff --git a/src/pages/work/product/productInfor/details.vue b/src/pages/work/product/productInfor/details.vue
index 6cfd0f1..a5e3f07 100644
--- a/src/pages/work/product/productInfor/details.vue
+++ b/src/pages/work/product/productInfor/details.vue
@@ -1,58 +1,60 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <u-navbar
 			leftIconSize="40rpx"
 			leftIconColor="#333333"
 			title="商品信息详情"
 		>
 		</u-navbar>
+      
       <view class="detail-card">
         <view class="card-header">
-          <view class="card-title">
-            <uni-icons type="list" size="24" color="#fff"></uni-icons>
-            <text class="card-name">{{ detailInfo.name }}</text>
+          <view class="header-icon">
+            <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.name }}<text class="card-code" v-if="detailInfo.code">({{ detailInfo.code }})</text></text>
           </view>
         </view>
-
-        <view class="section">
-          <view class="section-title">
-            <view class="title-icon"></view>
-            <text>商品信息</text>
-          </view>
-          <view class="info-grid">
-            <view class="info-item">
-              <text class="info-label">商品编码</text>
-              <text class="info-value">{{ detailInfo.code || '-' }}</text>
+        
+        <view class="card-body">
+          <view class="info-section">
+            <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.category || '-' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">单位</text>
-              <text class="info-value">{{ detailInfo.unit || '-' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">排序</text>
-              <text class="info-value">{{ detailInfo.ranking || '-' }}</text>
-            </view>
-            <view class="info-item">
-              <text class="info-label">创建时间</text>
-              <text class="info-value">{{ detailInfo.createTime || '-' }}</text>
+            <view class="info-list">
+              <view class="list-item" v-if="detailInfo.category || true">
+                <text class="item-label">类别</text>
+                <text class="item-value">{{ detailInfo.category || '--' }}</text>
+              </view>
+              <view class="list-item" v-if="detailInfo.unit || true">
+                <text class="item-label">单位</text>
+                <text class="item-value">{{ detailInfo.unit || '--' }}</text>
+              </view>
+              <view class="list-item" v-if="detailInfo.ranking || true">
+                <text class="item-label">排序</text>
+                <text class="item-value">{{ detailInfo.ranking || '--' }}</text>
+              </view>
+              <view class="list-item" v-if="detailInfo.createTime || true">
+                <text class="item-label">创建时间</text>
+                <text class="item-value">{{ detailInfo.createTime || '--' }}</text>
+              </view>
             </view>
           </view>
-        </view>
-
-        <view class="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 class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
           </view>
         </view>
       </view>
+      
       <u-toast ref="uToast"></u-toast>
     </view>
   </template>
@@ -96,87 +98,131 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .detail-card {
-    margin: 24rpx;
-    background-color: #fff;
-    border-radius: 12rpx;
+.container {
+  background: #f5f7fa;
+  padding-bottom: 24rpx;
+}
+
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  
+  .header-icon {
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    min-width: 0;
     overflow: hidden;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
-
-    .card-header {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      padding: 32rpx;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .card-title {
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
-
-        .card-name {
-          color: #fff;
-          font-size: 36rpx;
-          font-weight: bold;
-        }
-      }
-    }
-
-    .section {
-      padding: 32rpx;
-      border-bottom: 1rpx solid #f0f0f0;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      .section-title {
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
-        margin-bottom: 24rpx;
-        font-size: 32rpx;
-        font-weight: bold;
-        color: #333;
-
-        .title-icon {
-          width: 6rpx;
-          height: 32rpx;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border-radius: 3rpx;
-        }
-      }
-
-      .info-grid {
-        display: flex;
-        flex-direction: column;
-        gap: 24rpx;
-
-        .info-item {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .info-label {
-            font-size: 28rpx;
-            color: #999;
-          }
-
-          .info-value {
-            font-size: 28rpx;
-            color: #333;
-            font-weight: 500;
-          }
-        }
-      }
-
-      .remark-content {
+    
+    .card-name {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
         font-size: 28rpx;
-        color: #666;
-        line-height: 1.6;
-        text-align: justify;
+        font-weight: 400;
+        margin-left: 8rpx;
       }
     }
   }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
+  .info-list {
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+      }
+    }
+  }
+  
+  .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/product/productInfor/list.vue b/src/pages/work/product/productInfor/list.vue
index 1486a37..3930155 100644
--- a/src/pages/work/product/productInfor/list.vue
+++ b/src/pages/work/product/productInfor/list.vue
@@ -1,15 +1,16 @@
 <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"
           @blur="searchBlur" suffixIcon="search" 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="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
         <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
         <u-transition :show="filterPanel" mode="fade">
@@ -22,10 +23,14 @@
               </view>
             </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);"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
           </view>
         </u-transition>
@@ -40,30 +45,25 @@
                 <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
               </view>
               <view class="card-info">
-                <view class="name-code-row">
-                  <text class="card-name">{{ item.name }}</text>
-                  <text class="card-code">{{ item.code }}</text>
-                </view>
+                <text class="card-name">{{ item.name }}<text class="card-code" v-if="item.code">({{ item.code }})</text></text>
               </view>
             </view>
+            <view class="card-meta">
+              <text class="meta-item" v-if="dictStr(item.category, productTypeList)">
+                {{ dictStr(item.category, productTypeList) }}
+              </text>
+              <text class="meta-divider" v-if="dictStr(item.category, productTypeList) && dictStr(item.unit, unitList)">|</text>
+              <text class="meta-item" v-if="dictStr(item.unit, unitList)">
+                {{ dictStr(item.unit, unitList) }}
+              </text>
+            </view>
           </view>
           
           <view class="card-body">
             <view class="info-row">
-              <view class="info-item">
-                <text class="info-label">类别</text>
-                <text class="info-value">{{ dictStr(item.category, productTypeList) }}</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">单位</text>
-                <text class="info-value">{{ dictStr(item.unit, unitList) }}</text>
-              </view>
-            </view>
-            
-            <view class="info-row">
-              <view class="info-item full-width">
+              <view class="info-item info-item-full" v-if="item.createTime || true">
                 <text class="info-label">创建时间</text>
-                <text class="info-value">{{ item.createTime || '-' }}</text>
+                <text class="info-value">{{ item.createTime || '--' }}</text>
               </view>
             </view>
           </view>
@@ -226,30 +226,39 @@ function selectStatus(item) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delProductInfor(item.id)
-              uni.navigateTo({ url: `/pages/work/product/productInfor/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delProductInfor(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
+.container {
+  background: #f5f7fa;
+}
 
 .search-view {
   padding: 12rpx 32rpx;
@@ -258,16 +267,42 @@ 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;
+  }
+  
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
   
   .add-btn {
@@ -275,25 +310,24 @@ 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;
     margin-left: 10rpx;
     
     &: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;
@@ -345,22 +379,58 @@ function selectStatus(item) {
       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: 500;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        color: #666666;
+      }
+      
+      .btn-confirm {
+        flex: 2;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
+        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+      }
     }
   }
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
-  background-color: #fff;
+  margin: 10rpx 24rpx;
+  background: #ffffff;
   border-radius: 16rpx;
-  overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: all 0.3s ease;
+
+  
+  &:active {
+    transform: scale(0.99);
+  }
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
     .card-name-section {
@@ -371,92 +441,109 @@ function selectStatus(item) {
     }
     
     .card-icon {
-      width: 56rpx;
-      height: 56rpx;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 16rpx;
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-right: 16rpx;
+      margin-right: 12rpx;
       flex-shrink: 0;
-      backdrop-filter: blur(10rpx);
     }
     
     .card-info {
-      display: flex;
-      flex-direction: column;
-      gap: 6rpx;
       flex: 1;
       min-width: 0;
-      
-      .name-code-row {
-        display: flex;
-        align-items: center;
-        gap: 16rpx;
-      }
+      overflow: hidden;
       
       .card-name {
         color: #ffffff;
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: 600;
         line-height: 1.2;
+        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-meta {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+      flex-shrink: 0;
+      
+      .meta-item {
+        font-size: 26rpx;
+        color: rgba(255, 255, 255, 0.9);
+        line-height: 1;
+        white-space: nowrap;
+        font-weight: 500;
       }
       
-      .card-code {
-        color: rgba(255, 255, 255, 0.8);
-        font-size: 26rpx;
-        line-height: 1.2;
+      .meta-divider {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.6);
+        line-height: 1;
       }
     }
   }
 
   .card-body {
     padding: 24rpx;
-    
-    .info-row {
+    background: #fff;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
+
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
       display: flex;
-      margin-bottom: 12rpx;
-      gap: 12rpx;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
       
-      &:last-child {
-        margin-bottom: 0;
+      &.info-item-full {
+        flex: 0 0 100%;
+      }
+
+      .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;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
       }
       
-      .info-item {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 16rpx 20rpx;
-        background: #f8f9fa;
-        border-radius: 8rpx;
-        min-height: 72rpx;
-        
-        &.full-width {
-          flex: none;
-          width: 100%;
-        }
-        
-        .info-label {
-          color: #7f8c8d;
-          font-size: 26rpx;
-          flex-shrink: 0;
-          white-space: nowrap;
-          min-width: 120rpx;
-        }
-        
-        .info-value {
-          color: #2c3e50;
-          font-size: 28rpx;
-          font-weight: 500;
-          text-align: right;
-          flex: 1;
-          margin-left: 16rpx;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
   }
@@ -464,8 +551,8 @@ function selectStatus(item) {
   .operate {
     display: flex;
     justify-content: flex-end;
-    padding: 0 24rpx 24rpx;
     gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
 
     .btn-edit,
     .btn-copy,
@@ -473,9 +560,12 @@ function selectStatus(item) {
       display: flex;
       align-items: center;
       gap: 6rpx;
-      padding: 12rpx 24rpx;
-      border-radius: 8rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
       font-size: 26rpx;
+      font-weight: 500;
+      border: 1rpx solid;
       transition: all 0.3s ease;
       
       &:active {
@@ -486,31 +576,19 @@ function selectStatus(item) {
     .btn-edit {
       background: rgba(102, 126, 234, 0.1);
       color: #667eea;
-      border: 1rpx solid rgba(102, 126, 234, 0.3);
-      
-      text {
-        color: #667eea;
-      }
+      border-color: rgba(102, 126, 234, 0.3);
     }
     
     .btn-copy {
       background: rgba(82, 196, 26, 0.1);
       color: #52c41a;
-      border: 1rpx solid rgba(82, 196, 26, 0.3);
-      
-      text {
-        color: #52c41a;
-      }
+      border-color: rgba(82, 196, 26, 0.3);
     }
     
     .btn-delete {
       background: rgba(245, 87, 108, 0.1);
       color: #f5576c;
-      border: 1rpx solid rgba(245, 87, 108, 0.3);
-      
-      text {
-        color: #f5576c;
-      }
+      border-color: rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/work/product/productPriceRecord/addEdit.vue b/src/pages/work/product/productPriceRecord/addEdit.vue
index 0c23c73..f57a588 100644
--- a/src/pages/work/product/productPriceRecord/addEdit.vue
+++ b/src/pages/work/product/productPriceRecord/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' }">
@@ -53,8 +52,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>
@@ -355,17 +353,54 @@ function submit() {
 
 .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/product/productPriceRecord/details.vue b/src/pages/work/product/productPriceRecord/details.vue
new file mode 100644
index 0000000..373a500
--- /dev/null
+++ b/src/pages/work/product/productPriceRecord/details.vue
@@ -0,0 +1,265 @@
+<template>
+  <view class="container">
+    <u-navbar
+      leftIconSize="40rpx"
+      leftIconColor="#333333"
+      title="物价记录详情"
+    >
+    </u-navbar>
+    
+    <view class="detail-card">
+      <view class="card-header">
+        <view class="header-icon">
+          <uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <view class="header-info">
+          <text class="card-name">{{ detailInfo.kind }}</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.categoryText }}</text>
+            </view>
+            <view class="list-item" v-if="detailInfo.productName">
+              <text class="item-label">商品名称</text>
+              <text class="item-value">{{ detailInfo.productName }}</text>
+            </view>
+            <view class="list-item" v-if="detailInfo.address">
+              <text class="item-label">地点</text>
+              <text class="item-value">{{ detailInfo.address }}</text>
+            </view>
+            <view class="list-item" v-if="detailInfo.merchant">
+              <text class="item-label">商家</text>
+              <text class="item-value">{{ detailInfo.merchant }}</text>
+            </view>
+          </view>
+        </view>
+        <view class="info-section">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>价格信息</text>
+          </view>
+          <view class="info-list">
+            <view class="list-item">
+              <text class="item-label">价格</text>
+              <text class="item-value orange">{{ detailInfo.price }}元/{{ detailInfo.unitText }}</text>
+            </view>
+            <view class="list-item">
+              <text class="item-label">记录时间</text>
+              <text class="item-value">{{ detailInfo.recordTime }}</text>
+            </view>
+           
+          </view>
+        </view>
+        
+       
+        
+        <view class="info-section" v-if="detailInfo.remark">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>备注</text>
+          </view>
+          <view class="remark-content">
+            <text>{{ detailInfo.remark }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <u-toast ref="uToast"></u-toast>
+  </view>
+</template>
+
+<script setup>
+import { getProductPriceRecord } from '@/api/invest/productPriceRecord'
+import { getProductInfor } from '@/api/invest/productInfor'
+import { getDicts } from '@/api/system/dict/data.js'
+import { onLoad } from "@dcloudio/uni-app";
+import { reactive, toRefs, ref } from "vue";
+
+const id = ref('')
+const data = reactive({
+  detailInfo: {} 
+})
+const { detailInfo } = toRefs(data)
+
+onLoad((option) => {
+  id.value = option.id
+  getInfo()
+})
+
+function getInfo() {
+  getProductPriceRecord(id.value).then(res => {
+    detailInfo.value = res.data
+    
+    // 获取类别文本
+    getDicts('product_category').then(result => {
+      detailInfo.value.categoryText = dictStr(detailInfo.value.category, result.data)
+    })
+    
+    // 获取单位文本
+    getDicts('product_unit').then(result => {
+      detailInfo.value.unitText = dictStr(detailInfo.value.unit, result.data)
+    })
+    
+    // 获取商品名称
+    if (detailInfo.value.productId) {
+      getProductInfor(detailInfo.value.productId).then(result => {
+        detailInfo.value.productName = result.data.name
+      })
+    }
+  })
+}
+
+function dictStr(val, arr) {
+  let str = ''
+  arr.map(item => {
+    if (item.dictValue === val) {
+      str = item.dictLabel
+    }
+  })
+  return str
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  background: #f5f7fa;
+  padding-bottom: 24rpx;
+}
+
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  
+  .header-icon {
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    
+    .card-name {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 28rpx;
+        font-weight: 400;
+        margin-left: 8rpx;
+      }
+    }
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
+  .info-list {
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+        
+        &.orange {
+          color: #fa8c16;
+        }
+      }
+    }
+  }
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
+      font-size: 26rpx;
+      line-height: 1.6;
+    }
+  }
+}
+</style>
diff --git a/src/pages/work/product/productPriceRecord/list.vue b/src/pages/work/product/productPriceRecord/list.vue
index b5211bd..2d5ca50 100644
--- a/src/pages/work/product/productPriceRecord/list.vue
+++ b/src/pages/work/product/productPriceRecord/list.vue
@@ -1,15 +1,16 @@
 <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.kind" border="false" placeholder="请输入商品名称" class="search-input"
           @blur="searchBlur" suffixIcon="search" 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="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
         <view class="add-btn" @click="handleAdd()">
-          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
           <text>新增</text>
         </view>
         <u-transition :show="filterPanel" mode="fade">
@@ -49,10 +50,14 @@
             </view>
             </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);"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
             </view>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -70,15 +75,16 @@
     </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="handleEdit(item)">
+        <view class="list-item" @click="handleDetail(item)">
           <view class="item-header">
             <view class="card-name-section">
               <view class="card-icon">
-                <uni-icons type="pricetag-filled" size="20" color="#ffffff"></uni-icons>
+                <uni-icons type="calendar" size="20" color="#ffffff"></uni-icons>
               </view>
               <view class="card-info">
-                <text class="card-name">{{ item.kind }}</text>
                 <text class="card-date">{{ item.recordTime }}</text>
+                <text class="card-address" v-if="item.address">{{ item.address }}</text>
+                <text class="card-name">{{ item.kind }}</text>
               </view>
             </view>
             <text class="card-price"><text class="price-value">{{ item.price }}</text>元/{{ dictStr(item.unit, unitList) }}</text>
@@ -90,13 +96,6 @@
                 <text class="info-label">类别</text>
                 <text class="info-value">{{ dictStr(item.category, productTypeList) }}</text>
               </view>
-              <view class="info-item">
-                <text class="info-label">地点</text>
-                <text class="info-value">{{ item.address || '-' }}</text>
-              </view>
-            </view>
-            
-            <view class="info-row">
               <view class="info-item">
                 <text class="info-label">商家</text>
                 <text class="info-value">{{ item.merchant || '-' }}</text>
@@ -276,6 +275,11 @@ function selectStatus(item) {
       uni.navigateTo({ url: `/pages/work/product/productPriceRecord/addEdit?id=${item.id}` })
       isShow.value = true
     }
+    
+    function handleDetail(item) {
+      uni.navigateTo({ url: `/pages/work/product/productPriceRecord/details?id=${item.id}` })
+      isShow.value = true
+    }
 
     function handleCopy(item) {
       uni.navigateTo({ url: `/pages/work/product/productPriceRecord/addEdit?flag=copy&id=${item.id}` })
@@ -287,30 +291,39 @@ function selectStatus(item) {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delProductPriceRecord(item.id)
-              uni.navigateTo({ url: `/pages/work/product/productPriceRecord/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delProductPriceRecord(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
     }
 	
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
+.container {
+  background: #f5f7fa;
+}
 
 .search-view {
   padding: 12rpx 32rpx;
@@ -319,16 +332,42 @@ 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;
+  }
+  
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
   
   .add-btn {
@@ -336,19 +375,20 @@ 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;
+    margin-left: 10rpx;
     
     &: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;
     }
@@ -403,26 +443,61 @@ function selectStatus(item) {
 
     .btn-box {
       display: flex;
-      gap: 16rpx;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
+      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: 500;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        color: #666666;
+      }
+      
+      .btn-confirm {
+        flex: 2;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
+        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+      }
     }
   }
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
-  background-color: #fff;
+  margin: 10rpx 24rpx;
+  background: #ffffff;
   border-radius: 16rpx;
-  overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: scale(0.99);
+  }
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
+    padding: 16rpx 24rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 80rpx;
     
@@ -435,8 +510,8 @@ function selectStatus(item) {
     }
 
     .card-icon {
-      width: 48rpx;
-      height: 48rpx;
+      width: 40rpx;
+      height: 40rpx;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.25);
       display: flex;
@@ -453,30 +528,39 @@ function selectStatus(item) {
       min-width: 0;
     }
 
-    .card-name {
-      font-size: 28rpx;
-      font-weight: 600;
-      color: #ffffff;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      flex-shrink: 0;
-      line-height: 1;
-    }
-    
     .card-date {
-      font-size: 28rpx;
+      font-size: 26rpx;
       color: rgba(255, 255, 255, 0.95);
       white-space: nowrap;
       flex-shrink: 0;
       font-weight: 500;
       line-height: 1;
     }
-
+    
+    .card-address {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.85);
+      white-space: nowrap;
+      flex-shrink: 0;
+      font-weight: 400;
+      line-height: 1;
+    }
+    
+    .card-name {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.9);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex-shrink: 1;
+      line-height: 1;
+    }
+    
     .card-price {
       font-size: 22rpx;
-      color: rgba(255, 255, 255, 0.9);
-      font-weight: 500;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 400;
       white-space: nowrap;
       flex-shrink: 0;
       line-height: 1;
@@ -484,7 +568,7 @@ function selectStatus(item) {
       .price-value {
         font-size: 32rpx;
         font-weight: 700;
-        color: #ffffff;
+        color: #fa8c16;
         margin-right: 4rpx;
       }
     }
@@ -497,29 +581,34 @@ function selectStatus(item) {
 
   .info-row {
     display: flex;
+    flex-wrap: wrap;
     gap: 24rpx;
-    margin-bottom: 20rpx;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
+    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-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;
       }
 
       .info-value {
         font-size: 26rpx;
         color: #333;
         font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -529,22 +618,22 @@ function selectStatus(item) {
 
   .operate {
     display: flex;
-    gap: 12rpx;
-    padding: 0 24rpx 24rpx;
-    background: #fff;
+    justify-content: flex-end;
+    gap: 16rpx;
+    padding: 16rpx 24rpx 24rpx;
 
     .btn-edit,
     .btn-copy,
     .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;
       font-weight: 500;
+      border: 1rpx solid;
       transition: all 0.3s ease;
       
       &:active {
@@ -555,19 +644,19 @@ function selectStatus(item) {
     .btn-edit {
       background: rgba(102, 126, 234, 0.1);
       color: #667eea;
-      border: 1rpx solid rgba(102, 126, 234, 0.3);
+      border-color: rgba(102, 126, 234, 0.3);
     }
 
     .btn-copy {
-      background: rgba(250, 173, 20, 0.1);
-      color: #faad14;
-      border: 1rpx solid rgba(250, 173, 20, 0.3);
+      background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+      border-color: rgba(82, 196, 26, 0.3);
     }
 
     .btn-delete {
       background: rgba(245, 87, 108, 0.1);
       color: #f5576c;
-      border: 1rpx solid rgba(245, 87, 108, 0.3);
+      border-color: rgba(245, 87, 108, 0.3);
     }
   }
 }