From 459ab82cf2c823026af6e7aa2ebaf58337400d12 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Fri, 14 Nov 2025 02:13:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B7=A5=E4=BD=9C=E5=8F=B0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E6=95=B4=E4=BD=93ui=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                                |  31 +-
 src/pages/calendar/index.vue                  | 129 +++--
 src/pages/login.vue                           | 263 +++++++---
 src/pages/mine.vue                            | 135 ++---
 src/pages/register.vue                        | 239 ++++++++-
 .../accounts/accountDealRecord/addEdit.vue    |  51 +-
 .../accounts/accountDealRecord/details.vue    | 244 +++++++--
 .../work/accounts/accountDealRecord/list.vue  | 419 +++++++++++-----
 .../work/accounts/accounts/commonList.vue     | 218 +++++----
 src/pages/work/accounts/accounts/details.vue  | 288 +++++++++--
 src/pages/work/accounts/accounts/list.vue     | 382 +++++++++------
 .../accounts/creditTransferRecord/addEdit.vue |  77 ++-
 .../accounts/creditTransferRecord/details.vue | 186 +++++--
 .../accounts/creditTransferRecord/list.vue    | 292 ++++++-----
 .../accounts/debitTransferRecord/addEdit.vue  |  65 ++-
 .../accounts/debitTransferRecord/details.vue  | 183 +++++--
 .../accounts/debitTransferRecord/list.vue     | 326 ++++++++-----
 .../accounts/investAccountDeal/addEdit.vue    |  14 +-
 .../accounts/investAccountDeal/details.vue    | 163 +++++--
 .../work/accounts/investAccountDeal/list.vue  | 314 +++++++-----
 .../accounts/investTransferRecord/addEdit.vue |  14 +-
 .../accounts/investTransferRecord/details.vue | 150 ++++--
 .../accounts/investTransferRecord/list.vue    | 301 +++++++-----
 .../accounts/lendTransferRecord/addEdit.vue   |  96 ++--
 .../accounts/lendTransferRecord/details.vue   | 176 +++++--
 .../work/accounts/lendTransferRecord/list.vue | 320 +++++++-----
 .../accounts/posTransferRecord/addEdit.vue    |  63 ++-
 .../accounts/posTransferRecord/details.vue    | 208 ++++++--
 .../work/accounts/posTransferRecord/list.vue  | 357 +++++++++-----
 src/pages/work/accounts/posadvice/list.vue    | 351 +++++++------
 .../work/bill/creditCardBill/addEdit.vue      |  14 +-
 .../work/bill/creditCardBill/details.vue      | 266 +++++-----
 src/pages/work/bill/creditCardBill/list.vue   | 461 +++++++++++++-----
 .../bill/creditInstallmentHistory/addEdit.vue |  24 +-
 .../bill/creditInstallmentHistory/details.vue | 369 ++++++++------
 .../detailsAddEdit.vue                        |  16 +-
 .../bill/creditInstallmentHistory/list.vue    | 430 ++++++++++------
 .../work/bill/creditQueryRecord/addEdit.vue   |  16 +-
 .../work/bill/creditQueryRecord/analysis.vue  | 158 ++++--
 .../work/bill/creditQueryRecord/details.vue   | 135 +++--
 .../work/bill/creditQueryRecord/list.vue      | 292 ++++++-----
 src/pages/work/bill/futuresBill/addEdit.vue   |  66 +--
 src/pages/work/bill/futuresBill/details.vue   | 260 +++++-----
 src/pages/work/bill/futuresBill/list.vue      | 353 ++++++++------
 .../work/bill/onlineLendHistory/addEdit.vue   |  19 +-
 .../work/bill/onlineLendHistory/details.vue   | 361 ++++++++------
 .../bill/onlineLendHistory/detailsAddEdit.vue |  14 +-
 .../work/bill/onlineLendHistory/list.vue      | 444 +++++++++++------
 .../work/bill/peopleLendHistory/addEdit.vue   |  81 +--
 .../work/bill/peopleLendHistory/list.vue      | 328 ++++++++-----
 src/pages/work/bill/stocksBill/addEdit.vue    |  66 +--
 src/pages/work/bill/stocksBill/details.vue    | 260 +++++-----
 src/pages/work/bill/stocksBill/list.vue       | 353 ++++++++------
 .../product/productPriceRecord/addEdit.vue    |  86 +++-
 .../work/product/productPriceRecord/list.vue  | 336 ++++++++-----
 src/pages_mine/pages/about/index.vue          | 247 ++++++++--
 src/pages_mine/pages/avatar/index.vue         | 147 +++++-
 src/pages_mine/pages/help/index.vue           | 178 +++++--
 src/pages_mine/pages/info/edit.vue            |  68 ++-
 src/pages_mine/pages/info/index.vue           | 114 ++++-
 src/pages_mine/pages/pwd/index.vue            | 154 +++++-
 src/pages_mine/pages/setting/index.vue        | 128 +++--
 62 files changed, 8331 insertions(+), 3968 deletions(-)

diff --git a/src/pages.json b/src/pages.json
index 4b4145d..b254760 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -14,19 +14,22 @@
     {
       "path": "pages/login",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "",
+        "disableScroll": true
       }
     },
     {
       "path": "pages/register",
       "style": {
-        "navigationBarTitleText": "平台用户注册"
+        "navigationBarTitleText": "平台用户注册",
+        "disableScroll": true
       }
     },
     {
       "path": "pages/calendar/index",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "",
+        "disableScroll": true
       }
     },
     {
@@ -58,7 +61,8 @@
     {
       "path": "pages/mine",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "",
+        "disableScroll": true
       }
     },
     {
@@ -278,7 +282,8 @@
     {
       "path": "pages/work/accounts/debitTransferRecord/details",
       "style": {
-        "navigationBarTitleText": "储蓄账户转账详情"
+        "navigationBarTitleText": "储蓄账户转账详情",
+        "disableScroll": true
       }
     }
     ,
@@ -299,7 +304,8 @@
     {
       "path": "pages/work/accounts/lendTransferRecord/details",
       "style": {
-        "navigationBarTitleText": "借贷账户记账详情"
+        "navigationBarTitleText": "借贷账户记账详情",
+        "disableScroll": true
       }
     }
     ,
@@ -326,7 +332,8 @@
     {
       "path": "pages/work/accounts/accounts/details",
       "style": {
-        "navigationBarTitleText": "记账账户详情"
+        "navigationBarTitleText": "记账账户详情",
+        "disableScroll": true
       }
     }
     ,
@@ -743,13 +750,15 @@
         {
           "path": "help/index",
           "style": {
-            "navigationBarTitleText": "常见问题"
+            "navigationBarTitleText": "常见问题",
+            "disableScroll": true
           }
         },
         {
           "path": "about/index",
           "style": {
-            "navigationBarTitleText": "关于我们"
+            "navigationBarTitleText": "关于我们",
+            "disableScroll": true
           }
         }
       ]
@@ -892,8 +901,8 @@
     }
   ],
   "tabBar": {
-    "color": "#000000",
-    "selectedColor": "#000000",
+    "color": "#909399",
+    "selectedColor": "#667eea",
     "borderStyle": "white",
     "backgroundColor": "#ffffff",
     "list": [
diff --git a/src/pages/calendar/index.vue b/src/pages/calendar/index.vue
index a27409c..5a2cfbb 100644
--- a/src/pages/calendar/index.vue
+++ b/src/pages/calendar/index.vue
@@ -19,6 +19,7 @@
       </view>
     </view>
   </u-sticky>
+  
   <!-- 月视图和周视图显示，列视图显示表格形式 -->
   <div class="calendar-wrapper">
     <div v-show="type !== '3'" ref="fullcalendar" class="calendar-view" />
@@ -26,26 +27,25 @@
   
   <view class="events-section">
     <view class="section-title">
-      <text class="title-text">当日事项</text>
+      <text class="title-text">{{ currentDateTitle }}</text>
     </view>
-    <u-list height="auto">
-      <u-list-item v-for="(item, index) in currentInfoList" :key="index">
+    <view class="events-list">
+      <view v-for="(item, index) in currentInfoList" :key="index">
         <view class="event-card" @click="enterDetails(item)">
           <view class="event-icon" :style="{ background: getEventColor(item.type) }">
             <uni-icons :type="getEventIcon(item.type)" size="16" color="#fff"></uni-icons>
           </view>
           <view class="event-content">
             <text class="event-title">{{ item.title }}</text>
-            <text class="event-time">{{ item.start }}</text>
           </view>
           <uni-icons type="arrow-right" size="16" color="#ccc"></uni-icons>
         </view>
-      </u-list-item>
+      </view>
       <view v-if="currentInfoList.length === 0" class="empty-state">
         <uni-icons type="calendar" size="60" color="#ddd"></uni-icons>
         <text class="empty-text">暂无事项</text>
       </view>
-    </u-list>
+    </view>
   </view>
 </div>
       <!-- 悬停按钮刷新-->
@@ -68,6 +68,7 @@ export default {
     const { proxy } = getCurrentInstance()
     const state = reactive({
       calendarTitle: new Date().getFullYear() + '年' + Number(new Date().getMonth() + 1) + '月', // 日历头部显示文字
+      currentDateTitle: '', // 当前选中日期标题
       dialogVisiable: false,
       loading: false,
       type: '1',
@@ -84,6 +85,8 @@ export default {
     onMounted(() => {
       initCalendar()
       getCalendarList()
+      // 初始化当前日期标题
+      updateCurrentDateTitle(dayjs().format('YYYY-MM-DD'))
     })
     const initCalendar = () => {
       state.Tcalendar = new Calendar(state.fullcalendar, {
@@ -142,6 +145,8 @@ export default {
               state.currentInfoList.push(item);
             }
           });
+          // 更新日期标题
+          updateCurrentDateTitle(date);
         },
         select: function (info) {
           // 视图选择日期触发
@@ -214,21 +219,50 @@ export default {
       })
     }
 
-    // 更新为当月1号的事项
+    // 更新当前日期标题
+    const updateCurrentDateTitle = (dateStr) => {
+      const date = dayjs(dateStr)
+      const today = dayjs()
+      
+      if (date.format('YYYY-MM-DD') === today.format('YYYY-MM-DD')) {
+        state.currentDateTitle = '今日事项 (' + date.format('MM月DD日') + ')'
+      } else {
+        state.currentDateTitle = date.format('YYYY年MM月DD日') + ' 事项'
+      }
+    }
+
+    // 更新为合适的日期事项：当月显示今天，其他月份显示1号
     const updateFirstDayEvents = () => {
       // 获取当前视图的年月
       const currentStart = state.Tcalendar.view.currentStart
-      const year = currentStart.getFullYear()
-      const month = String(currentStart.getMonth() + 1).padStart(2, '0')
-      const firstDay = `${year}-${month}-01`
+      const viewYear = currentStart.getFullYear()
+      const viewMonth = currentStart.getMonth() + 1
       
-      // 筛选1号的事项
+      // 获取今天的年月
+      const today = new Date()
+      const todayYear = today.getFullYear()
+      const todayMonth = today.getMonth() + 1
+      
+      let targetDate
+      
+      // 如果是当前月份，显示今天的数据；否则显示1号的数据
+      if (viewYear === todayYear && viewMonth === todayMonth) {
+        targetDate = dayjs().format('YYYY-MM-DD')
+      } else {
+        const month = String(viewMonth).padStart(2, '0')
+        targetDate = `${viewYear}-${month}-01`
+      }
+      
+      // 筛选目标日期的事项
       state.currentInfoList = []
       state.infoList.forEach(item => {
-        if(firstDay === item.start){
+        if(targetDate === item.start){
           state.currentInfoList.push(item)
         }
       })
+      
+      // 更新日期标题
+      updateCurrentDateTitle(targetDate)
     }
 
     const enterDetails = (info) => {
@@ -314,13 +348,15 @@ const handleClick = (info) => {
 }
 // 拖拽触发
 const handleSelectDate = (info) => {
-          const selectDate= info.startStr
-          state.currentInfoList=[]
-          state.infoList.forEach(item => {
-            if(selectDate==item.start){
-              state.currentInfoList.push(item)
-            }
-          })
+  const selectDate = info.startStr
+  state.currentInfoList = []
+  state.infoList.forEach(item => {
+    if(selectDate == item.start){
+      state.currentInfoList.push(item)
+    }
+  })
+  // 更新日期标题
+  updateCurrentDateTitle(selectDate)
 }
 
     return {
@@ -334,20 +370,31 @@ const handleSelectDate = (info) => {
       getCalendarList,
       getEventColor,
       getEventIcon,
-      updateFirstDayEvents
+      updateFirstDayEvents,
+      updateCurrentDateTitle
     }
   }
 }
 </script>
 <style lang="scss" scoped>
+page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: #f5f7fa;
+  min-height: 100%;
+  height: auto;
+}
+
 .calendar-container {
-  min-height: 100vh;
   background: #f5f7fa;
+  display: flex;
+  flex-direction: column;
 }
 
 .calendar-header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 24rpx 32rpx;
+  padding: 16rpx 32rpx;
   box-shadow: 0 2rpx 12rpx rgba(102, 126, 234, 0.3);
 }
 
@@ -396,10 +443,11 @@ const handleSelectDate = (info) => {
 .calendar-wrapper {
   padding: 12rpx;
   background: #ffffff;
-  margin: 16rpx;
+  margin: 12rpx 16rpx 0;
   border-radius: 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
   overflow: visible;
+  flex-shrink: 0;
 }
 
 .calendar-view {
@@ -408,11 +456,32 @@ const handleSelectDate = (info) => {
 }
 
 .events-section {
-  margin: 16rpx;
+  flex: 1;
+  margin: 12rpx 16rpx 16rpx;
   background: #ffffff;
   border-radius: 16rpx;
-  padding: 24rpx 16rpx 16rpx;
+  padding: 20rpx 16rpx 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.events-list {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0;
+  
+  /* 隐藏滚动条 */
+  &::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+  }
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
 }
 
 .section-title {
@@ -472,14 +541,11 @@ const handleSelectDate = (info) => {
 
 .event-content {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4rpx;
   min-width: 0;
 }
 
 .event-title {
-  font-size: 22rpx;
+  font-size: 26rpx;
   font-weight: 500;
   color: #333;
   overflow: hidden;
@@ -487,11 +553,6 @@ const handleSelectDate = (info) => {
   white-space: nowrap;
 }
 
-.event-time {
-  font-size: 20rpx;
-  color: #999;
-}
-
 .empty-state {
   display: flex;
   flex-direction: column;
diff --git a/src/pages/login.vue b/src/pages/login.vue
index ff96e0b..8b9f1c1 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,41 +1,57 @@
 <template>
   <view class="normal-login-container">
-    <view class="logo-content align-center justify-center flex">
-      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
-      </image>
+    <view class="background-decoration"></view>
+    
+    <view class="logo-content">
+      <view class="logo-wrapper">
+        <image class="logo-image" :src="globalConfig.appInfo.logo" mode="aspectFit"></image>
+      </view>
       <text class="title">智聪记账管理平台</text>
+      <text class="subtitle">专业的财务管理工具</text>
     </view>
+    
     <view class="login-form-content">
-      <view class="input-item flex align-center">
-        <view class="iconfont icon-user icon"></view>
-        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
-      </view>
-      <view class="input-item flex align-center">
-        <view class="iconfont icon-password icon"></view>
-        <input v-model="loginForm.password" type="password" class="input"  placeholder="请输入密码" maxlength="20" />
-      </view>
-      <view class="flex align-center" style="margin-left: 5px;">
-        <up-checkbox
-        :customStyle="{marginBottom: '8px'}"
-        label="记住密码"
-        name="agree"
-        usedAlone
-        @change="rememberMeChange()"
-        v-model:checked="rememberMe"
-    >
-    </up-checkbox>
-      </view>
-      <view class="action-btn">
-        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
+      <view class="form-card">
+        <view class="input-item">
+          <view class="input-icon">
+            <uni-icons type="person" size="20" color="#667eea"></uni-icons>
+          </view>
+          <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
+        </view>
+        
+        <view class="input-item">
+          <view class="input-icon">
+            <uni-icons type="locked" size="20" color="#667eea"></uni-icons>
+          </view>
+          <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
+        </view>
+        
+        <view class="remember-section">
+          <up-checkbox
+            :customStyle="{marginBottom: '8px'}"
+            label="记住密码"
+            name="agree"
+            usedAlone
+            @change="rememberMeChange()"
+            v-model:checked="rememberMe"
+          >
+          </up-checkbox>
+        </view>
+        
+        <view class="action-btn">
+          <button @click="handleLogin" class="login-btn">
+            <text class="btn-text">登录</text>
+          </button>
+        </view>
       </view>
     </view>
 
-    <view class="xieyi text-center">
-      <text @click="handleRegister" class="text-blue">立即注册 </text>
-      <text class="text-grey1">&nbsp;&nbsp;</text>
-      <text @click="handleWebsite" class="text-blue">官方网站</text>
-      <text class="text-grey1">&nbsp;&nbsp;</text>
-      <text @click="handleUserAgrement" class="text-blue">用户服务协议</text>
+    <view class="footer-links">
+      <text @click="handleRegister" class="link-item">立即注册</text>
+      <text class="separator">·</text>
+      <text @click="handleWebsite" class="link-item">官方网站</text>
+      <text class="separator">·</text>
+      <text @click="handleUserAgrement" class="link-item">服务协议</text>
     </view>
   </view>
 </template>
@@ -162,78 +178,177 @@ function handleUserAgrement() {
 getCode();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 page {
-  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100%;
+  height: auto;
 }
 
 .normal-login-container {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  
+  .background-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
+    pointer-events: none;
+  }
 
   .logo-content {
     width: 100%;
-    font-size: 21px;
     text-align: center;
-    padding-top: 15%;
-
-    image {
-      border-radius: 4px;
+    padding-top: 120rpx;
+    position: relative;
+    z-index: 1;
+    
+    .logo-wrapper {
+      display: inline-block;
+      margin-bottom: 32rpx;
+      
+      .logo-image {
+        width: 140rpx;
+        height: 140rpx;
+        border-radius: 28rpx;
+        box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
+        background: #ffffff;
+        padding: 20rpx;
+      }
     }
 
     .title {
-      margin-left: 10px;
+      display: block;
+      font-size: 48rpx;
+      font-weight: 700;
+      color: #ffffff;
+      margin-bottom: 12rpx;
+    }
+    
+    .subtitle {
+      display: block;
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.8);
     }
   }
 
   .login-form-content {
-    text-align: center;
-    margin: 20px auto;
-    margin-top: 15%;
-    width: 80%;
+    flex: 1;
+    margin-top: 80rpx;
+    padding: 0 48rpx;
+    position: relative;
+    z-index: 1;
+    
+    .form-card {
+      background: #ffffff;
+      border-radius: 32rpx;
+      padding: 48rpx 40rpx;
+      box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
+    }
 
     .input-item {
-      margin: 20px auto;
-      background-color: #f5f6f7;
-      height: 45px;
-      border-radius: 20px;
+      margin-bottom: 32rpx;
+      background-color: #f5f7fa;
+      height: 96rpx;
+      border-radius: 48rpx;
+      display: flex;
+      align-items: center;
+      padding: 0 32rpx;
+      transition: all 0.3s ease;
+      
+      &:focus-within {
+        background-color: #eff1f5;
+        box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
+      }
 
-      .icon {
-        font-size: 38rpx;
-        margin-left: 10px;
-        color: #999;
+      .input-icon {
+        margin-right: 20rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
       .input {
+        flex: 1;
+        font-size: 28rpx;
+        color: #303133;
+        
+        &::placeholder {
+          color: #c0c4cc;
+        }
+      }
+    }
+    
+    .remember-section {
+      margin-bottom: 40rpx;
+      padding-left: 8rpx;
+    }
+
+    .action-btn {
+      margin-top: 48rpx;
+      
+      .login-btn {
         width: 100%;
-        font-size: 14px;
-        line-height: 20px;
-        text-align: left;
-        padding-left: 15px;
+        height: 96rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 48rpx;
+        border: none;
+        box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s ease;
+        
+        &::after {
+          border: none;
+        }
+        
+        &:active {
+          transform: scale(0.98);
+          box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+        }
+        
+        .btn-text {
+          color: #ffffff;
+          font-size: 32rpx;
+          font-weight: 600;
+        }
       }
-
     }
+  }
 
-    .login-btn {
-      margin-top: 40px;
-      height: 45px;
-    }
-
-    .xieyi {
-      color: #333;
-      margin-top: 20px;
-    }
-
-    .login-code {
-      height: 38px;
-      float: right;
-
-      .login-code-img {
-        height: 38px;
-        position: absolute;
-        margin-left: 10px;
-        width: 200rpx;
+  .footer-links {
+    text-align: center;
+    padding: 60rpx 0 80rpx;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16rpx;
+    
+    .link-item {
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 26rpx;
+      transition: all 0.3s ease;
+      
+      &:active {
+        opacity: 0.7;
       }
     }
+    
+    .separator {
+      color: rgba(255, 255, 255, 0.5);
+      font-size: 26rpx;
+    }
   }
 }
 </style>
diff --git a/src/pages/mine.vue b/src/pages/mine.vue
index 740cc90..d885c30 100644
--- a/src/pages/mine.vue
+++ b/src/pages/mine.vue
@@ -1,15 +1,15 @@
 <template>
-  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
+  <view class="mine-container">
     <!--顶部个人信息栏-->
     <view class="header-section">
       <view class="header-content">
         <view class="user-section">
-          <view class="avatar-wrapper" @click="handleToAvatar">
-            <view v-if="!avatar" class="avatar-placeholder">
-              <uni-icons type="person-filled" size="40" color="#ffffff"></uni-icons>
+          <view class="avatar-wrapper">
+            <view class="avatar-gradient">
+              <view class="avatar-inner">
+                <uni-icons type="person-filled" size="48" color="#ffffff"></uni-icons>
+              </view>
             </view>
-            <image v-if="avatar" :src="avatar" class="user-avatar" mode="aspectFill"></image>
-            <view class="avatar-badge"></view>
           </view>
           <view class="user-details">
             <view v-if="!name" @click="handleToLogin" class="login-prompt">
@@ -24,7 +24,7 @@
           </view>
         </view>
         <view @click="handleToInfo" class="settings-btn">
-          <uni-icons type="gear-filled" size="24" color="#ffffff"></uni-icons>
+          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
       </view>
     </view>
@@ -33,27 +33,27 @@
       <view class="quick-actions">
         <view class="action-card" @click="handleJiaoLiuQun">
           <view class="action-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
-            <uni-icons type="chat-filled" size="24" color="#ffffff"></uni-icons>
+            <uni-icons type="chatboxes" size="24" color="#ffffff"></uni-icons>
           </view>
-          <text class="action-text">官方公众号</text>
+          <text class="action-text">交流社区</text>
         </view>
         <view class="action-card" @click="handleService">
           <view class="action-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
-            <uni-icons type="email-filled" size="24" color="#ffffff"></uni-icons>
+            <uni-icons type="contact" size="24" color="#ffffff"></uni-icons>
           </view>
-          <text class="action-text">在线客服</text>
+          <text class="action-text">联系客服</text>
         </view>
         <view class="action-card" @click="handleBuilding">
           <view class="action-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
-            <uni-icons type="chatbubble-filled" size="24" color="#ffffff"></uni-icons>
+            <uni-icons type="compose" size="24" color="#ffffff"></uni-icons>
           </view>
-          <text class="action-text">反馈社区</text>
+          <text class="action-text">意见反馈</text>
         </view>
         <view class="action-card" @click="handleUs">
           <view class="action-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
-            <uni-icons type="heart-filled" size="24" color="#ffffff"></uni-icons>
+            <uni-icons type="star" size="24" color="#ffffff"></uni-icons>
           </view>
-          <text class="action-text">点赞我们</text>
+          <text class="action-text">给个好评</text>
         </view>
       </view>
 
@@ -134,16 +134,7 @@ const userStore = useUserStore()
 const name = userStore.name;
 const userId = computed(() => userStore.userId || '');
 const version = config.appInfo.version;
-const baseUrl = config.baseUrl;
 
-const avatar = computed(() => {
-  if (!userStore.avatar) return '';
-  // 如果头像路径已经是完整URL，直接返回
-  if (userStore.avatar.startsWith('http')) return userStore.avatar;
-  // 否则拼接baseUrl
-  return baseUrl + userStore.avatar;
-});
-const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
 const popup = ref(null);
 function handleToInfo() {
   uni.navigateTo({
@@ -165,11 +156,6 @@ function handleToLogin() {
     url: '/pages/login'
   });
 };
-function handleToAvatar() {
-  uni.navigateTo({
-    url: '/pages_mine/pages/avatar/index'
-  });
-};
 function handleLogout() {
   popup.value.open();
 };
@@ -231,19 +217,24 @@ function handleUs() {
 
 <style lang="scss">
 page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
   background-color: #f5f7fa;
+  min-height: 100%;
+  height: auto;
 }
 
 .mine-container {
   width: 100%;
-  min-height: 100vh;
   background-color: #f5f7fa;
 
   .header-section {
-    padding: 60rpx 32rpx 120rpx;
+    padding: 40rpx 32rpx 80rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     position: relative;
     overflow: hidden;
+    flex-shrink: 0;
     
     &::before {
       content: '';
@@ -261,7 +252,7 @@ page {
       z-index: 1;
       display: flex;
       justify-content: space-between;
-      align-items: flex-start;
+      align-items: center;
       
       .user-section {
         display: flex;
@@ -272,35 +263,45 @@ page {
           position: relative;
           margin-right: 24rpx;
           
-          .avatar-placeholder {
+          .avatar-gradient {
             width: 120rpx;
             height: 120rpx;
             border-radius: 60rpx;
-            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
-            border: 4rpx solid rgba(255, 255, 255, 0.5);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             display: flex;
             align-items: center;
             justify-content: center;
-            box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
-          }
-          
-          .user-avatar {
-            width: 120rpx;
-            height: 120rpx;
-            border-radius: 60rpx;
-            border: 4rpx solid rgba(255, 255, 255, 0.5);
-            box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
-          }
-          
-          .avatar-badge {
-            position: absolute;
-            bottom: 4rpx;
-            right: 4rpx;
-            width: 24rpx;
-            height: 24rpx;
-            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-            border-radius: 12rpx;
-            border: 3rpx solid #ffffff;
+            box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.4);
+            position: relative;
+            overflow: hidden;
+            
+            &::before {
+              content: '';
+              position: absolute;
+              top: -50%;
+              left: -50%;
+              width: 200%;
+              height: 200%;
+              background: conic-gradient(
+                from 0deg,
+                transparent 0deg,
+                rgba(255, 255, 255, 0.3) 90deg,
+                transparent 180deg
+              );
+              animation: rotate 3s linear infinite;
+            }
+            
+            .avatar-inner {
+              width: 112rpx;
+              height: 112rpx;
+              border-radius: 56rpx;
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              position: relative;
+              z-index: 1;
+            }
           }
         }
         
@@ -360,10 +361,12 @@ page {
   }
 
   .content-section {
-    margin-top: -80rpx;
-    padding: 0 32rpx 32rpx;
+    margin-top: -60rpx;
+    padding: 60rpx 32rpx 32rpx;
     position: relative;
     z-index: 2;
+    flex: 1;
+    overflow: hidden;
 
     .quick-actions {
       background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
@@ -487,4 +490,22 @@ page {
     transform: scale(1.1) rotate(180deg);
   }
 }
+
+@keyframes shimmer {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/src/pages/register.vue b/src/pages/register.vue
index 33477a3..3ca797a 100644
--- a/src/pages/register.vue
+++ b/src/pages/register.vue
@@ -1,21 +1,60 @@
 <template>
-  <view class="pwd-retrieve-container">
-    <uni-forms ref="form" :value="user" labelWidth="80px">
-      <uni-forms-item name="username" required label="账号">
-        <uni-easyinput  v-model="user.username" placeholder="请输入账号" />
-      </uni-forms-item>
-      <uni-forms-item name="password" required label="密码">
-        <uni-easyinput type="password" v-model="user.password" placeholder="请输入密码" />
-      </uni-forms-item>
-      <uni-forms-item name="confirmPassword" required label="确认密码">
-        <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认密码" />
-      </uni-forms-item>
-      <button type="primary" @click="handleRegister">用户注册</button>
-    </uni-forms>
-    <u-toast ref="uToast"></u-toast>
-    <view class="xieyi text-center"><br>
-      <text class="text-grey1">Copyright © 2024 qdintc All Rights Reserved.</text>
+  <view class="register-container">
+    <view class="background-decoration"></view>
+    
+    <view class="header-section">
+      <text class="page-title">用户注册</text>
+      <text class="page-subtitle">创建你的账号</text>
     </view>
+    
+    <view class="form-section">
+      <view class="form-card">
+        <uni-forms ref="form" :value="user" labelWidth="80px">
+          <uni-forms-item name="username" required label="账号">
+            <uni-easyinput v-model="user.username" placeholder="请输入账号" />
+          </uni-forms-item>
+          <uni-forms-item name="password" required label="密码">
+            <uni-easyinput type="password" v-model="user.password" placeholder="请输入密码" />
+          </uni-forms-item>
+          <uni-forms-item name="confirmPassword" required label="确认密码">
+            <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认密码" />
+          </uni-forms-item>
+        </uni-forms>
+        
+        <view class="tips-card">
+          <view class="tips-header">
+            <uni-icons type="info" size="16" color="#667eea"></uni-icons>
+            <text class="tips-title">密码要求</text>
+          </view>
+          <view class="tips-list">
+            <view class="tip-item">
+              <text class="tip-dot">•</text>
+              <text class="tip-text">账号长度为 6-20 个字符</text>
+            </view>
+            <view class="tip-item">
+              <text class="tip-dot">•</text>
+              <text class="tip-text">密码长度为 6-20 个字符</text>
+            </view>
+            <view class="tip-item">
+              <text class="tip-dot">•</text>
+              <text class="tip-text">两次密码输入必须一致</text>
+            </view>
+          </view>
+        </view>
+        
+        <view class="action-btn">
+          <button class="register-btn" @click="handleRegister">
+            <text class="btn-text">立即注册</text>
+          </button>
+        </view>
+      </view>
+    </view>
+    
+    <view class="footer-section">
+      <text class="copyright-text">Copyright © 2024 qdintc All Rights Reserved.</text>
+    </view>
+    
+    <u-toast ref="uToast"></u-toast>
   </view>
 </template>
 
@@ -92,13 +131,167 @@ uni.navigateTo({ url: `/pages/login` })
   }
 </script>
 
-<style lang="scss">
-  page {
-    background-color: #ffffff;
-  }
+<style lang="scss" scoped>
+page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100%;
+  height: auto;
+}
 
-  .pwd-retrieve-container {
-    padding-top: 36rpx;
-    padding: 15px;
+.register-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  
+  .background-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
+    pointer-events: none;
   }
+  
+  .header-section {
+    padding: 100rpx 48rpx 60rpx;
+    position: relative;
+    z-index: 1;
+    
+    .page-title {
+      display: block;
+      font-size: 48rpx;
+      font-weight: 700;
+      color: #ffffff;
+      margin-bottom: 12rpx;
+    }
+    
+    .page-subtitle {
+      display: block;
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.8);
+    }
+  }
+  
+  .form-section {
+    flex: 1;
+    padding: 0 48rpx 32rpx;
+    position: relative;
+    z-index: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+    
+    /* 隐藏滚动条 */
+    &::-webkit-scrollbar {
+      display: none !important;
+      width: 0 !important;
+      height: 0 !important;
+    }
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+    
+    .form-card {
+      background: #ffffff;
+      border-radius: 32rpx;
+      padding: 48rpx 40rpx;
+      box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
+    }
+  }
+  
+  .tips-card {
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
+    border-radius: 20rpx;
+    padding: 24rpx;
+    margin-top: 32rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.2);
+  }
+  
+  .tips-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16rpx;
+    
+    .tips-title {
+      color: #667eea;
+      font-size: 26rpx;
+      font-weight: 600;
+      margin-left: 8rpx;
+    }
+  }
+  
+  .tips-list {
+    .tip-item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 8rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .tip-dot {
+        color: #667eea;
+        font-size: 24rpx;
+        margin-right: 8rpx;
+        line-height: 36rpx;
+      }
+      
+      .tip-text {
+        flex: 1;
+        color: #606266;
+        font-size: 24rpx;
+        line-height: 36rpx;
+      }
+    }
+  }
+  
+  .action-btn {
+    margin-top: 48rpx;
+    
+    .register-btn {
+      width: 100%;
+      height: 96rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 48rpx;
+      border: none;
+      box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.4);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s ease;
+      
+      &::after {
+        border: none;
+      }
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+      }
+      
+      .btn-text {
+        color: #ffffff;
+        font-size: 32rpx;
+        font-weight: 600;
+      }
+    }
+  }
+  
+  .footer-section {
+    padding: 60rpx 48rpx 80rpx;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+    
+    .copyright-text {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 24rpx;
+    }
+  }
+}
 </style>
diff --git a/src/pages/work/accounts/accountDealRecord/addEdit.vue b/src/pages/work/accounts/accountDealRecord/addEdit.vue
index 7427d02..1c64cf2 100644
--- a/src/pages/work/accounts/accountDealRecord/addEdit.vue
+++ b/src/pages/work/accounts/accountDealRecord/addEdit.vue
@@ -1,13 +1,14 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
-			title="账户交易记录"
+			leftIconColor="#ffffff"
+			:title="title"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
       <view class="section">
-        <view class="section-title">{{ title}}</view>
         <view class="form-view">
           <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
             :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -55,7 +56,8 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <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>
           </view>
         </view>
       </view>
@@ -479,27 +481,24 @@ getDicts('deal_category').then(result => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 360rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
-  
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
-      }
+.container {
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
+.section {
+  margin: 24rpx;
+  padding: 32rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+
+  .form-view {
+    padding: 0;
+
+    .form-btn {
+      padding-top: 40rpx;
     }
   }
+}
   </style>
\ No newline at end of file
diff --git a/src/pages/work/accounts/accountDealRecord/details.vue b/src/pages/work/accounts/accountDealRecord/details.vue
index 07c0882..6681b5f 100644
--- a/src/pages/work/accounts/accountDealRecord/details.vue
+++ b/src/pages/work/accounts/accountDealRecord/details.vue
@@ -1,25 +1,59 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="账户交易记录详情"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
       <view class="section">
-        <!-- <view class="section-title">{{ detailInfo.name }}</view> -->
-  <u-cell-group>
-        <u-cell title="账户名称:" titleStyle="font-weight:bolder" :value="detailInfo.accountName"></u-cell>
-        <u-cell title="账户类型:" titleStyle="font-weight:bolder" :value="detailInfo.type"></u-cell>
-        <u-cell title="交易类型:" titleStyle="font-weight:bolder" :value="detailInfo.dealType"></u-cell>
-        <u-cell title="交易类别:" titleStyle="font-weight:bolder" :value="detailInfo.dealCategory"></u-cell>
-        <u-cell v-show="detailInfo.childCategory!=detailInfo.childCategory" title="交易子类别:" titleStyle="font-weight:bolder" :value="detailInfo.childCategoryName"></u-cell>
-        <u-cell title="交易金额:" titleStyle="font-weight:bolder" :value="detailInfo.amount"></u-cell>
-        <u-cell title="当前余额:" titleStyle="font-weight:bolder" :value="detailInfo.currentBalance"></u-cell>
-        <u-cell title="交易时间:" titleStyle="font-weight:bolder" :value="detailInfo.createTime"></u-cell>
-        <u-cell title="备注:" titleStyle="font-weight:bolder" :value="detailInfo.remark" center> </u-cell>
-       
-      </u-cell-group>
+        <view class="header-card">
+          <view class="header-icon">
+            <uni-icons type="wallet-filled" size="28" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="account-name">{{ detailInfo.accountName }}</text>
+            <text class="account-type">{{ detailInfo.type }}</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>
+        </view>
+        
+        <view class="info-card">
+          <view class="card-title">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>交易信息</text>
+          </view>
+          
+          <view class="detail-row">
+            <text class="detail-label">交易时间</text>
+            <text class="detail-value">{{ detailInfo.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>
+        </view>
       </view>
    
       <u-toast ref="uToast"></u-toast>
@@ -69,40 +103,160 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+.container {
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
+.section {
+  margin: 24rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.header-card {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  padding: 32rpx;
+  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;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.25);
+    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;
+      color: #ffffff;
+      line-height: 1.3;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
-  
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
+
+    .account-type {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 400;
     }
-  
-    .img-con {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+  }
+
+  .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;
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+
+    .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;
       }
     }
   }
+}
+
+.info-card {
+  padding: 32rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+
+  .card-title {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    padding-bottom: 24rpx;
+    margin-bottom: 24rpx;
+    border-bottom: 2rpx solid #f0f0f0;
+
+    text {
+      font-size: 30rpx;
+      font-weight: 700;
+      color: #333;
+    }
+  }
+
+  .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;
+    }
+
+    .detail-label {
+      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
diff --git a/src/pages/work/accounts/accountDealRecord/list.vue b/src/pages/work/accounts/accountDealRecord/list.vue
index 0c615b1..627efe5 100644
--- a/src/pages/work/accounts/accountDealRecord/list.vue
+++ b/src/pages/work/accounts/accountDealRecord/list.vue
@@ -5,8 +5,10 @@
           <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择记账账户" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-        <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-        labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
        </view>
        </u-sticky>
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
@@ -14,8 +16,9 @@
         <u-input v-model="queryParams.time" border="false" type="select" readonly placeholder="请选择交易时间" suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <u-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` }">
@@ -64,8 +67,10 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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"
@@ -83,52 +88,63 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.accountName+'交易金额：'+item.amount" size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="date-row">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="card-date">{{ item.createTime }}</text>
+            </view>
+            <view class="info-row">
+              <text class="card-name">{{ item.accountName }}</text>
+              <view class="profit-tag" :class="item.dealType === '1' ? 'income' : 'expense'">
+                <text>{{ dictStr(item.dealType, dealTypeList) }}</text>
+              </view>
+              <text class="card-amount" :class="item.dealType === '1' ? 'income' : 'expense'"><text class="amount-value">{{ item.amount }}</text>元</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">记账类型：</text>
-            <text class="row-value">{{ dictStr(item.type, accountTypeList) }}</text>
+          
+          <view class="card-body" @click.stop>
+            <view class="info-grid">
+              <view class="info-item">
+                <text class="info-label">记账类型</text>
+                <text class="info-value">{{ dictStr(item.type, accountTypeList) }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">当前余额</text>
+                <text class="info-value">{{ item.currentBalance }}元</text>
+              </view>
+            </view>
+            <view class="info-grid">
+              <view class="info-item">
+                <text class="info-label">交易类别</text>
+                <text class="info-value">{{ dictStr(item.dealCategory, dealCategoryList) }}</text>
+              </view>
+              <view class="info-item" v-if="item.childCategory && item.childCategory != item.dealCategory">
+                <text class="info-label">交易子类别</text>
+                <text class="info-value">{{ item.childCategoryName }}</text>
+              </view>
+            </view>
+            <view class="info-full" v-if="item.remark">
+              <text class="info-label">备注</text>
+              <text class="info-remark">{{ item.remark }}</text>
+            </view>
           </view>
-          <view class="item-row" v-show="item.type === '1' && getAccountDebitType(item.accountId)">
-            <text class="row-label">储蓄账户类型：</text>
-            <text class="row-value">{{ dictStr(getAccountDebitType(item.accountId), debitTypeList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易金额：</text>
-            <text class="row-value">{{ item.amount }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">当前余额：</text>
-            <text class="row-value">{{ item.currentBalance }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易类型：</text>
-            <text class="row-value">{{ dictStr(item.dealType, dealTypeList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易类别：</text>
-            <text class="row-value">{{ dictStr(item.dealCategory, dealCategoryList) }}</text>
-          </view>
-          <view class="item-row" v-show="item.childCategory!=item.dealCategory">
-            <text class="row-label">交易子类别：</text>
-            <text class="row-value">{{ item.childCategoryName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <!-- <view class="btn filling" @click="enterDetails(item)">查看</view> -->
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleCopy(item)">复制</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" @click="handleCopy(item)">
+              <uni-icons type="copy" size="16" color="#faad14"></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>
@@ -138,8 +154,19 @@
     </u-list>
     <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
       @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
-      <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="typeNameCodeAvailableLimit" @cancel="handleAccountCancel"
-        @confirm="handleAccountConfirm"></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showAccount" 
+        :columns="accountList" 
+        keyName="typeNameCodeAvailableLimit" 
+        @cancel="handleAccountCancel"
+        @confirm="handleAccountConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择记账账户"
+        ></u-picker>
   </view>
   <!-- 悬停按钮返回工作台-->
   <suspend></suspend>
@@ -420,12 +447,38 @@ function selectAccountType(item) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -434,16 +487,18 @@ function selectAccountType(item) {
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -464,114 +519,224 @@ function selectAccountType(item) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    flex-direction: column;
+    gap: 20rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .date-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .card-date {
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
+    }
+
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+
+    .card-name {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .profit-tag {
+      padding: 6rpx 16rpx;
+      border-radius: 12rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      line-height: 1;
+      flex-shrink: 0;
+      
+      &.income {
+        background: rgba(82, 196, 26, 0.25);
+        color: #52c41a;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+      
+      &.expense {
+        background: rgba(245, 87, 108, 0.25);
+        color: #f5576c;
       }
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
+    .card-amount {
+      font-size: 24rpx;
+      font-weight: 500;
+      line-height: 1.3;
+      white-space: nowrap;
+      flex-shrink: 0;
+      
+      &.income {
+        color: #52c41a;
       }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
+      
+      &.expense {
+        color: #f5576c;
       }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+      
+      .amount-value {
+        font-size: 40rpx;
+        font-weight: 700;
+        margin-right: 4rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .info-grid {
+    display: flex;
+    gap: 16rpx;
+  }
+
+  .info-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    min-width: 0;
+
+    .info-label {
+      font-size: 22rpx;
+      color: #999;
+      font-weight: 400;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .info-value {
+      font-size: 26rpx;
+      color: #333;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .info-full {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    padding-top: 8rpx;
+    border-top: 1rpx solid #f0f0f0;
+
+    .info-label {
+      font-size: 22rpx;
+      color: #999;
+      font-weight: 400;
+    }
+
+    .info-remark {
+      font-size: 26rpx;
+      color: #666;
+      line-height: 1.5;
+      word-break: break-all;
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-copy {
+      background: rgba(250, 173, 20, 0.1);
+      color: #faad14;
+      border: 1rpx solid rgba(250, 173, 20, 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/accounts/accounts/commonList.vue b/src/pages/work/accounts/accounts/commonList.vue
index 6314e3d..f2feec8 100644
--- a/src/pages/work/accounts/accounts/commonList.vue
+++ b/src/pages/work/accounts/accounts/commonList.vue
@@ -33,22 +33,40 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-            :text="dictStr(item.type, accountType)+'-'+item.name+'：'+item.availableLimit" size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-left">
+              <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>
+            </view>
+            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, accountStatus))">
+              <text>{{ dictStr(item.status, accountStatus) }}</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">账号：</text>
-            <text class="row-value">{{ item.code }}</text>
-          </view>
-          <view class="item-row" v-if="item.type=='1'">
-            <text class="row-label">储蓄账户类型：</text>
-            <text class="row-value">{{ dictStr(item.debitType, debitType) }}</text>
-          </view>
-          <view class="item-row" >
-            <text class="row-label">账户状态：</text>
-            <text class="row-value">{{ dictStr(item.status, accountStatus) }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">账户类型</text>
+                <text class="info-value">{{ dictStr(item.type, accountType) }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">可用额度</text>
+                <text class="info-value orange">{{ item.availableLimit }}</text>
+              </view>
+            </view>
+            
+            <view class="info-row" v-if="item.type === '1'">
+              <view class="info-item">
+                <text class="info-label">储蓄账户类型</text>
+                <text class="info-value">{{ dictStr(item.debitType, debitType) }}</text>
+              </view>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -242,6 +260,16 @@ function selectType(item) {
       uni.navigateTo({ url: `/pages/work/heartJourney/addEdit` })
       isShow.value = true
     }
+    function getStatusClass(status, statusText) {
+      if (statusText && statusText.includes('正常')) {
+        return 'status-normal'
+      }
+      if (statusText && (statusText.includes('暂停') || statusText.includes('销户'))) {
+        return 'status-default'
+      }
+      return 'status-default'
+    }
+    
     function handleDelete(item) {
       uni.showModal({
         	title: '提示',
@@ -337,98 +365,124 @@ function selectType(item) {
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
+  padding: 0;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
+    padding: 20rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+      flex: 1;
+      min-width: 0;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .account-icon {
+      width: 52rpx;
+      height: 52rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
+    .header-info {
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      flex: 1;
+      min-width: 0;
+    }
 
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
+    .account-name {
+      font-size: 30rpx;
+      font-weight: 600;
+      color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
+    .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;
+      
+      text {
+        display: block;
       }
+    }
 
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
+    .status-normal {
+      background: rgba(255, 255, 255, 0.25);
+      color: #ffffff;
+    }
 
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
+    .status-default {
+      background: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.8);
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
-
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
-    }
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
   }
 
-  .operate {
+  .info-row {
     display: flex;
-    justify-content: flex-end;
+    gap: 24rpx;
+    margin-bottom: 20rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
-    }
+    .info-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      min-width: 0;
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+      .info-label {
+        font-size: 24rpx;
+        color: #999;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &.orange {
+          color: #ff6b00;
+          font-weight: 600;
+        }
+      }
     }
   }
+
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/work/accounts/accounts/details.vue b/src/pages/work/accounts/accounts/details.vue
index 6fdc4b6..03fd721 100644
--- a/src/pages/work/accounts/accounts/details.vue
+++ b/src/pages/work/accounts/accounts/details.vue
@@ -1,29 +1,91 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
-      <u-navbar
-			leftIconSize="40rpx"
-			leftIconColor="#333333"
-			title="记账账户详情"
-		>
-		</u-navbar>
-      <view class="section">
-        <u-cell-group>
-        <u-cell title="名称:" titleStyle="font-weight:bolder" :value="detailInfo.name"></u-cell>
-        <u-cell title="账户类型:" titleStyle="font-weight:bolder" :value="detailInfo.type"></u-cell>
-        <u-cell title="账号：" titleStyle="font-weight:bolder" center :value="detailInfo.code"> </u-cell>
-        <u-cell title="可用额度:" titleStyle="font-weight:bolder" center :value="detailInfo.availableLimit"> </u-cell>
-        <u-cell title="余额：" titleStyle="font-weight:bolder" center :value="detailInfo.balance"> </u-cell>
-        <u-cell title="信用卡额度:" v-if="detailInfo.type=='信用卡账户'" titleStyle="font-weight:bolder" center :value="detailInfo.creditLimit"> </u-cell>
-        <u-cell title="账单日:" v-if="detailInfo.type=='信用卡账户'" titleStyle="font-weight:bolder" center :value="detailInfo.billDateName"> </u-cell>
-        <u-cell title="还款日:" v-if="detailInfo.type=='信用卡账户'" titleStyle="font-weight:bolder" center :value="detailInfo.payDateName"> </u-cell>
-        <u-cell title="储蓄卡类型:" v-if="detailInfo.type=='储蓄卡账户'" titleStyle="font-weight:bolder" center :value="detailInfo.debitType"> </u-cell>
-        <u-cell title="账户状态:" titleStyle="font-weight:bolder" center :value="detailInfo.status"> </u-cell>
-        <u-cell title="备注:" titleStyle="font-weight:bolder" center :value="detailInfo.remark"> </u-cell>
-      </u-cell-group>
+  <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="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>
-      <u-toast ref="uToast"></u-toast>
+      <text class="account-name">{{ detailInfo.name }}</text>
+      <text class="account-type">{{ detailInfo.type }}</text>
     </view>
-  </template>
+
+    <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>
+        <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>
+      </view>
+      
+      <view v-if="detailInfo.type === '储蓄卡账户'">
+        <view class="detail-item">
+          <text class="detail-label">储蓄卡类型</text>
+          <text class="detail-value">{{ detailInfo.debitType }}</text>
+        </view>
+      </view>
+      
+      <view class="detail-item">
+        <text class="detail-label">账户状态</text>
+        <view :class="['status-badge', detailInfo.status === '暂停使用' ? 'status-suspended' : 'status-active']">
+          {{ detailInfo.status }}
+        </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>
+    
+    <u-toast ref="uToast"></u-toast>
+  </view>
+</template>
   
 <script setup>
 import { listAccounts, getAccounts, delAccounts, addAccounts, updateAccounts } from '@/api/invest/accounts'
@@ -69,40 +131,162 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-height: 100%;
+    height: auto;
+  }
+
+  .container {
+    background: #f5f7fa;
+    flex: 1;
+  }
+
+  .header-card {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+    padding: 48rpx 32rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+
+    .account-icon-wrapper {
+      margin-bottom: 24rpx;
     }
-  
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+
+    .account-icon {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.2);
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      align-items: center;
+      justify-content: center;
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+
+    .account-name {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: #ffffff;
+      margin-bottom: 8rpx;
+    }
+    
+    .account-type {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .info-section {
+    margin: 0 24rpx 24rpx;
+  }
+
+  .info-grid {
+    display: flex;
+    gap: 16rpx;
+
+    .grid-item {
+      flex: 1;
+      padding: 24rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      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;
+      }
+
+      .item-value {
+        font-size: 32rpx;
+        font-weight: 600;
+        color: #333;
+
+        &.highlight {
+          color: #ff6b00;
+        }
       }
     }
   }
+
+  .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;
+      font-size: 26rpx;
+      color: #666;
+      line-height: 1.8;
+    }
+  }
   </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 1070a77..4843305 100644
--- a/src/pages/work/accounts/accounts/list.vue
+++ b/src/pages/work/accounts/accounts/list.vue
@@ -2,13 +2,12 @@
   <view class="container">
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
       <view class="search-view">
-        <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择记账账户" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
-          <!-- <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon> -->
+        <u--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>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -24,8 +23,10 @@
               </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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>
           </view>
         </u-transition>
@@ -33,57 +34,66 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="dictStr(item.type, accountType)+'-'+item.name+'：可用'+item.availableLimit" size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-left">
+              <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>
+            </view>
+            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, accountStatus))">
+              <text>{{ dictStr(item.status, accountStatus) }}</text>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">账户类型：</text>
-            <text class="row-value">{{ dictStr(item.type, accountType) }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">账号：</text>
-            <text class="row-value">{{ item.code }}</text>
-          </view>
-          <!-- <view class="item-row">
-            <text class="row-label">可用额度：</text>
-            <text class="row-value">{{ item.availableLimit }}</text>
-          </view> -->
-         
-          <view class="item-row">
-            <text class="row-label">余额：</text>
-            <text class="row-value">{{ item.balance }}</text>
-          </view>
-          <view class="item-row" v-if="item.type=='2'">
-            <text class="row-label">信用卡额度：</text>
-            <text class="row-value">{{ item.creditLimit }}</text>
-          </view>
-          <view class="item-row" v-if="item.type=='2'">
-            <text class="row-label">账单日：</text>
-            <text class="row-value">{{ item.billDateName }}</text>
-          </view>
-          <view class="item-row" v-if="item.type=='2'">
-            <text class="row-label">还款日：</text>
-            <text class="row-value">{{ item.payDateName }}</text>
-          </view>
-          <view class="item-row" v-if="item.type=='1'">
-            <text class="row-label">储蓄卡类型：</text>
-            <text class="row-value">{{ dictStr(item.debitType, debitType) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">账户状态：</text>
-            <text class="row-value">{{ dictStr(item.status, accountStatus) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-
-          <view class="operate" >
-            <!-- <view class="btn filling" @click="enterDetails(item)">查看</view > -->
-               <!-- <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view> -->
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">账户类型</text>
+                <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>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">可用额度</text>
+                <text class="info-value">{{ item.availableLimit }}</text>
+              </view>
+              <view class="info-item" v-if="item.type === '1'">
+                <text class="info-label">储蓄卡类型</text>
+                <text class="info-value">{{ dictStr(item.debitType, debitType) }}</text>
+              </view>
+              <view class="info-item" v-if="item.type === '2'">
+                <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">
+                <text class="info-label">账单日</text>
+                <text class="info-value">{{ item.billDateName }}</text>
+              </view>
+              <view class="info-item">
+                <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">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -93,8 +103,19 @@
     </u-list>
     <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
       @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
-      <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="typeNameCodeAvailableLimit" @cancel="handleAccountCancel"
-        @confirm="handleAccountConfirm"></u-picker>
+    <u-picker 
+      itemHeight="88" 
+      :show="showAccount" 
+      :columns="accountList" 
+      keyName="typeNameCodeAvailableLimit" 
+      @cancel="handleAccountCancel"
+      @confirm="handleAccountConfirm"
+      :closeOnClickOverlay="true"
+      :defaultIndex="[0]"
+      cancelColor="#666666"
+      confirmColor="#667eea"
+      title="选择记账账户"
+      ></u-picker>
   </view>
   <!-- 悬停按钮返回工作台-->
   <suspend></suspend>
@@ -279,6 +300,16 @@ function selectType(item) {
       uni.navigateTo({ url: `/pages/work/heartJourney/addEdit` })
       isShow.value = true
     }
+    function getStatusClass(status, statusText) {
+      if (statusText && statusText.includes('正常')) {
+        return 'status-normal'
+      }
+      if (statusText && (statusText.includes('暂停') || statusText.includes('销户'))) {
+        return 'status-default'
+      }
+      return 'status-default'
+    }
+    
     function handleDelete(item) {
       uni.showModal({
         	title: '提示',
@@ -314,11 +345,15 @@ function selectType(item) {
   align-items: center;
   position: relative;
   margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
   }
 
   .filter-panel {
@@ -327,145 +362,202 @@ function selectType(item) {
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
+        }
       }
 
       .state-list {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
+        gap: 16rpx;
 
         .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
           text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
+          line-height: 68rpx;
           font-size: 28rpx;
-          color: #000000;
+          color: #666666;
+          transition: all 0.3s ease;
+          background: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+          
+          &:active {
+            transform: scale(0.95);
+          }
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
+  padding: 0;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
+    padding: 20rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+      flex: 1;
+      min-width: 0;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .account-icon {
+      width: 52rpx;
+      height: 52rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
+    .header-info {
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      flex: 1;
+      min-width: 0;
+    }
 
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
+    .account-name {
+      font-size: 30rpx;
+      font-weight: 600;
+      color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
+    .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;
+      
+      text {
+        display: block;
       }
+    }
 
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
+    .status-normal {
+      background: rgba(255, 255, 255, 0.25);
+      color: #ffffff;
+    }
 
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
+    .status-default {
+      background: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.8);
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
-
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
-    }
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
   }
 
-  .operate {
+  .info-row {
     display: flex;
-    justify-content: flex-end;
+    gap: 24rpx;
+    margin-bottom: 20rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
-    }
+    .info-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      min-width: 0;
+      
+      &.full-width {
+        flex: none;
+        width: 100%;
+      }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+      .info-label {
+        font-size: 24rpx;
+        color: #999;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &.orange {
+          color: #ff6b00;
+          font-weight: 600;
+        }
+      }
     }
   }
+
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/work/accounts/creditTransferRecord/addEdit.vue b/src/pages/work/accounts/creditTransferRecord/addEdit.vue
index 86c4b0c..4884dad 100644
--- a/src/pages/work/accounts/creditTransferRecord/addEdit.vue
+++ b/src/pages/work/accounts/creditTransferRecord/addEdit.vue
@@ -2,12 +2,13 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="信用卡还款"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
       <view class="section">
-        <view class="section-title">{{ title}}</view>
         <view class="form-view">
           <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
             :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -40,24 +41,57 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <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: 92rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
-      <u-picker itemHeight="88" :show="showDebitCard" :columns="debitCardList" keyName="nameCodeAvailableLimit" @cancel="handleDebitCardCancel"
-        @confirm="handleDebitCardConfirm"></u-picker>
-        <u-picker itemHeight="88" :show="showCreditCard" :columns="bankCardLendList" keyName="nameCodeAvailableLimit" @cancel="handleCreditCardCancel"
-        @confirm="handleCreditCardConfirm"></u-picker>
-        <u-picker itemHeight="88" :show="showDealType" :columns="dealTypeList" keyName="dictLabel" @cancel="handleDealTypeCancel"
-        @confirm="handleDealTypeConfirm"></u-picker>
-        <u-datetime-picker
+      <u-picker 
+        itemHeight="88" 
+        :show="showDebitCard" 
+        :columns="debitCardList" 
+        keyName="nameCodeAvailableLimit" 
+        @cancel="handleDebitCardCancel"
+        @confirm="handleDebitCardConfirm"
+        :closeOnClickOverlay="true"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择储蓄账户"
+      ></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showCreditCard" 
+        :columns="bankCardLendList" 
+        keyName="nameCodeAvailableLimit" 
+        @cancel="handleCreditCardCancel"
+        @confirm="handleCreditCardConfirm"
+        :closeOnClickOverlay="true"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择信用卡"
+      ></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showDealType" 
+        :columns="dealTypeList" 
+        keyName="dictLabel" 
+        @cancel="handleDealTypeCancel"
+        @confirm="handleDealTypeConfirm"
+        :closeOnClickOverlay="true"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择还款方式"
+      ></u-picker>
+      <u-datetime-picker
 			:show="datePickShow"
 			mode="datetime"
       ref="createTimeRef" 
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
+      confirmColor="#667eea"
+      cancelColor="#666666"
 		></u-datetime-picker>
     </view>
   </template>
@@ -250,26 +284,23 @@ function handleCreditCard() {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+    min-height: 100vh;
+  }
+  
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
+    padding: 32rpx;
     background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 360rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding-top: 20rpx;
   
       .form-btn {
-        padding-top: 20rpx;
+        padding-top: 32rpx;
       }
     }
   }
diff --git a/src/pages/work/accounts/creditTransferRecord/details.vue b/src/pages/work/accounts/creditTransferRecord/details.vue
index ebde864..1757067 100644
--- a/src/pages/work/accounts/creditTransferRecord/details.vue
+++ b/src/pages/work/accounts/creditTransferRecord/details.vue
@@ -2,20 +2,43 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="信用卡还款详情"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
       <view class="section">
-        <!-- <view class="section-title">{{ detailInfo.name }}</view> -->
-  <u-cell-group>
-        <u-cell title="名称:" titleStyle="font-weight:bolder" :value="detailInfo.name"></u-cell>
-        <u-cell title="储蓄账户:" titleStyle="font-weight:bolder" :value="detailInfo.outAccountName"></u-cell>
-        <u-cell title="信用卡:" titleStyle="font-weight:bolder" :value="detailInfo.inAccountName"></u-cell>
-        <u-cell title="还款时间:" titleStyle="font-weight:bolder" :value="detailInfo.createTime"></u-cell>
-        <u-cell title="还款金额:" titleStyle="font-weight:bolder" :value="detailInfo.amount"></u-cell>
-        <u-cell title="还款方式:" titleStyle="font-weight:bolder" :value="detailInfo.dealType"></u-cell>
-      </u-cell-group>
+        <view class="header-card">
+          <view class="header-icon">
+            <uni-icons type="wallet-filled" size="28" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.inAccountName }}</text>
+            <text class="type-text">{{ detailInfo.dealType }}</text>
+          </view>
+          <view class="amount-section">
+            <text class="amount-label">还款金额</text>
+            <text class="amount-value">{{ detailInfo.amount }}元</text>
+          </view>
+        </view>
+        
+        <view class="info-card">
+          <view class="card-title">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>还款信息</text>
+          </view>
+          
+          <view class="detail-row">
+            <text class="detail-label">储蓄账户</text>
+            <text class="detail-value">{{ detailInfo.outAccountName }}</text>
+          </view>
+          
+          <view class="detail-row">
+            <text class="detail-label">还款时间</text>
+            <text class="detail-value">{{ detailInfo.createTime }}</text>
+          </view>
+        </view>
       </view>
    
       <u-toast ref="uToast"></u-toast>
@@ -57,39 +80,130 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+    min-height: 100vh;
+  }
+  
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+  }
   
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
+  .header-card {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    padding: 32rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
   
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+    .header-icon {
+      width: 64rpx;
+      height: 64rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
   
-      .form-btn {
-        padding-top: 20rpx;
+    .header-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      min-width: 0;
+  
+      .card-name {
+        font-size: 32rpx;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+  
+      .type-text {
+        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;
+        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-card {
+    padding: 32rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  
+    .card-title {
+      display: flex;
+      align-items: center;
+      gap: 8rpx;
+      padding-bottom: 24rpx;
+      margin-bottom: 24rpx;
+      border-bottom: 2rpx solid #f0f0f0;
+  
+      text {
+        font-size: 30rpx;
+        font-weight: 700;
+        color: #333;
+      }
+    }
+  
+    .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;
+      }
+  
+      .detail-label {
+        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;
       }
     }
   }
diff --git a/src/pages/work/accounts/creditTransferRecord/list.vue b/src/pages/work/accounts/creditTransferRecord/list.vue
index 432d11a..1406d4e 100644
--- a/src/pages/work/accounts/creditTransferRecord/list.vue
+++ b/src/pages/work/accounts/creditTransferRecord/list.vue
@@ -5,8 +5,10 @@
           <u-input v-model="queryParams.creditCardName" border="false" type="select"  @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-        <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-        labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
        </view>
        </u-sticky>
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
@@ -14,8 +16,9 @@
         <u-input v-model="queryParams.time" border="false" type="select" readonly placeholder="请选择还款时间" suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <u-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` }">
@@ -54,8 +57,10 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -73,36 +78,30 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.name" size="28rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-row">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="credit-card-name">{{ item.name }}</text>
+            </view>
+            <view class="info-row">
+              <text class="time-text">{{ item.createTime }}</text>
+              <text class="type-text">{{ dictStr(item.dealType, dealTypeList) }}</text>
+              <text class="amount-value">{{ item.amount }}元</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">储蓄账户：</text>
-            <text class="row-value">{{ item.outAccountName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">信用卡：</text>
-            <text class="row-value">{{ item.inAccountName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">还款时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">还款金额：</text>
-            <text class="row-value">{{ item.amount }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">还款方式：</text>
-            <text class="row-value">{{ dictStr(item.dealType, dealTypeList) }}</text>
-
-          </view>
-          <view class="operate" >
-            <!-- <view class="btn filling" @click="enterDetails(item)">查看</view> -->
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="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>
@@ -335,11 +334,38 @@ function dictStr(val, arr) {
   justify-content: space-between;
   align-items: center;
   position: relative;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -350,14 +376,15 @@ function dictStr(val, arr) {
     background-color: rgba(0, 0, 0, 0.5);
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -378,114 +405,161 @@ function dictStr(val, arr) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
+    .credit-card-name {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
+    .amount-value {
+      font-size: 36rpx;
+      font-weight: 700;
+      color: #52c41a;
+      line-height: 1.2;
+      flex-shrink: 0;
+    }
 
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
 
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
+    .time-text {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
 
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
+    .type-text {
+      font-size: 26rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      text-align: center;
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+
+    .info-label {
+      font-size: 22rpx;
+      color: #999;
+      font-weight: 400;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .info-value {
+      font-size: 26rpx;
+      color: #333;
+      font-weight: 500;
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/work/accounts/debitTransferRecord/addEdit.vue b/src/pages/work/accounts/debitTransferRecord/addEdit.vue
index 7897f4c..ad48d69 100644
--- a/src/pages/work/accounts/debitTransferRecord/addEdit.vue
+++ b/src/pages/work/accounts/debitTransferRecord/addEdit.vue
@@ -1,13 +1,14 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
-			title="储蓄账户转账"
+			leftIconColor="#ffffff"
+			:title="title"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
       <view class="section">
-        <view class="section-title">{{ title}}</view>
         <view class="form-view">
           <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
             :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -35,15 +36,38 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <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>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
-      <u-picker itemHeight="88" :show="showOutAccount" :columns="outAccountList" keyName="nameCodeAvailableLimit" @cancel="handleOutAccountCancel"
-        @confirm="handleOutAccountConfirm"></u-picker>
-        <u-picker itemHeight="88" :show="showInAccount" :columns="inAccountList" keyName="nameCodeAvailableLimit" @cancel="handleInAccountCancel"
-        @confirm="handleInAccountConfirm"></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showOutAccount" 
+        :columns="outAccountList" 
+        keyName="nameCodeAvailableLimit" 
+        @cancel="handleOutAccountCancel"
+        @confirm="handleOutAccountConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择转出账户"
+        ></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showInAccount" 
+        :columns="inAccountList" 
+        keyName="nameCodeAvailableLimit" 
+        @cancel="handleInAccountCancel"
+        @confirm="handleInAccountConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择转入账户"
+        ></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="datetime"
@@ -204,26 +228,23 @@ function handleInAccount() {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+    min-height: 100vh;
+  }
+
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
+    padding: 32rpx;
     background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 360rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding: 0;
   
       .form-btn {
-        padding-top: 20rpx;
+        padding-top: 40rpx;
       }
     }
   }
diff --git a/src/pages/work/accounts/debitTransferRecord/details.vue b/src/pages/work/accounts/debitTransferRecord/details.vue
index d4f3194..d1aaccc 100644
--- a/src/pages/work/accounts/debitTransferRecord/details.vue
+++ b/src/pages/work/accounts/debitTransferRecord/details.vue
@@ -1,25 +1,49 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
-      <u-navbar
-			leftIconSize="40rpx"
-			leftIconColor="#333333"
-			title="储蓄账户转账详情"
-		>
-		</u-navbar>
-      <view class="section">
-        <!-- <view class="section-title">{{ detailInfo.name }}</view> -->
-  <u-cell-group>
-        <u-cell title="名称:" titleStyle="font-weight:bolder" :value="detailInfo.name"></u-cell>
-        <u-cell title="转出账户:" titleStyle="font-weight:bolder" :value="detailInfo.outAccountName"></u-cell>
-        <u-cell title="转入账户:" titleStyle="font-weight:bolder" :value="detailInfo.inAccountName"></u-cell>
-        <u-cell title="转账时间:" titleStyle="font-weight:bolder" :value="detailInfo.createTime"></u-cell>
-        <u-cell title="转账金额:" titleStyle="font-weight:bolder" :value="detailInfo.amount"></u-cell>
-      </u-cell-group>
+  <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="header-card">
+      <view class="transfer-icon-wrapper">
+        <view class="transfer-icon">
+          <uni-icons type="redo" size="32" color="#ffffff"></uni-icons>
+        </view>
       </view>
-   
-      <u-toast ref="uToast"></u-toast>
+      <text class="transfer-name">{{ detailInfo.name }}</text>
+      <text class="transfer-amount">{{ detailInfo.amount }}元</text>
     </view>
-  </template>
+
+    <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>
+    
+    <u-toast ref="uToast"></u-toast>
+  </view>
+</template>
   
 <script setup>
 import { getAccountsTransferRecord} from '@/api/invest/accountsTransferRecord'
@@ -42,39 +66,102 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-height: 100%;
+    height: auto;
+  }
+
+  .container {
+    background: #f5f7fa;
+    flex: 1;
+  }
+
+  .header-card {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+    padding: 48rpx 32rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+
+    .transfer-icon-wrapper {
+      margin-bottom: 24rpx;
     }
-  
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+
+    .transfer-icon {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.2);
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      align-items: center;
+      justify-content: center;
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+
+    .transfer-name {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.9);
+      margin-bottom: 12rpx;
+    }
+
+    .transfer-amount {
+      font-size: 48rpx;
+      font-weight: 600;
+      color: #ffffff;
+    }
+  }
+
+  .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;
       }
     }
   }
diff --git a/src/pages/work/accounts/debitTransferRecord/list.vue b/src/pages/work/accounts/debitTransferRecord/list.vue
index a6924fa..7c3a271 100644
--- a/src/pages/work/accounts/debitTransferRecord/list.vue
+++ b/src/pages/work/accounts/debitTransferRecord/list.vue
@@ -2,20 +2,23 @@
   <view class="container">
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
          <view class="search-view">
-          <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择储蓄账户" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-        labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+          <u--input v-model="queryParams.accountName" border="false" placeholder="请选择储蓄账户" class="search-input"
+            @click="handleAccount" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
        </view>
        </u-sticky>
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
       <view class="search-view">
-        <u-input v-model="queryParams.time" border="false" type="select" readonly placeholder="请选择转账时间" suffixIcon="calendar"
-          suffixIconStyle="color: #909399" class="search-input">
-          </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <u--input v-model="queryParams.time" border="false" readonly placeholder="请选择转账时间" class="search-input"
+          suffixIcon="calendar" suffixIconStyle="color: #909399">
+          </u--input>
+        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
+          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
+          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></u-icon>
 
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
@@ -49,8 +52,10 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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"
@@ -68,30 +73,35 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.name" size="28rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="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>
-          <view class="item-row">
-            <text class="row-label">转出账户：</text>
-            <text class="row-value">{{ item.outAccountName }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item full-width">
+                <text class="info-label">转账时间</text>
+                <text class="info-value">{{ item.createTime }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">转入账户：</text>
-            <text class="row-value">{{ item.inAccountName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">转账时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">转账金额：</text>
-            <text class="row-value">{{ item.amount }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -101,8 +111,19 @@
     </u-list>
     <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
       @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
-      <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="typeNameCodeAvailableLimit" @cancel="handleAccountCancel"
-        @confirm="handleAccountConfirm"></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showAccount" 
+        :columns="accountList" 
+        keyName="typeNameCodeAvailableLimit" 
+        @cancel="handleAccountCancel"
+        @confirm="handleAccountConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择记账账户"
+        ></u-picker>
   </view>
   <!-- 悬停按钮返回工作台-->
   <suspend></suspend>
@@ -329,11 +350,39 @@ function dictStr(val, arr) {
   justify-content: space-between;
   align-items: center;
   position: relative;
+  margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -342,16 +391,18 @@ function dictStr(val, arr) {
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -372,114 +423,167 @@ function dictStr(val, arr) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      gap: 12rpx;
+    }
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .card-icon {
+      width: 48rpx;
+      height: 48rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .card-name {
+      font-size: 24rpx;
+      font-weight: 600;
+      color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+      min-width: 0;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+    .card-amount {
+      font-size: 20rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      white-space: nowrap;
+      flex-shrink: 0;
+      
+      .amount-value {
+        font-size: 28rpx;
+        font-weight: 700;
+        color: #ffffff;
+        margin-right: 4rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .info-row {
+    display: flex;
+    gap: 24rpx;
+    margin-bottom: 20rpx;
+
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .info-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      min-width: 0;
+      
+      &.full-width {
+        flex: none;
+        width: 100%;
+      }
+
+      .info-label {
+        font-size: 24rpx;
+        color: #999;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        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;
+      }
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 16rpx;
+    padding: 0 24rpx 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/work/accounts/investAccountDeal/addEdit.vue b/src/pages/work/accounts/investAccountDeal/addEdit.vue
index 2387f17..8e696d2 100644
--- a/src/pages/work/accounts/investAccountDeal/addEdit.vue
+++ b/src/pages/work/accounts/investAccountDeal/addEdit.vue
@@ -2,8 +2,10 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="投资交易记录"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			:titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
 		>
 		</u-navbar>
       <view class="section">
@@ -43,15 +45,16 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <u-button type="primary" text="提交" @click="submit"
+              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
         <u-picker itemHeight="88" :show="showAccountName" :columns="accountNameList" keyName="nameCodeAvailableLimit" @cancel="handleAccountNameCancel"
-        @confirm="handleAccountNameConfirm"></u-picker>
+        @confirm="handleAccountNameConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择投资账户"></u-picker>
         <u-picker itemHeight="88" :show="showDealType" :columns="dealTypeList" keyName="dictLabel" @cancel="handleDealTypeCancel"
-        @confirm="handleDealTypeConfirm"></u-picker>
+        @confirm="handleDealTypeConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择交易类型"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="datetime"
@@ -59,6 +62,9 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
+      :closeOnClickOverlay="true"
+      cancelColor="#666666"
+      confirmColor="#667eea"
 		></u-datetime-picker>
     </view>
   </template>
diff --git a/src/pages/work/accounts/investAccountDeal/details.vue b/src/pages/work/accounts/investAccountDeal/details.vue
index 3e9b9eb..bf61e73 100644
--- a/src/pages/work/accounts/investAccountDeal/details.vue
+++ b/src/pages/work/accounts/investAccountDeal/details.vue
@@ -2,23 +2,45 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="投资交易记录详情"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			:titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
 		>
 		</u-navbar>
+      
+      <view class="header-card">
+        <view class="header-icon">
+          <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <view class="header-info">
+          <view class="info-row">
+            <text class="label">账户名称</text>
+            <text class="value">{{ detailInfo.accountName }}</text>
+          </view>
+          <view class="info-row">
+            <text class="label">交易类型</text>
+            <text class="value">{{ detailInfo.dealType }}</text>
+          </view>
+          <view class="amount-row">
+            <text class="amount-label">交易金额</text>
+            <text class="amount-value" :class="detailInfo.dealType === '亏损' ? 'loss' : 'profit'">{{ detailInfo.dealType === '亏损' ? '-' : '+' }}{{ detailInfo.amount }}元</text>
+          </view>
+        </view>
+      </view>
+      
       <view class="section">
-        <!-- <view class="section-title">{{ detailInfo.name }}</view> -->
-  <u-cell-group>
-        <u-cell title="账户名称:" titleStyle="font-weight:bolder" :value="detailInfo.accountName"></u-cell>
-        <u-cell title="账户类型:" titleStyle="font-weight:bolder" :value="detailInfo.type"></u-cell>
-        <u-cell title="交易类型:" titleStyle="font-weight:bolder" :value="detailInfo.dealType"></u-cell>
-        <u-cell title="交易类别:" titleStyle="font-weight:bolder" :value="detailInfo.dealCategory"></u-cell>
-        <u-cell title="交易金额:" titleStyle="font-weight:bolder" :value="detailInfo.amount"></u-cell>
-        <u-cell title="当前余额:" titleStyle="font-weight:bolder" :value="detailInfo.currentBalance"></u-cell>
-        <u-cell title="交易时间:" titleStyle="font-weight:bolder" :value="detailInfo.createTime"></u-cell>
-        <u-cell title="备注:" titleStyle="font-weight:bolder" :value="detailInfo.remark" center> </u-cell>
-       
-      </u-cell-group>
+        <view class="section-title">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>交易信息</text>
+        </view>
+        <u-cell-group>
+          <u-cell title="账户类型:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.type"></u-cell>
+          <u-cell title="交易类别:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.dealCategory"></u-cell>
+          <u-cell title="当前余额:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.currentBalance"></u-cell>
+          <u-cell title="交易时间:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.createTime"></u-cell>
+          <u-cell title="备注:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.remark || '无'" center> </u-cell>
+        </u-cell-group>
       </view>
    
       <u-toast ref="uToast"></u-toast>
@@ -68,40 +90,95 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
+.header-card {
+  margin: 24rpx;
+  padding: 32rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+  display: flex;
+  gap: 24rpx;
   
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
+  .header-icon {
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.25);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
   
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+  .header-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    
+    .info-row {
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      justify-content: space-between;
+      align-items: center;
+      
+      .label {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.8);
+        font-weight: 400;
+      }
+      
+      .value {
+        font-size: 28rpx;
+        color: #ffffff;
+        font-weight: 600;
+      }
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+    
+    .amount-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+      
+      .amount-label {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.8);
+        font-weight: 400;
+      }
+      
+      .amount-value {
+        font-size: 40rpx;
+        font-weight: 700;
+        
+        &.profit {
+          color: #52c41a;
+        }
+        
+        &.loss {
+          color: #f5576c;
+        }
       }
     }
   }
-  </style>
\ No newline at end of file
+}
+
+.section {
+  margin: 24rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    padding: 24rpx;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #2c3e50;
+    border-bottom: 1rpx solid #f5f7fa;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/work/accounts/investAccountDeal/list.vue b/src/pages/work/accounts/investAccountDeal/list.vue
index d86d7b2..46b0b36 100644
--- a/src/pages/work/accounts/investAccountDeal/list.vue
+++ b/src/pages/work/accounts/investAccountDeal/list.vue
@@ -5,8 +5,10 @@
           <u--input v-model="queryParams.name" border="false" placeholder="请输入投资账户名称" class="search-input"
           @blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
         </u--input>
-        <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-        labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
        </view>
        </u-sticky>
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
@@ -14,8 +16,9 @@
         <u-input v-model="queryParams.time" border="false" type="select" readonly placeholder="请选择交易时间" suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <u-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` }">
@@ -54,8 +57,10 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -72,36 +77,33 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.accountName+dictStr(item.dealType, dealTypeList) +'：'+item.amount" size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-row">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="account-name">{{ item.accountName }}</text>
+            </view>
+            <view class="info-row">
+              <text class="time-text">{{ item.createTime }}</text>
+              <text class="type-text">{{ dictStr(item.dealType, dealTypeList) }}</text>
+              <text class="amount-value" :class="item.dealType === '2' ? 'loss' : 'profit'">{{ item.dealType === '2' ? '-' : '+' }}{{ item.amount }}元</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">交易类型：</text>
-            <text class="row-value">{{ dictStr(item.dealType, dealTypeList) }}</text>
+          
+          <view class="card-body" v-if="item.remark">
+            <view class="remark-section">
+              <text class="remark-label">备注：</text>
+              <text class="remark-text">{{ item.remark }}</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">交易时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易金额：</text>
-            <text class="row-value">{{ item.amount }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">当前余额：</text>
-            <text class="row-value">{{ item.currentBalance }}</text>
-          </view>
-
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <!-- <view class="btn filling" @click="enterDetails(item)">查看</view> -->
-            <!-- <view class="btn filling" @click="handleEdit(item)">修改</view> -->
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <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>
@@ -334,11 +336,38 @@ function selectAccountType(item) {
   justify-content: space-between;
   align-items: center;
   position: relative;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -349,14 +378,15 @@ function selectAccountType(item) {
     background-color: rgba(0, 0, 0, 0.5);
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -377,114 +407,162 @@ function selectAccountType(item) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
+
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .account-name {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+
+    .time-text {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
+
+    .type-text {
+      font-size: 26rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      text-align: center;
+    }
+
+    .amount-value {
+      font-size: 36rpx;
+      font-weight: 700;
+      line-height: 1.2;
+      flex-shrink: 0;
+      
+      &.profit {
+        color: #52c41a;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+      
+      &.loss {
+        color: #f5576c;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
-
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+  .card-body {
+    padding: 20rpx 24rpx;
+    background: #fff;
+    border-top: 1rpx solid #f5f7fa;
+    
+    .remark-section {
+      display: flex;
+      gap: 8rpx;
+      
+      .remark-label {
+        font-size: 24rpx;
+        color: #999;
+        font-weight: 500;
+        flex-shrink: 0;
+      }
+      
+      .remark-text {
+        font-size: 24rpx;
+        color: #666;
+        line-height: 1.5;
+        flex: 1;
+        word-break: break-all;
+      }
     }
   }
 
   .operate {
     display: flex;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
     justify-content: flex-end;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
-    }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
-    }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 32rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
   }
 }
diff --git a/src/pages/work/accounts/investTransferRecord/addEdit.vue b/src/pages/work/accounts/investTransferRecord/addEdit.vue
index a5171e9..7fea616 100644
--- a/src/pages/work/accounts/investTransferRecord/addEdit.vue
+++ b/src/pages/work/accounts/investTransferRecord/addEdit.vue
@@ -2,8 +2,10 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="投资账户记账"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			:titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
 		>
 		</u-navbar>
       <view class="section">
@@ -36,15 +38,16 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <u-button type="primary" text="提交" @click="submit"
+              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
       <u-picker itemHeight="88" :show="showFutruesStocks" :columns="futruesStocksList" keyName="nameDebitNameCode" @cancel="handleFutruesStocksCancel"
-        @confirm="handleFutruesStocksConfirm"></u-picker>
+        @confirm="handleFutruesStocksConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择投资账户"></u-picker>
         <u-picker itemHeight="88" :show="showDealType" :columns="dealTypeList" keyName="dictLabel" @cancel="handleDealTypeCancel"
-        @confirm="handleDealTypeConfirm"></u-picker>
+        @confirm="handleDealTypeConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择交易类型"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="datetime"
@@ -52,6 +55,9 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
+      :closeOnClickOverlay="true"
+      cancelColor="#666666"
+      confirmColor="#667eea"
 		></u-datetime-picker>
     </view>
   </template>
diff --git a/src/pages/work/accounts/investTransferRecord/details.vue b/src/pages/work/accounts/investTransferRecord/details.vue
index 68ff305..fe2c435 100644
--- a/src/pages/work/accounts/investTransferRecord/details.vue
+++ b/src/pages/work/accounts/investTransferRecord/details.vue
@@ -2,20 +2,42 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="投资账户记账详情"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			:titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
 		>
 		</u-navbar>
+      
+      <view class="header-card">
+        <view class="header-icon">
+          <uni-icons type="wallet-filled" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <view class="header-info">
+          <view class="info-row">
+            <text class="label">转入账户</text>
+            <text class="value">{{ detailInfo.inAccountName }}</text>
+          </view>
+          <view class="info-row">
+            <text class="label">交易类型</text>
+            <text class="value">{{ detailInfo.dealType }}</text>
+          </view>
+          <view class="amount-row">
+            <text class="amount-label">转账金额</text>
+            <text class="amount-value">{{ detailInfo.amount }}元</text>
+          </view>
+        </view>
+      </view>
+      
       <view class="section">
-        <!-- <view class="section-title">{{ detailInfo.name }}</view> -->
-  <u-cell-group>
-        <u-cell title="名称:" titleStyle="font-weight:bolder" :value="detailInfo.name"></u-cell>
-        <u-cell title="转出账户：" titleStyle="font-weight:bolder" :value="detailInfo.outAccountName"></u-cell>
-        <u-cell title="转入账户：" titleStyle="font-weight:bolder" :value="detailInfo.inAccountName"></u-cell>
-        <u-cell title="转账时间:" titleStyle="font-weight:bolder" :value="detailInfo.createTime"></u-cell>
-        <u-cell title="转账金额:" titleStyle="font-weight:bolder" :value="detailInfo.amount"></u-cell>
-        <u-cell title="交易类型:" titleStyle="font-weight:bolder" :value="detailInfo.dealType"></u-cell>
-      </u-cell-group>
+        <view class="section-title">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>转账信息</text>
+        </view>
+        <u-cell-group>
+          <u-cell title="转出账户：" titleStyle="font-weight:500; color: #666;" :value="detailInfo.outAccountName"></u-cell>
+          <u-cell title="转账时间:" titleStyle="font-weight:500; color: #666;" :value="detailInfo.createTime"></u-cell>
+        </u-cell-group>
       </view>
    
       <u-toast ref="uToast"></u-toast>
@@ -57,40 +79,88 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
+.header-card {
+  margin: 24rpx;
+  padding: 32rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+  display: flex;
+  gap: 24rpx;
   
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
+  .header-icon {
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.25);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
   
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+  .header-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    
+    .info-row {
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      justify-content: space-between;
+      align-items: center;
+      
+      .label {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.8);
+        font-weight: 400;
+      }
+      
+      .value {
+        font-size: 28rpx;
+        color: #ffffff;
+        font-weight: 600;
+      }
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+    
+    .amount-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+      
+      .amount-label {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.8);
+        font-weight: 400;
+      }
+      
+      .amount-value {
+        font-size: 40rpx;
+        color: #52c41a;
+        font-weight: 700;
       }
     }
   }
-  </style>
\ No newline at end of file
+}
+
+.section {
+  margin: 24rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    padding: 24rpx;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #2c3e50;
+    border-bottom: 1rpx solid #f5f7fa;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/work/accounts/investTransferRecord/list.vue b/src/pages/work/accounts/investTransferRecord/list.vue
index 768c3b4..b76a244 100644
--- a/src/pages/work/accounts/investTransferRecord/list.vue
+++ b/src/pages/work/accounts/investTransferRecord/list.vue
@@ -5,8 +5,10 @@
           <u--input v-model="queryParams.name" border="false" placeholder="请输入投资账户名称" class="search-input"
           @blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
         </u--input>
-        <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-        labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
        </view>
        </u-sticky>
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
@@ -14,8 +16,9 @@
         <u-input v-model="queryParams.time" border="false" type="select" readonly placeholder="请选择转账时间"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <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` }">
@@ -54,8 +57,10 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -73,37 +78,34 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.name" size="28rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-row">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="account-name">{{ item.name }}</text>
+            </view>
+            <view class="info-row">
+              <text class="time-text">{{ item.createTime }}</text>
+              <text class="type-text">{{ dictStr(item.dealType, dealTypeList) }}</text>
+              <text class="amount-value">{{ item.amount }}元</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">转出账户：</text>
-            <text class="row-value">{{ item.outAccountName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">转入账户：</text>
-            <text class="row-value">{{ item.inAccountName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">转账时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">转账金额：</text>
-            <text class="row-value">{{ item.amount }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易类型：</text>
-            <text class="row-value">{{ dictStr(item.dealType, dealTypeList) }}</text>
-
-          </view>
-          <view class="operate" >
-            <!-- <view class="btn filling" @click="enterDetails(item)">查看</view> -->
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleCopy(item)">复制</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" @click="handleCopy(item)">
+              <uni-icons type="copy" size="16" color="#52c41a"></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>
@@ -310,11 +312,38 @@ function dictStr(val, arr) {
   justify-content: space-between;
   align-items: center;
   position: relative;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -325,14 +354,15 @@ function dictStr(val, arr) {
     background-color: rgba(0, 0, 0, 0.5);
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -353,114 +383,145 @@ function dictStr(val, arr) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
-    }
-  }
-
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .account-name {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+
+    .time-text {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
+
+    .type-text {
+      font-size: 26rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      text-align: center;
+    }
+
+    .amount-value {
+      font-size: 36rpx;
+      font-weight: 700;
+      color: #52c41a;
+      line-height: 1.2;
+      flex-shrink: 0;
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-copy {
+      background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+      border: 1rpx solid 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);
     }
   }
 }
diff --git a/src/pages/work/accounts/lendTransferRecord/addEdit.vue b/src/pages/work/accounts/lendTransferRecord/addEdit.vue
index 3fb389e..5a8a527 100644
--- a/src/pages/work/accounts/lendTransferRecord/addEdit.vue
+++ b/src/pages/work/accounts/lendTransferRecord/addEdit.vue
@@ -1,13 +1,14 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
-			title="借贷账户记账"
+			leftIconColor="#ffffff"
+			:title="title"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
       <view class="section">
-        <view class="section-title">{{ title}}</view>
         <view class="form-view">
           <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
             :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -44,17 +45,51 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <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>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
-      <u-picker itemHeight="88" :show="showOutAccount" :columns="outAccountList" keyName="nameCodeAvailableLimit" @cancel="handleOutAccountCancel"
-        @confirm="handleOutAccountConfirm"></u-picker>
-        <u-picker itemHeight="88" :show="showInAccount" :columns="inAccountList" keyName="nameCodeAvailableLimit" @cancel="handleInAccountCancel"
-        @confirm="handleInAccountConfirm"></u-picker>
-        <u-picker itemHeight="88" :show="showDealType" :columns="dealTypeList" keyName="dictLabel" @cancel="handleDealTypeCancel"
-        @confirm="handleDealTypeConfirm"></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showOutAccount" 
+        :columns="outAccountList" 
+        keyName="nameCodeAvailableLimit" 
+        @cancel="handleOutAccountCancel"
+        @confirm="handleOutAccountConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择借贷账户"
+        ></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showInAccount" 
+        :columns="inAccountList" 
+        keyName="nameCodeAvailableLimit" 
+        @cancel="handleInAccountCancel"
+        @confirm="handleInAccountConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择储蓄账户"
+        ></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showDealType" 
+        :columns="dealTypeList" 
+        keyName="dictLabel" 
+        @cancel="handleDealTypeCancel"
+        @confirm="handleDealTypeConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择交易类型"
+        ></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="datetime"
@@ -267,27 +302,24 @@ function handleInAccount() {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 360rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
-  
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
-      }
+.container {
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
+.section {
+  margin: 24rpx;
+  padding: 32rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+
+  .form-view {
+    padding: 0;
+
+    .form-btn {
+      padding-top: 40rpx;
     }
   }
+}
   </style>
\ No newline at end of file
diff --git a/src/pages/work/accounts/lendTransferRecord/details.vue b/src/pages/work/accounts/lendTransferRecord/details.vue
index 56e78fd..229085d 100644
--- a/src/pages/work/accounts/lendTransferRecord/details.vue
+++ b/src/pages/work/accounts/lendTransferRecord/details.vue
@@ -1,24 +1,51 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="借贷账户记账详情"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
-      <view class="section">
-        <!-- <view class="section-title">{{ detailInfo.name }}</view> -->
-  <u-cell-group>
-        <u-cell title="名称:" titleStyle="font-weight:bolder" :value="detailInfo.name"></u-cell>
-        <u-cell title="交易类型:" titleStyle="font-weight:bolder" :value="detailInfo.dealType"></u-cell>
-        <u-cell title="转出账户:" titleStyle="font-weight:bolder" :value="detailInfo.outAccountName"></u-cell>
-        <u-cell title="转入账户:" titleStyle="font-weight:bolder" :value="detailInfo.inAccountName"></u-cell>
-        <u-cell title="借贷时间:" titleStyle="font-weight:bolder" :value="detailInfo.createTime"></u-cell>
-        <u-cell title="借贷金额:" titleStyle="font-weight:bolder" :value="detailInfo.amount"></u-cell>
-        <u-cell title="还款利息:" titleStyle="font-weight:bolder" :value="detailInfo.commission"></u-cell>
-      </u-cell-group>
+      
+      <view class="header-card">
+        <view class="transfer-icon-wrapper">
+          <view class="transfer-icon">
+            <uni-icons type="redo" size="32" color="#ffffff"></uni-icons>
+          </view>
+        </view>
+        <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>
+      </view>
+      
       <u-toast ref="uToast"></u-toast>
     </view>
   </template>
@@ -58,39 +85,102 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-height: 100%;
+    height: auto;
+  }
+
+  .container {
+    background: #f5f7fa;
+    flex: 1;
+  }
+
+  .header-card {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+    padding: 48rpx 32rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+
+    .transfer-icon-wrapper {
+      margin-bottom: 24rpx;
     }
-  
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+
+    .transfer-icon {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.2);
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      align-items: center;
+      justify-content: center;
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+
+    .transfer-type {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.9);
+      margin-bottom: 12rpx;
+    }
+
+    .transfer-amount {
+      font-size: 48rpx;
+      font-weight: 600;
+      color: #ffffff;
+    }
+  }
+
+  .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;
       }
     }
   }
diff --git a/src/pages/work/accounts/lendTransferRecord/list.vue b/src/pages/work/accounts/lendTransferRecord/list.vue
index 9758b03..9ec5e83 100644
--- a/src/pages/work/accounts/lendTransferRecord/list.vue
+++ b/src/pages/work/accounts/lendTransferRecord/list.vue
@@ -5,8 +5,10 @@
           <u--input v-model="queryParams.name" border="false" placeholder="请输入借贷账户名称" class="search-input"
           @blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
         </u--input>
-        <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-        labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
        </view>
        </u-sticky>
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
@@ -14,8 +16,9 @@
         <u-input v-model="queryParams.time" border="false" type="select" readonly placeholder="请选择借贷时间" suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <u-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` }">
@@ -49,8 +52,10 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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"
@@ -68,39 +73,47 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.name" size="28rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="redo-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="card-date">{{ item.createTime }}</text>
+            </view>
+            <text class="card-name">{{ dictStr(item.dealType, dealTypeList) }}</text>
+            <text class="card-amount"><text class="amount-value">{{ item.amount }}</text>元</text>
           </view>
-          <view class="item-row">
-            <text class="row-label">交易类型：</text>
-            <text class="row-value">{{ dictStr(item.dealType, dealTypeList) }}</text>
-
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">转出账户</text>
+                <text class="info-value">{{ item.outAccountName }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">转入账户</text>
+                <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="item-row">
-            <text class="row-label">转出账户：</text>
-            <text class="row-value">{{ item.outAccountName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">转入账户：</text>
-            <text class="row-value">{{ item.inAccountName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">借贷时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">借贷金额：</text>
-            <text class="row-value">{{ item.amount }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">还款利息：</text>
-            <text class="row-value">{{ item.commission }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -303,12 +316,39 @@ function dictStr(val, arr) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-
+  margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -317,16 +357,18 @@ function dictStr(val, arr) {
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -347,114 +389,166 @@ function dictStr(val, arr) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 80rpx;
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+      flex-shrink: 0;
+    }
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .card-icon {
+      width: 48rpx;
+      height: 48rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .card-date {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.95);
+      white-space: nowrap;
+      flex-shrink: 0;
+      font-weight: 600;
+      line-height: 1;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .card-name {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #ffffff;
+      white-space: nowrap;
+      flex-shrink: 0;
+      flex: 1;
+      text-align: center;
+      line-height: 1;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+    .card-amount {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.9);
+      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;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .info-row {
+    display: flex;
+    gap: 24rpx;
+    margin-bottom: 20rpx;
+
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .info-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      min-width: 0;
+
+      .info-label {
+        font-size: 24rpx;
+        color: #999;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 16rpx;
+    padding: 0 24rpx 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/work/accounts/posTransferRecord/addEdit.vue b/src/pages/work/accounts/posTransferRecord/addEdit.vue
index 0dcfb22..c547724 100644
--- a/src/pages/work/accounts/posTransferRecord/addEdit.vue
+++ b/src/pages/work/accounts/posTransferRecord/addEdit.vue
@@ -2,12 +2,13 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="POS机刷卡记账"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
       <view class="section">
-        <view class="section-title">{{ title}}</view>
         <view class="form-view">
           <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
             :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -49,22 +50,45 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <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: 92rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
-      <u-picker itemHeight="88" :show="showPosMachine" :columns="posMachineList" keyName="nameMerchantName" @cancel="handlePosMachineCancel"
-        @confirm="handlePosMachineConfirm"></u-picker>
-        <u-picker itemHeight="88" :show="showCreditCard" :columns="bankCardLendList" keyName="nameCodeAvailableLimit" @cancel="handleCreditCardCancel"
-        @confirm="handleCreditCardConfirm"></u-picker>
-        <u-datetime-picker
+      <u-picker 
+        itemHeight="88" 
+        :show="showPosMachine" 
+        :columns="posMachineList" 
+        keyName="nameMerchantName" 
+        @cancel="handlePosMachineCancel"
+        @confirm="handlePosMachineConfirm"
+        :closeOnClickOverlay="true"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择POS机"
+      ></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showCreditCard" 
+        :columns="bankCardLendList" 
+        keyName="nameCodeAvailableLimit" 
+        @cancel="handleCreditCardCancel"
+        @confirm="handleCreditCardConfirm"
+        :closeOnClickOverlay="true"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择信用卡"
+      ></u-picker>
+      <u-datetime-picker
 			:show="datePickShow"
 			mode="datetime"
       ref="createTimeRef" 
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
+      confirmColor="#667eea"
+      cancelColor="#666666"
 		></u-datetime-picker>
     </view>
   </template>
@@ -226,26 +250,23 @@ function handleCreditCard() {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+    min-height: 100vh;
+  }
+  
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
+    padding: 32rpx;
     background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 360rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding-top: 20rpx;
   
       .form-btn {
-        padding-top: 20rpx;
+        padding-top: 32rpx;
       }
     }
   }
diff --git a/src/pages/work/accounts/posTransferRecord/details.vue b/src/pages/work/accounts/posTransferRecord/details.vue
index bfc3aa7..81bff49 100644
--- a/src/pages/work/accounts/posTransferRecord/details.vue
+++ b/src/pages/work/accounts/posTransferRecord/details.vue
@@ -2,22 +2,58 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="POS机刷卡记账详情"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
       <view class="section">
-        <!-- <view class="section-title">{{ detailInfo.name }}</view> -->
-  <u-cell-group>
-        <u-cell title="POS机名称:" titleStyle="font-weight:bolder" :value="detailInfo.posName"></u-cell>
-        <u-cell title="刷卡商户:" titleStyle="font-weight:bolder" :value="detailInfo.merchantName"></u-cell>
-        <u-cell title="信用卡:" titleStyle="font-weight:bolder" :value="detailInfo.outAccountName"></u-cell>
-        <u-cell title="储蓄卡:" titleStyle="font-weight:bolder" :value="detailInfo.inAccountName"></u-cell>
-        <u-cell title="刷卡时间:" titleStyle="font-weight:bolder" :value="detailInfo.createTime"></u-cell>
-        <u-cell title="刷卡金额:" titleStyle="font-weight:bolder" :value="detailInfo.amount"></u-cell>
-        <u-cell title="手续费:" titleStyle="font-weight:bolder" :value="detailInfo.commission" center> </u-cell>
-        <u-cell title="入账金额:" titleStyle="font-weight:bolder" :value="detailInfo.actualAmount"></u-cell>
-      </u-cell-group>
+        <view class="header-card">
+          <view class="header-icon">
+            <uni-icons type="wallet-filled" size="28" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="pos-name">{{ detailInfo.posName }}</text>
+            <text class="merchant-name">{{ detailInfo.merchantName }}</text>
+          </view>
+          <view class="amount-section">
+            <text class="amount-label">刷卡金额</text>
+            <text class="amount-value">{{ 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>
+          
+          <view class="detail-row">
+            <text class="detail-label">信用卡</text>
+            <text class="detail-value">{{ detailInfo.outAccountName }}</text>
+          </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.commission }}元</text>
+          </view>
+          
+          <view class="detail-row">
+            <text class="detail-label">储蓄卡</text>
+            <text class="detail-value">{{ detailInfo.inAccountName }}</text>
+          </view>
+          
+          <view class="detail-row">
+            <text class="detail-label">入账金额</text>
+            <text class="detail-value highlight">{{ detailInfo.actualAmount }}元</text>
+          </view>
+        </view>
       </view>
    
       <u-toast ref="uToast"></u-toast>
@@ -45,39 +81,135 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
+  .container {
+    background: #f5f7fa;
+    min-height: 100vh;
+  }
+  
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+  }
   
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
+  .header-card {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    padding: 32rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
   
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+    .header-icon {
+      width: 64rpx;
+      height: 64rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
   
-      .form-btn {
-        padding-top: 20rpx;
+    .header-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      min-width: 0;
+  
+      .pos-name {
+        font-size: 32rpx;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+  
+      .merchant-name {
+        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;
+        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-card {
+    padding: 32rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  
+    .card-title {
+      display: flex;
+      align-items: center;
+      gap: 8rpx;
+      padding-bottom: 24rpx;
+      margin-bottom: 24rpx;
+      border-bottom: 2rpx solid #f0f0f0;
+  
+      text {
+        font-size: 30rpx;
+        font-weight: 700;
+        color: #333;
+      }
+    }
+  
+    .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;
+      }
+  
+      .detail-label {
+        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;
+        
+        &.highlight {
+          color: #667eea;
+          font-size: 32rpx;
+        }
       }
     }
   }
diff --git a/src/pages/work/accounts/posTransferRecord/list.vue b/src/pages/work/accounts/posTransferRecord/list.vue
index 8923a85..d6cfb9d 100644
--- a/src/pages/work/accounts/posTransferRecord/list.vue
+++ b/src/pages/work/accounts/posTransferRecord/list.vue
@@ -12,8 +12,10 @@
           <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择POS机" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-        <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-        labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
        </view>
        </u-sticky>
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
@@ -21,8 +23,9 @@
         <u-input v-model="queryParams.time" border="false" type="select" readonly placeholder="请选择刷卡时间" suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <u-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` }">
@@ -56,8 +59,10 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -75,46 +80,51 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.posName+'-'+item.outAccountName+'刷卡：'+item.amount" size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-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>
+            </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>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">POS机名称：</text>
-            <text class="row-value">{{ item.posName }}</text>
+          
+          <view class="card-body">
+            <view class="info-item">
+              <text class="info-label">储蓄卡</text>
+              <text class="info-value">{{ item.inAccountName }}</text>
+            </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>
           </view>
-          <view class="item-row">
-            <text class="row-label">刷卡商户：</text>
-            <text class="row-value">{{ item.merchantName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">信用卡：</text>
-            <text class="row-value">{{ item.outAccountName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">刷卡时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">刷卡金额：</text>
-            <text class="row-value">{{ item.amount }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">手续费：</text>
-            <text class="row-value">{{ item.commission }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">储蓄卡：</text>
-            <text class="row-value">{{ item.inAccountName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">入账金额：</text>
-            <text class="row-value">{{ item.actualAmount }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -365,11 +375,38 @@ function settingCancel() {
   justify-content: space-between;
   align-items: center;
   position: relative;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -380,14 +417,15 @@ function settingCancel() {
     background-color: rgba(0, 0, 0, 0.5);
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -408,114 +446,199 @@ function settingCancel() {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
+    .credit-card-name {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
+    .amount-info {
+      display: flex;
+      align-items: baseline;
+      gap: 8rpx;
+      flex-shrink: 0;
+    }
 
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
+    .amount-label {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.7);
+      font-weight: 400;
+    }
 
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
+    .amount-value {
+      font-size: 36rpx;
+      font-weight: 700;
+      color: #52c41a;
+      line-height: 1.2;
+    }
 
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
 
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
+    .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;
+    }
+
+    .merchant-name {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 400;
+      line-height: 1.3;
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+    display: flex;
+    gap: 16rpx;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .info-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    min-width: 0;
+    
+    &:first-child {
+      flex: 2;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .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;
+      
+      &.highlight {
+        color: #667eea;
+        font-weight: 600;
+        font-size: 28rpx;
+      }
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/work/accounts/posadvice/list.vue b/src/pages/work/accounts/posadvice/list.vue
index 7e4a7b4..13eb333 100644
--- a/src/pages/work/accounts/posadvice/list.vue
+++ b/src/pages/work/accounts/posadvice/list.vue
@@ -5,6 +5,10 @@
           <u-input v-model="queryParams.creditCardName" border="false" type="select"  @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
+        <view class="clear-btn" v-if="queryParams.creditCardName" @click="handleCreditCardCancel()">
+          <uni-icons type="close-filled" size="16" color="#ffffff"></uni-icons>
+          <text>清空</text>
+        </view>
        </view>
        </u-sticky>
        <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
@@ -13,24 +17,43 @@
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item">
           <view class="item-header">
-            <u--text  lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.name+'-'+item.code" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-icon">
+              <uni-icons type="creditcard-filled" size="24" 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>
+                <text class="limit-label">可用额度</text>
+                <text class="limit-value">{{ item.availableLimit }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">可用额度：</text>
-            <text class="row-value">{{ item.availableLimit }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">账单日：</text>
-            <text class="row-value">{{ item.billDateName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">推荐POS刷卡：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.advicePosNames) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">近1月POS刷卡记录：</text><br>
-            <text class="row-value">{{ formatMultiLineData(item.remark) }}</text>
+          
+          <view class="card-body">
+            <view class="pos-section" v-if="item.advicePosNames">
+              <view class="section-header">
+                <uni-icons type="shop" size="16" color="#667eea"></uni-icons>
+                <text class="section-title">推荐POS刷卡</text>
+              </view>
+              <view class="pos-tags">
+                <text class="pos-tag" v-for="(pos, idx) in item.advicePosNames.split('、')" :key="idx">{{ pos }}</text>
+              </view>
+            </view>
+            
+            <view class="record-section" v-if="item.remark">
+              <view class="section-header">
+                <uni-icons type="list" size="16" color="#faad14"></uni-icons>
+                <text class="section-title">近1月POS刷卡记录</text>
+              </view>
+              <view class="record-list">
+                <text class="record-text" v-for="(record, idx) in item.remark.split('、')" :key="idx">• {{ record }}</text>
+              </view>
+            </view>
           </view>
        
         </view>
@@ -43,8 +66,19 @@
       @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
       <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
         @confirm="handleAccountConfirm"></u-picker>
-        <u-picker itemHeight="88" :show="showCreditCard" :columns="bankCardLendList" keyName="nameCode" @cancel="handleCreditCardCancel"
-        @confirm="handleCreditCardConfirm"></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showCreditCard" 
+        :columns="bankCardLendList" 
+        keyName="nameCode" 
+        @cancel="handleCreditCardCancel"
+        @confirm="handleCreditCardConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择信用卡"
+        ></u-picker>
   </view>
   <!-- 悬停按钮返回工作台-->
   <suspend></suspend>
@@ -284,158 +318,177 @@ function settingCancel() {
   justify-content: space-between;
   align-items: center;
   position: relative;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    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);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
-      }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
-      }
+  
+  .clear-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 20rpx;
+    background: linear-gradient(135deg, #f5576c 0%, #ff8a80 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx rgba(245, 87, 108, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      box-shadow: 0 2rpx 8rpx rgba(245, 87, 108, 0.3);
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    text {
+      color: #ffffff;
+      font-size: 26rpx;
+      font-weight: 600;
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
+    gap: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
-    }
-  }
-
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
-
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
-    }
-  }
-
-  .operate {
-    display: flex;
-    justify-content: flex-end;
-
-    .btn {
-      width: 146rpx;
+    .card-icon {
+      width: 56rpx;
       height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
     }
+    
+    .header-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 12rpx;
+      min-width: 0;
+    }
+    
+    .card-name-row {
+      display: flex;
+      align-items: baseline;
+      gap: 12rpx;
+    }
+    
+    .card-name {
+      font-size: 32rpx;
+      font-weight: 700;
+      color: #ffffff;
+      line-height: 1.2;
+    }
+    
+    .card-code {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.75);
+      font-weight: 400;
+      line-height: 1.2;
+    }
+    
+    .card-limit-row {
+      display: flex;
+      align-items: center;
+      gap: 8rpx;
+      flex-wrap: wrap;
+    }
+    
+    .limit-label {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.7);
+      font-weight: 400;
+    }
+    
+    .bill-date {
+      font-size: 30rpx;
+      font-weight: 600;
+      color: #ffffff;
+      margin-right: 16rpx;
+    }
+    
+    .limit-value {
+      font-size: 32rpx;
+      font-weight: 700;
+      color: #52c41a;
+    }
+  }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
-    }
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+  }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+  .pos-section,
+  .record-section {
+    display: flex;
+    flex-direction: column;
+    gap: 12rpx;
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    margin-bottom: 4rpx;
+    
+    .section-title {
+      font-size: 26rpx;
+      color: #333;
+      font-weight: 600;
     }
   }
+  
+  .pos-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12rpx;
+  }
+  
+  .pos-tag {
+    font-size: 24rpx;
+    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;
+    line-height: 1.3;
+  }
+  
+  .record-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+  
+  .record-text {
+    font-size: 24rpx;
+    color: #666;
+    line-height: 1.6;
+    padding-left: 8rpx;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/work/bill/creditCardBill/addEdit.vue b/src/pages/work/bill/creditCardBill/addEdit.vue
index fcbbf99..65d15d5 100644
--- a/src/pages/work/bill/creditCardBill/addEdit.vue
+++ b/src/pages/work/bill/creditCardBill/addEdit.vue
@@ -2,8 +2,10 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="信用卡账单"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			:titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
 		>
 		</u-navbar>
       <view class="section">
@@ -35,13 +37,14 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <u-button type="primary" text="提交" @click="submit"
+              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
       <u-picker itemHeight="88" :show="showTeam" :columns="billStateList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm"></u-picker>
+        @confirm="handleConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择账单状态"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -50,9 +53,12 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
+      :closeOnClickOverlay="true"
+      cancelColor="#666666"
+      confirmColor="#667eea"
 		></u-datetime-picker>
     <u-picker itemHeight="88" :show="showCreditCard" :columns="bankCardLendList" keyName="nameCodeAvailableLimit" @cancel="handleCreditCardCancel"
-        @confirm="handleCreditCardConfirm"></u-picker>
+        @confirm="handleCreditCardConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择信用卡"></u-picker>
     </view>
   </template>
   
diff --git a/src/pages/work/bill/creditCardBill/details.vue b/src/pages/work/bill/creditCardBill/details.vue
index 8b9e3e0..68fe471 100644
--- a/src/pages/work/bill/creditCardBill/details.vue
+++ b/src/pages/work/bill/creditCardBill/details.vue
@@ -1,12 +1,22 @@
 <template>
   <view class="container">
+    <u-navbar
+      leftIconSize="40rpx"
+      leftIconColor="#ffffff"
+      title="信用卡账单明细"
+      :bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+      :titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
+    >
+    </u-navbar>
+    
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
       <view class="search-view">
         <u--input v-model="queryParams.time" border="false" disabled placeholder="请输入时间" class="search-input"
           @blur="searchBlur" suffixIcon="calendar" suffixIconStyle="color: #909399">
         </u--input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <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">
@@ -18,8 +28,10 @@
      
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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>
             <u-datetime-picker
               :closeOnClickOverlay="true"
@@ -37,37 +49,25 @@
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.accountName+'交易金额：'+item.amount" size="30rpx" color="#333333" :bold="true"></u--text>
+          <view class="item-header">
+            <view class="header-row">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="account-name">{{ item.accountName }}</text>
+            </view>
+            <view class="info-row">
+              <text class="time-text">{{ item.createTime }}</text>
+              <text class="type-text">{{ dictStr(item.dealCategory, dealCategoryList) }}</text>
+              <text class="amount-value" :class="item.dealType === '1' ? 'income' : 'expense'">{{ item.dealType === '1' ? '+' : '-' }}{{ item.amount }}元</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">记账类型：</text>
-            <text class="row-value">{{ dictStr(item.type, accountTypeList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易金额：</text>
-            <text class="row-value">{{ item.amount }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">当前余额：</text>
-            <text class="row-value">{{ item.currentBalance }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易类型：</text>
-            <text class="row-value">{{ dictStr(item.dealType, dealTypeList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易类别：</text>
-            <text class="row-value">{{ dictStr(item.dealCategory, dealCategoryList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
+          
+          <view class="card-body" v-if="item.remark">
+            <view class="remark-section">
+              <text class="remark-label">备注：</text>
+              <text class="remark-text">{{ item.remark }}</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -268,12 +268,15 @@ function dictStr(val, arr) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
   }
 
   .filter-panel {
@@ -284,14 +287,15 @@ function dictStr(val, arr) {
     background-color: rgba(0, 0, 0, 0.5);
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -312,114 +316,134 @@ function dictStr(val, arr) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
-    }
-  }
-
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
     }
-  }
 
-  .operate {
-    display: flex;
-    justify-content: flex-end;
+    .account-name {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+
+    .time-text {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
+
+    .type-text {
+      font-size: 26rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
       text-align: center;
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .amount-value {
+      font-size: 36rpx;
+      font-weight: 700;
+      line-height: 1.2;
+      flex-shrink: 0;
+      
+      &.income {
+        color: #52c41a;
+      }
+      
+      &.expense {
+        color: #f5576c;
+      }
     }
+  }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+  .card-body {
+    padding: 20rpx 24rpx;
+    background: #fff;
+    border-top: 1rpx solid #f5f7fa;
+    
+    .remark-section {
+      display: flex;
+      gap: 8rpx;
+      
+      .remark-label {
+        font-size: 24rpx;
+        color: #999;
+        font-weight: 500;
+        flex-shrink: 0;
+      }
+      
+      .remark-text {
+        font-size: 24rpx;
+        color: #666;
+        line-height: 1.5;
+        flex: 1;
+        word-break: break-all;
+      }
     }
   }
 }
diff --git a/src/pages/work/bill/creditCardBill/list.vue b/src/pages/work/bill/creditCardBill/list.vue
index cf0a6e7..6cdf908 100644
--- a/src/pages/work/bill/creditCardBill/list.vue
+++ b/src/pages/work/bill/creditCardBill/list.vue
@@ -5,10 +5,18 @@
         <u-input v-model="queryParams.creditCardName" border="false" type="select"  @click="handleCreditCard" placeholder="请选择信用卡" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
-          <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
+      </view>
+    </u-sticky>
+    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+      <view class="search-view">
+        <view style="flex: 1;"></view>
+        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
+          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
+          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3);"></u-icon>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -19,8 +27,10 @@
               </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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>
           </view>
         </u-transition>
@@ -28,59 +38,70 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.bankNameCode+ item.name" size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-row">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="card-name">{{ item.bankNameCode }}</text>
+              <view class="available-amount">
+                <text class="amount-label">可用</text>
+                <text class="amount-value">{{ item.availableLimit }}元</text>
+              </view>
+            </view>
+            <view class="info-row">
+              <text class="time-text">{{ item.billDate }}</text>
+              <text class="type-text">{{ dictStr(item.billState, billStateList) }}</text>
+              <text class="bill-amount">{{ item.billAmount }}元</text>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">账单名称：</text>
-            <text class="row-value">{{ item.name }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">账单状态：</text>
-            <text class="row-value">{{ dictStr(item.billState, billStateList) }}</text>
+          
+          <view class="card-body">
+            <view class="info-item">
+              <text class="info-label">还款日</text>
+              <text class="info-value">{{ item.repaymentDay }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">账单周期</text>
+              <text class="info-value">{{ item.billDatePeriod }}</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">账单日：</text>
-            <text class="row-value">{{ item.billDate }}</text>
+          
+          <view class="stats-body" v-if="auth.hasPermi('invest:posmachine:list')">
+            <view class="stats-row">
+              <view class="stats-item">
+                <text class="stats-label">POS机刷卡</text>
+                <text class="stats-value">{{ item.posCount || 0 }}次</text>
+              </view>
+              <view class="stats-item">
+                <text class="stats-label">日常支出</text>
+                <text class="stats-value">{{ item.dailyExpensesCount || 0 }}次</text>
+              </view>
+              <view class="stats-item">
+                <text class="stats-label">POS占比</text>
+                <text class="stats-value percent">{{ item.posRate || 0 }}</text>
+              </view>
+            </view>
+            <view class="last-trans-row">
+              <text class="last-trans-label">最近交易:</text>
+              <text class="last-trans-value">{{ item.recentDealTime || '-' }}</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">还款日：</text>
-            <text class="row-value">{{ item.repaymentDay }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">账单周期：</text>
-            <text class="row-value">{{ item.billDatePeriod }}</text>
-          </view>
-          <view class="item-row" >
-            <text class="row-label">账单金额：</text>
-            <text class="row-value">{{ item.billAmount }}</text>
-          </view>
-          <view class="item-row" >
-            <text class="row-label">可用余额：</text>
-            <text class="row-value">{{ item.availableLimit }}</text>
-          </view>
-          <view class="item-row" v-show="auth.hasPermi('invest:posmachine:list')">
-            <text class="row-label">POS刷卡次数：</text>
-            <text class="row-value">{{ item.posCount }} 次</text>
-          </view>
-          <view class="item-row" v-show="auth.hasPermi('invest:posmachine:list')">
-            <text class="row-label">日常支出次数：</text>
-            <text class="row-value">{{ item.dailyExpensesCount }} 次</text>
-          </view>
-          <view class="item-row" v-show="auth.hasPermi('invest:posmachine:list')">
-            <text class="row-label">POS占比：</text>
-            <text class="row-value">{{ item.posRate }}</text>
-          </view>
-             <view class="item-row" >
-            <text class="row-label">最近交易时间：</text>
-            <text class="row-value">{{ item.recentDealTime }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="enterDetails(item)">账单明细</view >
-               <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-detail" @click="enterDetails(item)">
+              <uni-icons type="list" size="16" color="#667eea"></uni-icons>
+              <text>账单明细</text>
+            </view>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -288,12 +309,38 @@ function selectStatus(item) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -304,14 +351,15 @@ function selectStatus(item) {
     background-color: rgba(0, 0, 0, 0.5);
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -332,114 +380,269 @@ function selectStatus(item) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
+    .card-name {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
+    .available-amount {
+      display: flex;
+      align-items: baseline;
+      gap: 6rpx;
+      flex-shrink: 0;
+    }
 
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
+    .amount-label {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.75);
+      font-weight: 400;
+    }
 
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
+    .amount-value {
+      font-size: 32rpx;
+      font-weight: 700;
+      color: #52c41a;
+      line-height: 1.2;
+    }
 
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
+    .bill-amount {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.2;
+      flex-shrink: 0;
+    }
 
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+
+    .time-text {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
+
+    .type-text {
+      font-size: 26rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      text-align: center;
+    }
+
+  }
+
+  .stats-body {
+    padding: 20rpx 24rpx;
+    background: #f5f7fa;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    border-top: 1rpx solid #e8edf3;
+  }
+
+  .stats-row {
+    display: flex;
+    gap: 24rpx;
+    align-items: flex-start;
+  }
+
+  .stats-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    min-width: 0;
+    align-items: flex-start;
+
+    .stats-label {
+      font-size: 22rpx;
+      color: #999;
+      font-weight: 400;
+      white-space: nowrap;
+    }
+
+    .stats-value {
+      font-size: 26rpx;
+      color: #333;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+      
+      &.percent {
+        color: #667eea;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .last-trans-row {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    padding-top: 12rpx;
+    border-top: 1rpx solid #e8edf3;
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+    .last-trans-label {
+      font-size: 22rpx;
+      color: #999;
+      font-weight: 400;
+      min-width: 120rpx;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .last-trans-value {
+      font-size: 24rpx;
+      color: #666;
+      font-weight: 500;
+      flex: 1;
+      text-align: left;
+    }
+  }
+
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+    display: flex;
+    gap: 16rpx;
+  }
+
+  .info-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    min-width: 0;
+
+    .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;
+      
+      &.highlight {
+        color: #52c41a;
+        font-weight: 600;
+      }
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-detail,
+    .btn-edit,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-detail {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-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/bill/creditInstallmentHistory/addEdit.vue b/src/pages/work/bill/creditInstallmentHistory/addEdit.vue
index 2a98911..9632459 100644
--- a/src/pages/work/bill/creditInstallmentHistory/addEdit.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/addEdit.vue
@@ -2,8 +2,11 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="信用卡分期账单"
+			:titleStyle="{color: '#ffffff', fontSize: '36rpx', fontWeight: '600'}"
+			:bgColor="'transparent'"
+			:customStyle="{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', boxShadow: '0 4rpx 12rpx rgba(102, 126, 234, 0.3)'}"
 		>
 		</u-navbar>
       <view class="section">
@@ -59,13 +62,17 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <u-button type="primary" text="提交" @click="submit" 
+              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
       <u-picker itemHeight="88" :show="showTeam" :columns="settleStateList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm"></u-picker>
+        @confirm="handleConfirm" 
+        title="选择结清状态"
+        :confirmColor="'#667eea'"
+        :cancelColor="'#666666'"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -74,6 +81,9 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
+			title="选择分期日期"
+			:confirmColor="'#667eea'"
+			:cancelColor="'#666666'"
 		></u-datetime-picker>
     <u-datetime-picker
 			:show="closeDatePickShow"
@@ -83,9 +93,15 @@
 			@cancel="closeDatePickShow=false"
 			@confirm="closeDatePickConfirm"
 			itemHeight="88"
+			title="选择关闭日期"
+			:confirmColor="'#667eea'"
+			:cancelColor="'#666666'"
 		></u-datetime-picker>
     <u-picker itemHeight="88" :show="showOnlineLend" :columns="bankCardLendList" keyName="nameCode" @cancel="handleOnlineLendCancel"
-        @confirm="handleOnlineLendConfirm"></u-picker>
+        @confirm="handleOnlineLendConfirm" 
+        title="选择信用卡"
+        :confirmColor="'#667eea'"
+        :cancelColor="'#666666'"></u-picker>
     </view>
   </template>
   
diff --git a/src/pages/work/bill/creditInstallmentHistory/details.vue b/src/pages/work/bill/creditInstallmentHistory/details.vue
index fd164c1..1292011 100644
--- a/src/pages/work/bill/creditInstallmentHistory/details.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/details.vue
@@ -1,48 +1,73 @@
 <template>
   <view class="container">
+    <u-navbar
+      leftIconSize="40rpx"
+      leftIconColor="#ffffff"
+      title="还款明细"
+      :bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+      :titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
+    >
+    </u-navbar>
+    
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
       <view class="search-view">
-        <u-input v-model="queryParams.name"  border="false" disabled ="false" type="select"  v-show="true" >
+        <u-input v-model="queryParams.name"  border="false" disabled ="false" type="select"  v-show="true" class="search-input">
         </u-input>
-          <!-- <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon> -->
-          <u-icon name="checkmark-circle-fill" color="#666666" size="28" style="margin-left:10px" label="总利息汇总"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleUpdateInterest()"></u-icon>
+          <view class="summary-btn" @click="handleUpdateInterest()">
+            <uni-icons type="checkmark-circle-fill" size="18" color="#ffffff"></uni-icons>
+            <text>总利息汇总</text>
+          </view>
       </view>
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item">
-          <view class="item-row">
-            <text class="row-label">还款日期：</text>
-            <text class="row-value">{{ item.repaymentDate }}</text>
+          <view class="item-header">
+            <view class="header-row">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="account-name">信用卡分期还款</text>
+            </view>
+            <view class="info-row">
+              <text class="time-text">{{ item.repaymentDate }}</text>
+              <text class="type-text">第{{ item.periods }}期</text>
+              <text class="amount-value">{{ item.currentAmount }}元</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">入账状态：</text>
-            <text class="row-value">{{ dictStr(item.postingState, postingStateList) }}</text>
+          
+          <view class="card-body">
+            <view class="info-item">
+              <text class="info-label">应还本金</text>
+              <text class="info-value">{{ item.principal }}元</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">利息</text>
+              <text class="info-value">{{ item.interest }}元</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">还款状态</text>
+              <text class="info-value" :class="item.postingState === '1' ? 'paid' : 'unpaid'">{{ dictStr(item.postingState, postingStateList) }}</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">还款期数：</text>
-            <text class="row-value">{{ item.periods }}</text>
+          
+          <view class="operate" @click.stop v-if="item.postingState !== '1'">
+            <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 class="item-row">
-            <text class="row-label">还款金额：</text>
-            <text class="row-value">{{ item.currentAmount }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">应还本金：</text>
-            <text class="row-value">{{ item.principal }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">利息：</text>
-            <text class="row-value">{{ item.interest }}</text>
-          </view>
-          <view class="operate" >
-             <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          <view class="operate" @click.stop v-else>
+            <view class="btn-view" @click="handleView(item)">
+              <uni-icons type="eye" size="16" color="#52c41a"></uni-icons>
+              <text>查看</text>
+            </view>
           </view>
         </view>
-        
       </u-list-item>
       <view>
       </view>
@@ -170,6 +195,10 @@ function handleUpdateInterest() {
       uni.navigateTo({ url: `/pages/work/bill/creditInstallmentHistory/detailsAddEdit?id=${item.id}&installmentHistoryId=${queryParams.value.installmentHistoryId}&name=${queryParams.value.name}` })
       isShow.value = true
     }
+    function handleView(item) {
+      uni.navigateTo({ url: `/pages/work/bill/creditInstallmentHistory/detailsAddEdit?id=${item.id}&installmentHistoryId=${queryParams.value.installmentHistoryId}&name=${queryParams.value.name}&viewOnly=1` })
+      isShow.value = true
+    }
     // function handleAdd() {
     //   uni.navigateTo({ url: `/pages/work/bill/creditInstallmentHistory/addEdit` })
     //   isShow.value = true
@@ -192,15 +221,6 @@ function handleUpdateInterest() {
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
-
 .search-view {
   padding: 12rpx 32rpx;
   background-color: #ffffff;
@@ -208,158 +228,201 @@ function handleUpdateInterest() {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    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);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
-      }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
-      }
+  
+  .summary-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
+    .account-name {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
 
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
+    .time-text {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
 
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
+    .type-text {
+      font-size: 26rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      text-align: center;
+    }
 
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
+    .amount-value {
+      font-size: 36rpx;
+      font-weight: 700;
+      color: #52c41a;
+      line-height: 1.2;
+      flex-shrink: 0;
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+    display: flex;
+    gap: 16rpx;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .info-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    min-width: 0;
+
+    .info-label {
+      font-size: 22rpx;
+      color: #999;
+      font-weight: 400;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .info-value {
+      font-size: 26rpx;
+      color: #333;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      
+      &.paid {
+        color: #52c41a;
+        font-weight: 600;
+      }
+      
+      &.unpaid {
+        color: #ff8c00;
+        font-weight: 600;
+      }
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-delete,
+    .btn-view {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
+    }
+    
+    .btn-view {
+      background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+      border: 1rpx solid rgba(82, 196, 26, 0.3);
     }
   }
 }
diff --git a/src/pages/work/bill/creditInstallmentHistory/detailsAddEdit.vue b/src/pages/work/bill/creditInstallmentHistory/detailsAddEdit.vue
index 397b1fc..a59e382 100644
--- a/src/pages/work/bill/creditInstallmentHistory/detailsAddEdit.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/detailsAddEdit.vue
@@ -2,8 +2,11 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="信用卡分期还款明细"
+			:titleStyle="{color: '#ffffff', fontSize: '36rpx', fontWeight: '600'}"
+			:bgColor="'transparent'"
+			:customStyle="{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', boxShadow: '0 4rpx 12rpx rgba(102, 126, 234, 0.3)'}"
 		>
 		</u-navbar>
       <view class="section">
@@ -43,13 +46,17 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <u-button type="primary" text="提交" @click="submit" 
+              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
       <u-picker itemHeight="88" :show="showTeam" :columns="postingStateList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm"></u-picker>
+        @confirm="handleConfirm" 
+        title="选择入账状态"
+        :confirmColor="'#667eea'"
+        :cancelColor="'#666666'"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -58,6 +65,9 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
+			title="选择还款日期"
+			:confirmColor="'#667eea'"
+			:cancelColor="'#666666'"
 		></u-datetime-picker>
     </view>
   </template>
diff --git a/src/pages/work/bill/creditInstallmentHistory/list.vue b/src/pages/work/bill/creditInstallmentHistory/list.vue
index da312ee..74f4157 100644
--- a/src/pages/work/bill/creditInstallmentHistory/list.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/list.vue
@@ -5,10 +5,13 @@
         <u-input v-model="queryParams.onlineLendName" border="false" type="select"  @click="handleOnlineLend" placeholder="请选择信用卡" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
-          <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
+        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
+          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
+          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3); margin-left: 12rpx;"></u-icon>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -19,8 +22,10 @@
               </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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>
           </view>
         </u-transition>
@@ -28,67 +33,88 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.bankNameCode+'：分期'+item.installmentAmount+'，共'+item.period+'期'" size="28rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-row">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="card-name">{{ item.bankNameCode }}</text>
+            </view>
+            <view class="info-row">
+              <text class="time-text">分期{{ item.installmentAmount }}元</text>
+              <text class="type-text">共{{ item.period }}期</text>
+              <text class="amount-value">{{ dictStr(item.state, settleStateList) }}</text>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">分期金额：</text>
-            <text class="row-value">{{ item.installmentAmount }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">结清状态：</text>
-            <text class="row-value">{{ dictStr(item.state, settleStateList) }}</text>
+          
+          <view class="card-body">
+            <view class="info-item">
+              <text class="info-label">分期日期</text>
+              <text class="info-value">{{ item.installmentDate }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">已还期数</text>
+              <text class="info-value">{{ item.repaidPeriod }}期</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">余额</text>
+              <text class="info-value highlight">{{ item.balance }}元</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">分期日期：</text>
-            <text class="row-value">{{ item.installmentDate }}</text>
+          
+          <view class="detail-body">
+            <view class="detail-row">
+              <view class="detail-item">
+                <text class="detail-label">年化利率</text>
+                <text class="detail-value">{{ item.interestRate || '-' }}</text>
+              </view>
+              <view class="detail-item">
+                <text class="detail-label">计算利率</text>
+                <text class="detail-value">{{ item.calculateInterestRate || '-' }}</text>
+              </view>
+            </view>
+            <view class="detail-row">
+              <view class="detail-item">
+                <text class="detail-label">剩余本金</text>
+                <text class="detail-value">{{ item.outstandingPrincipal || '0' }}元</text>
+              </view>
+              <view class="detail-item">
+                <text class="detail-label">剩余利息</text>
+                <text class="detail-value">{{ item.outstandingInterest || '0' }}元</text>
+              </view>
+            </view>
+            <view class="detail-row">
+              <view class="detail-item">
+                <text class="detail-label">总利息</text>
+                <text class="detail-value">{{ item.totalInterest || '0' }}元</text>
+              </view>
+              <view class="detail-item">
+                <text class="detail-label">到期日期</text>
+                <text class="detail-value">{{ item.dueDate || '-' }}</text>
+              </view>
+            </view>
+            <view class="detail-row">
+              <view class="detail-item">
+                <text class="detail-label">最近还款日</text>
+                <text class="detail-value">{{ parseTime(item.repaymentDate, '{y}-{m}-{d}') }}</text>
+              </view>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">分期期数：</text>
-            <text class="row-value">{{ item.period }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">已还期数：</text>
-            <text class="row-value">{{ item.repaidPeriod }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">总利息：</text>
-            <text class="row-value">{{ item.totalInterest }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">年化利率：</text>
-            <text class="row-value">{{ item.interestRate }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">计算利率：</text>
-            <text class="row-value">{{ item.calculateInterestRate }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">余额：</text>
-            <text class="row-value">{{ item.balance }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">剩余本金：</text>
-            <text class="row-value">{{ item.outstandingPrincipal }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">剩余利息：</text>
-            <text class="row-value">{{ item.outstandingInterest }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">到期日期：</text>
-            <text class="row-value">{{ item.dueDate }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">最近还款日：</text>
-            <text class="row-value">{{ parseTime(item.repaymentDate, '{y}-{m}-{d}') }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="enterDetails(item)">还款明细</view >
-               <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-detail" @click="enterDetails(item)">
+              <uni-icons type="list" size="16" color="#667eea"></uni-icons>
+              <text>还款明细</text>
+            </view>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -298,12 +324,38 @@ function selectStatus(item) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -314,14 +366,15 @@ function selectStatus(item) {
     background-color: rgba(0, 0, 0, 0.5);
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -342,114 +395,217 @@ function selectStatus(item) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
+    .card-name {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
 
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
+    .time-text {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
 
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
+    .type-text {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.85);
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      text-align: center;
+    }
 
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
+    .amount-value {
+      font-size: 26rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.2;
+      flex-shrink: 0;
+    }
+  }
 
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+    display: flex;
+    gap: 16rpx;
+  }
+
+  .info-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    min-width: 0;
+
+    .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;
+      
+      &.highlight {
+        color: #52c41a;
+        font-weight: 600;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .detail-body {
+    padding: 20rpx 24rpx;
+    background: #f5f7fa;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    border-top: 1rpx solid #e8edf3;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .detail-row {
+    display: flex;
+    gap: 24rpx;
+  }
+
+  .detail-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    min-width: 0;
+
+    .detail-label {
+      font-size: 22rpx;
+      color: #999;
+      font-weight: 400;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .detail-value {
+      font-size: 24rpx;
+      color: #333;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-detail,
+    .btn-edit,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-detail {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-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/bill/creditQueryRecord/addEdit.vue b/src/pages/work/bill/creditQueryRecord/addEdit.vue
index b264391..4cf4d4f 100644
--- a/src/pages/work/bill/creditQueryRecord/addEdit.vue
+++ b/src/pages/work/bill/creditQueryRecord/addEdit.vue
@@ -2,8 +2,11 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="征信记录查询"
+			:titleStyle="{color: '#ffffff', fontSize: '36rpx', fontWeight: '600'}"
+			:bgColor="'transparent'"
+			:customStyle="{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', boxShadow: '0 4rpx 12rpx rgba(102, 126, 234, 0.3)'}"
 		>
 		</u-navbar>
       <view class="section">
@@ -30,13 +33,17 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <u-button type="primary" text="提交" @click="submit" 
+              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
       <u-picker itemHeight="88" :show="showTeam" :columns="typeList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm"></u-picker>
+        @confirm="handleConfirm" 
+        title="选择查询原因"
+        :confirmColor="'#667eea'"
+        :cancelColor="'#666666'"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -45,6 +52,9 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
+			title="选择查询日期"
+			:confirmColor="'#667eea'"
+			:cancelColor="'#666666'"
 		></u-datetime-picker>
     </view>
   </template>
diff --git a/src/pages/work/bill/creditQueryRecord/analysis.vue b/src/pages/work/bill/creditQueryRecord/analysis.vue
index 24ee7a5..56c3db4 100644
--- a/src/pages/work/bill/creditQueryRecord/analysis.vue
+++ b/src/pages/work/bill/creditQueryRecord/analysis.vue
@@ -2,20 +2,53 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="征信查询记录统计"
+			:titleStyle="{color: '#ffffff', fontSize: '36rpx', fontWeight: '600'}"
+			:bgColor="'transparent'"
+			:customStyle="{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', boxShadow: '0 4rpx 12rpx rgba(102, 126, 234, 0.3)'}"
 		>
 		</u-navbar>
       <view class="section">
-        <u-cell-group>
-        <u-cell title="近1个月查询次数:" titleStyle="font-weight:bolder" :value="detailInfo.lastOneMonths"></u-cell>
-        <u-cell title="近2个月查询次数:" titleStyle="font-weight:bolder" :value="detailInfo.lastTwoMonths"></u-cell>
-        <u-cell title="近3个月查询次数" titleStyle="font-weight:bolder" :value="detailInfo.lastThreeMonths"></u-cell>
-        <u-cell title="近6个月查询次数" titleStyle="font-weight:bolder" :value="detailInfo.lastSixMonths"></u-cell>
-        <u-cell title="近1年查询次数:" titleStyle="font-weight:bolder" center :value="detailInfo.lastOneYears"> </u-cell>
-        <u-cell title="近2年查询次数:" titleStyle="font-weight:bolder" center :value="detailInfo.lastTwoYears"> </u-cell>
-        <u-cell title="总查询次数:" titleStyle="font-weight:bolder" center :value="detailInfo.lastAllYears"> </u-cell>
-      </u-cell-group>
+        <view class="stats-card">
+          <view class="card-header">
+            <view class="header-icon">
+              <uni-icons type="pie-chart-filled" size="24" color="#ffffff"></uni-icons>
+            </view>
+            <text class="header-title">查询次数统计</text>
+          </view>
+          
+          <view class="card-body">
+            <view class="stats-item">
+              <text class="stats-label">近1个月</text>
+              <text class="stats-value">{{ detailInfo.lastOneMonths || 0 }}次</text>
+            </view>
+            <view class="stats-item">
+              <text class="stats-label">近2个月</text>
+              <text class="stats-value">{{ detailInfo.lastTwoMonths || 0 }}次</text>
+            </view>
+            <view class="stats-item">
+              <text class="stats-label">近3个月</text>
+              <text class="stats-value">{{ detailInfo.lastThreeMonths || 0 }}次</text>
+            </view>
+            <view class="stats-item">
+              <text class="stats-label">近6个月</text>
+              <text class="stats-value">{{ detailInfo.lastSixMonths || 0 }}次</text>
+            </view>
+            <view class="stats-item">
+              <text class="stats-label">近1年</text>
+              <text class="stats-value">{{ detailInfo.lastOneYears || 0 }}次</text>
+            </view>
+            <view class="stats-item">
+              <text class="stats-label">近2年</text>
+              <text class="stats-value">{{ detailInfo.lastTwoYears || 0 }}次</text>
+            </view>
+            <view class="stats-item highlight">
+              <text class="stats-label">总查询次数</text>
+              <text class="stats-value">{{ detailInfo.lastAllYears || 0 }}次</text>
+            </view>
+          </view>
+        </view>
       </view>
       <u-toast ref="uToast"></u-toast>
     </view>
@@ -46,37 +79,82 @@ onLoad((option) => {
   <style lang="scss" scoped>
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
   
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
-  
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
-    }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+    .stats-card {
+      background-color: #fff;
+      border-radius: 24rpx;
+      overflow: hidden;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+      .card-header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 32rpx;
+        display: flex;
+        align-items: center;
+        gap: 16rpx;
+
+        .header-icon {
+          width: 56rpx;
+          height: 56rpx;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.2);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .header-title {
+          font-size: 36rpx;
+          color: #ffffff;
+          font-weight: 600;
+          flex: 1;
+        }
+      }
+
+      .card-body {
+        padding: 32rpx;
+
+        .stats-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 28rpx 24rpx;
+          background: #f5f7fa;
+          border-radius: 16rpx;
+          margin-bottom: 16rpx;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          &.highlight {
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+            border: 2rpx solid rgba(102, 126, 234, 0.3);
+
+            .stats-label {
+              font-size: 30rpx;
+              color: #667eea;
+              font-weight: 600;
+            }
+
+            .stats-value {
+              font-size: 36rpx;
+              color: #667eea;
+              font-weight: 700;
+            }
+          }
+
+          .stats-label {
+            font-size: 28rpx;
+            color: #666;
+          }
+
+          .stats-value {
+            font-size: 32rpx;
+            color: #333;
+            font-weight: 600;
+          }
+        }
       }
     }
   }
diff --git a/src/pages/work/bill/creditQueryRecord/details.vue b/src/pages/work/bill/creditQueryRecord/details.vue
index 247ca73..5fd7b73 100644
--- a/src/pages/work/bill/creditQueryRecord/details.vue
+++ b/src/pages/work/bill/creditQueryRecord/details.vue
@@ -2,18 +2,41 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="征信查询记录详情"
+			:titleStyle="{color: '#ffffff', fontSize: '36rpx', fontWeight: '600'}"
+			:bgColor="'transparent'"
+			:customStyle="{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', boxShadow: '0 4rpx 12rpx rgba(102, 126, 234, 0.3)'}"
 		>
 		</u-navbar>
       <view class="section">
-        <u-cell-group>
-        <u-cell title="查询机构:" titleStyle="font-weight:bolder" :value="detailInfo.queryInstitution"></u-cell>
-        <u-cell title="查询日期:" titleStyle="font-weight:bolder" :value="detailInfo.queryDate"></u-cell>
-        <u-cell title="查询原因：" titleStyle="font-weight:bolder" :value="detailInfo.type"></u-cell>
-        <u-cell title="查询类型：" titleStyle="font-weight:bolder" :value="detailInfo.queryType"></u-cell>
-        <u-cell title="内容:" titleStyle="font-weight:bolder" center :value="detailInfo.remark"> </u-cell>
-      </u-cell-group>
+        <view class="detail-card">
+          <view class="card-header">
+            <view class="header-icon">
+              <uni-icons type="search" size="24" color="#ffffff"></uni-icons>
+            </view>
+            <text class="header-title">{{ detailInfo.queryInstitution }}</text>
+          </view>
+          
+          <view class="card-body">
+            <view class="info-item">
+              <text class="info-label">查询日期</text>
+              <text class="info-value">{{ detailInfo.queryDate }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">查询原因</text>
+              <text class="info-value">{{ detailInfo.type }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">查询类型</text>
+              <text class="info-value">{{ detailInfo.queryType }}</text>
+            </view>
+            <view class="info-item" v-if="detailInfo.remark">
+              <text class="info-label">备注</text>
+              <text class="info-value remark">{{ detailInfo.remark }}</text>
+            </view>
+          </view>
+        </view>
       </view>
       <u-toast ref="uToast"></u-toast>
     </view>
@@ -60,37 +83,73 @@ onLoad((option) => {
   <style lang="scss" scoped>
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
   
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
-  
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
-    }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+    .detail-card {
+      background-color: #fff;
+      border-radius: 24rpx;
+      overflow: hidden;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+      .card-header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 32rpx;
+        display: flex;
+        align-items: center;
+        gap: 16rpx;
+
+        .header-icon {
+          width: 56rpx;
+          height: 56rpx;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.2);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .header-title {
+          font-size: 36rpx;
+          color: #ffffff;
+          font-weight: 600;
+          flex: 1;
+        }
+      }
+
+      .card-body {
+        padding: 32rpx;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          padding: 24rpx 0;
+          border-bottom: 1rpx solid #f0f0f0;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .info-label {
+            font-size: 28rpx;
+            color: #999;
+            flex-shrink: 0;
+            width: 160rpx;
+          }
+
+          .info-value {
+            font-size: 28rpx;
+            color: #333;
+            font-weight: 500;
+            flex: 1;
+            text-align: right;
+
+            &.remark {
+              text-align: left;
+              line-height: 1.6;
+              margin-left: 32rpx;
+            }
+          }
+        }
       }
     }
   }
diff --git a/src/pages/work/bill/creditQueryRecord/list.vue b/src/pages/work/bill/creditQueryRecord/list.vue
index ce55abb..0937868 100644
--- a/src/pages/work/bill/creditQueryRecord/list.vue
+++ b/src/pages/work/bill/creditQueryRecord/list.vue
@@ -5,12 +5,17 @@
         <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="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
-          <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
-          <u-icon name="clock-fill" color="#666666" size="28" style="margin-left:10px" label="统计"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleQueryAnalysis()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
+        <view class="stats-btn" @click="handleQueryAnalysis()">
+          <uni-icons type="pie-chart-filled" size="18" color="#ffffff"></uni-icons>
+          <text>统计</text>
+        </view>
+        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
+          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
+          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3); margin-left: 12rpx;"></u-icon>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -26,8 +31,10 @@
               </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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>
           </view>
         </u-transition>
@@ -35,32 +42,41 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.queryDate+'：'+item.queryInstitution" size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-row">
+              <view class="card-icon">
+                <uni-icons type="search" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="card-name">{{ item.queryInstitution }}</text>
+            </view>
+            <view class="info-row">
+              <text class="time-text">{{ item.queryDate }}</text>
+              <text class="type-text">{{ dictStr(item.type, typeList) }}</text>
+              <text class="query-type">{{ dictStr(item.queryType, queryTypeList) }}</text>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">查询日期：</text>
-            <text class="row-value">{{ item.queryDate }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">查询原因：</text>
-            <text class="row-value">{{ dictStr(item.type, typeList) }}</text>
+          
+          <view class="card-body" v-if="item.remark">
+            <view class="remark-section">
+              <text class="remark-label">备注:</text>
+              <text class="remark-text">{{ item.remark }}</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">查询类型：</text>
-            <text class="row-value">{{ dictStr(item.queryType, queryTypeList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <!-- <view class="btn filling" @click="enterDetails(item)">查看</view > -->
-               <view class="btn filling" @click="handleEdit(item)">修改</view>
-               <view class="btn filling" @click="handleCopy(item)">复制</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" @click="handleCopy(item)">
+              <uni-icons type="copy" size="16" color="#52c41a"></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>
@@ -246,17 +262,8 @@ function selectStatus(item) {
 </script>
 
 <style lang="scss" scoped>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
-
 .search-view {
-  padding: 12rpx 32rpx;
+  padding: 12rpx 24rpx;
   background-color: #ffffff;
   display: flex;
   justify-content: space-between;
@@ -265,9 +272,28 @@ function selectStatus(item) {
   margin-bottom: 24rpx;
 
   .search-input {
+    flex: 1;
     background: #F5F5F5;
     color: #333333;
-    margin-right: 36rpx;
+    margin-right: 12rpx;
+  }
+
+  .add-btn,
+  .stats-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 8rpx 20rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 20rpx;
+    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+    margin-left: 12rpx;
+
+    text {
+      font-size: 26rpx;
+      color: #ffffff;
+      font-weight: 500;
+    }
   }
 
   .filter-panel {
@@ -276,6 +302,7 @@ function selectStatus(item) {
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 99;
 
     .filter-panel-content {
       background-color: #ffff;
@@ -306,8 +333,9 @@ function selectStatus(item) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background-color: rgba(102, 126, 234, 0.1);
+          border: 1rpx solid #667eea;
+          color: #667eea;
         }
       }
     }
@@ -317,103 +345,143 @@ function selectStatus(item) {
       padding: 24rpx 30rpx;
       background-color: #fff;
       box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      gap: 16rpx;
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 24rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
 
   .item-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 24rpx 32rpx;
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+      margin-bottom: 16rpx;
+
+      .card-icon {
+        width: 48rpx;
+        height: 48rpx;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .card-name {
+        font-size: 32rpx;
+        color: #ffffff;
+        font-weight: 600;
+        flex: 1;
+      }
+    }
+
+    .info-row {
+      display: flex;
+      align-items: center;
+      gap: 24rpx;
+      padding-left: 64rpx;
+
+      .time-text {
+        font-size: 26rpx;
+        color: rgba(255, 255, 255, 0.9);
+      }
+
+      .type-text {
         font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.8);
+        padding: 4rpx 16rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 12rpx;
       }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+      .query-type {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.8);
+        padding: 4rpx 16rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 12rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx 32rpx;
+    background: #ffffff;
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+    .remark-section {
+      display: flex;
+      gap: 12rpx;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+      .remark-label {
+        font-size: 26rpx;
+        color: #999;
+        flex-shrink: 0;
+      }
+
+      .remark-text {
+        font-size: 26rpx;
+        color: #333;
+        flex: 1;
+        line-height: 1.6;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    gap: 16rpx;
+    padding: 24rpx 32rpx;
+    background: #f5f7fa;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      border-radius: 16rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+
+      text {
+        font-size: 26rpx;
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+
+      text {
+        color: #667eea;
+      }
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-copy {
+      background: rgba(82, 196, 26, 0.1);
+
+      text {
+        color: #52c41a;
+      }
+    }
+
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+
+      text {
+        color: #f5576c;
+      }
     }
   }
 }
diff --git a/src/pages/work/bill/futuresBill/addEdit.vue b/src/pages/work/bill/futuresBill/addEdit.vue
index 7d4dcf2..4fd84f3 100644
--- a/src/pages/work/bill/futuresBill/addEdit.vue
+++ b/src/pages/work/bill/futuresBill/addEdit.vue
@@ -1,13 +1,14 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
-			title="期货账单"
+			leftIconColor="#ffffff"
+			:title="title"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
       <view class="section">
-        <view class="section-title">{{ title}}</view>
         <view class="form-view">
           <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
             :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -30,7 +31,8 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <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>
           </view>
         </view>
       </view>
@@ -46,8 +48,19 @@
 			@confirm="datePickConfirm"
 			itemHeight="88"
 		></u-datetime-picker>
-    <u-picker itemHeight="88" :show="showFutureStocks" :columns="futureStocksBillList" keyName="nameCode" @cancel="handleFutureStocksCancel"
-        @confirm="handleFutureStocksConfirm"></u-picker>
+    <u-picker 
+      itemHeight="88" 
+      :show="showFutureStocks" 
+      :columns="futureStocksBillList" 
+      keyName="nameCode" 
+      @cancel="handleFutureStocksCancel"
+      @confirm="handleFutureStocksConfirm"
+      :closeOnClickOverlay="true"
+      :defaultIndex="[0]"
+      cancelColor="#666666"
+      confirmColor="#667eea"
+      title="选择期货账户"
+      ></u-picker>
     </view>
   </template>
   
@@ -180,27 +193,24 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 360rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
-  
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
-      }
+.container {
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
+.section {
+  margin: 24rpx;
+  padding: 32rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+
+  .form-view {
+    padding: 0;
+
+    .form-btn {
+      padding-top: 40rpx;
     }
   }
+}
   </style>
\ No newline at end of file
diff --git a/src/pages/work/bill/futuresBill/details.vue b/src/pages/work/bill/futuresBill/details.vue
index f1c333e..11a8784 100644
--- a/src/pages/work/bill/futuresBill/details.vue
+++ b/src/pages/work/bill/futuresBill/details.vue
@@ -5,8 +5,9 @@
         <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="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <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">
@@ -18,8 +19,10 @@
      
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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"
@@ -38,36 +41,27 @@
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item">
           <view class="item-header">
-            <u--text  lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.accountName+ dictStr(item.dealType, dealTypeList)+'金额：'+item.amount" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="checkmark-circle-filled" size="20" :color="item.dealType === '1' ? '#52c41a' : '#f5576c'"></uni-icons>
+              </view>
+              <text class="card-date">{{ item.createTime }}</text>
+            </view>
+            <text class="card-name">{{ dictStr(item.dealType, dealTypeList) }}</text>
+            <text class="card-amount" :class="item.dealType === '1' ? 'profit' : 'loss'"><text class="amount-value">{{ item.amount }}</text>元</text>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">记账类型：</text>
-            <text class="row-value">{{ dictStr(item.type, accountTypeList) }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">交易时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易金额：</text>
-            <text class="row-value">{{ item.amount }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">当前余额：</text>
-            <text class="row-value">{{ item.currentBalance }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">收益类型：</text>
-            <text class="row-value">{{ dictStr(item.dealType, dealTypeList) }}</text>
-          </view>
-          <!-- <view class="item-row">
-            <text class="row-label">收益类型：</text>
-            <text class="row-value">{{ dictStr(item.dealCategory, dealCategoryList) }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">账户名称</text>
+                <text class="info-value">{{ item.accountName }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">当前余额</text>
+                <text class="info-value">{{ item.currentBalance }}元</text>
+              </view>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -248,11 +242,15 @@ function dictStr(val, arr) {
   align-items: center;
   position: relative;
   margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
   }
 
   .filter-panel {
@@ -261,16 +259,18 @@ function dictStr(val, arr) {
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -291,114 +291,136 @@ function dictStr(val, arr) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
-
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
-    }
-  }
-
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 80rpx;
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+      flex-shrink: 0;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .card-icon {
+      width: 48rpx;
+      height: 48rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .card-date {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.95);
+      white-space: nowrap;
+      flex-shrink: 0;
+      font-weight: 600;
+      line-height: 1;
     }
-  }
 
-  .operate {
-    display: flex;
-    justify-content: flex-end;
-
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
+    .card-name {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #ffffff;
+      white-space: nowrap;
+      flex-shrink: 0;
+      flex: 1;
       text-align: center;
+      line-height: 1;
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .card-amount {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.9);
+      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;
+      }
+      
+      &.profit {
+        .amount-value {
+          color: #52c41a;
+        }
+      }
+      
+      &.loss {
+        .amount-value {
+          color: #f5576c;
+        }
+      }
     }
+  }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
+
+  .info-row {
+    display: flex;
+    gap: 24rpx;
+
+    .info-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      min-width: 0;
+
+      .info-label {
+        font-size: 24rpx;
+        color: #999;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 }
diff --git a/src/pages/work/bill/futuresBill/list.vue b/src/pages/work/bill/futuresBill/list.vue
index ca3c683..adb1ebd 100644
--- a/src/pages/work/bill/futuresBill/list.vue
+++ b/src/pages/work/bill/futuresBill/list.vue
@@ -5,33 +5,45 @@
         <u-input v-model="queryParams.futureStocksName" border="false" type="select"  @click="handleFutureStocks" placeholder="请选择期货账户" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-          <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
       </view>
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.futureStocksNameCode+item.name" size="28rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="date-row">
+              <view class="card-icon">
+                <uni-icons type="chart-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="bill-name" v-if="item.name">{{ item.name }}</text>
+              <text class="card-date">({{ item.billDatePeriod }})</text>
+            </view>
+            <view class="info-row">
+              <text class="card-name">{{ item.futureStocksNameCode }}</text>
+              <view class="profit-tag" :class="item.billAmount >= 0 ? 'profit' : 'loss'">
+                <text>{{ item.billAmount >= 0 ? '盈利' : '亏损' }}</text>
+              </view>
+              <text class="card-amount" :class="item.billAmount >= 0 ? 'profit' : 'loss'"><text class="amount-value">{{ item.billAmount }}</text>元</text>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">账单名称：</text>
-            <text class="row-value">{{ item.name }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">账单周期：</text>
-            <text class="row-value">{{ item.billDatePeriod }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">期货收益：</text>
-            <text class="row-value">{{ item.billAmount }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="enterDetails(item)">账单明细</view >
-               <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-detail" @click="enterDetails(item)">
+              <uni-icons type="list" size="16" color="#52c41a"></uni-icons>
+              <text>账单明细</text>
+            </view>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -41,8 +53,19 @@
     </u-list>
     <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
       @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
-      <u-picker itemHeight="88" :show="showFutureStocks" :columns="futureStocksBillList" keyName="nameCode" @cancel="handleFutureStocksCancel"
-        @confirm="handleFutureStocksConfirm"></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showFutureStocks" 
+        :columns="futureStocksBillList" 
+        keyName="nameCode" 
+        @cancel="handleFutureStocksCancel"
+        @confirm="handleFutureStocksConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择期货账户"
+        ></u-picker>
   </view>
   <!-- 悬停按钮返回工作台-->
   <suspend></suspend>
@@ -239,157 +262,191 @@ function selectStatus(item) {
   align-items: center;
   position: relative;
   margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    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);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
-      }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
-      }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
-
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
-    }
-  }
-
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+    flex-direction: column;
+    gap: 20rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .date-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+      flex-wrap: wrap;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .card-date {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 400;
+      line-height: 1.3;
+    }
+
+    .bill-name {
+      font-size: 30rpx;
+      color: rgba(255, 255, 255, 0.95);
+      font-weight: 600;
+      line-height: 1.3;
+    }
+
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+
+    .card-name {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .profit-tag {
+      padding: 6rpx 16rpx;
+      border-radius: 12rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      line-height: 1;
+      flex-shrink: 0;
+      
+      &.profit {
+        background: rgba(82, 196, 26, 0.25);
+        color: #52c41a;
+      }
+      
+      &.loss {
+        background: rgba(245, 87, 108, 0.25);
+        color: #f5576c;
+      }
+    }
+
+    .card-amount {
+      font-size: 24rpx;
+      font-weight: 500;
+      line-height: 1.3;
+      white-space: nowrap;
+      flex-shrink: 0;
+      
+      &.profit {
+        color: #52c41a;
+      }
+      
+      &.loss {
+        color: #f5576c;
+      }
+      
+      .amount-value {
+        font-size: 40rpx;
+        font-weight: 700;
+        margin-right: 4rpx;
+      }
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-detail,
+    .btn-edit,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-detail {
+      background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+      border: 1rpx solid rgba(82, 196, 26, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .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/bill/onlineLendHistory/addEdit.vue b/src/pages/work/bill/onlineLendHistory/addEdit.vue
index fb87edd..8b60170 100644
--- a/src/pages/work/bill/onlineLendHistory/addEdit.vue
+++ b/src/pages/work/bill/onlineLendHistory/addEdit.vue
@@ -2,8 +2,10 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="贷款账单"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			:titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
 		>
 		</u-navbar>
       <view class="section">
@@ -64,13 +66,14 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <u-button type="primary" text="提交" @click="submit"
+              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
       <u-picker itemHeight="88" :show="showTeam" :columns="settleStateList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm"></u-picker>
+        @confirm="handleConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择结清状态"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -79,6 +82,9 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
+      :closeOnClickOverlay="true"
+      cancelColor="#666666"
+      confirmColor="#667eea"
 		></u-datetime-picker>
     <u-datetime-picker
 			:show="closeDatePickShow"
@@ -88,11 +94,14 @@
 			@cancel="closeDatePickShow=false"
 			@confirm="closeDatePickConfirm"
 			itemHeight="88"
+      :closeOnClickOverlay="true"
+      cancelColor="#666666"
+      confirmColor="#667eea"
 		></u-datetime-picker>
     <u-picker itemHeight="88" :show="showOnlineLend" :columns="bankCardLendList" keyName="nameCode" @cancel="handleOnlineLendCancel"
-        @confirm="handleOnlineLendConfirm"></u-picker>
+        @confirm="handleOnlineLendConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择贷款机构"></u-picker>
         <u-picker itemHeight="88" :show="showDebitCard" :columns="debitCardList" keyName="nameCode" @cancel="handleDebitCardCancel"
-        @confirm="handleDebitCardConfirm"></u-picker>
+        @confirm="handleDebitCardConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择收款账户"></u-picker>
     </view>
   </template>
   
diff --git a/src/pages/work/bill/onlineLendHistory/details.vue b/src/pages/work/bill/onlineLendHistory/details.vue
index 9c3bc13..92f1e89 100644
--- a/src/pages/work/bill/onlineLendHistory/details.vue
+++ b/src/pages/work/bill/onlineLendHistory/details.vue
@@ -1,53 +1,73 @@
 <template>
   <view class="container">
+    <u-navbar
+      leftIconSize="40rpx"
+      leftIconColor="#ffffff"
+      title="还款明细"
+      :bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+      :titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
+    >
+    </u-navbar>
+    
     <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
       <view class="search-view">
-        <u-input v-model="queryParams.name"  border="false" disabled ="false" type="select"  v-show="true" >
+        <u-input v-model="queryParams.name"  border="false" disabled ="false" type="select"  v-show="true" class="search-input">
         </u-input>
-          <!-- <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon> -->
-          <u-icon name="checkmark-circle-fill" color="#666666" size="28" style="margin-left:10px" label="总利息汇总"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleUpdateInterest()"></u-icon>
+          <view class="summary-btn" @click="handleUpdateInterest()">
+            <uni-icons type="checkmark-circle-fill" size="18" color="#ffffff"></uni-icons>
+            <text>总利息汇总</text>
+          </view>
       </view>
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item">
-           <view class="item-row">
-            <text class="row-label">还款账户：</text>
-            <text class="row-value">{{ item.repaymentAccountName }}</text>
+          <view class="item-header">
+            <view class="header-row">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="account-name">{{ item.repaymentAccountName }}</text>
+            </view>
+            <view class="info-row">
+              <text class="time-text">{{ item.repaymentDate }}</text>
+              <text class="type-text">第{{ item.periods }}期</text>
+              <text class="amount-value">{{ item.currentAmount }}元</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">还款日期：</text>
-            <text class="row-value">{{ item.repaymentDate }}</text>
+          
+          <view class="card-body">
+            <view class="info-item">
+              <text class="info-label">应还本金</text>
+              <text class="info-value">{{ item.principal }}元</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">利息</text>
+              <text class="info-value">{{ item.interest }}元</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">还款状态</text>
+              <text class="info-value" :class="item.postingState === '1' ? 'paid' : 'unpaid'">{{ dictStr(item.postingState, postingStateList) }}</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">还款状态：</text>
-            <text class="row-value">{{ dictStr(item.postingState, postingStateList) }}</text>
+          
+          <view class="operate" @click.stop v-if="item.postingState !== '1'">
+            <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 class="item-row">
-            <text class="row-label">还款期数：</text>
-            <text class="row-value">{{ item.periods }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">还款金额：</text>
-            <text class="row-value">{{ item.currentAmount }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">应还本金：</text>
-            <text class="row-value">{{ item.principal }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">利息：</text>
-            <text class="row-value">{{ item.interest }}</text>
-          </view>
-          <view class="operate" >
-             <view class="btn filling" @click="handleEdit(item)" v-if="item.postingState !== '1'">修改</view>
-             <view class="btn filling" @click="handleView(item)" v-else>查看</view>
-            <view class="btn filling" @click="handleDelete(item)" v-if="item.postingState !== '1'">删除</view>
+          <view class="operate" @click.stop v-else>
+            <view class="btn-view" @click="handleView(item)">
+              <uni-icons type="eye" size="16" color="#52c41a"></uni-icons>
+              <text>查看</text>
+            </view>
           </view>
         </view>
-        
       </u-list-item>
       <view>
       </view>
@@ -217,158 +237,201 @@ function handleUpdateInterest() {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    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);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
-      }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
-      }
+  
+  .summary-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
+    .account-name {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
 
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
+    .time-text {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
 
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
+    .type-text {
+      font-size: 26rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      text-align: center;
+    }
 
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
+    .amount-value {
+      font-size: 36rpx;
+      font-weight: 700;
+      color: #52c41a;
+      line-height: 1.2;
+      flex-shrink: 0;
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+    display: flex;
+    gap: 16rpx;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .info-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    min-width: 0;
+
+    .info-label {
+      font-size: 22rpx;
+      color: #999;
+      font-weight: 400;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .info-value {
+      font-size: 26rpx;
+      color: #333;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      
+      &.paid {
+        color: #52c41a;
+        font-weight: 600;
+      }
+      
+      &.unpaid {
+        color: #ff8c00;
+        font-weight: 600;
+      }
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-delete,
+    .btn-view {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
+    }
+    
+    .btn-view {
+      background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+      border: 1rpx solid rgba(82, 196, 26, 0.3);
     }
   }
 }
diff --git a/src/pages/work/bill/onlineLendHistory/detailsAddEdit.vue b/src/pages/work/bill/onlineLendHistory/detailsAddEdit.vue
index 1dbe27e..70920d8 100644
--- a/src/pages/work/bill/onlineLendHistory/detailsAddEdit.vue
+++ b/src/pages/work/bill/onlineLendHistory/detailsAddEdit.vue
@@ -2,8 +2,10 @@
     <view class="container" style="paddingBottom:1rpx;">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
+			leftIconColor="#ffffff"
 			title="贷款账单还款明细"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			:titleStyle="{ color: '#ffffff', fontSize: '36rpx', fontWeight: '600' }"
 		>
 		</u-navbar>
       <view class="section">
@@ -48,13 +50,14 @@
             </u-form-item>
           </u--form>
           <view class="form-btn" v-if="!viewOnly">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <u-button type="primary" text="提交" @click="submit"
+              customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: 600; height: 96rpx; box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);"></u-button>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
       <u-picker itemHeight="88" :show="showTeam" :columns="postingStateList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm"></u-picker>
+        @confirm="handleConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择还款状态"></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -63,9 +66,12 @@
 			@cancel="datePickShow=false"
 			@confirm="datePickConfirm"
 			itemHeight="88"
+      :closeOnClickOverlay="true"
+      cancelColor="#666666"
+      confirmColor="#667eea"
 		></u-datetime-picker>
       <u-picker itemHeight="88" :show="showDebitCard" :columns="debitCardList" keyName="nameCode" @cancel="handleDebitCardCancel"
-        @confirm="handleDebitCardConfirm"></u-picker>
+        @confirm="handleDebitCardConfirm" :closeOnClickOverlay="true" cancelColor="#666666" confirmColor="#667eea" title="选择还款账户"></u-picker>
     </view>
   </template>
   
diff --git a/src/pages/work/bill/onlineLendHistory/list.vue b/src/pages/work/bill/onlineLendHistory/list.vue
index c2d11fd..a612132 100644
--- a/src/pages/work/bill/onlineLendHistory/list.vue
+++ b/src/pages/work/bill/onlineLendHistory/list.vue
@@ -5,10 +5,13 @@
         <u-input v-model="queryParams.onlineLendName" border="false" type="select"  @click="handleOnlineLend" placeholder="请选择贷款机构" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
-          <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
+        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#667eea" size="28" label="筛选"
+          labelPos="left" labelSize="28rpx" labelColor="#667eea" @click="filterPanel = !filterPanel"
+          style="display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; background: rgba(102, 126, 234, 0.1); border-radius: 20rpx; border: 1rpx solid rgba(102, 126, 234, 0.3); margin-left: 12rpx;"></u-icon>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -19,8 +22,10 @@
               </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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>
           </view>
         </u-transition>
@@ -28,67 +33,92 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.bankNameCode+'：借款'+item.installmentAmount+'，分'+item.period+'期'" size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-row">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="card-name">{{ item.bankNameCode }}</text>
+            </view>
+            <view class="info-row">
+              <text class="time-text">{{ item.installmentDate }}</text>
+              <text class="type-text">{{ dictStr(item.state, settleStateList) }}</text>
+              <text class="amount-value">{{ item.installmentAmount }}元</text>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">借款金额：</text>
-            <text class="row-value">{{ item.installmentAmount }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">结清状态：</text>
-            <text class="row-value">{{ dictStr(item.state, settleStateList) }}</text>
+          
+          <view class="card-body">
+            <view class="info-item">
+              <text class="info-label">借款期数</text>
+              <text class="info-value">{{ item.period }}期</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">已还期数</text>
+              <text class="info-value">{{ item.repaidPeriod }}期</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">余额</text>
+              <text class="info-value highlight">{{ item.balance }}元</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">借款日期：</text>
-            <text class="row-value">{{ item.installmentDate }}</text>
+          
+          <view class="detail-body">
+            <view class="detail-row">
+              <view class="detail-item">
+                <text class="detail-label">年化利率</text>
+                <text class="detail-value">{{ item.interestRate || '-' }}</text>
+              </view>
+              <view class="detail-item">
+                <text class="detail-label">计算利率</text>
+                <text class="detail-value">{{ item.calculateInterestRate || '-' }}</text>
+              </view>
+            </view>
+            <view class="detail-row">
+              <view class="detail-item">
+                <text class="detail-label">剩余本金</text>
+                <text class="detail-value">{{ item.outstandingPrincipal || '0' }}元</text>
+              </view>
+              <view class="detail-item">
+                <text class="detail-label">剩余利息</text>
+                <text class="detail-value">{{ item.outstandingInterest || '0' }}元</text>
+              </view>
+            </view>
+            <view class="detail-row">
+              <view class="detail-item">
+                <text class="detail-label">到期日期</text>
+                <text class="detail-value">{{ item.dueDate || '-' }}</text>
+              </view>
+              <view class="detail-item">
+                <text class="detail-label">收款账户</text>
+                <text class="detail-value">{{ item.receivingAccountName || '-' }}</text>
+              </view>
+            </view>
+            <view class="detail-row">
+              <view class="detail-item">
+                <text class="detail-label">贷款天数</text>
+                <text class="detail-value">{{ item.loanDays || '-' }}</text>
+              </view>
+              <view class="detail-item">
+                <text class="detail-label">最近还款日</text>
+                <text class="detail-value">{{ formatRepaymentDate(item.repaymentDate) || '-' }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">收款账户：</text>
-            <text class="row-value">{{ item.receivingAccountNameCode }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">已还期数：</text>
-            <text class="row-value">{{ item.repaidPeriod }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">总利息：</text>
-            <text class="row-value">{{ item.totalInterest }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">年化利率：</text>
-            <text class="row-value">{{ item.interestRate }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">计算利率：</text>
-            <text class="row-value">{{ item.calculateInterestRate }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">余额：</text>
-            <text class="row-value">{{ item.balance }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">剩余本金：</text>
-            <text class="row-value">{{ item.outstandingPrincipal }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">剩余利息：</text>
-            <text class="row-value">{{ item.outstandingInterest }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">到期日期：</text>
-            <text class="row-value">{{ item.dueDate }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">最近还款日：</text>
-            <text class="row-value">{{ parseTime(item.repaymentDate, '{y}-{m}-{d}') }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="enterDetails(item)">还款明细</view >
-               <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-detail" @click="enterDetails(item)">
+              <uni-icons type="list" size="16" color="#667eea"></uni-icons>
+              <text>还款明细</text>
+            </view>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -113,6 +143,7 @@ import {
 } from '@/api/invest/installmentHistory'
 import { getDicts } from '@/api/system/dict/data.js'
 import { listBankcardLend } from '@/api/invest/bankcardlend'
+import dayjs from 'dayjs'
 import {onLoad,onShow} from "@dcloudio/uni-app";
     // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
 import {reactive ,toRefs,ref,computed }from "vue";
@@ -279,6 +310,11 @@ function selectStatus(item) {
         	}
         });
     }
+
+    function formatRepaymentDate(timestamp) {
+      if (!timestamp) return '-'
+      return dayjs(timestamp).format('YYYY-MM-DD')
+    }
 	
 </script>
 
@@ -299,12 +335,38 @@ function selectStatus(item) {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -315,14 +377,15 @@ function selectStatus(item) {
     background-color: rgba(0, 0, 0, 0.5);
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -343,114 +406,221 @@ function selectStatus(item) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
+    .card-name {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
 
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
+    .time-text {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
 
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
+    .type-text {
+      font-size: 26rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      text-align: center;
+    }
 
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
+    .amount-value {
+      font-size: 36rpx;
+      font-weight: 700;
+      color: #52c41a;
+      line-height: 1.2;
+      flex-shrink: 0;
+    }
+  }
 
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+    display: flex;
+    gap: 16rpx;
+  }
+
+  .info-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    min-width: 0;
+
+    .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;
+      
+      &.highlight {
+        color: #52c41a;
+        font-weight: 600;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .detail-body {
+    padding: 20rpx 24rpx;
+    background: #f5f7fa;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    border-top: 1rpx solid #e8edf3;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .detail-row {
+    display: flex;
+    gap: 24rpx;
+  }
+
+  .detail-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    min-width: 0;
+
+    &.full-width {
+      flex: 2;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .detail-label {
+      font-size: 22rpx;
+      color: #999;
+      font-weight: 400;
+    }
+
+    .detail-value {
+      font-size: 24rpx;
+      color: #333;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-detail,
+    .btn-edit,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-detail {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-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/bill/peopleLendHistory/addEdit.vue b/src/pages/work/bill/peopleLendHistory/addEdit.vue
index ea9b468..0a34e13 100644
--- a/src/pages/work/bill/peopleLendHistory/addEdit.vue
+++ b/src/pages/work/bill/peopleLendHistory/addEdit.vue
@@ -1,13 +1,14 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
-			title="人情账单"
+			leftIconColor="#ffffff"
+			:title="title"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
       <view class="section">
-        <view class="section-title">{{ title}}</view>
         <view class="form-view">
           <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
             :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -39,13 +40,25 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <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>
           </view>
         </view>
       </view>
       <u-toast ref="uToast"></u-toast>
-      <u-picker itemHeight="88" :show="showTeam" :columns="settleStateList" keyName="dictLabel" @cancel="handleCancel"
-        @confirm="handleConfirm"></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showTeam" 
+        :columns="settleStateList" 
+        keyName="dictLabel" 
+        @cancel="handleCancel"
+        @confirm="handleConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择结清状态"
+        ></u-picker>
         <u-datetime-picker
 			:show="datePickShow"
 			mode="date"
@@ -64,8 +77,19 @@
 			@confirm="closeDatePickConfirm"
 			itemHeight="88"
 		></u-datetime-picker>
-    <u-picker itemHeight="88" :show="showOnlineLend" :columns="bankCardLendList" keyName="nameCode" @cancel="handleOnlineLendCancel"
-        @confirm="handleOnlineLendConfirm"></u-picker>
+    <u-picker 
+      itemHeight="88" 
+      :show="showOnlineLend" 
+      :columns="bankCardLendList" 
+      keyName="nameCode" 
+      @cancel="handleOnlineLendCancel"
+      @confirm="handleOnlineLendConfirm"
+      :closeOnClickOverlay="true"
+      :defaultIndex="[0]"
+      cancelColor="#666666"
+      confirmColor="#667eea"
+      title="选择人情借贷"
+      ></u-picker>
     </view>
   </template>
   
@@ -246,27 +270,24 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 360rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
-  
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
-      }
+.container {
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
+.section {
+  margin: 24rpx;
+  padding: 32rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+
+  .form-view {
+    padding: 0;
+
+    .form-btn {
+      padding-top: 40rpx;
     }
   }
+}
   </style>
\ No newline at end of file
diff --git a/src/pages/work/bill/peopleLendHistory/list.vue b/src/pages/work/bill/peopleLendHistory/list.vue
index a71fd98..7cf196c 100644
--- a/src/pages/work/bill/peopleLendHistory/list.vue
+++ b/src/pages/work/bill/peopleLendHistory/list.vue
@@ -5,10 +5,13 @@
         <u-input v-model="queryParams.onlineLendName" border="false" type="select"  @click="handleOnlineLend" placeholder="请选择人情借贷" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
-          <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <u-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>
+        </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -19,8 +22,10 @@
               </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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>
           </view>
         </u-transition>
@@ -28,34 +33,47 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.installmentDate+'：借'+item.bankNameCode+item.installmentAmount" size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="card-date">{{ item.installmentDate }}</text>
+            </view>
+            <text class="card-name">借{{ item.bankNameCode }}</text>
+            <text class="card-amount"><text class="amount-value">{{ item.installmentAmount }}</text>元</text>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">借款金额：</text>
-            <text class="row-value">{{ item.installmentAmount }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">结清状态：</text>
-            <text class="row-value">{{ dictStr(item.state, settleStateList) }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">结清状态</text>
+                <text class="info-value">{{ dictStr(item.state, settleStateList) }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">借款时长</text>
+                <text class="info-value">{{ item.loanDays }}天</text>
+              </view>
+            </view>
+            
+            <view class="info-row" v-if="item.closeDate">
+              <view class="info-item">
+                <text class="info-label">还款日期</text>
+                <text class="info-value">{{ item.closeDate }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">借款时长：</text>
-            <text class="row-value">{{ item.loanDays }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">还款日期：</text>
-            <text class="row-value">{{ item.closeDate }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-               <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -65,8 +83,19 @@
     </u-list>
     <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
       @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
-      <u-picker itemHeight="88" :show="showOnlineLend" :columns="bankCardLendList" keyName="nameCode" @cancel="handleOnlineLendCancel"
-        @confirm="handleOnlineLendConfirm"></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showOnlineLend" 
+        :columns="bankCardLendList" 
+        keyName="nameCode" 
+        @cancel="handleOnlineLendCancel"
+        @confirm="handleOnlineLendConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择人情借贷"
+        ></u-picker>
   </view>
   <!-- 悬停按钮返回工作台-->
   <suspend></suspend>
@@ -266,11 +295,38 @@ function selectStatus(item) {
   align-items: center;
   position: relative;
   margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -279,16 +335,18 @@ function selectStatus(item) {
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -309,114 +367,166 @@ function selectStatus(item) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 80rpx;
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+      flex-shrink: 0;
+    }
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .card-icon {
+      width: 48rpx;
+      height: 48rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .card-date {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.95);
+      white-space: nowrap;
+      flex-shrink: 0;
+      font-weight: 600;
+      line-height: 1;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .card-name {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #ffffff;
+      white-space: nowrap;
+      flex-shrink: 0;
+      flex: 1;
+      text-align: center;
+      line-height: 1;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+    .card-amount {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.9);
+      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;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .info-row {
+    display: flex;
+    gap: 24rpx;
+    margin-bottom: 20rpx;
+
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .info-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      min-width: 0;
+
+      .info-label {
+        font-size: 24rpx;
+        color: #999;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 16rpx;
+    padding: 0 24rpx 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }
diff --git a/src/pages/work/bill/stocksBill/addEdit.vue b/src/pages/work/bill/stocksBill/addEdit.vue
index c2dc6f5..6d1fba9 100644
--- a/src/pages/work/bill/stocksBill/addEdit.vue
+++ b/src/pages/work/bill/stocksBill/addEdit.vue
@@ -1,13 +1,14 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <u-navbar
 			leftIconSize="40rpx"
-			leftIconColor="#333333"
-			title="股票账单"
+			leftIconColor="#ffffff"
+			:title="title"
+			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+			titleStyle="color: #ffffff; font-weight: 600;"
 		>
 		</u-navbar>
       <view class="section">
-        <view class="section-title">{{ title}}</view>
         <view class="form-view">
           <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
             :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -30,7 +31,8 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <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>
           </view>
         </view>
       </view>
@@ -46,8 +48,19 @@
 			@confirm="datePickConfirm"
 			itemHeight="88"
 		></u-datetime-picker>
-    <u-picker itemHeight="88" :show="showFutureStocks" :columns="futureStocksBillList" keyName="nameCode" @cancel="handleFutureStocksCancel"
-        @confirm="handleFutureStocksConfirm"></u-picker>
+    <u-picker 
+      itemHeight="88" 
+      :show="showFutureStocks" 
+      :columns="futureStocksBillList" 
+      keyName="nameCode" 
+      @cancel="handleFutureStocksCancel"
+      @confirm="handleFutureStocksConfirm"
+      :closeOnClickOverlay="true"
+      :defaultIndex="[0]"
+      cancelColor="#666666"
+      confirmColor="#667eea"
+      title="选择股票账户"
+      ></u-picker>
     </view>
   </template>
   
@@ -180,27 +193,24 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
-  
-    .section-title {
-      width: 360rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
-    }
-  
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
-      }
+.container {
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
+.section {
+  margin: 24rpx;
+  padding: 32rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+
+  .form-view {
+    padding: 0;
+
+    .form-btn {
+      padding-top: 40rpx;
     }
   }
+}
   </style>
\ No newline at end of file
diff --git a/src/pages/work/bill/stocksBill/details.vue b/src/pages/work/bill/stocksBill/details.vue
index 9b62f86..905120a 100644
--- a/src/pages/work/bill/stocksBill/details.vue
+++ b/src/pages/work/bill/stocksBill/details.vue
@@ -5,8 +5,9 @@
         <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="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <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">
@@ -18,8 +19,10 @@
      
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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"
@@ -38,36 +41,27 @@
       <u-list-item v-for="(item, index) in listData" :key="index">
         <view class="list-item">
           <view class="item-header">
-            <u--text lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.accountName+ dictStr(item.dealType, dealTypeList)+'金额：'+item.amount" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="checkmark-circle-filled" size="20" :color="item.dealType === '1' ? '#52c41a' : '#f5576c'"></uni-icons>
+              </view>
+              <text class="card-date">{{ item.createTime }}</text>
+            </view>
+            <text class="card-name">{{ dictStr(item.dealType, dealTypeList) }}</text>
+            <text class="card-amount" :class="item.dealType === '1' ? 'profit' : 'loss'"><text class="amount-value">{{ item.amount }}</text>元</text>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">记账类型：</text>
-            <text class="row-value">{{ dictStr(item.type, accountTypeList) }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">交易时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">交易金额：</text>
-            <text class="row-value">{{ item.amount }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">当前余额：</text>
-            <text class="row-value">{{ item.currentBalance }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">收益类型：</text>
-            <text class="row-value">{{ dictStr(item.dealType, dealTypeList) }}</text>
-          </view>
-          <!-- <view class="item-row">
-            <text class="row-label">交易类别：</text>
-            <text class="row-value">{{ dictStr(item.dealCategory, dealCategoryList) }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">账户名称</text>
+                <text class="info-value">{{ item.accountName }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">当前余额</text>
+                <text class="info-value">{{ item.currentBalance }}元</text>
+              </view>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -248,11 +242,15 @@ function dictStr(val, arr) {
   align-items: center;
   position: relative;
   margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
   }
 
   .filter-panel {
@@ -261,16 +259,18 @@ function dictStr(val, arr) {
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -291,114 +291,136 @@ function dictStr(val, arr) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
-
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
-    }
-  }
-
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 80rpx;
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+      flex-shrink: 0;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .card-icon {
+      width: 48rpx;
+      height: 48rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .card-date {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.95);
+      white-space: nowrap;
+      flex-shrink: 0;
+      font-weight: 600;
+      line-height: 1;
     }
-  }
 
-  .operate {
-    display: flex;
-    justify-content: flex-end;
-
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
+    .card-name {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #ffffff;
+      white-space: nowrap;
+      flex-shrink: 0;
+      flex: 1;
       text-align: center;
+      line-height: 1;
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .card-amount {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.9);
+      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;
+      }
+      
+      &.profit {
+        .amount-value {
+          color: #52c41a;
+        }
+      }
+      
+      &.loss {
+        .amount-value {
+          color: #f5576c;
+        }
+      }
     }
+  }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
+
+  .info-row {
+    display: flex;
+    gap: 24rpx;
+
+    .info-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      min-width: 0;
+
+      .info-label {
+        font-size: 24rpx;
+        color: #999;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 }
diff --git a/src/pages/work/bill/stocksBill/list.vue b/src/pages/work/bill/stocksBill/list.vue
index 48690a4..c4f2a14 100644
--- a/src/pages/work/bill/stocksBill/list.vue
+++ b/src/pages/work/bill/stocksBill/list.vue
@@ -5,33 +5,45 @@
         <u-input v-model="queryParams.futureStocksName" border="false" type="select"  @click="handleFutureStocks" placeholder="请选择股票账户" suffixIcon="search"
 	    suffixIconStyle="color: #909399" class="search-input">
         </u-input>
-          <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plus-filled" size="18" color="#ffffff"></uni-icons>
+          <text>新增</text>
+        </view>
       </view>
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
-          <view class="item-header" @click="enterDetails(item)">
-            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.futureStocksNameCode+item.name " size="28rpx" color="#333333" :bold="true"></u--text>
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="date-row">
+              <view class="card-icon">
+                <uni-icons type="stock-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="bill-name" v-if="item.name">{{ item.name }}</text>
+              <text class="card-date">({{ item.billDatePeriod }})</text>
+            </view>
+            <view class="info-row">
+              <text class="card-name">{{ item.futureStocksNameCode }}</text>
+              <view class="profit-tag" :class="item.billAmount >= 0 ? 'profit' : 'loss'">
+                <text>{{ item.billAmount >= 0 ? '盈利' : '亏损' }}</text>
+              </view>
+              <text class="card-amount" :class="item.billAmount >= 0 ? 'profit' : 'loss'"><text class="amount-value">{{ item.billAmount }}</text>元</text>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">账单名称：</text>
-            <text class="row-value">{{ item.name }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">账单周期：</text>
-            <text class="row-value">{{ item.billDatePeriod }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">股票收益：</text>
-            <text class="row-value">{{ item.billAmount }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="enterDetails(item)">账单明细</view >
-               <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-detail" @click="enterDetails(item)">
+              <uni-icons type="list" size="16" color="#52c41a"></uni-icons>
+              <text>账单明细</text>
+            </view>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -41,8 +53,19 @@
     </u-list>
     <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
       @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
-      <u-picker itemHeight="88" :show="showFutureStocks" :columns="futureStocksBillList" keyName="nameCode" @cancel="handleFutureStocksCancel"
-        @confirm="handleFutureStocksConfirm"></u-picker>
+      <u-picker 
+        itemHeight="88" 
+        :show="showFutureStocks" 
+        :columns="futureStocksBillList" 
+        keyName="nameCode" 
+        @cancel="handleFutureStocksCancel"
+        @confirm="handleFutureStocksConfirm"
+        :closeOnClickOverlay="true"
+        :defaultIndex="[0]"
+        cancelColor="#666666"
+        confirmColor="#667eea"
+        title="选择股票账户"
+        ></u-picker>
   </view>
   <!-- 悬停按钮返回工作台-->
   <suspend></suspend>
@@ -232,157 +255,191 @@ function selectStatus(item) {
   align-items: center;
   position: relative;
   margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    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);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
-      }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
-      }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 16rpx;
-
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
-      }
-    }
-  }
-
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+    flex-direction: column;
+    gap: 20rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .date-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+      flex-wrap: wrap;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .card-icon {
+      width: 44rpx;
+      height: 44rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .card-date {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 400;
+      line-height: 1.3;
+    }
+
+    .bill-name {
+      font-size: 30rpx;
+      color: rgba(255, 255, 255, 0.95);
+      font-weight: 600;
+      line-height: 1.3;
+    }
+
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+
+    .card-name {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .profit-tag {
+      padding: 6rpx 16rpx;
+      border-radius: 12rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      line-height: 1;
+      flex-shrink: 0;
+      
+      &.profit {
+        background: rgba(82, 196, 26, 0.25);
+        color: #52c41a;
+      }
+      
+      &.loss {
+        background: rgba(245, 87, 108, 0.25);
+        color: #f5576c;
+      }
+    }
+
+    .card-amount {
+      font-size: 24rpx;
+      font-weight: 500;
+      line-height: 1.3;
+      white-space: nowrap;
+      flex-shrink: 0;
+      
+      &.profit {
+        color: #52c41a;
+      }
+      
+      &.loss {
+        color: #f5576c;
+      }
+      
+      .amount-value {
+        font-size: 40rpx;
+        font-weight: 700;
+        margin-right: 4rpx;
+      }
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-detail,
+    .btn-edit,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-detail {
+      background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+      border: 1rpx solid rgba(82, 196, 26, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .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/product/productPriceRecord/addEdit.vue b/src/pages/work/product/productPriceRecord/addEdit.vue
index c27560e..0c23c73 100644
--- a/src/pages/work/product/productPriceRecord/addEdit.vue
+++ b/src/pages/work/product/productPriceRecord/addEdit.vue
@@ -1,13 +1,14 @@
 <template>
-  <view class="container" style="paddingBottom:1rpx;">
+  <view class="container">
     <u-navbar
-    leftIconSize="40rpx"
-    leftIconColor="#333333"
-    title="物价记录"
-  >
-  </u-navbar>
+      leftIconSize="40rpx"
+      leftIconColor="#ffffff"
+      :title="title"
+      :bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
+      titleStyle="color: #ffffff; font-weight: 600;"
+    >
+    </u-navbar>
     <view class="section">
-      <view class="section-title">{{ title}}</view>
       <view class="form-view">
         <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
           :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
@@ -52,17 +53,51 @@
           </u-form-item>
         </u--form>
         <view class="form-btn">
-          <u-button type="primary" text="提交" @click="submit"></u-button>
+          <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>
         </view>
       </view>
     </view>
     <u-toast ref="uToast"></u-toast>
-    <u-picker itemHeight="88" :show="showCategory" :columns="categoryTypeList" keyName="dictLabel" @cancel="handleCategoryCancel"
-      @confirm="handleCategoryConfirm"></u-picker>
-      <u-picker itemHeight="88" :show="showProductName" :columns="productNameList" keyName="name" @cancel="handleProductNameCancel"
-      @confirm="handleProductNameConfirm"></u-picker>
-      <u-picker itemHeight="88" :show="showUnit" :columns="unitList" keyName="dictLabel" @cancel="handleUnitCancel"
-      @confirm="handleUnitConfirm"></u-picker>
+    <u-picker 
+      itemHeight="88" 
+      :show="showCategory" 
+      :columns="categoryTypeList" 
+      keyName="dictLabel" 
+      @cancel="handleCategoryCancel"
+      @confirm="handleCategoryConfirm"
+      :closeOnClickOverlay="true"
+      :defaultIndex="[0]"
+      cancelColor="#666666"
+      confirmColor="#667eea"
+      title="选择商品类别"
+      ></u-picker>
+    <u-picker 
+      itemHeight="88" 
+      :show="showProductName" 
+      :columns="productNameList" 
+      keyName="name" 
+      @cancel="handleProductNameCancel"
+      @confirm="handleProductNameConfirm"
+      :closeOnClickOverlay="true"
+      :defaultIndex="[0]"
+      cancelColor="#666666"
+      confirmColor="#667eea"
+      title="选择商品名称"
+      ></u-picker>
+    <u-picker 
+      itemHeight="88" 
+      :show="showUnit" 
+      :columns="unitList" 
+      keyName="dictLabel" 
+      @cancel="handleUnitCancel"
+      @confirm="handleUnitConfirm"
+      :closeOnClickOverlay="true"
+      :defaultIndex="[0]"
+      cancelColor="#666666"
+      confirmColor="#667eea"
+      title="选择单位"
+      ></u-picker>
       <u-datetime-picker
     :show="datePickShow"
     mode="datetime"
@@ -313,26 +348,23 @@ function submit() {
 </script>
 
 <style lang="scss" scoped>
+.container {
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
 .section {
   margin: 24rpx;
-  padding: 16rpx 24rpx;
+  padding: 32rpx;
   background-color: #fff;
-  border-radius: 8rpx;
-
-  .section-title {
-    width: 360rpx;
-    color: #333333;
-    line-height: 44rpx;
-    font-size: 30rpx;
-    border-left: 6rpx solid #2681FF;
-    padding-left: 26rpx;
-  }
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .form-view {
-    padding: 20rpx 0rpx 0 10rpx;
+    padding: 0;
 
     .form-btn {
-      padding-top: 20rpx;
+      padding-top: 40rpx;
     }
   }
 }
diff --git a/src/pages/work/product/productPriceRecord/list.vue b/src/pages/work/product/productPriceRecord/list.vue
index 69dc013..b5211bd 100644
--- a/src/pages/work/product/productPriceRecord/list.vue
+++ b/src/pages/work/product/productPriceRecord/list.vue
@@ -5,10 +5,13 @@
         <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="#666666" size="28" label="筛选"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
-          <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
+        <u-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>
+        </view>
         <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
@@ -46,8 +49,10 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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"
@@ -65,37 +70,53 @@
     </u-sticky>
     <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
       <u-list-item v-for="(item, index) in listData" :key="index">
-        <view class="list-item">
+        <view class="list-item" @click="handleEdit(item)">
           <view class="item-header">
-            <u--text lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.kind+' 价格：'+item.price+' 元/'+dictStr(item.unit, unitList)" size="30rpx" color="#333333" :bold="true"></u--text>
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="pricetag-filled" 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>
+              </view>
+            </view>
+            <text class="card-price"><text class="price-value">{{ item.price }}</text>元/{{ dictStr(item.unit, unitList) }}</text>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">商品编码：</text>
-            <text class="row-value">{{ item.code }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">类别：</text>
-            <text class="row-value">{{ dictStr(item.category, productTypeList) }}</text>
+          
+          <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">{{ 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>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">记录时间：</text>
-            <text class="row-value">{{ item.recordTime }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">地点：</text>
-            <text class="row-value">{{ item.address }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">商家：</text>
-            <text class="row-value">{{ item.merchant }}</text>
-          </view>
-       
-          <view class="operate" >
-            <!-- <view class="btn filling" @click="enterDetails(item)">查看</view > -->
-               <view class="btn filling" @click="handleEdit(item)">修改</view>
-               <view class="btn filling" @click="handleCopy(item)">复制</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" @click="handleCopy(item)">
+              <uni-icons type="copy" size="16" color="#faad14"></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>
@@ -299,11 +320,38 @@ function selectStatus(item) {
   align-items: center;
   position: relative;
   margin-bottom: 24rpx;
+  z-index: 100;
 
   .search-input {
-    background: #F5F5F5;
+    background: #f5f7fa;
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 1rpx solid #e8edf3;
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 12rpx 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);
+    }
+    
+    text {
+      color: #ffffff;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
   }
 
   .filter-panel {
@@ -312,16 +360,18 @@ function selectStatus(item) {
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx;
       }
 
       .state-list {
@@ -342,114 +392,182 @@ function selectStatus(item) {
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 16rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      box-shadow: 0rpx -4rpx 16rpx rgba(0, 0, 0, 0.08);
     }
   }
 }
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
+    padding: 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;
+    }
 
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-      }
+    .card-icon {
+      width: 48rpx;
+      height: 48rpx;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    .card-info {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+      flex: 1;
+      min-width: 0;
+    }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
+    .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;
+      color: rgba(255, 255, 255, 0.95);
+      white-space: nowrap;
+      flex-shrink: 0;
+      font-weight: 500;
+      line-height: 1;
+    }
 
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+    .card-price {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+      white-space: nowrap;
+      flex-shrink: 0;
+      line-height: 1;
+      
+      .price-value {
+        font-size: 32rpx;
+        font-weight: 700;
+        color: #ffffff;
+        margin-right: 4rpx;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .info-row {
+    display: flex;
+    gap: 24rpx;
+    margin-bottom: 20rpx;
+
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .info-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      min-width: 0;
+
+      .info-label {
+        font-size: 24rpx;
+        color: #999;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
   .operate {
     display: flex;
-    justify-content: flex-end;
+    gap: 12rpx;
+    padding: 0 24rpx 24rpx;
+    background: #fff;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    .btn-copy {
+      background: rgba(250, 173, 20, 0.1);
+      color: #faad14;
+      border: 1rpx solid rgba(250, 173, 20, 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_mine/pages/about/index.vue b/src/pages_mine/pages/about/index.vue
index 7a06567..3649892 100644
--- a/src/pages_mine/pages/about/index.vue
+++ b/src/pages_mine/pages/about/index.vue
@@ -1,71 +1,226 @@
 <template>
   <view class="about-container">
-    <view class="header-section text-center">
-      <image style="width: 150rpx;height: 150rpx;" src="/static/logo.png" mode="widthFix">
-      </image>
-      <uni-title type="h2" title="智聪网络科技"></uni-title>
+    <view class="header-section">
+      <view class="logo-wrapper">
+        <image class="logo-image" src="/static/logo.png" mode="aspectFit"></image>
+        <view class="logo-shine"></view>
+      </view>
+      <text class="app-name">智聪网络科技</text>
+      <text class="app-slogan">专业的财务管理工具</text>
     </view>
 
-    <view class="content-section">
-      <view class="menu-list">
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>版本信息</view>
-            <view class="text-right">v{{version}}</view>
+    <view class="info-card">
+      <view class="info-item" v-for="(item, index) in infoList" :key="index">
+        <view class="item-left">
+          <view class="info-icon" :style="{ background: item.gradient }">
+            <uni-icons :type="item.icon" size="20" color="#ffffff"></uni-icons>
           </view>
+          <text class="item-label">{{ item.label }}</text>
         </view>
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>官方邮箱</view>
-            <view class="text-right">qdintc@126com</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>服务热线</view>
-            <view class="text-right">17753252359</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>公司网站</view>
-            <view class="text-right">
-              <uni-link :href="url" :text="url" showUnderLine="false"></uni-link>
-            </view>
-          </view>
+        <view class="item-right">
+          <uni-link v-if="item.isLink" :href="item.value" :text="item.displayText" showUnderLine="false" color="#667eea"></uni-link>
+          <text v-else class="item-value">{{ item.value }}</text>
         </view>
       </view>
     </view>
 
     <view class="copyright">
-      <view>Copyright &copy; 2025 智聪网络科技 All Rights Reserved.</view>
+      <text class="copyright-text">Copyright &copy; 2025 智聪网络科技</text>
+      <text class="copyright-text">All Rights Reserved.</text>
     </view>
   </view>
 </template>
 
 <script setup>
-	import config from '@/config.js'
-	const url=config.appInfo.site_url;
-	const version=config.appInfo.version;
+import { computed } from 'vue'
+import config from '@/config.js'
+
+const url = config.appInfo.site_url
+const version = config.appInfo.version
+
+const infoList = computed(() => [
+  {
+    icon: 'flag',
+    label: '版本信息',
+    value: `v${version}`,
+    displayText: `v${version}`,
+    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    isLink: false
+  },
+  {
+    icon: 'email',
+    label: '官方邮箱',
+    value: 'qdintc@126.com',
+    displayText: 'qdintc@126.com',
+    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+    isLink: false
+  },
+  {
+    icon: 'phone',
+    label: '服务热线',
+    value: '17753252359',
+    displayText: '17753252359',
+    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+    isLink: false
+  },
+  {
+    icon: 'home',
+    label: '公司网站',
+    value: url,
+    displayText: url,
+    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
+    isLink: true
+  }
+])
   
 </script>
 
-<style lang="scss">
-  page {
-    background-color: #f8f8f8;
-  }
+<style lang="scss" scoped>
+page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: #f5f7fa;
+  min-height: 100%;
+  height: auto;
+}
 
-  .copyright {
-    margin-top: 50rpx;
-    text-align: center;
-    line-height: 60rpx;
-    color: #999;
-  }
+.about-container {
+  display: flex;
+  flex-direction: column;
+}
 
-  .header-section {
+.header-section {
+  padding: 60rpx 0 50rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -20%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+    animation: pulse 15s infinite;
+  }
+  
+  .logo-wrapper {
+    position: relative;
+    margin-bottom: 24rpx;
+    
+    .logo-image {
+      width: 140rpx;
+      height: 140rpx;
+      border-radius: 28rpx;
+      box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.2);
+      background: #ffffff;
+      padding: 16rpx;
+    }
+    
+    .logo-shine {
+      position: absolute;
+      top: -10rpx;
+      right: -10rpx;
+      width: 40rpx;
+      height: 40rpx;
+      background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
+      border-radius: 20rpx;
+      border: 4rpx solid #667eea;
+    }
+  }
+  
+  .app-name {
+    color: #ffffff;
+    font-size: 36rpx;
+    font-weight: 700;
+    margin-bottom: 8rpx;
+  }
+  
+  .app-slogan {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 26rpx;
+  }
+}
+
+.info-card {
+  margin: 10rpx 24rpx 24rpx;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 20rpx;
+  padding: 4rpx 0;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+  flex: 1;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx 20rpx;
+  
+  &:not(:last-child) {
+    border-bottom: 1rpx solid #e8edf3;
+  }
+  
+  .item-left {
     display: flex;
-    padding: 30rpx 0 0;
-    flex-direction: column;
     align-items: center;
+    
+    .info-icon {
+      width: 56rpx;
+      height: 56rpx;
+      border-radius: 14rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 20rpx;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+      flex-shrink: 0;
+    }
+    
+    .item-label {
+      color: #606266;
+      font-size: 26rpx;
+      font-weight: 500;
+    }
   }
+  
+  .item-right {
+    flex: 1;
+    text-align: right;
+    
+    .item-value {
+      color: #303133;
+      font-size: 26rpx;
+    }
+  }
+}
+
+.copyright {
+  padding: 32rpx 24rpx 50rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6rpx;
+  
+  .copyright-text {
+    color: #909399;
+    font-size: 24rpx;
+    line-height: 36rpx;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    transform: scale(1.1) rotate(180deg);
+  }
+}
 </style>
diff --git a/src/pages_mine/pages/avatar/index.vue b/src/pages_mine/pages/avatar/index.vue
index 2b97713..b4a7f3a 100644
--- a/src/pages_mine/pages/avatar/index.vue
+++ b/src/pages_mine/pages/avatar/index.vue
@@ -2,6 +2,10 @@
 	<view class="container">
 		<view class="page-body uni-content-info">
 			<view class='cropper-content'>
+				<view class="preview-tip">
+					<uni-icons type="info" size="16" color="#667eea"></uni-icons>
+					<text class="tip-text">拖动裁剪框选择头像区域</text>
+				</view>
 				<view v-if="isShowImg" class="uni-corpper"
 					:style="'width:' + cropperInitW + 'px;height:' + cropperInitH + 'px;background:#000'">
 					<view class="uni-corpper-content"
@@ -38,10 +42,20 @@
 						</view>
 					</view>
 				</view>
+				<view v-else class="empty-state">
+					<uni-icons type="images" size="80" color="#ddd"></uni-icons>
+					<text class="empty-text">请选择头像</text>
+				</view>
 			</view>
 			<view class='cropper-config'>
-				<button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button>
-				<button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button>
+				<button class="choose-btn" @click="getImage">
+					<uni-icons type="images" size="20" color="#667eea"></uni-icons>
+					<text class="btn-text">选择头像</text>
+				</button>
+				<button class="submit-btn" @click="getImageInfo">
+					<uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
+					<text class="btn-text">确认提交</text>
+				</button>
 			</view>
 			<canvas canvas-id="myCanvas"
 				:style="'position:absolute;border: 1px solid red; width:' + imageW + 'px;height:' + imageH + 'px;top:-9999px;left:-9999px;'"></canvas>
@@ -348,16 +362,124 @@ export default {
 }
 </script>
 
-<style>
-/* pages/uni-cropper/index.wxss */
+<style scoped>
+page {
+	background-color: #f5f7fa;
+}
+
+.container {
+	min-height: 100vh;
+	background-color: #f5f7fa;
+}
+
+.page-body {
+	padding: 24rpx;
+}
+
+.preview-tip {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 20rpx;
+	margin-bottom: 16rpx;
+	background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
+	border-radius: 16rpx;
+	border: 2rpx solid rgba(102, 126, 234, 0.2);
+	gap: 8rpx;
+}
+
+.tip-text {
+	color: #667eea;
+	font-size: 24rpx;
+}
+
+.empty-state {
+	width: 100%;
+	height: 750rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+	border-radius: 24rpx;
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+}
+
+.empty-text {
+	color: #999;
+	font-size: 26rpx;
+	margin-top: 24rpx;
+}
 
 .cropper-config {
-	padding: 20rpx 40rpx;
+	padding: 32rpx 0;
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.choose-btn {
+	width: 100%;
+	height: 88rpx;
+	background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+	border-radius: 44rpx;
+	border: 2rpx solid #667eea;
+	box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.15);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 12rpx;
+	transition: all 0.3s ease;
+}
+
+.choose-btn::after {
+	border: none;
+}
+
+.choose-btn:active {
+	transform: scale(0.98);
+	background: linear-gradient(135deg, #f8f9fb 0%, #eff1f5 100%);
+}
+
+.choose-btn .btn-text {
+	color: #667eea;
+	font-size: 32rpx;
+	font-weight: 600;
+}
+
+.submit-btn {
+	width: 100%;
+	height: 88rpx;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	border-radius: 44rpx;
+	border: none;
+	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 12rpx;
+	transition: all 0.3s ease;
+}
+
+.submit-btn::after {
+	border: none;
+}
+
+.submit-btn:active {
+	transform: scale(0.98);
+	box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+}
+
+.submit-btn .btn-text {
+	color: #ffffff;
+	font-size: 32rpx;
+	font-weight: 600;
 }
 
 .cropper-content {
 	min-height: 750rpx;
 	width: 100%;
+	margin-bottom: 8rpx;
 }
 
 .uni-corpper {
@@ -370,6 +492,8 @@ export default {
 	-webkit-tap-highlight-color: transparent;
 	-webkit-touch-callout: none;
 	box-sizing: border-box;
+	border-radius: 24rpx;
+	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
 }
 
 .uni-corpper-content {
@@ -415,8 +539,9 @@ export default {
 	width: 100%;
 	height: 100%;
 	overflow: visible;
-	outline: 1rpx solid #69f;
-	outline-color: rgba(102, 153, 255, .75)
+	outline: 2rpx solid #667eea;
+	outline-color: rgba(102, 126, 234, 0.9);
+	border-radius: 12rpx;
 }
 
 /* 横向虚线 */
@@ -586,12 +711,14 @@ export default {
 	-webkit-transform: translate3d(-50%, -50%, 0);
 	transform: translate3d(-50%, -50%, 0);
 	cursor: n-resize;
-	width: 36rpx;
-	height: 36rpx;
-	background-color: #69f;
+	width: 40rpx;
+	height: 40rpx;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 	position: absolute;
 	z-index: 1112;
 	opacity: 1;
+	border-radius: 50%;
+	box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
 }
 
 .point-b {
diff --git a/src/pages_mine/pages/help/index.vue b/src/pages_mine/pages/help/index.vue
index 9ed68fc..4cbf0ae 100644
--- a/src/pages_mine/pages/help/index.vue
+++ b/src/pages_mine/pages/help/index.vue
@@ -1,15 +1,24 @@
 <template>
   <view class="help-container">
-    <view v-for="(item, findex) in list" :key="findex" :title="item.title" class="list-title">
-      <view class="text-title">
-        <view :class="item.icon"></view>{{ item.title }}
+    <view v-for="(item, findex) in list" :key="findex" class="help-section">
+      <view class="section-header">
+        <view class="header-icon" :style="{ background: findex === 0 ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' }">
+          <uni-icons :type="findex === 0 ? 'help' : 'info'" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <text class="section-title">{{ item.title }}</text>
       </view>
-      <view class="childList">
-        <view v-for="(child, zindex) in item.childList" :key="zindex" class="question" hover-class="hover"
-         >
-          <view class="text-item">{{ child.title }}</view>
-          <view class="text-item">{{ child.content }}</view>
-          <view class="line" v-if="zindex !== item.childList.length - 1"></view>
+      
+      <view class="qa-card">
+        <view v-for="(child, zindex) in item.childList" :key="zindex" class="qa-item">
+          <view class="question-row">
+            <view class="q-badge">Q</view>
+            <text class="question-text">{{ child.title }}</text>
+          </view>
+          <view class="answer-row">
+            <view class="a-badge">A</view>
+            <text class="answer-text">{{ child.content }}</text>
+          </view>
+          <view class="divider" v-if="zindex !== item.childList.length - 1"></view>
         </view>
       </view>
     </view>
@@ -20,7 +29,6 @@
 	import { ref } from "vue";
 	
 	const list =ref([{
-            icon: 'iconfont icon-user',
             title: '智聪网络科技问题',
             childList: [{
               title: '智聪网络科技平台免费吗？',
@@ -34,7 +42,6 @@
             }]
           },
           {
-            icon: 'iconfont icon-help',
             title: '其他问题',
             childList: [{
               title: '如何退出登录？',
@@ -57,51 +64,132 @@
 </script>
 
 <style lang="scss" scoped>
-  page {
-    background-color: #f8f8f8;
-  }
+page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: #f5f7fa;
+  min-height: 100%;
+  height: auto;
+}
 
-  .help-container {
-    margin-bottom: 100rpx;
-    padding: 30rpx;
+.help-container {
+  padding: 24rpx;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  
+  /* 隐藏滚动条 */
+  &::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
   }
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
 
-  .list-title {
-    margin-bottom: 30rpx;
+.help-section {
+  margin-bottom: 24rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
   }
+}
 
-  .childList {
-    background: #ffffff;
-    box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
-    border-radius: 16rpx;
-    margin-top: 10rpx;
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+  
+  .header-icon {
+    width: 52rpx;
+    height: 52rpx;
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
   }
-
-  .line {
-    width: 100%;
-    height: 1rpx;
-    background-color: #F5F5F5;
-  }
-
-  .text-title {
+  
+  .section-title {
     color: #303133;
-    font-size: 32rpx;
-    font-weight: bold;
-    margin-left: 10rpx;
-
-    .iconfont {
-      font-size: 16px;
-      margin-right: 10rpx;
-    }
+    font-size: 30rpx;
+    font-weight: 600;
   }
+}
 
-  .text-item {
-    font-size: 28rpx;
-    padding: 24rpx;
+.qa-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 20rpx;
+  padding: 12rpx 0;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+}
+
+.qa-item {
+  padding: 20rpx;
+}
+
+.question-row {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 12rpx;
+  
+  .q-badge {
+    width: 36rpx;
+    height: 36rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    font-size: 22rpx;
+    font-weight: 600;
+    margin-right: 12rpx;
+    flex-shrink: 0;
   }
+  
+  .question-text {
+    flex: 1;
+    color: #303133;
+    font-size: 26rpx;
+    font-weight: 500;
+    line-height: 36rpx;
+  }
+}
 
-  .question {
+.answer-row {
+  display: flex;
+  align-items: flex-start;
+  
+  .a-badge {
+    width: 36rpx;
+    height: 36rpx;
+    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    font-size: 22rpx;
+    font-weight: 600;
+    margin-right: 12rpx;
+    flex-shrink: 0;
+  }
+  
+  .answer-text {
+    flex: 1;
     color: #606266;
-    font-size: 28rpx;
+    font-size: 24rpx;
+    line-height: 36rpx;
   }
+}
+
+.divider {
+  height: 1rpx;
+  background: linear-gradient(90deg, transparent, #e8edf3 20%, #e8edf3 80%, transparent);
+  margin: 20rpx 0;
+}
 </style>
diff --git a/src/pages_mine/pages/info/edit.vue b/src/pages_mine/pages/info/edit.vue
index 5ec9b7b..2af6c14 100644
--- a/src/pages_mine/pages/info/edit.vue
+++ b/src/pages_mine/pages/info/edit.vue
@@ -1,6 +1,6 @@
 <template>
-  <view class="container">
-    <view class="example">
+  <view class="edit-container">
+    <view class="form-card">
       <uni-forms ref="form" :model="user" labelWidth="80px">
         <uni-forms-item label="用户昵称" name="nickName">
           <uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
@@ -15,7 +15,12 @@
           <uni-data-checkbox v-model="user.sex" :localdata="sexs" />
         </uni-forms-item>
       </uni-forms>
-      <button type="primary" @click="submit">提交</button>
+    </view>
+    
+    <view class="submit-section">
+      <button class="submit-btn" @click="submit">
+        <text class="btn-text">保存修改</text>
+      </button>
     </view>
   </view>
 </template>
@@ -96,37 +101,52 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 page {
-  background-color: #ffffff;
+  background-color: #f5f7fa;
 }
 
-.example {
-  padding: 15px;
-  background-color: #fff;
+.edit-container {
+  padding: 32rpx;
 }
 
-.segmented-control {
-  margin-bottom: 15px;
+.form-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 24rpx;
+  padding: 32rpx 24rpx;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+  margin-bottom: 32rpx;
 }
 
-.button-group {
-  margin-top: 15px;
-  display: flex;
-  justify-content: space-around;
+.submit-section {
+  padding: 0 8rpx;
 }
 
-.form-item {
+.submit-btn {
+  width: 100%;
+  height: 88rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 44rpx;
+  border: none;
+  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
   display: flex;
   align-items: center;
-  flex: 1;
-}
-
-.button {
-  display: flex;
-  align-items: center;
-  height: 35px;
-  line-height: 35px;
-  margin-left: 10px;
+  justify-content: center;
+  transition: all 0.3s ease;
+  
+  &::after {
+    border: none;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+  }
+  
+  .btn-text {
+    color: #ffffff;
+    font-size: 32rpx;
+    font-weight: 600;
+  }
 }
 </style>
diff --git a/src/pages_mine/pages/info/index.vue b/src/pages_mine/pages/info/index.vue
index 9e473c8..8fcbcba 100644
--- a/src/pages_mine/pages/info/index.vue
+++ b/src/pages_mine/pages/info/index.vue
@@ -1,28 +1,55 @@
 <template>
-  <view class="container">
-    <uni-list>
-      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'person-filled' }" title="昵称" :rightText="user.nickName" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'phone-filled' }" title="手机号码"
-        :rightText="user.phonenumber" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'email-filled' }" title="邮箱" :rightText="user.email" />
-<!--      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="岗位" :rightText="postGroup" />-->
-<!--      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'staff-filled' }" title="角色" :rightText="roleGroup" />-->
-      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'calendar-filled' }" title="创建日期"
-        :rightText="user.createTime" />
-    </uni-list>
-
-<!--    <u-button @click="register()">绑定微信</u-button>-->
+  <view class="profile-container">
+    <view class="profile-card">
+      <view class="info-item" v-for="(item, index) in infoList" :key="index">
+        <view class="item-left">
+          <view class="info-icon" :style="{ background: item.gradient }">
+            <uni-icons :type="item.icon" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <text class="item-label">{{ item.label }}</text>
+        </view>
+        <text class="item-value">{{ item.value }}</text>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup>
 import { getUserProfile } from "@/api/system/user"
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import modal from "@/plugins/modal"
 
 const user = ref({})
 const roleGroup = ref("")
 const postGroup = ref("")
+
+const infoList = computed(() => [
+  {
+    icon: 'person',
+    label: '昵称',
+    value: user.value.nickName || '未设置',
+    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+  },
+  {
+    icon: 'phone',
+    label: '手机号码',
+    value: user.value.phonenumber || '未绑定',
+    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
+  },
+  {
+    icon: 'email',
+    label: '邮箱',
+    value: user.value.email || '未绑定',
+    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
+  },
+  {
+    icon: 'calendar',
+    label: '创建日期',
+    value: user.value.createTime || '-',
+    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
+  }
+])
+
 function getUser() {
   getUserProfile().then(response => {
     user.value = response.data
@@ -46,8 +73,63 @@ function register(){
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 page {
-  background-color: #ffffff;
+  background-color: #f5f7fa;
+}
+
+.profile-container {
+  padding: 32rpx;
+}
+
+.profile-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 24rpx;
+  padding: 8rpx 0;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32rpx 24rpx;
+  transition: background-color 0.3s ease;
+  
+  &:not(:last-child) {
+    border-bottom: 1rpx solid #e8edf3;
+  }
+  
+  .item-left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    
+    .info-icon {
+      width: 64rpx;
+      height: 64rpx;
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 24rpx;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+      flex-shrink: 0;
+    }
+    
+    .item-label {
+      color: #606266;
+      font-size: 28rpx;
+      font-weight: 500;
+    }
+  }
+  
+  .item-value {
+    color: #303133;
+    font-size: 28rpx;
+    max-width: 400rpx;
+    text-align: right;
+    word-break: break-all;
+  }
 }
 </style>
diff --git a/src/pages_mine/pages/pwd/index.vue b/src/pages_mine/pages/pwd/index.vue
index d0a10c5..72df1a3 100644
--- a/src/pages_mine/pages/pwd/index.vue
+++ b/src/pages_mine/pages/pwd/index.vue
@@ -1,17 +1,45 @@
 <template>
-  <view class="pwd-retrieve-container">
-    <uni-forms ref="form" :value="user" labelWidth="80px">
-      <uni-forms-item name="oldPassword" label="旧密码">
-        <uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
-      </uni-forms-item>
-      <uni-forms-item name="newPassword" label="新密码">
-        <uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
-      </uni-forms-item>
-      <uni-forms-item name="confirmPassword" label="确认密码">
-        <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
-      </uni-forms-item>
-      <button type="primary" @click="submit">提交</button>
-    </uni-forms>
+  <view class="pwd-container">
+    <view class="form-card">
+      <uni-forms ref="form" :value="user" labelWidth="80px">
+        <uni-forms-item name="oldPassword" label="旧密码">
+          <uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
+        </uni-forms-item>
+        <uni-forms-item name="newPassword" label="新密码">
+          <uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
+        </uni-forms-item>
+        <uni-forms-item name="confirmPassword" label="确认密码">
+          <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
+        </uni-forms-item>
+      </uni-forms>
+    </view>
+    
+    <view class="tips-card">
+      <view class="tips-header">
+        <uni-icons type="info" size="18" color="#667eea"></uni-icons>
+        <text class="tips-title">密码要求</text>
+      </view>
+      <view class="tips-list">
+        <view class="tip-item">
+          <text class="tip-dot">•</text>
+          <text class="tip-text">密码长度为 6-20 个字符</text>
+        </view>
+        <view class="tip-item">
+          <text class="tip-dot">•</text>
+          <text class="tip-text">建议使用字母、数字和符号组合</text>
+        </view>
+        <view class="tip-item">
+          <text class="tip-dot">•</text>
+          <text class="tip-text">不要使用容易被猜到的密码</text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="submit-section">
+      <button class="submit-btn" @click="submit">
+        <text class="btn-text">修改密码</text>
+      </button>
+    </view>
   </view>
 </template>
 
@@ -79,13 +107,99 @@
   }
 </script>
 
-<style lang="scss">
-  page {
-    background-color: #ffffff;
-  }
+<style lang="scss" scoped>
+page {
+  background-color: #f5f7fa;
+}
 
-  .pwd-retrieve-container {
-    padding-top: 36rpx;
-    padding: 15px;
+.pwd-container {
+  padding: 32rpx;
+}
+
+.form-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 24rpx;
+  padding: 32rpx 24rpx;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+  margin-bottom: 24rpx;
+}
+
+.tips-card {
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
+  border-radius: 24rpx;
+  padding: 24rpx;
+  margin-bottom: 32rpx;
+  border: 2rpx solid rgba(102, 126, 234, 0.2);
+}
+
+.tips-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+  
+  .tips-title {
+    color: #667eea;
+    font-size: 28rpx;
+    font-weight: 600;
+    margin-left: 8rpx;
   }
+}
+
+.tips-list {
+  .tip-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 8rpx;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .tip-dot {
+      color: #667eea;
+      font-size: 28rpx;
+      margin-right: 8rpx;
+      line-height: 40rpx;
+    }
+    
+    .tip-text {
+      flex: 1;
+      color: #606266;
+      font-size: 24rpx;
+      line-height: 40rpx;
+    }
+  }
+}
+
+.submit-section {
+  padding: 0 8rpx;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 88rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 44rpx;
+  border: none;
+  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  
+  &::after {
+    border: none;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+  }
+  
+  .btn-text {
+    color: #ffffff;
+    font-size: 32rpx;
+    font-weight: 600;
+  }
+}
 </style>
diff --git a/src/pages_mine/pages/setting/index.vue b/src/pages_mine/pages/setting/index.vue
index 1020a99..65465e1 100644
--- a/src/pages_mine/pages/setting/index.vue
+++ b/src/pages_mine/pages/setting/index.vue
@@ -1,33 +1,25 @@
 <template>
-  <view class="setting-container" :style="{ height: `${windowHeight}px` }">
-    <view class="menu-list">
-      <view class="list-cell list-cell-arrow" @click="handleToPwd">
-        <view class="menu-item-box">
-          <view class="iconfont icon-password menu-icon"></view>
-          <view>修改密码</view>
+  <view class="setting-container">
+    <view class="menu-card">
+      <view class="menu-item" @click="handleToPwd">
+        <view class="item-left">
+          <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+            <uni-icons type="locked" size="20" color="#ffffff"></uni-icons>
+          </view>
+          <text class="menu-text">修改密码</text>
         </view>
+        <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
       </view>
-      <!-- <view class="list-cell list-cell-arrow" @click="handleToUpgrade">
-        <view class="menu-item-box">
-          <view class="iconfont icon-refresh menu-icon"></view>
-          <view>检查更新</view>
-        </view>
-      </view> -->
-      <!-- <view class="list-cell list-cell-arrow" @click="handleCleanTmp">
-        <view class="menu-item-box">
-          <view class="iconfont icon-clean menu-icon"></view>
-          <view>清理缓存</view>
-        </view>
-      </view> -->
     </view>
-    <view class="cu-list menu">
-      <view class="cu-item item-box">
-        <view class="content text-center" @click="handleLogout">
-          <text class="text-black">退出登录</text>
-        </view>
-      </view>
+    
+    <view class="logout-section">
+      <button class="logout-btn" @click="handleLogout">
+        <uni-icons type="redo" size="20" color="#f56c6c"></uni-icons>
+        <text class="logout-text">退出登录</text>
+      </button>
     </view>
   </view>
+  
   <view>
     <uni-popup ref="popup" type="dialog">
       <uni-popup-dialog type="info" cancelText="关闭" confirmText="退出" title="通知" content="确定注销并退出系统吗"
@@ -42,7 +34,6 @@ import { ref } from "vue";
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore()
 
-const windowHeight = ref(uni.getSystemInfoSync().windowHeight);
 const popup = ref(null);
 
 function handleToPwd() {
@@ -85,20 +76,85 @@ function dialogClose() {
 </script>
 
 <style lang="scss" scoped>
-.page {
-  background-color: #f8f8f8;
+page {
+  background-color: #f5f7fa;
 }
 
-.item-box {
-  background-color: #FFFFFF;
-  margin: 30rpx;
+.setting-container {
+  padding: 32rpx;
+}
+
+.menu-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 24rpx;
+  overflow: hidden;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+  margin-bottom: 32rpx;
+}
+
+.menu-item {
   display: flex;
-  flex-direction: row;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  padding: 10rpx;
-  border-radius: 8rpx;
-  color: #303133;
-  font-size: 32rpx;
+  padding: 32rpx 24rpx;
+  transition: background-color 0.3s ease;
+  
+  &:active {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+  
+  .item-left {
+    display: flex;
+    align-items: center;
+    
+    .menu-icon-wrapper {
+      width: 64rpx;
+      height: 64rpx;
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 24rpx;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+    }
+    
+    .menu-text {
+      color: #2c3e50;
+      font-size: 28rpx;
+    }
+  }
+}
+
+.logout-section {
+  padding: 0 8rpx;
+}
+
+.logout-btn {
+  width: 100%;
+  height: 88rpx;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-radius: 44rpx;
+  border: 2rpx solid #f56c6c;
+  box-shadow: 0 4rpx 16rpx rgba(245, 108, 108, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  transition: all 0.3s ease;
+  
+  &::after {
+    border: none;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
+  }
+  
+  .logout-text {
+    color: #f56c6c;
+    font-size: 32rpx;
+    font-weight: 600;
+  }
 }
 </style>