diff --git a/src/pages/calendar/index.vue b/src/pages/calendar/index.vue
index 9090424..a27409c 100644
--- a/src/pages/calendar/index.vue
+++ b/src/pages/calendar/index.vue
@@ -26,7 +26,6 @@
   
   <view class="events-section">
     <view class="section-title">
-      <view class="title-bar"></view>
       <text class="title-text">当日事项</text>
     </view>
     <u-list height="auto">
@@ -412,22 +411,30 @@ const handleSelectDate = (info) => {
   margin: 16rpx;
   background: #ffffff;
   border-radius: 16rpx;
-  padding: 16rpx;
+  padding: 24rpx 16rpx 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
 }
 
 .section-title {
   display: flex;
   align-items: center;
-  margin-bottom: 12rpx;
+  margin-bottom: 16rpx;
+  padding-left: 16rpx;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    width: 6rpx;
+    height: 24rpx;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 3rpx;
+  }
 }
 
 .title-bar {
-  width: 6rpx;
-  height: 24rpx;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  border-radius: 3rpx;
-  margin-right: 10rpx;
+  display: none;
 }
 
 .title-text {
diff --git a/src/pages/mine.vue b/src/pages/mine.vue
index 9061fed..740cc90 100644
--- a/src/pages/mine.vue
+++ b/src/pages/mine.vue
@@ -58,7 +58,10 @@
       </view>
 
       <view class="menu-section">
-        <view class="section-title">账户管理</view>
+        <view class="section-title">
+          <view class="title-bar"></view>
+          <text class="title-text">账户管理</text>
+        </view>
         <view class="menu-card">
           <view class="menu-item" @click="handleToEditInfo">
             <view class="item-left">
@@ -83,7 +86,10 @@
       </view>
 
       <view class="menu-section">
-        <view class="section-title">帮助与支持</view>
+        <view class="section-title">
+          <view class="title-bar"></view>
+          <text class="title-text">帮助与支持</text>
+        </view>
         <view class="menu-card">
           <view class="menu-item" @click="handleHelp">
             <view class="item-left">
@@ -408,8 +414,7 @@ page {
         display: flex;
         align-items: center;
         
-        &::before {
-          content: '';
+        .title-bar {
           width: 6rpx;
           height: 28rpx;
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -417,6 +422,12 @@ page {
           margin-right: 12rpx;
           flex-shrink: 0;
         }
+        
+        .title-text {
+          color: #7f8c8d;
+          font-size: 28rpx;
+          font-weight: 600;
+        }
       }
       
       .menu-card {
diff --git a/src/pages/work/base/creditCard/addEdit.vue b/src/pages/work/base/creditCard/addEdit.vue
index 3980a37..09d8563 100644
--- a/src/pages/work/base/creditCard/addEdit.vue
+++ b/src/pages/work/base/creditCard/addEdit.vue
@@ -86,7 +86,7 @@
             </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: 24rpx; font-size: 32rpx; font-weight: 600; box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);"></u-button>
           </view>
         </view>
       </view>
@@ -319,24 +319,37 @@ onLoad((option) => {
   <style lang="scss" scoped>
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
+    padding: 0;
     background-color: #fff;
-    border-radius: 8rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    overflow: hidden;
   
     .section-title {
-      width: 360rpx;
-      color: #333333;
+      padding: 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: #ffffff;
       line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      
+      &::before {
+        content: '';
+        width: 6rpx;
+        height: 32rpx;
+        background: rgba(255, 255, 255, 0.5);
+        border-radius: 3rpx;
+        margin-right: 12rpx;
+      }
     }
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding: 24rpx;
   
       .form-btn {
-        padding-top: 20rpx;
+        padding-top: 32rpx;
       }
     }
   }
diff --git a/src/pages/work/base/creditCard/details.vue b/src/pages/work/base/creditCard/details.vue
index d3e7cb0..c14a4ee 100644
--- a/src/pages/work/base/creditCard/details.vue
+++ b/src/pages/work/base/creditCard/details.vue
@@ -1,28 +1,112 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <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.code"></u-cell>
-        <u-cell title="信用卡额度:" titleStyle="font-weight:bolder" :value="detailInfo.creditLimit"></u-cell>
-        <u-cell title="账户状态:" titleStyle="font-weight:bolder" :value="detailInfo.status"></u-cell>
-        <u-cell title="开户日期:" titleStyle="font-weight:bolder" center :value="detailInfo.activationDate"> </u-cell>
-        <u-cell title="开户行:" titleStyle="font-weight:bolder" :value="detailInfo.openingBank"></u-cell>
-        <u-cell title="有效期:" titleStyle="font-weight:bolder" :value="detailInfo.effectiveDate"></u-cell>
-        <u-cell title="账单日:" titleStyle="font-weight:bolder" :value="detailInfo.billDateName"></u-cell>
-        <u-cell title="还款日:" titleStyle="font-weight:bolder" :value="detailInfo.payDateName"></u-cell>
-        <u-cell title="账单日消费:" titleStyle="font-weight:bolder" :value="detailInfo.isNextBillDate"></u-cell>
-        <u-cell title="0账单操作:" titleStyle="font-weight:bolder" :value="detailInfo.isZeroBill"></u-cell>
-        <u-cell title="延缓期限:" titleStyle="font-weight:bolder" :value="detailInfo.delayPeriod"></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="wallet-filled" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.name }}</text>
+            <text class="card-code">{{ detailInfo.code }}</text>
+          </view>
+          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
+            <text>{{ detailInfo.statusText }}</text>
+          </view>
+        </view>
+        
+        <view class="card-body">
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>额度信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-row">
+                <view class="list-item">
+                  <text class="item-label">信用额度</text>
+                  <text class="item-value primary">{{ detailInfo.creditLimit }}元</text>
+                </view>
+                <view class="list-item">
+                  <text class="item-label">可用额度</text>
+                  <text class="item-value orange">{{ detailInfo.availableLimit }}元</text>
+                </view>
+              </view>
+              <view class="list-item">
+                <text class="item-label">余额</text>
+                <text class="item-value">{{ detailInfo.balance }}元</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>账单信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">账单日</text>
+                <text class="item-value">{{ detailInfo.billDateName }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">还款日</text>
+                <text class="item-value">{{ detailInfo.payDateName }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">延缓期限</text>
+                <text class="item-value">{{ detailInfo.delayPeriod }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">账单日消费</text>
+                <text class="item-value">{{ detailInfo.isNextBillDate }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">0账单操作</text>
+                <text class="item-value">{{ detailInfo.isZeroBill }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>开户信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">开户行</text>
+                <text class="item-value">{{ detailInfo.openingBank || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">开户日期</text>
+                <text class="item-value">{{ detailInfo.activationDate }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">有效期</text>
+                <text class="item-value">{{ detailInfo.effectiveDate }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
+          </view>
+        </view>
       </view>
+      
       <u-toast ref="uToast"></u-toast>
     </view>
   </template>
@@ -37,6 +121,28 @@ const data = reactive({
   detailInfo: {} 
 })
 const {detailInfo} = toRefs(data)
+
+function getStatusClass(status, statusText) {
+  // 优先根据状态文字判断
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  
+  // 备用：根据状态值判断
+  const statusStr = String(status)
+  if (statusStr === '2') {
+    return 'status-normal'
+  }
+  if (statusStr === '0' || statusStr === '3' || statusStr === '4') {
+    return 'status-error'
+  }
+  
+  return 'status-default'
+}
+
 onLoad((option) => {
     id.value = option.id
     getInfo()
@@ -44,6 +150,7 @@ onLoad((option) => {
   function getInfo() {
     getBankcardLend(id.value).then(res => {
           detailInfo.value = res.data
+          detailInfo.value.statusText = res.data.status
                      // 类型
             getDicts('is_next_bill_date').then(result => {
          detailInfo.value.isNextBillDate=dictStr(detailInfo.value.isNextBillDate, result.data)
@@ -54,7 +161,7 @@ onLoad((option) => {
       })
           // 类型
               getDicts('account_status').then(result => {
-         detailInfo.value.status=dictStr(detailInfo.value.status, result.data)
+         detailInfo.value.statusText=dictStr(detailInfo.value.status, result.data)
       })
         })
   }
@@ -70,40 +177,194 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
+.container {
+  min-height: 100vh;
+  background: #f5f7fa;
+}
+
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+  .header-icon {
+    width: 56rpx;
+    height: 56rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    
+    .card-name {
+      color: #ffffff;
+      font-size: 32rpx;
+      font-weight: 600;
     }
+    
+    .card-code {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 24rpx;
+    }
+  }
   
-    .content {
-      width: 647rpx;
+  .status-badge {
+    padding: 12rpx 28rpx;
+    border-radius: 24rpx;
+    font-size: 26rpx;
+    font-weight: 600;
+    
+    &.status-default {
+      background: #f0f0f0;
+      color: #666666;
+    }
+    
+    &.status-normal {
+      background: #fa8c16;
+      color: #ffffff;
+      box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
+    }
+    
+    &.status-error {
+      background: #ff4d4f;
+      color: #ffffff;
+      box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+    }
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
       font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
+      font-weight: 600;
     }
+  }
   
-    .img-con {
+  .info-list {
+    .list-row {
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      gap: 12rpx;
+      margin-bottom: 12rpx;
+      
+      .list-item {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20rpx;
+        background: #f8f9fa;
+        border-radius: 8rpx;
+        
+        .item-label {
+          color: #7f8c8d;
+          font-size: 26rpx;
+        }
+        
+        .item-value {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 500;
+          text-align: right;
+          
+          &.primary {
+            color: #667eea;
+          }
+          
+          &.orange {
+            color: #fa8c16;
+          }
+        }
+      }
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+    
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+        
+        &.primary {
+          color: #667eea;
+        }
+        
+        &.orange {
+          color: #fa8c16;
+        }
       }
     }
   }
-  </style>
\ No newline at end of file
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
+      font-size: 26rpx;
+      line-height: 1.6;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/work/base/creditCard/list.vue b/src/pages/work/base/creditCard/list.vue
index f9fb725..6136a24 100644
--- a/src/pages/work/base/creditCard/list.vue
+++ b/src/pages/work/base/creditCard/list.vue
@@ -5,62 +5,93 @@
         <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-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+'-'+item.code " 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>
+              <view class="card-info">
+                <text class="card-name">{{ item.name }}</text>
+                <text class="card-code">{{ item.code }}</text>
+              </view>
+            </view>
+            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
+              <text>{{ dictStr(item.status, statusList) }}</text>
+            </view>
           </view>
-         
-          <view class="item-row">
-            <text class="row-label">信用卡额度：</text>
-            <text class="row-value">{{ item.creditLimit }}</text>
+          
+          <view class="card-body">
+            <view class="credit-info">
+              <view class="credit-item">
+                <text class="credit-label">信用额度</text>
+                <text class="credit-value primary">{{ item.creditLimit }}元</text>
+              </view>
+              <view class="credit-divider"></view>
+              <view class="credit-item">
+                <text class="credit-label">可用额度</text>
+                <text class="credit-value success">{{ item.availableLimit }}元</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item">
+                <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">
+              <view class="info-item">
+                <text class="info-label">延缓期限</text>
+                <text class="info-value">{{ item.delayPeriod }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">开户日期</text>
+                <text class="info-value">{{ item.activationDate }}</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">有效期</text>
+                <text class="info-value">{{ item.effectiveDate }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">账单日消费</text>
+                <text class="info-value">{{ dictStr(item.isNextBillDate, isNextBillDateList) }}</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">0账单操作</text>
+                <text class="info-value">{{ dictStr(item.isZeroBill, isZeroBillList) }}</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">{{ dictStr(item.status, statusList) }}</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">还款日：</text>
-            <text class="row-value">{{ item.payDateName }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">延缓期限：</text>
-            <text class="row-value">{{ item.delayPeriod }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">开户日期：</text>
-            <text class="row-value">{{ item.activationDate }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">有效期：</text>
-            <text class="row-value">{{ item.effectiveDate }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">账单日消费：</text>
-            <text class="row-value">{{ dictStr(item.isNextBillDate, isNextBillDateList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">0账单操作：</text>
-            <text class="row-value">{{ dictStr(item.isZeroBill, isZeroBillList) }}</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>
@@ -166,6 +197,27 @@ function dictStr(val, arr) {
       })
       return str
     }
+    
+function getStatusClass(status, statusText) {
+      // 根据状态文字判断（更可靠）
+      if (statusText && statusText.includes('正常')) {
+        return 'status-normal'
+      }
+      if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+        return 'status-error'
+      }
+      
+      // 备用：根据状态值判断
+      const statusStr = String(status)
+      if (statusStr === '2') {
+        return 'status-normal'
+      }
+      if (statusStr === '0' || statusStr === '3' || statusStr === '4') {
+        return 'status-error'
+      }
+      
+      return 'status-default'
+    }
     function searchBlur() {
       pageNum.value = 1
       listData.value = []
@@ -226,9 +278,35 @@ function dictStr(val, arr) {
   margin-bottom: 24rpx;
 
   .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 {
@@ -284,97 +362,208 @@ function dictStr(val, arr) {
 
 .list-item {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
-  background-color: #fff;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: scale(0.99);
+  }
 
   .item-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 16rpx;
-
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      
+      .card-icon {
+        width: 56rpx;
+        height: 56rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        backdrop-filter: blur(10rpx);
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+      
+      .card-info {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+        line-height: 1;
+        
+        .card-name {
+          color: #ffffff;
+          font-size: 32rpx;
+          font-weight: 600;
+          line-height: 1;
+        }
+        
+        .card-code {
+          color: rgba(255, 255, 255, 0.8);
+          font-size: 28rpx;
+          line-height: 1;
+        }
       }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
+    }
+    
+    .status-badge {
+      padding: 12rpx 28rpx;
+      border-radius: 24rpx;
+      font-size: 26rpx;
+      font-weight: 600;
+      letter-spacing: 0.5rpx;
+      
+      // 默认：灰色
+      &.status-default {
+        background: #f0f0f0;
+        color: #666666;
       }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
+      
+      // 正常使用 - 橙色实底白字
+      &.status-normal {
+        background: #fa8c16 !important;
+        color: #ffffff !important;
+        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
       }
-
-      .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;
+      
+      // 销卡销户 - 醒目的红色实底
+      &.status-error {
+        background: #ff4d4f;
+        color: #ffffff;
+        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
       }
     }
   }
-
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  
+  .card-body {
+    padding: 24rpx;
+    
+    .credit-info {
+      display: flex;
+      padding: 20rpx 24rpx;
+      background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
+      border-radius: 12rpx;
+      margin-bottom: 20rpx;
+      
+      .credit-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 8rpx;
+        min-width: 0;
+        
+        .credit-label {
+          color: #7f8c8d;
+          font-size: 26rpx;
+          flex-shrink: 0;
+        }
+        
+        .credit-value {
+          font-size: 28rpx;
+          font-weight: 600;
+          
+          &.primary {
+            color: #667eea;
+          }
+          
+          &.success {
+            color: #fa8c16;
+          }
+        }
+      }
+      
+      .credit-divider {
+        width: 1rpx;
+        background: rgba(0, 0, 0, 0.1);
+        margin: 0 24rpx;
+      }
     }
-
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    
+    .info-row {
+      display: flex;
+      margin-bottom: 12rpx;
+      gap: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .info-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16rpx 20rpx;
+        background: #f8f9fa;
+        border-radius: 8rpx;
+        min-height: 72rpx;
+        
+        .info-label {
+          color: #7f8c8d;
+          font-size: 26rpx;
+          flex-shrink: 0;
+        }
+        
+        .info-value {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 500;
+          text-align: right;
+          flex: 1;
+          margin-left: 16rpx;
+        }
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    gap: 16rpx;
+    padding: 0 24rpx 24rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      gap: 8rpx;
+      padding: 12rpx 24rpx;
       border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+      font-size: 26rpx;
+      border: 1rpx solid;
+      transition: all 0.2s ease;
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: #ffffff;
+      color: #667eea;
+      border-color: #667eea;
+      
+      &:active {
+        background: rgba(102, 126, 234, 0.1);
+      }
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-delete {
+      background: #ffffff;
+      color: #f5576c;
+      border-color: #f5576c;
+      
+      &:active {
+        background: rgba(245, 87, 108, 0.1);
+      }
     }
   }
 }
diff --git a/src/pages/work/base/debitCard/addEdit.vue b/src/pages/work/base/debitCard/addEdit.vue
index fc22d7f..76cfb35 100644
--- a/src/pages/work/base/debitCard/addEdit.vue
+++ b/src/pages/work/base/debitCard/addEdit.vue
@@ -51,7 +51,7 @@
             </u-form-item>
           </u--form>
           <view class="form-btn">
-            <u-button type="primary" text="提交" @click="submit"></u-button>
+            <u-button type="primary" text="提交" @click="submit" customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 24rpx; font-size: 32rpx; font-weight: 600; box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);"></u-button>
           </view>
         </view>
       </view>
@@ -245,24 +245,37 @@ onLoad((option) => {
   <style lang="scss" scoped>
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
+    padding: 0;
     background-color: #fff;
-    border-radius: 8rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    overflow: hidden;
   
     .section-title {
-      width: 360rpx;
-      color: #333333;
+      padding: 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: #ffffff;
       line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      
+      &::before {
+        content: '';
+        width: 6rpx;
+        height: 32rpx;
+        background: rgba(255, 255, 255, 0.5);
+        border-radius: 3rpx;
+        margin-right: 12rpx;
+      }
     }
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding: 24rpx;
   
       .form-btn {
-        padding-top: 20rpx;
+        padding-top: 32rpx;
       }
     }
   }
diff --git a/src/pages/work/base/debitCard/details.vue b/src/pages/work/base/debitCard/details.vue
index 43786fc..0f0a9fa 100644
--- a/src/pages/work/base/debitCard/details.vue
+++ b/src/pages/work/base/debitCard/details.vue
@@ -1,22 +1,77 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <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.code"></u-cell>
-        <u-cell title="储蓄账户类型:" titleStyle="font-weight:bolder" :value="detailInfo.debitType"></u-cell>
-        <u-cell title="账户状态:" titleStyle="font-weight:bolder" :value="detailInfo.status"></u-cell>
-        <u-cell title="开户行:" titleStyle="font-weight:bolder" :value="detailInfo.openingBank"></u-cell>
-        <u-cell title="开户日期:" titleStyle="font-weight:bolder" center :value="detailInfo.activationDate"> </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="wallet-filled" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.name }}</text>
+            <text class="card-code">{{ detailInfo.code }}</text>
+          </view>
+          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
+            <text>{{ detailInfo.statusText }}</text>
+          </view>
+        </view>
+        
+        <view class="card-body">
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>账户信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">余额</text>
+                <text class="item-value orange">{{ detailInfo.balance }}元</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">账户类型</text>
+                <text class="item-value">{{ detailInfo.debitType }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>开户信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">开户行</text>
+                <text class="item-value">{{ detailInfo.openingBank || '-' }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">开户日期</text>
+                <text class="item-value">{{ detailInfo.activationDate }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">有效期</text>
+                <text class="item-value">{{ detailInfo.effectiveDate }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
+          </view>
+        </view>
       </view>
+      
       <u-toast ref="uToast"></u-toast>
     </view>
   </template>
@@ -31,6 +86,28 @@ const data = reactive({
   detailInfo: {} 
 })
 const {detailInfo} = toRefs(data)
+
+function getStatusClass(status, statusText) {
+  // 优先根据状态文字判断
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  
+  // 备用：根据状态值判断
+  const statusStr = String(status)
+  if (statusStr === '2') {
+    return 'status-normal'
+  }
+  if (statusStr === '0' || statusStr === '3' || statusStr === '4') {
+    return 'status-error'
+  }
+  
+  return 'status-default'
+}
+
 onLoad((option) => {
     id.value = option.id
     getInfo()
@@ -38,13 +115,14 @@ onLoad((option) => {
   function getInfo() {
     getBankcardLend(id.value).then(res => {
           detailInfo.value = res.data
+          detailInfo.value.statusText = res.data.status
                      // 类型
             getDicts('debit_type').then(result => {
          detailInfo.value.debitType=dictStr(detailInfo.value.debitType, result.data)
       })
                 // 类型
           getDicts('account_status').then(result => {
-         detailInfo.value.status=dictStr(detailInfo.value.status, result.data)
+         detailInfo.value.statusText=dictStr(detailInfo.value.status, result.data)
       })
         })
   }
@@ -60,40 +138,154 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
+.container {
+  min-height: 100vh;
+  background: #f5f7fa;
+}
+
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+  .header-icon {
+    width: 56rpx;
+    height: 56rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    
+    .card-name {
+      color: #ffffff;
+      font-size: 32rpx;
+      font-weight: 600;
     }
+    
+    .card-code {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 24rpx;
+    }
+  }
   
-    .content {
-      width: 647rpx;
+  .status-badge {
+    padding: 12rpx 28rpx;
+    border-radius: 24rpx;
+    font-size: 26rpx;
+    font-weight: 600;
+    
+    &.status-default {
+      background: #f0f0f0;
+      color: #666666;
+    }
+    
+    &.status-normal {
+      background: #fa8c16;
+      color: #ffffff;
+      box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
+    }
+    
+    &.status-error {
+      background: #ff4d4f;
+      color: #ffffff;
+      box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+    }
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
       font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
+      font-weight: 600;
     }
+  }
   
-    .img-con {
+  .info-list {
+    .list-item {
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
-    }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+        
+        &.orange {
+          color: #fa8c16;
+        }
       }
     }
   }
-  </style>
\ No newline at end of file
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
+      font-size: 26rpx;
+      line-height: 1.6;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/work/base/debitCard/list.vue b/src/pages/work/base/debitCard/list.vue
index 1ccfe83..1822d18 100644
--- a/src/pages/work/base/debitCard/list.vue
+++ b/src/pages/work/base/debitCard/list.vue
@@ -5,10 +5,13 @@
         <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="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,43 +33,62 @@
     </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+'-'+item.code " 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>
+              <view class="card-info">
+                <text class="card-name">{{ item.name }}</text>
+                <text class="card-code">{{ item.code }}</text>
+              </view>
+            </view>
+            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
+              <text>{{ dictStr(item.status, statusList) }}</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">储蓄账户类型：</text>
-            <text class="row-value">{{ dictStr(item.debitType, debitTypeList) }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">账户类型</text>
+                <text class="info-value">{{ dictStr(item.debitType, debitTypeList) }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">余额</text>
+                <text class="info-value orange">{{ item.balance }}元</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">开户日期</text>
+                <text class="info-value">{{ item.activationDate }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">有效期</text>
+                <text class="info-value">{{ item.effectiveDate }}</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">开户行</text>
+                <text class="info-value">{{ item.openingBank || '-' }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">账户状态：</text>
-            <text class="row-value">{{ dictStr(item.status, statusList) }}</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.code }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">开户行：</text>
-            <text class="row-value">{{ item.openingBank }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">开户日期：</text>
-            <text class="row-value">{{ item.activationDate }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">有效期：</text>
-            <text class="row-value">{{ item.effectiveDate }}</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>
@@ -156,6 +180,16 @@ function settingConfirm(e) {
 function settingCancel() {
       settingPickShow.value = false
     }
+function getStatusClass(status, statusText) {
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  return 'status-default'
+}
+
 function dictStr(val, arr) {
       let str = ''
       arr.map(item => {
@@ -224,15 +258,6 @@ 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;
   background-color: #ffffff;
@@ -241,157 +266,289 @@ 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;
+    margin-left: 10rpx;
+    
+    &: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 {
     width: 100%;
     position: absolute;
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
+        }
       }
 
       .state-list {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
+        gap: 16rpx;
 
         .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
           text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
+          line-height: 68rpx;
           font-size: 28rpx;
-          color: #000000;
+          color: #666666;
+          transition: all 0.3s ease;
+          background: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+          
+          &:active {
+            transform: scale(0.95);
+          }
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 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;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .card-icon {
+      width: 56rpx;
+      height: 56rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+      flex-shrink: 0;
+      backdrop-filter: blur(10rpx);
+    }
+    
+    .card-info {
+      display: flex;
+      flex-direction: column;
+      gap: 6rpx;
+      flex: 1;
+      min-width: 0;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 1.2;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 26rpx;
+        line-height: 1.2;
       }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
+    }
+    
+    .status-badge {
+      padding: 12rpx 28rpx;
+      border-radius: 24rpx;
+      font-size: 26rpx;
+      font-weight: 600;
+      letter-spacing: 0.5rpx;
+      flex-shrink: 0;
+      
+      &.status-default {
+        background: #f0f0f0;
+        color: #666666;
       }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
+      
+      &.status-normal {
+        background: #fa8c16 !important;
+        color: #ffffff !important;
+        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
       }
-
-      .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;
+      
+      &.status-error {
+        background: #ff4d4f;
+        color: #ffffff;
+        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
       }
     }
   }
 
-  .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;
+    
+    .info-row {
+      display: flex;
+      margin-bottom: 12rpx;
+      gap: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .info-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16rpx 20rpx;
+        background: #f8f9fa;
+        border-radius: 8rpx;
+        min-height: 72rpx;
+        
+        .info-label {
+          color: #7f8c8d;
+          font-size: 26rpx;
+          flex-shrink: 0;
+          white-space: nowrap;
+          min-width: 120rpx;
+        }
+        
+        .info-value {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 500;
+          text-align: right;
+          flex: 1;
+          margin-left: 16rpx;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          
+          &.orange {
+            color: #fa8c16;
+            font-weight: 600;
+          }
+        }
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 0 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
       border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+      font-size: 26rpx;
+      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);
+      
+      text {
+        color: #667eea;
+      }
     }
-
-    .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);
+      
+      text {
+        color: #f5576c;
+      }
     }
   }
 }
diff --git a/src/pages/work/base/financials/addEdit.vue b/src/pages/work/base/financials/addEdit.vue
index 2253684..591f2ad 100644
--- a/src/pages/work/base/financials/addEdit.vue
+++ b/src/pages/work/base/financials/addEdit.vue
@@ -249,11 +249,28 @@ onLoad((option) => {
   
     .section-title {
       width: 360rpx;
-      color: #333333;
+      color: #fff;
       line-height: 44rpx;
       font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 16rpx 26rpx;
+      margin: -16rpx -24rpx 20rpx;
+      border-radius: 8rpx 8rpx 0 0;
+      position: relative;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 26rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6rpx;
+        height: 28rpx;
+        background-color: #fff;
+        border-radius: 3rpx;
+      }
+      
+      padding-left: 52rpx;
     }
   
     .form-view {
@@ -261,6 +278,15 @@ onLoad((option) => {
   
       .form-btn {
         padding-top: 20rpx;
+        
+        ::v-deep .u-button {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+          border-radius: 12rpx;
+          height: 88rpx;
+          font-size: 32rpx;
+          box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
+        }
       }
     }
   }
diff --git a/src/pages/work/base/financials/details.vue b/src/pages/work/base/financials/details.vue
index e0b3ebf..7742cde 100644
--- a/src/pages/work/base/financials/details.vue
+++ b/src/pages/work/base/financials/details.vue
@@ -6,16 +6,55 @@
 			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.code"></u-cell>
-        <u-cell title="账户状态:" titleStyle="font-weight:bolder" :value="detailInfo.status"></u-cell>
-        <u-cell title="佣金费率:" titleStyle="font-weight:bolder" center :value="detailInfo.commission"> </u-cell>
-        <u-cell title="关联储蓄卡:" titleStyle="font-weight:bolder" :value="detailInfo.bankNameCode"></u-cell>
-        <u-cell title="开户日期:" titleStyle="font-weight:bolder" :value="detailInfo.activationDate"></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="card-title">
+            <uni-icons type="wallet" size="24" color="#fff"></uni-icons>
+            <text class="card-name">{{ detailInfo.name }}</text>
+          </view>
+          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
+            <text>{{ detailInfo.statusText }}</text>
+          </view>
+        </view>
+
+        <view class="section">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>账户信息</text>
+          </view>
+          <view class="info-grid">
+            <view class="info-item">
+              <text class="info-label">账号</text>
+              <text class="info-value">{{ detailInfo.code || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">余额</text>
+              <text class="info-value orange">{{ detailInfo.balance || '0' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">佣金费率</text>
+              <text class="info-value orange">{{ detailInfo.commission || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">关联储蓄卡</text>
+              <text class="info-value">{{ detailInfo.bankNameCode || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">开户日期</text>
+              <text class="info-value">{{ detailInfo.activationDate || '-' }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="section" v-if="detailInfo.remark">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>备注</text>
+          </view>
+          <view class="remark-content">
+            <text>{{ detailInfo.remark }}</text>
+          </view>
+        </view>
       </view>
       <u-toast ref="uToast"></u-toast>
     </view>
@@ -27,21 +66,22 @@ import { getDicts } from '@/api/system/dict/data.js'
 import {onLoad} from "@dcloudio/uni-app";
 import {reactive ,toRefs,ref,computed }from "vue";
 const id = ref('')
+const statusList = ref([])
 const data = reactive({
   detailInfo: {} 
 })
 const {detailInfo} = toRefs(data)
 onLoad((option) => {
     id.value = option.id
+    getDicts('account_status').then(res => {
+      statusList.value = res.data
+    })
     getInfo()
   })
   function getInfo() {
     getFutureStocks(id.value).then(res => {
           detailInfo.value = res.data
-           // 类型
-           getDicts('account_status').then(result => {
-         detailInfo.value.status=dictStr(detailInfo.value.status, result.data)
-      })
+          detailInfo.value.statusText = dictStr(detailInfo.value.status, statusList.value)
         })
   }
   function dictStr(val, arr) {
@@ -53,42 +93,139 @@ onLoad((option) => {
       })
       return str
     }
+  function getStatusClass(status, statusText) {
+    // 优先根据状态文字判断
+    if (statusText && statusText.includes('正常')) {
+      return 'status-normal'
+    }
+    if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+      return 'status-error'
+    }
+    
+    // 备用：根据状态值判断
+    const statusStr = String(status)
+    if (statusStr === '2') {
+      return 'status-normal'
+    }
+    if (statusStr === '0' || statusStr === '3' || statusStr === '4') {
+      return 'status-error'
+    }
+    
+    return 'status-default'
+  }
   </script>
   
   <style lang="scss" scoped>
-  .section {
+  .detail-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;
-    }
-  
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+    border-radius: 12rpx;
+    overflow: hidden;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
+    .card-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 32rpx;
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      justify-content: space-between;
+      align-items: center;
+
+      .card-title {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+
+        .card-name {
+          color: #fff;
+          font-size: 36rpx;
+          font-weight: bold;
+        }
+      }
+
+      .status-badge {
+        padding: 8rpx 20rpx;
+        border-radius: 24rpx;
+        font-size: 24rpx;
+        font-weight: 600;
+
+        &.status-default {
+          background: #f0f0f0;
+          color: #666666;
+        }
+
+        &.status-normal {
+          background: #fa8c16;
+          color: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
+        }
+
+        &.status-error {
+          background: #ff4d4f;
+          color: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+        }
+      }
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+
+    .section {
+      padding: 32rpx;
+      border-bottom: 1rpx solid #f0f0f0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .section-title {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+        margin-bottom: 24rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333;
+
+        .title-icon {
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+        }
+      }
+
+      .info-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 24rpx;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .info-label {
+            font-size: 28rpx;
+            color: #999;
+          }
+
+          .info-value {
+            font-size: 28rpx;
+            color: #333;
+            font-weight: 500;
+
+            &.orange {
+              color: #fa8c16;
+              font-weight: bold;
+              font-size: 32rpx;
+            }
+          }
+        }
+      }
+
+      .remark-content {
+        font-size: 28rpx;
+        color: #666;
+        line-height: 1.6;
+        text-align: justify;
       }
     }
   }
diff --git a/src/pages/work/base/financials/list.vue b/src/pages/work/base/financials/list.vue
index 6c5c670..f5395f0 100644
--- a/src/pages/work/base/financials/list.vue
+++ b/src/pages/work/base/financials/list.vue
@@ -5,45 +5,65 @@
         <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-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+'-'+item.code " size="30rpx" color="#333333" :bold="true"></u--text>
+        <view class="card" @click="enterDetails(item)">
+          <view class="card-header">
+            <view class="card-title">
+              <uni-icons type="wallet" size="20" color="#fff"></uni-icons>
+              <text class="card-name">{{ item.name }}</text>
+            </view>
+            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
+              <text>{{ dictStr(item.status, statusList) }}</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">账户状态：</text>
-            <text class="row-value">{{ dictStr(item.status, statusList) }}</text>
+
+          <view class="card-content">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">余额</text>
+                <text class="info-value orange">{{ item.balance || '0' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">佣金费率</text>
+                <text class="info-value orange">{{ item.commission || '-' }}</text>
+              </view>
+            </view>
+
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">关联储蓄卡</text>
+                <text class="info-value">{{ item.bankNameCode || '-' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">开户日期</text>
+                <text class="info-value">{{ item.activationDate || '-' }}</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 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.bankNameCode }}</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.activationDate}}</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-footer">
+            <view class="action-btn edit-btn" @click.stop="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>编辑</text>
+            </view>
+            <view class="action-btn delete-btn" @click.stop="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#ff4d4f"></uni-icons>
+              <text>删除</text>
+            </view>
           </view>
         </view>
       </u-list-item>
@@ -134,6 +154,26 @@ function dictStr(val, arr) {
       })
       return str
     }
+    function getStatusClass(status, statusText) {
+      // 优先根据状态文字判断
+      if (statusText && statusText.includes('正常')) {
+        return 'status-normal'
+      }
+      if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+        return 'status-error'
+      }
+      
+      // 备用：根据状态值判断
+      const statusStr = String(status)
+      if (statusStr === '2') {
+        return 'status-normal'
+      }
+      if (statusStr === '0' || statusStr === '3' || statusStr === '4') {
+        return 'status-error'
+      }
+      
+      return 'status-default'
+    }
     function searchBlur() {
       pageNum.value = 1
       listData.value = []
@@ -194,155 +234,157 @@ function dictStr(val, arr) {
   margin-bottom: 24rpx;
 
   .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;
+    margin-left: 10rpx;
+    
+    &: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 {
+.card {
   margin: 0 24rpx 24rpx;
-  padding: 32rpx;
   background-color: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
 
-  .item-header {
+  .card-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 24rpx 32rpx;
     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;
+    .card-title {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+
+      .card-name {
+        color: #fff;
+        font-size: 32rpx;
+        font-weight: bold;
+      }
+    }
+
+    .status-badge {
+      padding: 8rpx 20rpx;
+      border-radius: 24rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+
+      &.status-default {
+        background: #f0f0f0;
+        color: #666666;
       }
 
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+      &.status-normal {
+        background: #fa8c16;
+        color: #ffffff;
+        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
       }
 
-      .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;
+      &.status-error {
+        background: #ff4d4f;
+        color: #ffffff;
+        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-content {
+    padding: 24rpx 32rpx;
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20rpx;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .info-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8rpx;
+
+        &.full-width {
+          flex: none;
+          width: 100%;
+        }
+
+        .info-label {
+          font-size: 24rpx;
+          color: #999;
+        }
+
+        .info-value {
+          font-size: 28rpx;
+          color: #333;
+          font-weight: 500;
+
+          &.orange {
+            color: #fa8c16;
+            font-weight: bold;
+          }
+        }
+      }
     }
   }
 
-  .operate {
+  .card-footer {
     display: flex;
     justify-content: flex-end;
+    gap: 24rpx;
+    padding: 20rpx 32rpx;
+    border-top: 1rpx solid #f0f0f0;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
+    .action-btn {
+      display: flex;
+      align-items: center;
+      gap: 8rpx;
+      padding: 12rpx 24rpx;
       border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
-    }
+      font-size: 28rpx;
+      transition: all 0.3s;
 
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
-    }
+      &.edit-btn {
+        background-color: rgba(102, 126, 234, 0.1);
+        color: #667eea;
+      }
 
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+      &.delete-btn {
+        background-color: rgba(255, 77, 79, 0.1);
+        color: #ff4d4f;
+      }
     }
   }
 }
diff --git a/src/pages/work/base/futures/addEdit.vue b/src/pages/work/base/futures/addEdit.vue
index 26c23f4..07731f1 100644
--- a/src/pages/work/base/futures/addEdit.vue
+++ b/src/pages/work/base/futures/addEdit.vue
@@ -266,11 +266,28 @@ onLoad((option) => {
   
     .section-title {
       width: 360rpx;
-      color: #333333;
+      color: #fff;
       line-height: 44rpx;
       font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 16rpx 26rpx;
+      margin: -16rpx -24rpx 20rpx;
+      border-radius: 8rpx 8rpx 0 0;
+      position: relative;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 26rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6rpx;
+        height: 28rpx;
+        background-color: #fff;
+        border-radius: 3rpx;
+      }
+      
+      padding-left: 52rpx;
     }
   
     .form-view {
@@ -278,6 +295,15 @@ onLoad((option) => {
   
       .form-btn {
         padding-top: 20rpx;
+        
+        ::v-deep .u-button {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+          border-radius: 12rpx;
+          height: 88rpx;
+          font-size: 32rpx;
+          box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
+        }
       }
     }
   }
diff --git a/src/pages/work/base/futures/details.vue b/src/pages/work/base/futures/details.vue
index 40790a6..f2d779f 100644
--- a/src/pages/work/base/futures/details.vue
+++ b/src/pages/work/base/futures/details.vue
@@ -3,21 +3,66 @@
       <u-navbar
 			leftIconSize="40rpx"
 			leftIconColor="#333333"
-			title="期货账户卡详情"
+			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.code"></u-cell>
-        <u-cell title="账户状态:" titleStyle="font-weight:bolder" :value="detailInfo.status"></u-cell>
-        <u-cell title="期货交易中心账号:" titleStyle="font-weight:bolder" :value="detailInfo.tradingCenterCode"></u-cell>
-        <u-cell title="手续费:" titleStyle="font-weight:bolder" center :value="detailInfo.commission"> </u-cell>
-        <u-cell title="保证金比例:" titleStyle="font-weight:bolder" :value="detailInfo.bond"></u-cell>
-        <u-cell title="关联储蓄卡:" titleStyle="font-weight:bolder" :value="detailInfo.bankNameCode"></u-cell>
-        <u-cell title="开户日期:" titleStyle="font-weight:bolder" :value="detailInfo.activationDate"></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="card-title">
+            <uni-icons type="wallet" size="24" color="#fff"></uni-icons>
+            <text class="card-name">{{ detailInfo.name }}</text>
+          </view>
+          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
+            <text>{{ detailInfo.statusText }}</text>
+          </view>
+        </view>
+
+        <view class="section">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>账户信息</text>
+          </view>
+          <view class="info-grid">
+            <view class="info-item">
+              <text class="info-label">账号</text>
+              <text class="info-value">{{ detailInfo.code || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">余额</text>
+              <text class="info-value orange">{{ detailInfo.balance || '0' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">手续费</text>
+              <text class="info-value orange">{{ detailInfo.commission || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">保证金比例</text>
+              <text class="info-value">{{ detailInfo.bond || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">交易中心账号</text>
+              <text class="info-value">{{ detailInfo.tradingCenterCode || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">关联储蓄卡</text>
+              <text class="info-value">{{ detailInfo.bankNameCode || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">开户日期</text>
+              <text class="info-value">{{ detailInfo.activationDate || '-' }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="section" v-if="detailInfo.remark">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>备注</text>
+          </view>
+          <view class="remark-content">
+            <text>{{ detailInfo.remark }}</text>
+          </view>
+        </view>
       </view>
       <u-toast ref="uToast"></u-toast>
     </view>
@@ -29,21 +74,22 @@ import { getDicts } from '@/api/system/dict/data.js'
 import {onLoad} from "@dcloudio/uni-app";
 import {reactive ,toRefs,ref,computed }from "vue";
 const id = ref('')
+const statusList = ref([])
 const data = reactive({
   detailInfo: {} 
 })
 const {detailInfo} = toRefs(data)
 onLoad((option) => {
     id.value = option.id
+    getDicts('account_status').then(res => {
+      statusList.value = res.data
+    })
     getInfo()
   })
   function getInfo() {
     getFutureStocks(id.value).then(res => {
           detailInfo.value = res.data
-          // 类型
-          getDicts('account_status').then(result => {
-         detailInfo.value.status=dictStr(detailInfo.value.status, result.data)
-      })
+          detailInfo.value.statusText = dictStr(detailInfo.value.status, statusList.value)
         })
   }
   function dictStr(val, arr) {
@@ -55,42 +101,128 @@ onLoad((option) => {
       })
       return str
     }
+  function getStatusClass(status, statusText) {
+    if (statusText && statusText.includes('正常')) {
+      return 'status-normal'
+    }
+    if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+      return 'status-error'
+    }
+    return 'status-default'
+  }
   </script>
   
   <style lang="scss" scoped>
-  .section {
+  .detail-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;
-    }
-  
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+    border-radius: 12rpx;
+    overflow: hidden;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
+    .card-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 32rpx;
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      justify-content: space-between;
+      align-items: center;
+
+      .card-title {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+
+        .card-name {
+          color: #fff;
+          font-size: 36rpx;
+          font-weight: bold;
+        }
+      }
+
+      .status-badge {
+        padding: 8rpx 20rpx;
+        border-radius: 24rpx;
+        font-size: 24rpx;
+        font-weight: 600;
+
+        &.status-default {
+          background: #f0f0f0;
+          color: #666666;
+        }
+
+        &.status-normal {
+          background: #fa8c16;
+          color: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
+        }
+
+        &.status-error {
+          background: #ff4d4f;
+          color: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+        }
+      }
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+
+    .section {
+      padding: 32rpx;
+      border-bottom: 1rpx solid #f0f0f0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .section-title {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+        margin-bottom: 24rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333;
+
+        .title-icon {
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+        }
+      }
+
+      .info-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 24rpx;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .info-label {
+            font-size: 28rpx;
+            color: #999;
+          }
+
+          .info-value {
+            font-size: 28rpx;
+            color: #333;
+            font-weight: 500;
+
+            &.orange {
+              color: #fa8c16;
+              font-weight: bold;
+              font-size: 32rpx;
+            }
+          }
+        }
+      }
+
+      .remark-content {
+        font-size: 28rpx;
+        color: #666;
+        line-height: 1.6;
+        text-align: justify;
       }
     }
   }
diff --git a/src/pages/work/base/futures/list.vue b/src/pages/work/base/futures/list.vue
index 693ccc0..ba8c885 100644
--- a/src/pages/work/base/futures/list.vue
+++ b/src/pages/work/base/futures/list.vue
@@ -5,53 +5,86 @@
         <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-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+'-'+item.code " 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>
+              <view class="card-info">
+                <view class="name-code-row">
+                  <text class="card-name">{{ item.name }}</text>
+                  <text class="card-code">{{ item.code }}</text>
+                </view>
+              </view>
+            </view>
+            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
+              <text>{{ dictStr(item.status, statusList) }}</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">账户状态：</text>
-            <text class="row-value">{{ dictStr(item.status, statusList) }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">余额</text>
+                <text class="info-value orange">{{ item.balance || '0' }}元</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">手续费</text>
+                <text class="info-value orange">{{ item.commission || '-' }}</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">保证金比例</text>
+                <text class="info-value">{{ item.bond || '-' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">交易中心账号</text>
+                <text class="info-value">{{ item.tradingCenterCode || '-' }}</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item full-width">
+                <text class="info-label">关联储蓄卡</text>
+                <text class="info-value">{{ item.bankNameCode || '-' }}</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item full-width">
+                <text class="info-label">开户日期</text>
+                <text class="info-value">{{ item.activationDate || '-' }}</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 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.tradingCenterCode }}</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.bond}}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">关联储蓄卡：</text>
-            <text class="row-value">{{ item.bankNameCode }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">开户日期：</text>
-            <text class="row-value">{{ item.activationDate}}</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-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>
@@ -133,6 +166,16 @@ function settingConfirm(e) {
 function settingCancel() {
       settingPickShow.value = false
     }
+function getStatusClass(status, statusText) {
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  return 'status-default'
+}
+
 function dictStr(val, arr) {
       let str = ''
       arr.map(item => {
@@ -202,155 +245,221 @@ function dictStr(val, arr) {
   margin-bottom: 24rpx;
 
   .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;
+    margin-left: 10rpx;
+    
+    &: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;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .card-icon {
+      width: 56rpx;
+      height: 56rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+      flex-shrink: 0;
+      backdrop-filter: blur(10rpx);
+    }
+    
+    .card-info {
+      display: flex;
+      flex-direction: column;
+      gap: 6rpx;
+      flex: 1;
+      min-width: 0;
+      
+      .name-code-row {
+        display: flex;
+        align-items: center;
+        gap: 16rpx;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 1.2;
       }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 26rpx;
+        line-height: 1.2;
       }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
+    }
+    
+    .status-badge {
+      padding: 12rpx 28rpx;
+      border-radius: 24rpx;
+      font-size: 26rpx;
+      font-weight: 600;
+      letter-spacing: 0.5rpx;
+      flex-shrink: 0;
+      
+      &.status-default {
+        background: #f0f0f0;
+        color: #666666;
       }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
+      
+      &.status-normal {
+        background: #fa8c16 !important;
+        color: #ffffff !important;
+        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
       }
-
-      .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;
+      
+      &.status-error {
+        background: #ff4d4f;
+        color: #ffffff;
+        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
       }
     }
   }
 
-  .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;
+    
+    .info-row {
+      display: flex;
+      margin-bottom: 12rpx;
+      gap: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .info-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16rpx 20rpx;
+        background: #f8f9fa;
+        border-radius: 8rpx;
+        min-height: 72rpx;
+        
+        &.full-width {
+          flex: none;
+          width: 100%;
+        }
+        
+        .info-label {
+          color: #7f8c8d;
+          font-size: 26rpx;
+          flex-shrink: 0;
+          white-space: nowrap;
+          min-width: 120rpx;
+        }
+        
+        .info-value {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 500;
+          text-align: right;
+          flex: 1;
+          margin-left: 16rpx;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          
+          &.orange {
+            color: #fa8c16;
+            font-weight: 600;
+          }
+        }
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 0 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
       border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+      font-size: 26rpx;
+      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);
+      
+      text {
+        color: #667eea;
+      }
     }
-
-    .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);
+      
+      text {
+        color: #f5576c;
+      }
     }
   }
 }
diff --git a/src/pages/work/base/lend/addEdit.vue b/src/pages/work/base/lend/addEdit.vue
index b69c35b..e56199d 100644
--- a/src/pages/work/base/lend/addEdit.vue
+++ b/src/pages/work/base/lend/addEdit.vue
@@ -43,7 +43,7 @@
             </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: 24rpx; font-size: 32rpx; font-weight: 600; box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);"></u-button>
           </view>
         </view>
       </view>
@@ -236,24 +236,37 @@ onLoad((option) => {
   <style lang="scss" scoped>
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
+    padding: 0;
     background-color: #fff;
-    border-radius: 8rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    overflow: hidden;
   
     .section-title {
-      width: 360rpx;
-      color: #333333;
+      padding: 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: #ffffff;
       line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      
+      &::before {
+        content: '';
+        width: 6rpx;
+        height: 32rpx;
+        background: rgba(255, 255, 255, 0.5);
+        border-radius: 3rpx;
+        margin-right: 12rpx;
+      }
     }
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding: 24rpx;
   
       .form-btn {
-        padding-top: 20rpx;
+        padding-top: 32rpx;
       }
     }
   }
diff --git a/src/pages/work/base/lend/details.vue b/src/pages/work/base/lend/details.vue
index b9a0529..d0ecb92 100644
--- a/src/pages/work/base/lend/details.vue
+++ b/src/pages/work/base/lend/details.vue
@@ -1,20 +1,59 @@
 <template>
-    <view class="container" style="paddingBottom:1rpx;">
+    <view class="container">
       <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.code"></u-cell>
-        <u-cell title="类型:" titleStyle="font-weight:bolder" :value="detailInfo.lendType"></u-cell>
-        <u-cell title="账户状态:" titleStyle="font-weight:bolder" :value="detailInfo.status"></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="wallet-filled" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.name }}</text>
+          </view>
+          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
+            <text>{{ detailInfo.statusText }}</text>
+          </view>
+        </view>
+        
+        <view class="card-body">
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>账户信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">类型</text>
+                <text class="item-value">{{ detailInfo.lendTypeText }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">账号</text>
+                <text class="item-value">{{ detailInfo.code }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">余额</text>
+                <text class="item-value orange">{{ detailInfo.balance }}元</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
+          </view>
+        </view>
       </view>
+      
       <u-toast ref="uToast"></u-toast>
     </view>
   </template>
@@ -29,6 +68,28 @@ const data = reactive({
   detailInfo: {} 
 })
 const {detailInfo} = toRefs(data)
+
+function getStatusClass(status, statusText) {
+  // 优先根据状态文字判断
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  
+  // 备用：根据状态值判断
+  const statusStr = String(status)
+  if (statusStr === '2') {
+    return 'status-normal'
+  }
+  if (statusStr === '0' || statusStr === '3' || statusStr === '4') {
+    return 'status-error'
+  }
+  
+  return 'status-default'
+}
+
 onLoad((option) => {
     id.value = option.id
     getInfo()
@@ -36,13 +97,15 @@ onLoad((option) => {
   function getInfo() {
     getBankcardLend(id.value).then(res => {
           detailInfo.value = res.data
+          detailInfo.value.statusText = res.data.status
+          detailInfo.value.lendTypeText = res.data.lendType
                      // 类型
             getDicts('lend_type').then(result => {
-         detailInfo.value.lendType=dictStr(detailInfo.value.lendType, result.data)
+         detailInfo.value.lendTypeText=dictStr(detailInfo.value.lendType, result.data)
       })
        // 类型
        getDicts('account_status').then(result => {
-         detailInfo.value.status=dictStr(detailInfo.value.status, result.data)
+         detailInfo.value.statusText=dictStr(detailInfo.value.status, result.data)
       })
         })
   }
@@ -58,40 +121,182 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
-    margin: 24rpx;
-    padding: 16rpx 24rpx;
-    background-color: #fff;
-    border-radius: 8rpx;
+.container {
+  min-height: 100vh;
+  background: #f5f7fa;
+}
+
+.detail-card {
+  margin: 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   
-    .section-title {
-      width: 280rpx;
-      color: #333333;
-      line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+  .header-icon {
+    width: 56rpx;
+    height: 56rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16rpx;
+    backdrop-filter: blur(10rpx);
+  }
+  
+  .header-info {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    
+    .card-name {
+      color: #ffffff;
+      font-size: 32rpx;
+      font-weight: 600;
     }
+  }
   
-    .content {
-      width: 647rpx;
+  .status-badge {
+    padding: 12rpx 28rpx;
+    border-radius: 24rpx;
+    font-size: 26rpx;
+    font-weight: 600;
+    
+    &.status-default {
+      background: #f0f0f0;
+      color: #666666;
+    }
+    
+    &.status-normal {
+      background: #fa8c16;
+      color: #ffffff;
+      box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
+    }
+    
+    &.status-error {
+      background: #ff4d4f;
+      color: #ffffff;
+      box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+    }
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+}
+
+.info-section {
+  margin-bottom: 32rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .title-icon {
+      width: 6rpx;
+      height: 28rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+    
+    text {
+      color: #2c3e50;
       font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
+      font-weight: 600;
     }
+  }
   
-    .img-con {
+  .info-list {
+    .list-row {
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      gap: 12rpx;
+      margin-bottom: 12rpx;
+      
+      .list-item {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20rpx;
+        background: #f8f9fa;
+        border-radius: 8rpx;
+        
+        .item-label {
+          color: #7f8c8d;
+          font-size: 26rpx;
+        }
+        
+        .item-value {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 500;
+          text-align: right;
+          
+          &.orange {
+            color: #fa8c16;
+            font-weight: 600;
+          }
+        }
+      }
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+    
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .item-label {
+        color: #7f8c8d;
+        font-size: 26rpx;
+      }
+      
+      .item-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        text-align: right;
+        
+        &.orange {
+          color: #fa8c16;
+          font-weight: 600;
+        }
       }
     }
   }
-  </style>
\ No newline at end of file
+  
+  .remark-content {
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    
+    text {
+      color: #2c3e50;
+      font-size: 26rpx;
+      line-height: 1.6;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/work/base/lend/list.vue b/src/pages/work/base/lend/list.vue
index 6ee4cf7..a9ac1e4 100644
--- a/src/pages/work/base/lend/list.vue
+++ b/src/pages/work/base/lend/list.vue
@@ -5,10 +5,13 @@
         <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="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,31 +33,50 @@
     </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.lendType, lendTypeList)+'-'+item.name+'（'+item.code+'）' " 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>
+              <view class="card-info">
+                <text class="card-name">{{ dictStr(item.lendType, lendTypeList) }} - {{ item.name }}</text>
+              </view>
+            </view>
+            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
+              <text>{{ dictStr(item.status, statusList) }}</text>
+            </view>
           </view>
-          <!-- <view class="item-row">
-            <text class="row-label">类型：</text>
-            <text class="row-value">{{ dictStr(item.lendType, lendTypeList) }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">账户状态：</text>
-            <text class="row-value">{{ dictStr(item.status, statusList) }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">账号</text>
+                <text class="info-value">{{ item.code }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">余额</text>
+                <text class="info-value orange">{{ item.balance }}元</text>
+              </view>
+            </view>
+            
+            <view class="info-row" v-if="item.remark">
+              <view class="info-item">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">余额：</text>
-            <text class="row-value">{{ item.balance }}</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-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>
@@ -143,6 +167,16 @@ function settingConfirm(e) {
 function settingCancel() {
       settingPickShow.value = false
     }
+function getStatusClass(status, statusText) {
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  return 'status-default'
+}
+
 function dictStr(val, arr) {
       let str = ''
       arr.map(item => {
@@ -211,15 +245,6 @@ 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;
   background-color: #ffffff;
@@ -228,157 +253,282 @@ 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;
+    margin-left: 10rpx;
+    
+    &: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 {
     width: 100%;
     position: absolute;
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
+        }
       }
 
       .state-list {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
+        gap: 16rpx;
 
         .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
           text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
+          line-height: 68rpx;
           font-size: 28rpx;
-          color: #000000;
+          color: #666666;
+          transition: all 0.3s ease;
+          background: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+          
+          &:active {
+            transform: scale(0.95);
+          }
         }
 
         .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 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;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .card-icon {
+      width: 56rpx;
+      height: 56rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+      flex-shrink: 0;
+      backdrop-filter: blur(10rpx);
+    }
+    
+    .card-info {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 1.2;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+    }
+    
+    .status-badge {
+      padding: 12rpx 28rpx;
+      border-radius: 24rpx;
+      font-size: 26rpx;
+      font-weight: 600;
+      letter-spacing: 0.5rpx;
+      flex-shrink: 0;
+      
+      &.status-default {
+        background: #f0f0f0;
+        color: #666666;
       }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
+      
+      &.status-normal {
+        background: #fa8c16 !important;
+        color: #ffffff !important;
+        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
       }
-
-      .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;
+      
+      &.status-error {
+        background: #ff4d4f;
+        color: #ffffff;
+        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
       }
     }
   }
 
-  .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;
+    
+    .info-row {
+      display: flex;
+      margin-bottom: 12rpx;
+      gap: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .info-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16rpx 20rpx;
+        background: #f8f9fa;
+        border-radius: 8rpx;
+        min-height: 72rpx;
+        
+        .info-label {
+          color: #7f8c8d;
+          font-size: 26rpx;
+          flex-shrink: 0;
+          white-space: nowrap;
+          min-width: 120rpx;
+        }
+        
+        .info-value {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 500;
+          text-align: right;
+          flex: 1;
+          margin-left: 16rpx;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          
+          &.orange {
+            color: #fa8c16;
+            font-weight: 600;
+          }
+        }
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 0 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
       border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+      font-size: 26rpx;
+      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);
+      
+      text {
+        color: #667eea;
+      }
     }
-
-    .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);
+      
+      text {
+        color: #f5576c;
+      }
     }
   }
 }
diff --git a/src/pages/work/base/posmachine/addEdit.vue b/src/pages/work/base/posmachine/addEdit.vue
index 8004fd0..9298a21 100644
--- a/src/pages/work/base/posmachine/addEdit.vue
+++ b/src/pages/work/base/posmachine/addEdit.vue
@@ -86,7 +86,7 @@
             </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: 24rpx; font-size: 32rpx; font-weight: 600; box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);"></u-button>
           </view>
         </view>
       </view>
@@ -368,24 +368,37 @@ onLoad((option) => {
   <style lang="scss" scoped>
   .section {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
+    padding: 0;
     background-color: #fff;
-    border-radius: 8rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    overflow: hidden;
   
     .section-title {
-      width: 360rpx;
-      color: #333333;
+      padding: 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: #ffffff;
       line-height: 44rpx;
-      font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      
+      &::before {
+        content: '';
+        width: 6rpx;
+        height: 32rpx;
+        background: rgba(255, 255, 255, 0.5);
+        border-radius: 3rpx;
+        margin-right: 12rpx;
+      }
     }
   
     .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+      padding: 24rpx;
   
       .form-btn {
-        padding-top: 20rpx;
+        padding-top: 32rpx;
       }
     }
   }
diff --git a/src/pages/work/base/posmachine/details.vue b/src/pages/work/base/posmachine/details.vue
index afe35b5..660bf19 100644
--- a/src/pages/work/base/posmachine/details.vue
+++ b/src/pages/work/base/posmachine/details.vue
@@ -6,25 +6,108 @@
 			title="POS机详情"
 		>
 		</u-navbar>
-      <view class="section">
-        <u-cell-group>
-        <u-cell title="POS机名称:" titleStyle="font-weight:bolder" :value="detailInfo.name"></u-cell>
-        <u-cell title="支付公司:" titleStyle="font-weight:bolder" :value="detailInfo.payCompany"></u-cell>
-        <u-cell title="类型:" titleStyle="font-weight:bolder" :value="detailInfo.type"></u-cell>
-        <u-cell title="账户状态:" titleStyle="font-weight:bolder" :value="detailInfo.status"></u-cell>
-        <u-cell title="商户名称:" titleStyle="font-weight:bolder" center :value="detailInfo.merchantName"> </u-cell>
-        <u-cell title="刷卡费率:" titleStyle="font-weight:bolder" :value="detailInfo.rateName"></u-cell>
-        <u-cell title="费率+:" titleStyle="font-weight:bolder" :value="detailInfo.ratePlus+''"></u-cell>
-        <u-cell title="舍入模式:" titleStyle="font-weight:bolder" :value="detailInfo.roundingMode"></u-cell>
-        <u-cell title="结算卡:" titleStyle="font-weight:bolder" :value="detailInfo.bankNameCode"></u-cell>
-        <u-cell title="商户类型:" titleStyle="font-weight:bolder" :value="detailInfo.merchantType"></u-cell>
-        <u-cell title="商户码:" titleStyle="font-weight:bolder" :value="detailInfo.merchantCode"></u-cell>
-        <u-cell title="供货商:" titleStyle="font-weight:bolder" :value="detailInfo.manufacture"></u-cell>
-        <u-cell title="编号:" titleStyle="font-weight:bolder" :value="detailInfo.code"></u-cell>
-        <u-cell title="启用日期:" titleStyle="font-weight:bolder" :value="detailInfo.activationDate"></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="wallet-filled" size="24" color="#ffffff"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="card-name">{{ detailInfo.name }}</text>
+          </view>
+          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
+            <text>{{ detailInfo.statusText }}</text>
+          </view>
+        </view>
+        
+        <view class="card-body">
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>基本信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">商户名称</text>
+                <text class="item-value">{{ detailInfo.merchantName }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">类型</text>
+                <text class="item-value">{{ detailInfo.type }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">编号</text>
+                <text class="item-value">{{ detailInfo.code }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">支付公司</text>
+                <text class="item-value">{{ detailInfo.payCompany }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>费率信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">刷卡费率</text>
+                <text class="item-value orange">{{ detailInfo.rateName }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">费率+</text>
+                <text class="item-value orange">{{ detailInfo.ratePlus }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">舍入模式</text>
+                <text class="item-value">{{ detailInfo.roundingMode }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>其他信息</text>
+            </view>
+            <view class="info-list">
+              <view class="list-item">
+                <text class="item-label">结算卡</text>
+                <text class="item-value">{{ detailInfo.bankNameCode }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">商户类型</text>
+                <text class="item-value">{{ detailInfo.merchantType }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">商户码</text>
+                <text class="item-value">{{ detailInfo.merchantCode }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">供货商</text>
+                <text class="item-value">{{ detailInfo.manufacture }}</text>
+              </view>
+              <view class="list-item">
+                <text class="item-label">启用日期</text>
+                <text class="item-value">{{ detailInfo.activationDate }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="info-section" v-if="detailInfo.remark">
+            <view class="section-title">
+              <view class="title-icon"></view>
+              <text>备注</text>
+            </view>
+            <view class="remark-content">
+              <text>{{ detailInfo.remark }}</text>
+            </view>
+          </view>
+        </view>
       </view>
+      
       <u-toast ref="uToast"></u-toast>
     </view>
   </template>
@@ -39,6 +122,28 @@ const data = reactive({
   detailInfo: {} 
 })
 const {detailInfo} = toRefs(data)
+
+function getStatusClass(status, statusText) {
+  // 优先根据状态文字判断
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  
+  // 备用：根据状态值判断
+  const statusStr = String(status)
+  if (statusStr === '2') {
+    return 'status-normal'
+  }
+  if (statusStr === '0' || statusStr === '3' || statusStr === '4') {
+    return 'status-error'
+  }
+  
+  return 'status-default'
+}
+
 onLoad((option) => {
     id.value = option.id
     getInfo()
@@ -56,7 +161,7 @@ onLoad((option) => {
       })
        // 类型
        getDicts('account_status').then(result => {
-         detailInfo.value.status=dictStr(detailInfo.value.status, result.data)
+         detailInfo.value.statusText=dictStr(detailInfo.value.status, result.data)
       })
        // 类型
        getDicts('rounding_mode').then(result => {
@@ -76,39 +181,146 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
+  .detail-card {
     margin: 24rpx;
-    padding: 16rpx 24rpx;
     background-color: #fff;
-    border-radius: 8rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   
-    .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 {
+    .card-header {
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      justify-content: space-between;
+      align-items: center;
+      padding: 24rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      .header-icon {
+        width: 56rpx;
+        height: 56rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16rpx;
+        flex-shrink: 0;
+        backdrop-filter: blur(10rpx);
+      }
+      
+      .header-info {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        
+        .card-name {
+          color: #ffffff;
+          font-size: 32rpx;
+          font-weight: 600;
+        }
+      }
+      
+      .status-badge {
+        padding: 12rpx 28rpx;
+        border-radius: 24rpx;
+        font-size: 26rpx;
+        font-weight: 600;
+        letter-spacing: 0.5rpx;
+        flex-shrink: 0;
+        
+        &.status-default {
+          background: #f0f0f0;
+          color: #666666;
+        }
+        
+        &.status-normal {
+          background: #fa8c16 !important;
+          color: #ffffff !important;
+          box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
+        }
+        
+        &.status-error {
+          background: #ff4d4f;
+          color: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+        }
+      }
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
+    
+    .card-body {
+      padding: 24rpx;
+    }
+  }
   
-      .form-btn {
-        padding-top: 20rpx;
+  .info-section {
+    margin-bottom: 24rpx;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .section-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20rpx;
+      
+      .title-icon {
+        width: 6rpx;
+        height: 28rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 3rpx;
+        margin-right: 12rpx;
+      }
+      
+      text {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+    }
+    
+    .info-list {
+      .list-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20rpx;
+        background: #f8f9fa;
+        border-radius: 8rpx;
+        margin-bottom: 12rpx;
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+        
+        .item-label {
+          color: #7f8c8d;
+          font-size: 26rpx;
+        }
+        
+        .item-value {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 500;
+          text-align: right;
+          
+          &.orange {
+            color: #fa8c16;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+    
+    .remark-content {
+      padding: 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      
+      text {
+        color: #2c3e50;
+        font-size: 28rpx;
+        line-height: 1.6;
       }
     }
   }
diff --git a/src/pages/work/base/posmachine/list.vue b/src/pages/work/base/posmachine/list.vue
index c1c940f..f283f74 100644
--- a/src/pages/work/base/posmachine/list.vue
+++ b/src/pages/work/base/posmachine/list.vue
@@ -5,51 +5,70 @@
         <u--input v-model="queryParams.name" border="false" placeholder="请输入POS机名称" 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-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+'-'+item.merchantName " 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>
+              <view class="card-info">
+                <text class="card-name">{{ item.name }} - {{ dictStr(item.type, posTypeList) }}</text>
+                <text class="card-code">{{ item.merchantName }}</text>
+              </view>
+            </view>
+            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
+              <text>{{ dictStr(item.status, statusList) }}</text>
+            </view>
           </view>
-         
-          <view class="item-row">
-            <text class="row-label">支付公司：</text>
-            <text class="row-value">{{ item.payCompany }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">刷卡费率</text>
+                <text class="info-value orange">{{ item.rateName }}+{{ item.ratePlus }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">商户类型</text>
+                <text class="info-value">{{ dictStr(item.merchantType, merchantTypeList) }}</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">结算卡</text>
+                <text class="info-value">{{ item.bankNameCode || '-' }}</text>
+              </view>
+              <view class="info-item" v-if="item.manufacture">
+                <text class="info-label">供货商</text>
+                <text class="info-value">{{ item.manufacture }}</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">支付公司</text>
+                <text class="info-value">{{ item.payCompany || '-' }}</text>
+              </view>
+            </view>
           </view>
-       
-          <view class="item-row">
-            <text class="row-label">类型：</text>
-            <text class="row-value">{{ dictStr(item.type, posTypeList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">账户状态：</text>
-            <text class="row-value">{{ dictStr(item.status, statusList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">刷卡费率：</text>
-            <text class="row-value">{{ item.rateName+'+'+ item.ratePlus}}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">结算卡：</text>
-            <text class="row-value">{{ item.bankNameCode }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">商户类型：</text>
-            <text class="row-value">{{ dictStr(item.merchantType, merchantTypeList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">供货商：</text>
-            <text class="row-value">{{ item.manufacture }}</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>
@@ -145,6 +164,16 @@ function settingConfirm(e) {
 function settingCancel() {
       settingPickShow.value = false
     }
+function getStatusClass(status, statusText) {
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  return 'status-default'
+}
+
 function dictStr(val, arr) {
       let str = ''
       arr.map(item => {
@@ -195,15 +224,6 @@ function dictStr(val, arr) {
 </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;
@@ -214,155 +234,209 @@ function dictStr(val, arr) {
   margin-bottom: 24rpx;
 
   .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;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .card-icon {
+      width: 56rpx;
+      height: 56rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+      flex-shrink: 0;
+      backdrop-filter: blur(10rpx);
+    }
+    
+    .card-info {
+      display: flex;
+      flex-direction: column;
+      gap: 6rpx;
+      flex: 1;
+      min-width: 0;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 1.2;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 26rpx;
+        line-height: 1.2;
       }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
+    }
+    
+    .status-badge {
+      padding: 12rpx 28rpx;
+      border-radius: 24rpx;
+      font-size: 26rpx;
+      font-weight: 600;
+      letter-spacing: 0.5rpx;
+      flex-shrink: 0;
+      
+      &.status-default {
+        background: #f0f0f0;
+        color: #666666;
       }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
+      
+      &.status-normal {
+        background: #fa8c16 !important;
+        color: #ffffff !important;
+        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
       }
-
-      .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;
+      
+      &.status-error {
+        background: #ff4d4f;
+        color: #ffffff;
+        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
       }
     }
   }
 
-  .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;
+    
+    .info-row {
+      display: flex;
+      margin-bottom: 12rpx;
+      gap: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .info-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16rpx 20rpx;
+        background: #f8f9fa;
+        border-radius: 8rpx;
+        min-height: 72rpx;
+        
+        .info-label {
+          color: #7f8c8d;
+          font-size: 26rpx;
+          flex-shrink: 0;
+          white-space: nowrap;
+          min-width: 120rpx;
+        }
+        
+        .info-value {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 500;
+          text-align: right;
+          flex: 1;
+          margin-left: 16rpx;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          
+          &.orange {
+            color: #fa8c16;
+            font-weight: 600;
+          }
+        }
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 0 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
       border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+      font-size: 26rpx;
+      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);
+      
+      text {
+        color: #667eea;
+      }
     }
-
-    .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);
+      
+      text {
+        color: #f5576c;
+      }
     }
   }
 }
diff --git a/src/pages/work/base/stocks/addEdit.vue b/src/pages/work/base/stocks/addEdit.vue
index 670f49c..f5c3193 100644
--- a/src/pages/work/base/stocks/addEdit.vue
+++ b/src/pages/work/base/stocks/addEdit.vue
@@ -249,11 +249,28 @@ onLoad((option) => {
   
     .section-title {
       width: 360rpx;
-      color: #333333;
+      color: #fff;
       line-height: 44rpx;
       font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 16rpx 26rpx;
+      margin: -16rpx -24rpx 20rpx;
+      border-radius: 8rpx 8rpx 0 0;
+      position: relative;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 26rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6rpx;
+        height: 28rpx;
+        background-color: #fff;
+        border-radius: 3rpx;
+      }
+      
+      padding-left: 52rpx;
     }
   
     .form-view {
@@ -261,6 +278,15 @@ onLoad((option) => {
   
       .form-btn {
         padding-top: 20rpx;
+        
+        ::v-deep .u-button {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+          border-radius: 12rpx;
+          height: 88rpx;
+          font-size: 32rpx;
+          box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
+        }
       }
     }
   }
diff --git a/src/pages/work/base/stocks/details.vue b/src/pages/work/base/stocks/details.vue
index 806e5fa..1c62f1a 100644
--- a/src/pages/work/base/stocks/details.vue
+++ b/src/pages/work/base/stocks/details.vue
@@ -6,16 +6,55 @@
 			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.code"></u-cell>
-        <u-cell title="账户状态:" titleStyle="font-weight:bolder" :value="detailInfo.status"></u-cell>
-        <u-cell title="佣金费率:" titleStyle="font-weight:bolder" center :value="detailInfo.commission"> </u-cell>
-        <u-cell title="关联储蓄卡:" titleStyle="font-weight:bolder" :value="detailInfo.bankNameCode"></u-cell>
-        <u-cell title="开户日期:" titleStyle="font-weight:bolder" :value="detailInfo.activationDate"></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="card-title">
+            <uni-icons type="wallet" size="24" color="#fff"></uni-icons>
+            <text class="card-name">{{ detailInfo.name }}</text>
+          </view>
+          <view class="status-badge" :class="getStatusClass(detailInfo.status, detailInfo.statusText)">
+            <text>{{ detailInfo.statusText }}</text>
+          </view>
+        </view>
+
+        <view class="section">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>账户信息</text>
+          </view>
+          <view class="info-grid">
+            <view class="info-item">
+              <text class="info-label">账号</text>
+              <text class="info-value">{{ detailInfo.code || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">余额</text>
+              <text class="info-value orange">{{ detailInfo.balance || '0' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">佣金费率</text>
+              <text class="info-value orange">{{ detailInfo.commission || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">关联储蓄卡</text>
+              <text class="info-value">{{ detailInfo.bankNameCode || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">开户日期</text>
+              <text class="info-value">{{ detailInfo.activationDate || '-' }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="section" v-if="detailInfo.remark">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>备注</text>
+          </view>
+          <view class="remark-content">
+            <text>{{ detailInfo.remark }}</text>
+          </view>
+        </view>
       </view>
       <u-toast ref="uToast"></u-toast>
     </view>
@@ -27,21 +66,22 @@ import { getDicts } from '@/api/system/dict/data.js'
 import {onLoad} from "@dcloudio/uni-app";
 import {reactive ,toRefs,ref,computed }from "vue";
 const id = ref('')
+const statusList = ref([])
 const data = reactive({
   detailInfo: {} 
 })
 const {detailInfo} = toRefs(data)
 onLoad((option) => {
     id.value = option.id
+    getDicts('account_status').then(res => {
+      statusList.value = res.data
+    })
     getInfo()
   })
   function getInfo() {
     getFutureStocks(id.value).then(res => {
           detailInfo.value = res.data
-           // 类型
-           getDicts('account_status').then(result => {
-         detailInfo.value.status=dictStr(detailInfo.value.status, result.data)
-      })
+          detailInfo.value.statusText = dictStr(detailInfo.value.status, statusList.value)
         })
   }
   function dictStr(val, arr) {
@@ -53,42 +93,128 @@ onLoad((option) => {
       })
       return str
     }
+  function getStatusClass(status, statusText) {
+    if (statusText && statusText.includes('正常')) {
+      return 'status-normal'
+    }
+    if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+      return 'status-error'
+    }
+    return 'status-default'
+  }
   </script>
   
   <style lang="scss" scoped>
-  .section {
+  .detail-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;
-    }
-  
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+    border-radius: 12rpx;
+    overflow: hidden;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
+    .card-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 32rpx;
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      justify-content: space-between;
+      align-items: center;
+
+      .card-title {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+
+        .card-name {
+          color: #fff;
+          font-size: 36rpx;
+          font-weight: bold;
+        }
+      }
+
+      .status-badge {
+        padding: 8rpx 20rpx;
+        border-radius: 24rpx;
+        font-size: 24rpx;
+        font-weight: 600;
+
+        &.status-default {
+          background: #f0f0f0;
+          color: #666666;
+        }
+
+        &.status-normal {
+          background: #fa8c16;
+          color: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3);
+        }
+
+        &.status-error {
+          background: #ff4d4f;
+          color: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+        }
+      }
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+
+    .section {
+      padding: 32rpx;
+      border-bottom: 1rpx solid #f0f0f0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .section-title {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+        margin-bottom: 24rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333;
+
+        .title-icon {
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+        }
+      }
+
+      .info-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 24rpx;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .info-label {
+            font-size: 28rpx;
+            color: #999;
+          }
+
+          .info-value {
+            font-size: 28rpx;
+            color: #333;
+            font-weight: 500;
+
+            &.orange {
+              color: #fa8c16;
+              font-weight: bold;
+              font-size: 32rpx;
+            }
+          }
+        }
+      }
+
+      .remark-content {
+        font-size: 28rpx;
+        color: #666;
+        line-height: 1.6;
+        text-align: justify;
       }
     }
   }
diff --git a/src/pages/work/base/stocks/list.vue b/src/pages/work/base/stocks/list.vue
index 84883ca..85b1918 100644
--- a/src/pages/work/base/stocks/list.vue
+++ b/src/pages/work/base/stocks/list.vue
@@ -5,45 +5,75 @@
         <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-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+'-'+item.code " 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>
+              <view class="card-info">
+                <view class="name-code-row">
+                  <text class="card-name">{{ item.name }}</text>
+                  <text class="card-code">{{ item.code }}</text>
+                </view>
+              </view>
+            </view>
+            <view class="status-badge" :class="getStatusClass(item.status, dictStr(item.status, statusList))">
+              <text>{{ dictStr(item.status, statusList) }}</text>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">账户状态：</text>
-            <text class="row-value">{{ dictStr(item.status, statusList) }}</text>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">余额</text>
+                <text class="info-value orange">{{ item.balance || '0' }}元</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">佣金费率</text>
+                <text class="info-value orange">{{ item.commission || '-' }}</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item full-width">
+                <text class="info-label">关联储蓄卡</text>
+                <text class="info-value">{{ item.bankNameCode || '-' }}</text>
+              </view>
+            </view>
+            
+            <view class="info-row">
+              <view class="info-item full-width">
+                <text class="info-label">开户日期</text>
+                <text class="info-value">{{ item.activationDate || '-' }}</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 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.bankNameCode }}</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.activationDate}}</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-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>
@@ -125,6 +155,16 @@ function settingConfirm(e) {
 function settingCancel() {
       settingPickShow.value = false
     }
+function getStatusClass(status, statusText) {
+  if (statusText && statusText.includes('正常')) {
+    return 'status-normal'
+  }
+  if (statusText && (statusText.includes('销卡') || statusText.includes('销户'))) {
+    return 'status-error'
+  }
+  return 'status-default'
+}
+
 function dictStr(val, arr) {
       let str = ''
       arr.map(item => {
@@ -194,155 +234,221 @@ function dictStr(val, arr) {
   margin-bottom: 24rpx;
 
   .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;
+    margin-left: 10rpx;
+    
+    &: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;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .card-icon {
+      width: 56rpx;
+      height: 56rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+      flex-shrink: 0;
+      backdrop-filter: blur(10rpx);
+    }
+    
+    .card-info {
+      display: flex;
+      flex-direction: column;
+      gap: 6rpx;
+      flex: 1;
+      min-width: 0;
+      
+      .name-code-row {
+        display: flex;
+        align-items: center;
+        gap: 16rpx;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 1.2;
       }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 26rpx;
+        line-height: 1.2;
       }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
+    }
+    
+    .status-badge {
+      padding: 12rpx 28rpx;
+      border-radius: 24rpx;
+      font-size: 26rpx;
+      font-weight: 600;
+      letter-spacing: 0.5rpx;
+      flex-shrink: 0;
+      
+      &.status-default {
+        background: #f0f0f0;
+        color: #666666;
       }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
+      
+      &.status-normal {
+        background: #fa8c16 !important;
+        color: #ffffff !important;
+        box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.3) !important;
       }
-
-      .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;
+      
+      &.status-error {
+        background: #ff4d4f;
+        color: #ffffff;
+        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
       }
     }
   }
 
-  .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;
+    
+    .info-row {
+      display: flex;
+      margin-bottom: 12rpx;
+      gap: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .info-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16rpx 20rpx;
+        background: #f8f9fa;
+        border-radius: 8rpx;
+        min-height: 72rpx;
+        
+        &.full-width {
+          flex: none;
+          width: 100%;
+        }
+        
+        .info-label {
+          color: #7f8c8d;
+          font-size: 26rpx;
+          flex-shrink: 0;
+          white-space: nowrap;
+          min-width: 120rpx;
+        }
+        
+        .info-value {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 500;
+          text-align: right;
+          flex: 1;
+          margin-left: 16rpx;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          
+          &.orange {
+            color: #fa8c16;
+            font-weight: 600;
+          }
+        }
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 0 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
       border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+      font-size: 26rpx;
+      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);
+      
+      text {
+        color: #667eea;
+      }
     }
-
-    .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);
+      
+      text {
+        color: #f5576c;
+      }
     }
   }
 }
diff --git a/src/pages/work/heartJourney/addEdit.vue b/src/pages/work/heartJourney/addEdit.vue
index 62cf02d..417f1aa 100644
--- a/src/pages/work/heartJourney/addEdit.vue
+++ b/src/pages/work/heartJourney/addEdit.vue
@@ -25,8 +25,8 @@
 						<u-icon slot="right" name="arrow-right"></u-icon>
             </u-form-item>
             <u-form-item label="内容" prop="remark" required labelPosition="top">
-              <u--textarea v-model="form.remark" placeholder="请填写内容" border="none" autoHeight inputAlign="right" count
-                maxlength="20000" style="padding:18rpx 0;"></u--textarea>
+              <u--textarea v-model="form.remark" placeholder="请填写内容" border="none" autoHeight count
+                maxlength="20000" style="padding:18rpx 0; min-height: 300rpx;"></u--textarea>
             </u-form-item>
           </u--form>
           <view class="form-btn">
@@ -166,11 +166,28 @@ onLoad((option) => {
   
     .section-title {
       width: 360rpx;
-      color: #333333;
+      color: #fff;
       line-height: 44rpx;
       font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 16rpx 26rpx;
+      margin: -16rpx -24rpx 20rpx;
+      border-radius: 8rpx 8rpx 0 0;
+      position: relative;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 26rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6rpx;
+        height: 28rpx;
+        background-color: #fff;
+        border-radius: 3rpx;
+      }
+      
+      padding-left: 52rpx;
     }
   
     .form-view {
@@ -178,6 +195,15 @@ onLoad((option) => {
   
       .form-btn {
         padding-top: 20rpx;
+        
+        ::v-deep .u-button {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+          border-radius: 12rpx;
+          height: 88rpx;
+          font-size: 32rpx;
+          box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
+        }
       }
     }
   }
diff --git a/src/pages/work/heartJourney/details.vue b/src/pages/work/heartJourney/details.vue
index d66166f..3d9207e 100644
--- a/src/pages/work/heartJourney/details.vue
+++ b/src/pages/work/heartJourney/details.vue
@@ -6,13 +6,40 @@
 			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" :value="detailInfo.createTime"></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="card-title">
+            <uni-icons type="heart" size="24" color="#fff"></uni-icons>
+            <text class="card-name">{{ detailInfo.name }}</text>
+          </view>
+        </view>
+
+        <view class="section">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>基本信息</text>
+          </view>
+          <view class="info-grid">
+            <view class="info-item">
+              <text class="info-label">类型</text>
+              <text class="info-value">{{ detailInfo.type || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">记录时间</text>
+              <text class="info-value">{{ detailInfo.createTime || '-' }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="section" v-if="detailInfo.remark">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>内容</text>
+          </view>
+          <view class="remark-content">
+            <text>{{ detailInfo.remark }}</text>
+          </view>
+        </view>
       </view>
       <u-toast ref="uToast"></u-toast>
     </view>
@@ -53,39 +80,86 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
+  .detail-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;
-    }
-  
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+    border-radius: 12rpx;
+    overflow: hidden;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
+    .card-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 32rpx;
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      justify-content: space-between;
+      align-items: center;
+
+      .card-title {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+
+        .card-name {
+          color: #fff;
+          font-size: 36rpx;
+          font-weight: bold;
+        }
+      }
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+
+    .section {
+      padding: 32rpx;
+      border-bottom: 1rpx solid #f0f0f0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .section-title {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+        margin-bottom: 24rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333;
+
+        .title-icon {
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+        }
+      }
+
+      .info-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 24rpx;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .info-label {
+            font-size: 28rpx;
+            color: #999;
+          }
+
+          .info-value {
+            font-size: 28rpx;
+            color: #333;
+            font-weight: 500;
+          }
+        }
+      }
+
+      .remark-content {
+        font-size: 28rpx;
+        color: #666;
+        line-height: 1.6;
+        text-align: justify;
       }
     }
   }
diff --git a/src/pages/work/heartJourney/list.vue b/src/pages/work/heartJourney/list.vue
index 6b5376a..f0d474d 100644
--- a/src/pages/work/heartJourney/list.vue
+++ b/src/pages/work/heartJourney/list.vue
@@ -5,10 +5,13 @@
         <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="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,27 +33,44 @@
     </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="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="heart" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.name }}</text>
+              </view>
+            </view>
           </view>
-          <view class="item-row">
-            <text class="row-label">类型：</text>
-            <text class="row-value">{{ dictStr(item.type, journeyTypeList) }}</text>
+          
+          <view class="card-body">
+            <view class="info-row single">
+              <text class="info-label">类型：</text>
+              <text class="info-value">{{ dictStr(item.type, journeyTypeList) }}</text>
+            </view>
+            
+            <view class="info-row single">
+              <text class="info-label">记录时间：</text>
+              <text class="info-value">{{ item.createTime || '-' }}</text>
+            </view>
+            
+            <view class="info-row remark" v-if="item.remark">
+              <text class="info-label">内容：</text>
+              <text class="info-value">{{ 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.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-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>
@@ -218,11 +240,39 @@ 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;
+    margin-left: 10rpx;
+    
+    &: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 {
@@ -231,15 +281,17 @@ 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;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
         padding: 30rpx 0;
       }
 
@@ -261,14 +313,16 @@ 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;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
       box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -278,97 +332,143 @@ function selectStatus(item) {
 
 .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;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .card-icon {
+      width: 56rpx;
+      height: 56rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+      flex-shrink: 0;
+      backdrop-filter: blur(10rpx);
+    }
+    
+    .card-info {
+      display: flex;
+      flex-direction: column;
+      gap: 6rpx;
+      flex: 1;
+      min-width: 0;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 1.2;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
-
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
+  .card-body {
+    padding: 24rpx;
+    
+    .info-row {
+      display: flex;
+      align-items: center;
+      padding: 16rpx 20rpx;
+      background: #f8f9fa;
+      border-radius: 8rpx;
+      margin-bottom: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      &.single {
+        justify-content: space-between;
+      }
+      
+      &.remark {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      
+      .info-label {
+        color: #7f8c8d;
+        font-size: 28rpx;
+        flex-shrink: 0;
+      }
+      
+      .info-value {
+        color: #2c3e50;
+        font-size: 28rpx;
+        font-weight: 500;
+        flex: 1;
+        text-align: right;
+      }
     }
-
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    
+    .info-row.remark {
+      .info-value {
+        text-align: left;
+        margin-top: 8rpx;
+        line-height: 1.6;
+        color: #666;
+        width: 100%;
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 0 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
       border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+      font-size: 26rpx;
+      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);
+      
+      text {
+        color: #667eea;
+      }
     }
-
-    .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);
+      
+      text {
+        color: #f5576c;
+      }
     }
   }
 }
diff --git a/src/pages/work/product/productInfor/addEdit.vue b/src/pages/work/product/productInfor/addEdit.vue
index e3616aa..513e79e 100644
--- a/src/pages/work/product/productInfor/addEdit.vue
+++ b/src/pages/work/product/productInfor/addEdit.vue
@@ -205,11 +205,28 @@ onLoad((option) => {
   
     .section-title {
       width: 360rpx;
-      color: #333333;
+      color: #fff;
       line-height: 44rpx;
       font-size: 30rpx;
-      border-left: 6rpx solid #2681FF;
-      padding-left: 26rpx;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 16rpx 26rpx;
+      margin: -16rpx -24rpx 20rpx;
+      border-radius: 8rpx 8rpx 0 0;
+      position: relative;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 26rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6rpx;
+        height: 28rpx;
+        background-color: #fff;
+        border-radius: 3rpx;
+      }
+      
+      padding-left: 52rpx;
     }
   
     .form-view {
@@ -217,6 +234,15 @@ onLoad((option) => {
   
       .form-btn {
         padding-top: 20rpx;
+        
+        ::v-deep .u-button {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+          border-radius: 12rpx;
+          height: 88rpx;
+          font-size: 32rpx;
+          box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
+        }
       }
     }
   }
diff --git a/src/pages/work/product/productInfor/details.vue b/src/pages/work/product/productInfor/details.vue
index 060e52b..6cfd0f1 100644
--- a/src/pages/work/product/productInfor/details.vue
+++ b/src/pages/work/product/productInfor/details.vue
@@ -6,16 +6,52 @@
 			title="商品信息详情"
 		>
 		</u-navbar>
-      <view class="section">
-        <u-cell-group>
-          <u-cell title="类别:" titleStyle="font-weight:bolder" :value="detailInfo.category"></u-cell>
-        <u-cell title="商品名称:" titleStyle="font-weight:bolder" :value="detailInfo.name"></u-cell>
-        <u-cell title="商品编码:" titleStyle="font-weight:bolder" center :value="detailInfo.code"> </u-cell>
-        <u-cell title="单位:" titleStyle="font-weight:bolder" :value="detailInfo.unit"></u-cell>
-        <u-cell title="排序:" titleStyle="font-weight:bolder" :value="detailInfo.ranking"></u-cell>
-        <u-cell title="创建时间:" titleStyle="font-weight:bolder" :value="detailInfo.createTime"></u-cell>
-        
-      </u-cell-group>
+      <view class="detail-card">
+        <view class="card-header">
+          <view class="card-title">
+            <uni-icons type="list" size="24" color="#fff"></uni-icons>
+            <text class="card-name">{{ detailInfo.name }}</text>
+          </view>
+        </view>
+
+        <view class="section">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>商品信息</text>
+          </view>
+          <view class="info-grid">
+            <view class="info-item">
+              <text class="info-label">商品编码</text>
+              <text class="info-value">{{ detailInfo.code || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">类别</text>
+              <text class="info-value">{{ detailInfo.category || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">单位</text>
+              <text class="info-value">{{ detailInfo.unit || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">排序</text>
+              <text class="info-value">{{ detailInfo.ranking || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">创建时间</text>
+              <text class="info-value">{{ detailInfo.createTime || '-' }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="section" v-if="detailInfo.remark">
+          <view class="section-title">
+            <view class="title-icon"></view>
+            <text>备注</text>
+          </view>
+          <view class="remark-content">
+            <text>{{ detailInfo.remark }}</text>
+          </view>
+        </view>
       </view>
       <u-toast ref="uToast"></u-toast>
     </view>
@@ -60,39 +96,86 @@ onLoad((option) => {
   </script>
   
   <style lang="scss" scoped>
-  .section {
+  .detail-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;
-    }
-  
-    .content {
-      width: 647rpx;
-      font-size: 28rpx;
-      color: #333333;
-      line-height: 40rpx;
-      text-align: left;
-    }
-  
-    .img-con {
+    border-radius: 12rpx;
+    overflow: hidden;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
+    .card-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 32rpx;
       display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx
+      justify-content: space-between;
+      align-items: center;
+
+      .card-title {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+
+        .card-name {
+          color: #fff;
+          font-size: 36rpx;
+          font-weight: bold;
+        }
+      }
     }
-    .form-view {
-      padding: 20rpx 0rpx 0 10rpx;
-  
-      .form-btn {
-        padding-top: 20rpx;
+
+    .section {
+      padding: 32rpx;
+      border-bottom: 1rpx solid #f0f0f0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .section-title {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+        margin-bottom: 24rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333;
+
+        .title-icon {
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+        }
+      }
+
+      .info-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 24rpx;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .info-label {
+            font-size: 28rpx;
+            color: #999;
+          }
+
+          .info-value {
+            font-size: 28rpx;
+            color: #333;
+            font-weight: 500;
+          }
+        }
+      }
+
+      .remark-content {
+        font-size: 28rpx;
+        color: #666;
+        line-height: 1.6;
+        text-align: justify;
       }
     }
   }
diff --git a/src/pages/work/product/productInfor/list.vue b/src/pages/work/product/productInfor/list.vue
index 229bc53..1486a37 100644
--- a/src/pages/work/product/productInfor/list.vue
+++ b/src/pages/work/product/productInfor/list.vue
@@ -5,22 +5,27 @@
         <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="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">
-              <view class="filter-title">类别</view>
+              <view class="filter-title">商品类别</view>
               <view class="state-list">
                 <view v-for="item in productTypeList" :key="item.id" class="state-item"
                   :class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
               </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+              <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,33 +33,54 @@
     </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+'（'+item.code+'）'" 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="list" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <view class="name-code-row">
+                  <text class="card-name">{{ item.name }}</text>
+                  <text class="card-code">{{ item.code }}</text>
+                </view>
+              </view>
+            </view>
           </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">{{ dictStr(item.unit, unitList) }}</text>
+              </view>
+            </view>
+            
+            <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">{{ dictStr(item.unit, unitList) }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">创建时间：</text>
-            <text class="row-value">{{ item.createTime }}</text>
-          </view>
-       
-          <view class="operate" >
-            <!-- <view class="btn filling" @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>
@@ -233,28 +259,58 @@ 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;
+    margin-left: 10rpx;
+    
+    &: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 {
     width: 100%;
     position: absolute;
     left: 0;
     top: 96rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-      background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
         padding: 30rpx 0;
       }
 
@@ -276,14 +332,16 @@ 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;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
       box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
@@ -293,97 +351,166 @@ function selectStatus(item) {
 
 .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;
+    padding: 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .card-icon {
+      width: 56rpx;
+      height: 56rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+      flex-shrink: 0;
+      backdrop-filter: blur(10rpx);
+    }
+    
+    .card-info {
+      display: flex;
+      flex-direction: column;
+      gap: 6rpx;
+      flex: 1;
+      min-width: 0;
+      
+      .name-code-row {
+        display: flex;
+        align-items: center;
+        gap: 16rpx;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 1.2;
       }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 26rpx;
+        line-height: 1.2;
       }
     }
   }
 
-  .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;
+    
+    .info-row {
+      display: flex;
+      margin-bottom: 12rpx;
+      gap: 12rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .info-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16rpx 20rpx;
+        background: #f8f9fa;
+        border-radius: 8rpx;
+        min-height: 72rpx;
+        
+        &.full-width {
+          flex: none;
+          width: 100%;
+        }
+        
+        .info-label {
+          color: #7f8c8d;
+          font-size: 26rpx;
+          flex-shrink: 0;
+          white-space: nowrap;
+          min-width: 120rpx;
+        }
+        
+        .info-value {
+          color: #2c3e50;
+          font-size: 28rpx;
+          font-weight: 500;
+          text-align: right;
+          flex: 1;
+          margin-left: 16rpx;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
     }
   }
 
   .operate {
     display: flex;
     justify-content: flex-end;
+    padding: 0 24rpx 24rpx;
+    gap: 16rpx;
 
-    .btn {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
+    .btn-edit,
+    .btn-copy,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
       border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+      font-size: 26rpx;
+      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);
+      
+      text {
+        color: #667eea;
+      }
     }
-
-    .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);
+      
+      text {
+        color: #52c41a;
+      }
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
+      
+      text {
+        color: #f5576c;
+      }
     }
   }
 }