fix: 功能样式优化完善。

fix: pos刷卡推荐，样式修改。
2026-02-15 17:32:20 +08:00 · 2026-02-15 17:16:20 +08:00
5 changed files with 305 additions and 240 deletions
--- a/src/pages/work/accounts/accounts/list.vue
+++ b/src/pages/work/accounts/accounts/list.vue
@@ -42,30 +42,33 @@
      <u-list-item v-for="(item, index) in listData" :key="index">
        <view class="list-item" @click="enterDetails(item)">
          <view class="item-header">
-            <view class="card-name-section">
+            <view class="header-row">
              <view class="account-icon">
                <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
              </view>
-              <view class="card-info">
              <text class="card-name">{{ item.name }}</text>
              <text class="card-code" v-if="item.code">{{ item.code }}</text>
            </view>
+            <view class="info-row">
+              <text class="account-type">{{ dictStr(item.type, accountType) || '--' }}</text>
+              <text class="account-status" :class="getStatusClass(item.status, dictStr(item.status, accountStatus))">{{ dictStr(item.status, accountStatus) || '--' }}</text>
+              <view class="balance-amount">
+                <text class="balance-label">余额</text>
+                <text class="balance-value">{{ item.balance }}元</text>
              </view>
-            <view class="balance-section">
-              <text class="balance-value"><text class="balance-label">余额</text>{{ item.balance }}元</text>
            </view>
          </view>
          
          <view class="card-body">
            <view class="info-row">
-              <view class="info-item">
+              <!-- <view class="info-item">
                <text class="info-label">账户类型</text>
                <text class="info-value">{{ dictStr(item.type, accountType) }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">账户状态</text>
                <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, accountStatus))">{{ dictStr(item.status, accountStatus) }}</text>
-              </view>
+              </view> -->
              <view class="info-item">
                <text class="info-label">可用额度</text>
                <text class="info-value orange">{{ item.availableLimit }}</text>
@@ -521,17 +524,15 @@ page {

  .item-header {
    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
+    gap: 12rpx;
    padding: 16rpx 24rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
-    .card-name-section {
+    .header-row {
      display: flex;
      align-items: center;
-      flex: 1;
-      min-width: 0;
-      margin-right: 16rpx;
+      gap: 10rpx;
    }
    
    .account-icon {
@@ -542,55 +543,86 @@ page {
      display: flex;
      align-items: center;
      justify-content: center;
-      margin-right: 12rpx;
      flex-shrink: 0;
    }
    
-    .card-info {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 4rpx;
-      
    .card-name {
-        color: #ffffff;
      font-size: 28rpx;
      font-weight: 600;
-        line-height: 1.2;
-        white-space: nowrap;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
+      white-space: nowrap;
    }
    
    .card-code {
-        color: rgba(255, 255, 255, 0.85);
-        font-size: 22rpx;
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.75);
      font-weight: 400;
-        line-height: 1;
-      }
-    }
-    
-    .balance-section {
-      display: flex;
-      align-items: center;
+      line-height: 1.3;
+      letter-spacing: 0.5rpx;
+      font-family: 'Courier New', monospace;
      flex-shrink: 0;
-      white-space: nowrap;
+    }
    
-      .balance-value {
-        color: #fa8c16;
-        font-size: 32rpx;
-        font-weight: 700;
-        line-height: 1;
-        white-space: nowrap;
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+    
+    .account-type {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
+    
+    .account-status {
+      font-size: 24rpx;
+      font-weight: 500;
+      line-height: 1.3;
+      flex: 1;
+      text-align: center;
+      
+      &.status-normal {
+        color: #52c41a;
+      }
+      
+      &.status-error {
+        color: #ff4d4f;
+      }
+      
+      &.status-default {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+    
+    .balance-amount {
+      display: flex;
+      align-items: baseline;
+      gap: 6rpx;
+      flex-shrink: 0;
+    }

    .balance-label {
-          color: rgba(255, 255, 255, 0.85);
      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.75);
      font-weight: 400;
-          margin-right: 8rpx;
-        }
    }
+
+    .balance-value {
+      font-size: 32rpx;
+      font-weight: 700;
+      color: #fa8c16;
+      line-height: 1.2;
    }
  }

--- a/src/pages/work/accounts/posadvice/list.vue
+++ b/src/pages/work/accounts/posadvice/list.vue
@@ -16,28 +16,21 @@
      <u-list-item v-for="(item, index) in listData" :key="index">
        <view class="list-item">
          <view class="item-header">
-            <view class="left-section">
+            <view class="header-row">
              <view class="card-icon">
                <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
              </view>
-              <view class="header-info">
-                <view class="card-name-row">
              <text class="card-name">{{ item.name }}</text>
-                  <view class="bill-info">
-                    <text class="limit-label">账单日</text>
-                    <text class="bill-date">{{ item.billDateName }}</text>
+              <text class="bill-date-text">账单日 {{ item.billDateName }}</text>
+              <view class="available-amount">
+                <text class="amount-label">可用</text>
+                <text class="amount-value">{{ item.availableLimit }}元</text>
              </view>
            </view>
-                <view class="card-detail-row">
+            <view class="info-row">
              <text class="card-code">{{ item.code }}</text>
            </view>
          </view>
-            </view>
-            <view class="right-section">
-              <text class="limit-label-right">可用额度</text>
-              <text class="limit-value">{{ item.availableLimit }}</text>
-            </view>
-          </view>
          
          <view class="card-body">
            <view class="pos-section" v-if="item.advicePosNames">
@@ -380,18 +373,15 @@ page {

  .item-header {
    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    flex-direction: column;
    gap: 12rpx;
    padding: 16rpx 24rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

-    .left-section {
+    .header-row {
      display: flex;
      align-items: center;
-      gap: 12rpx;
-      flex: 1;
-      min-width: 0;
+      gap: 10rpx;
    }

    .card-icon {
@@ -405,87 +395,63 @@ page {
      flex-shrink: 0;
    }

-    .header-info {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 6rpx;
-      min-width: 0;
-    }
-    
-    .card-name-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12rpx;
-    }
-    
    .card-name {
-      font-size: 30rpx;
-      font-weight: 700;
+      font-size: 28rpx;
+      font-weight: 600;
      color: #ffffff;
      line-height: 1.3;
      flex: 1;
-      white-space: nowrap;
+      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
+      white-space: nowrap;
    }
    
-    .card-detail-row {
-      display: flex;
-      align-items: center;
-    }
-    
-    .card-code {
-      font-size: 21rpx;
-      color: rgba(255, 255, 255, 0.85);
-      font-weight: 400;
-      line-height: 1.2;
-      letter-spacing: 0.5rpx;
-      font-family: 'Courier New', monospace;
-    }
-    
-    .bill-info {
-      display: flex;
-      align-items: center;
-      gap: 6rpx;
-      flex-shrink: 0;
-    }
-    
-    .limit-label {
-      font-size: 20rpx;
-      color: rgba(255, 255, 255, 0.7);
-      font-weight: 400;
-      line-height: 1;
-    }
-    
-    .bill-date {
+    .bill-date-text {
      font-size: 24rpx;
-      font-weight: 600;
-      color: #ffffff;
-      line-height: 1;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+      margin-right: 12rpx;
    }
    
-    .right-section {
+    .available-amount {
      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
+      align-items: baseline;
      gap: 6rpx;
      flex-shrink: 0;
    }

-    .limit-label-right {
+    .amount-label {
      font-size: 22rpx;
-      color: rgba(255, 255, 255, 0.7);
+      color: rgba(255, 255, 255, 0.75);
      font-weight: 400;
-      line-height: 1;
    }

-    .limit-value {
+    .amount-value {
      font-size: 32rpx;
      font-weight: 700;
      color: #52c41a;
-      line-height: 1;
+      line-height: 1.2;
+    }
+    
+    .info-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+
+    .card-code {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.75);
+      font-weight: 400;
+      line-height: 1.3;
+      letter-spacing: 0.5rpx;
+      font-family: 'Courier New', monospace;
+      flex: 1;
    }
  }

--- a/src/pages/work/base/creditCard/list.vue
+++ b/src/pages/work/base/creditCard/list.vue
@@ -16,34 +16,37 @@
      <u-list-item v-for="(item, index) in listData" :key="index">
        <view class="list-item" @click="enterDetails(item)">
          <view class="item-header">
-            <view class="card-name-section">
+            <view class="header-row">
              <view class="card-icon">
                <uni-icons type="vip-filled" size="20" color="#ffffff"></uni-icons>
              </view>
-              <view class="card-info">
              <text class="card-name">{{ item.name }}</text>
              <text class="card-code" v-if="item.code">{{ item.code }}</text>
            </view>
+            <view class="info-row">
+              <text class="credit-limit">{{ item.creditLimit || 0 }}元</text>
+              <text class="account-status" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
+              <view class="balance-amount">
+                <text class="balance-label">可用</text>
+                <text class="balance-value">{{ item.availableLimit || 0 }}元</text>
              </view>
-            <view class="balance-section">
-              <text class="balance-value"><text class="balance-label">可用</text>{{ item.availableLimit || 0 }}元</text>
            </view>
          </view>
          
          <view class="card-body">
            <view class="info-row">
-              <view class="info-item" v-if="item.creditLimit || true">
+              <!-- <view class="info-item" v-if="item.creditLimit || true">
                <text class="info-label">信用额度</text>
                <text class="info-value primary">{{ item.creditLimit ? item.creditLimit + '元' : '--' }}</text>
-              </view>
+              </view> -->
               <view class="info-item" v-if="item.balance || true">
                <text class="info-label">余额</text>
                <text class="info-value orange">{{ item.balance ? item.balance + '元' : '--' }}</text>
              </view>
-              <view class="info-item" v-if="dictStr(item.status, statusList) || true">
+              <!-- <view class="info-item" v-if="dictStr(item.status, statusList) || true">
                <text class="info-label">账户状态</text>
                <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
-              </view>
+              </view> -->
               <view class="info-item" v-if="item.bankName || true">
                <text class="info-label">银行</text>
                <text class="info-value">{{ item.bankName || '--' }}</text>
@@ -445,17 +448,15 @@ page {

  .item-header {
    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
+    gap: 12rpx;
    padding: 16rpx 24rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
-    .card-name-section {
+    .header-row {
      display: flex;
      align-items: center;
-      flex: 1;
-      min-width: 0;
-      margin-right: 16rpx;
+      gap: 10rpx;
    }
    
    .card-icon {
@@ -466,55 +467,89 @@ page {
      display: flex;
      align-items: center;
      justify-content: center;
-      margin-right: 12rpx;
      flex-shrink: 0;
    }
    
-    .card-info {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 4rpx;
-      
    .card-name {
-        color: #ffffff;
      font-size: 28rpx;
      font-weight: 600;
-        line-height: 1.2;
-        white-space: nowrap;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
+      white-space: nowrap;
    }
    
    .card-code {
-        color: rgba(255, 255, 255, 0.85);
-        font-size: 22rpx;
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.75);
      font-weight: 400;
-        line-height: 1;
-      }
-    }
-    
-    .balance-section {
-      display: flex;
-      align-items: center;
+      line-height: 1.3;
+      letter-spacing: 0.5rpx;
+      font-family: 'Courier New', monospace;
      flex-shrink: 0;
-      white-space: nowrap;
+    }
    
-      .balance-value {
-        color: #fa8c16;
-        font-size: 32rpx;
-        font-weight: 700;
-        line-height: 1;
-        white-space: nowrap;
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+    
+    .credit-limit {
+      font-size: 24rpx;
+      color: #667eea;
+      font-weight: 600;
+      line-height: 1.3;
+      flex-shrink: 0;
+      background: rgba(255, 255, 255, 0.9);
+      padding: 4rpx 12rpx;
+      border-radius: 8rpx;
+    }
+    
+    .account-status {
+      font-size: 24rpx;
+      font-weight: 500;
+      line-height: 1.3;
+      flex: 1;
+      text-align: center;
+      
+      &.status-normal {
+        color: #52c41a;
+      }
+      
+      &.status-error {
+        color: #ff4d4f;
+      }
+      
+      &.status-default {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+    
+    .balance-amount {
+      display: flex;
+      align-items: baseline;
+      gap: 6rpx;
+      flex-shrink: 0;
+    }

    .balance-label {
-          color: rgba(255, 255, 255, 0.85);
      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.75);
      font-weight: 400;
-          margin-right: 8rpx;
-        }
    }
+
+    .balance-value {
+      font-size: 32rpx;
+      font-weight: 700;
+      color: #fa8c16;
+      line-height: 1.2;
    }
  }
  
--- a/src/pages/work/base/debitCard/list.vue
+++ b/src/pages/work/base/debitCard/list.vue
@@ -40,30 +40,33 @@
      <u-list-item v-for="(item, index) in listData" :key="index">
        <view class="list-item" @click="enterDetails(item)">
          <view class="item-header">
-            <view class="card-name-section">
+            <view class="header-row">
              <view class="card-icon">
                <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
              </view>
-              <view class="card-info">
              <text class="card-name">{{ item.name }}</text>
              <text class="card-code" v-if="item.code">{{ item.code }}</text>
            </view>
+            <view class="info-row">
+              <text class="account-type">{{ dictStr(item.debitType, debitTypeList) || '--' }}</text>
+              <text class="account-status" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
+              <view class="balance-amount">
+                <text class="balance-label">余额</text>
+                <text class="balance-value">{{ item.balance }}元</text>
              </view>
-            <view class="balance-section">
-              <text class="balance-value"><text class="balance-label">余额</text>{{ item.balance }}元</text>
            </view>
          </view>
          
          <view class="card-body">
            <view class="info-row">
-              <view class="info-item" v-if="dictStr(item.debitType, debitTypeList) || true">
+              <!-- <view class="info-item" v-if="dictStr(item.debitType, debitTypeList) || true">
                <text class="info-label">账户类型</text>
                <text class="info-value">{{ dictStr(item.debitType, debitTypeList) || '--' }}</text>
              </view>
              <view class="info-item" v-if="dictStr(item.status, statusList) || true">
                <text class="info-label">账户状态</text>
                <text class="info-value" :class="getStatusClass(item.status, dictStr(item.status, statusList))">{{ dictStr(item.status, statusList) || '--' }}</text>
-              </view>
+              </view> -->
              <view class="info-item" v-if="item.activationDate || true">
                <text class="info-label">开户日期</text>
                <text class="info-value">{{ item.activationDate || '--' }}</text>
@@ -555,17 +558,15 @@ page {

  .item-header {
    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
+    gap: 12rpx;
    padding: 16rpx 24rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
-    .card-name-section {
+    .header-row {
      display: flex;
      align-items: center;
-      flex: 1;
-      min-width: 0;
-      margin-right: 16rpx;
+      gap: 10rpx;
    }
    
    .card-icon {
@@ -576,54 +577,85 @@ page {
      display: flex;
      align-items: center;
      justify-content: center;
-      margin-right: 12rpx;
      flex-shrink: 0;
    }
    
-    .card-info {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 4rpx;
-      
    .card-name {
-        color: #ffffff;
      font-size: 28rpx;
      font-weight: 600;
-        line-height: 1.2;
-        white-space: nowrap;
+      color: #ffffff;
+      line-height: 1.3;
+      flex: 1;
+      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
+      white-space: nowrap;
    }
    
    .card-code {
-        color: rgba(255, 255, 255, 0.85);
-        font-size: 22rpx;
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.75);
      font-weight: 400;
-        line-height: 1;
-      }
-    }
-    
-    .balance-section {
-      display: flex;
-      align-items: center;
+      line-height: 1.3;
+      letter-spacing: 0.5rpx;
+      font-family: 'Courier New', monospace;
      flex-shrink: 0;
-      white-space: nowrap;
+    }
    
-      .balance-value {
-        color: #fa8c16;
-        font-size: 32rpx;
-        font-weight: 700;
-        line-height: 1;
-        white-space: nowrap;
+    .balance-amount {
+      display: flex;
+      align-items: baseline;
+      gap: 6rpx;
+      flex-shrink: 0;
+    }

    .balance-label {
-          color: rgba(255, 255, 255, 0.85);
      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.75);
      font-weight: 400;
-          margin-right: 8rpx;
    }
+
+    .balance-value {
+      font-size: 32rpx;
+      font-weight: 700;
+      color: #fa8c16;
+      line-height: 1.2;
+    }
+    
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+    }
+    
+    .account-type {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.85);
+      font-weight: 500;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
+    
+    .account-status {
+      font-size: 24rpx;
+      font-weight: 500;
+      line-height: 1.3;
+      flex: 1;
+      text-align: center;
+      
+      &.status-normal {
+        color: #52c41a;
+      }
+      
+      &.status-error {
+        color: #ff4d4f;
+      }
+      
+      &.status-default {
+        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
--- a/src/pages/work/base/financials/list.vue
+++ b/src/pages/work/base/financials/list.vue
@@ -21,7 +21,7 @@
                <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
              </view>
              <view class="card-info">
-                <text class="card-name">{{ item.name }}</text>
+                <text class="card-name">{{ item.name }}({{ item.code }})</text>
              </view>
            </view>
            <view class="balance-section">
Author	SHA1	Message	Date
tianyongbao	570e975e55	fix: 功能样式优化完善。	2026-02-15 17:32:20 +08:00
tianyongbao	9b072ac892	fix: pos刷卡推荐，样式修改。	2026-02-15 17:16:20 +08:00