Merge branch 'admin_dev' of http://112.213.107.185:3000/cwg-crm/gypsy-crm-frontend-vu into admin_dev

components/AddBankDialog.vue

@@ -11,7 +11,7 @@
         validate-trigger="submit" class="crm-form">
         <uni-row class="form-row uni-row1">
           <template v-if="form.type === 1">
-            <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+            <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
               <uni-forms-item>
                 <cwg-file-picker-wrapper v-model:value="form.bankFront" :limit="1" uploadUrl="/custom/bank/upload"
                   :baseUrl="updateUrl" :imageWidth="200" :imageHeight="200" uploadText="点击上传" replaceText="点击替换"
@@ -468,6 +468,13 @@ defineExpose({
   padding: px2rpx(24);
   overflow: hidden;
   border-radius: px2rpx(12);
+  display: flex;
+  flex-direction: column;
+  .uni-row1{
+    flex: 1;
+    height: 100%;
+    overflow-y: scroll;
+  }
 
   .dialog-header {
     display: flex;

components/cwg-file-picker-wrapper.vue

@@ -4,26 +4,26 @@
     <view v-if="readonly" class="file-list readonly-list">
       <view v-for="(file, index) in innerFileList" :key="index" class="file-item readonly-item"
         @click="previewFile(file, index)">
-        <image v-if="isImage(file)" :src="file.url || file.path" mode="aspectFill" class="file-thumb" />
+        <image v-if="isImage(file)" :src="file.url || file.path" mode="aspectFill" class="file-thumb" :style="imgStyle" />
         <view v-else class="file-icon" :class="getFileClass(file.name)">
           <text class="file-icon-text">{{ getFileIcon(file.name) }}</text>
         </view>
         <text class="file-name">{{ file.name }}</text>
       </view>
-      <view v-if="!innerFileList.length" class="empty-text">暂无文件</view>
+      <view v-if="!innerFileList?.length" class="empty-text">暂无文件</view>
     </view>
 
     <!-- 正常模式：宫格上传（完全对齐官方 upload-image 样式） -->
     <view v-else class="uni-file-picker__container">
-      <view class="file-picker__box" v-for="(item, index) in innerFileList" :key="index" :style="boxStyle">
+      <view class="file-picker__box" v-for="(item, index) in innerFileList" :key="index" :style="typeof boxStyle === 'object' ? boxStyle : { cssText: boxStyle }">
         <view class="file-picker__box-content" :style="borderStyle">
           <!-- 图片 -->
-          <image v-if="isImage(item)" class="file-image" :src="item.url || item.path" mode="aspectFill"
+          <image v-if="isImage(item)" class="file-image" :src="item.url || item.path" mode="aspectFill" :style="imgStyle"
             @click.stop="previewFile(item, index)" />
 
           <!-- 视频 → 显示第一帧 + 播放图标 -->
           <view v-else-if="isVideo(item)" class="file-cover video-box" @click.stop="previewFile(item, index)">
-            <image :src="item.url || item.path" class="file-image" mode="aspectFill" />
+            <image :src="item.url || item.path" class="file-image" mode="aspectFill" :style="imgStyle" />
             <view class="video-play-icon">▶</view>
           </view>
 
@@ -54,7 +54,7 @@
       </view>
 
       <!-- 添加按钮 -->
-      <view v-if="innerFileList.length < limit" class="file-picker__box" :style="boxStyle">
+      <view v-if="innerFileList?.length < limit" class="file-picker__box" :style="typeof boxStyle === 'object' ? boxStyle : { cssText: boxStyle }">
         <view class="file-picker__box-content is-add" :style="borderStyle" @click="handleChoose">
           <cwg-icon name="icon_add" class="upload-icon" :size="24" />
         </view>
@@ -64,7 +64,7 @@
 </template>
 
 <script setup>
-import { ref, watch, nextTick } from 'vue'
+import { ref, watch, nextTick,computed } from 'vue'
 import config from '@/config'
 import { userToken } from '@/composables/config'
 
@@ -106,6 +106,14 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  imageWidth: {
+    type: String,
+    default: ''
+  },
+  imageHeight: {
+    type: String,
+    default: ''
+  },
   uploadUrl: {
     type: String,
     default: '/custom/bank/upload'
@@ -154,9 +162,17 @@ const innerFileList = ref([])
 const tempFileQueue = ref([])
 const originalType = ref('array') // 'string' | 'object' | 'array'
 
-const boxStyle = 'width:33.3%;height:0;padding-top:33.3%;'
 const borderStyle = 'border:1px #eee solid;border-radius:5px;'
 
+const boxStyle = computed(() => {
+  if (props.imageWidth || props.imageHeight) {
+    const width = typeof props.imageWidth === 'number' ? `${props.imageWidth}px` : props.imageWidth || 'auto'
+    const height = typeof props.imageHeight === 'number' ? `${props.imageHeight}px` : props.imageHeight || 'auto'
+    return { width, height }
+  }
+  return 'width:33.3%;height:0;'
+})
+
 // ==============================================
 // 统一格式化函数（修复递归核心）
 // ==============================================
@@ -413,6 +429,18 @@ const reUploadFile = (index) => {
   const file = innerFileList.value[index]
   uploadFile(file)
 }
+
+const imgStyle = computed(() => {
+  let style = {}
+  if (props.imageWidth) {
+    style.width = typeof props.imageWidth === 'number' ? `${props.imageWidth}px` : `${props.imageWidth}`
+  }
+  if (props.imageHeight) {
+    style.height = typeof props.imageHeight === 'number' ? `${props.imageHeight}px` : `${props.imageHeight}`
+  }
+  console.log(style)
+  return style
+})
 </script>
 
 <style scoped>
@@ -428,7 +456,7 @@ const reUploadFile = (index) => {
   position: relative;
   width: 33.3%;
   height: 0;
-  padding-top: 33.3%;
+  //padding-top: 33.3%;
   box-sizing: border-box;
 }
 
@@ -438,7 +466,7 @@ const reUploadFile = (index) => {
   right: 0;
   bottom: 0;
   left: 0;
-  margin: 5px;
+  //margin: 5px;
   border-radius: 5px;
   overflow: hidden;
   background: #f7f7f7;

pages/mine/components/BankInfoTab.vue

@@ -1,385 +1,402 @@
 <template>
-    <view class="user-form crm-form">
-        <uni-row class="demo-uni-row uni-row1">
-            <uni-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
-                <view class="bank-menu">
-                    <view v-for="item in bankTypes" :key="item.key" class="bank-menu-item"
-                        :class="{ active: selectedBankType === item.key }" @click="selectedBankType = item.key">
-                        <image class="bank-icon" :src="item.icon" mode="widthFix" />
-                        <text>{{ item.label }}</text>
-                    </view>
+  <view class="user-form crm-form">
+    <uni-row class="demo-uni-row uni-row1">
+      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <view class="card">
+          <view class="bank-menu card-header">
+            <view v-for="item in bankTypes" :key="item.key" class="bank-menu-item"
+                  :class="{ active: selectedBankType === item.key }" @click="selectedBankType = item.key">
+              <!--                        <image class="bank-icon" :src="item.icon" mode="widthFix" />-->
+              <text>{{ item.label }}</text>
+            </view>
+          </view>
+          <view class="card-body">
+            <view class="bank-content" v-if="selectedBankType === 'crypto'">
+              <view class="d-flex flex-wrap align-items-center header-title mb-3 card-header">
+                <view class="h4">
+                  {{ t('blockchain.item2') }}
                 </view>
-            </uni-col>
-            <uni-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
-                <view class="bank-content" v-if="selectedBankType === 'crypto'">
-                    <view class="bank-info" v-for="(item, index) in cryptoWallets" :key="item.id">
-                        <view class="card-header">
-                            <view class="bank-header">
-                                <uni-row style="width: 100%;">
-                                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
-                                        <view class="bank-title">
-                                            <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
-                                            <text>{{ currentBankType?.label }} {{ index + 1 }} </text>
-                                            <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
-                                        </view>
-                                    </uni-col>
-                                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
-                                        <view class="actions">
-                                            <view class="bank-actions">
-                                                <view class="action-btn bg-secondary" v-if="item.authStatus == 0"
-                                                    type="primary" v-t="'State.ToCertified'"
-                                                    @click="doReady(item.id, item)" />
-                                                <view class="action-btn bg-secondary" v-if="item.authStatus == 0"
-                                                    type="primary" @click="openCardDialog(item.id, item)"
-                                                    v-t="'PersonalManagement.CardVerify.Title'" />
-
-                                            </view>
-                                            <view class="bank-actions">
-                                                <view class="action-btn bg-secondary"
-                                                    v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
-                                                    v-t="'Btn.Editor'" />
-                                                <template v-if="editingId === item.id">
-                                                    <view class="action-btn bg-secondary" @tap="saveBank(item)"
-                                                        v-t="'Btn.Save'" />
-                                                    <view class="action-btn bg-secondary" @tap="cancelEdit()"
-                                                        v-t="'Btn.Cancel'" />
-                                                </template>
-                                                <view class="action-btn delete" @tap="confirmDelete(item)"
-                                                    v-t="'Btn.Delete'" />
-                                            </view>
-                                        </view>
-
-                                    </uni-col>
-                                </uni-row>
-                            </view>
-                        </view>
-                        <uni-forms :model="item" labelWidth="200" label-position="top">
-                            <uni-row class="demo-uni-row">
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('blockchain.item3')">
-                                        <uni-easyinput :clearable="false" v-model="item.addressName"
-                                            :disabled="editingId !== item.id"
-                                            :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('blockchain.item4')">
-                                        <uni-easyinput :clearable="false" v-model="item.address"
-                                            :disabled="editingId !== item.id"
-                                            :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
-                                    v-if="item.cardFiles && item.cardFiles.length">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.CertificationPhoto')">
-                                        <view class="photo-upload">
-                                            <view v-for="(file, idx) in item.cardFiles" :key="idx" class="photo-item">
-                                                <image class="photo-preview" :src="updateUrl + file.path"
-                                                    mode="aspectFill" />
-                                            </view>
-                                        </view>
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24">
-                                    <uni-forms-item class="checkbox-item">
-                                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
-                                            multiple :localdata="hobbys" />
-                                    </uni-forms-item>
-                                </uni-col>
-                            </uni-row>
-                        </uni-forms>
-                    </view>
-                    <view class="add-wallet-btn" @click="addBank()" v-if="cryptoWallets.length < 2">
-                        <text>+</text>
-                        <text>添加加密货币钱包</text>
-                    </view>
+                <view class="add-wallet-btn" @click="addBank()" v-if="cryptoWallets.length < 2">
+                  <text>+</text>
+                  <text>{{ `${t('Btn.New')}${t('blockchain.item2')}` }}</text>
                 </view>
-                <view class="bank-content" v-if="selectedBankType === 'unionpay'">
-                    <view class="bank-info" v-for="(item, index) in unionpayCards" :key="item.id">
-                        <view class="card-header">
-                            <view class="bank-header">
-                                <uni-row style="width: 100%;">
-                                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
-                                        <view class="bank-title">
-                                            <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
-                                            <text>{{ currentBankType?.label }}{{ index + 1 }} </text>
-                                            <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
-                                        </view>
-                                    </uni-col>
-                                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
-                                        <view class="bank-actions">
-                                            <view class="action-btn bg-secondary"
-                                                v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
-                                                v-t="'Btn.Editor'" />
-                                            <template v-if="editingId === item.id">
-                                                <view class="action-btn bg-secondary" @tap="saveBank(item)"
-                                                    v-t="'Btn.Save'" />
-                                                <view class="action-btn bg-secondary" @tap="cancelEdit()"
-                                                    v-t="'Btn.Cancel'" />
-                                            </template>
-                                            <view class="action-btn delete" @tap="confirmDelete(item)"
-                                                v-t="'Btn.Delete'" />
-                                        </view>
-                                    </uni-col>
-                                </uni-row>
-                            </view>
+              </view>
+
+              <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in cryptoWallets" :key="item.id">
+                <view class="bank-header card-header">
+                  <uni-row style="width: 100%;">
+                    <uni-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+                      <view class="bank-title">
+                        <text>{{ currentBankType?.label }} {{ index + 1 }}</text>
+                      </view>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+                      <view class="actions">
+                        <view class="bank-actions">
+                          <view class="action-btn bg-secondary btn-dark" v-if="item.authStatus == 0"
+                                type="primary" v-t="'State.ToCertified'"
+                                @click="doReady(item.id, item)" />
+                          <view class="action-btn bg-secondary btn-dark" v-if="item.authStatus == 0"
+                                type="primary" @click="openCardDialog(item.id, item)"
+                                v-t="'PersonalManagement.CardVerify.Title'" />
+                          <view class="action-btn bg-secondary btn-dark"
+                                v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
+                                v-t="'Btn.Editor'" />
+                          <template v-if="editingId === item.id">
+                            <view class="action-btn bg-secondary btn-dark" @tap="saveBank(item)"
+                                  v-t="'Btn.Save'" />
+                            <view class="action-btn bg-secondary btn-dark" @tap="cancelEdit()"
+                                  v-t="'Btn.Cancel'" />
+                          </template>
+                          <view class="action-btn bg-secondary btn-dark" @tap="confirmDelete(item)"
+                                v-t="'Btn.Delete'" />
                         </view>
-                        <uni-forms :model="item" labelWidth="200" label-position="top">
-                            <uni-row class="demo-uni-row">
-                                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-                                    <uni-forms-item>
-                                        <cwg-file-picker-wrapper v-model="item.bankFront"
-                                            :editable="editingId === item.id" :limit="1" uploadUrl="/custom/bank/upload"
-                                            :baseUrl="updateUrl" :imageWidth="150" :imageHeight="150" uploadText="点击上传"
-                                            replaceText="点击替换" noImageText="暂无图片"
-                                            :showPreviewDelete="editingId === item.id"
-                                            @update:modelValue="(val) => handleFileUpdate(val, item, 'bankFront')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
-                                        <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
-                                            :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.BankName')">
-                                        <cwg-combox :clearable="false" :filterable="true" v-model:value="item.bankName"
-                                            :options="bankOptions" :placeholder="t('placeholder.choose')"
-                                            :disabled="editingId !== item.id" @change="onStateChange" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')">
-                                        <uni-easyinput :clearable="false" v-model="item.bankCardNum"
-                                            :disabled="editingId !== item.id"
-                                            :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.AccountOpeningBranch')">
-                                        <uni-easyinput :clearable="false" v-model="item.bankBranchName"
-                                            :disabled="editingId !== item.id"
-                                            :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24">
-                                    <uni-forms-item class="checkbox-item">
-                                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
-                                            multiple :localdata="hobbys" />
-                                    </uni-forms-item>
-                                </uni-col>
-
-                            </uni-row>
-                        </uni-forms>
-                    </view>
-                    <view class="add-wallet-btn" @click="addBank()" v-if="unionpayCards.length < 2">
-                        <text>+</text>
-                        <text>添加中国银联卡</text>
-                    </view>
+                      </view>
+
+                    </uni-col>
+                  </uni-row>
                 </view>
-                <view class="bank-content" v-if="selectedBankType === 'bank'">
-                    <view class="bank-info" v-for="(item, index) in wireTransfers" :key="item.id">
-                        <view class="card-header">
-                            <view class="bank-header">
-                                <uni-row style="width: 100%;">
-                                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
-                                        <view class="bank-title">
-                                            <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
-                                            <text>{{ currentBankType?.label }} {{ index + 1 }} </text>
-                                            <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
-                                        </view>
-                                    </uni-col>
-                                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
-                                        <view class="bank-actions">
-                                            <view class="action-btn bg-secondary"
-                                                v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
-                                                v-t="'Btn.Editor'" />
-                                            <template v-if="editingId === item.id">
-                                                <view class="action-btn bg-secondary" @tap="saveBank(item)"
-                                                    v-t="'Btn.Save'" />
-                                                <view class="action-btn bg-secondary" @tap="cancelEdit()"
-                                                    v-t="'Btn.Cancel'" />
-                                            </template>
-                                            <view class="action-btn delete" @tap="confirmDelete(item)"
-                                                v-t="'Btn.Delete'" />
-                                        </view>
-                                    </uni-col>
-                                </uni-row>
-                            </view>
+                <uni-forms :model="item" labelWidth="200" label-position="top">
+                  <uni-row class="card-body custom-row" :gutter="20">
+                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+                      <uni-forms-item :label="t('blockchain.item3')">
+                        <uni-easyinput :clearable="false" v-model="item.addressName"
+                                       :disabled="editingId !== item.id"
+                                       :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+                      <uni-forms-item :label="t('blockchain.item4')">
+                        <uni-easyinput :clearable="false" v-model="item.address"
+                                       :disabled="editingId !== item.id"
+                                       :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
+                             v-if="item.cardFiles && item.cardFiles.length">
+                      <uni-forms-item :label="t('PersonalManagement.Label.CertificationPhoto')">
+                        <view class="photo-upload">
+                          <view v-for="(file, idx) in item.cardFiles" :key="idx" class="photo-item">
+                            <image class="photo-preview" :src="updateUrl + file.path"
+                                   mode="aspectFill" />
+                          </view>
                         </view>
-                        <uni-forms :model="item" labelWidth="200" label-position="top">
-                            <uni-row class="demo-uni-row">
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
-                                        <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
-                                            :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')">
-                                        <uni-easyinput :clearable="false" v-model="item.bankCardNum"
-                                            :disabled="editingId !== item.id"
-                                            :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.BankName')">
-                                        <uni-easyinput :clearable="false" v-model="item.bankName"
-                                            :disabled="editingId !== item.id"
-                                            :placeholder="locale == 'es' ? 'Introduzca el nombre del banco' : t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.BankAddress')">
-                                        <uni-easyinput :clearable="false" v-model="item.bankAddr"
-                                            :placeholder="locale == 'es' ? 'Introduzca la dirección del banco' : t('placeholder.input')"
-                                            :disabled="editingId !== item.id" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.SwiftBIC')">
-                                        <uni-easyinput :clearable="false" v-model="item.swiftCode"
-                                            :placeholder="locale == 'es' ? 'Introduzca el SWIFT/BIC' : t('placeholder.input')"
-                                            :disabled="editingId !== item.id" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.BankCode')">
-                                        <uni-easyinput :clearable="false" v-model="item.bankCode"
-                                            :placeholder="locale == 'es' ? 'Introduzca el código del banco' : t('placeholder.input')"
-                                            :disabled="editingId !== item.id" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item
-                                        :label="locale == 'es' ? 'Número de sucursal (opcional)' : 'Account Agency NO'">
-                                        <uni-easyinput :clearable="false" v-model="item.agencyNo"
-                                            :placeholder="locale == 'es' ? 'Introduzca el número de sucursal' : t('placeholder.input')"
-                                            :disabled="editingId !== item.id" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24">
-                                    <uni-forms-item class="checkbox-item">
-                                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
-                                            multiple :localdata="hobbys" />
-                                    </uni-forms-item>
-                                </uni-col>
-                            </uni-row>
-                        </uni-forms>
-                    </view>
-                    <view class="add-wallet-btn" @click="addBank()" v-if="wireTransfers.length < 2">
-                        <text>+</text>
-                        <text>添加银行电汇</text>
-                    </view>
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24">
+                      <uni-forms-item class="checkbox-item">
+                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1" multiple
+                                           :localdata="hobbys" />
+                      </uni-forms-item>
+                    </uni-col>
+                  </uni-row>
+                </uni-forms>
+
+              </view>
+            </view>
+            <view class="bank-content" v-if="selectedBankType === 'unionpay'">
+              <view class="d-flex flex-wrap align-items-center header-title card-header mb-3">
+                <view class="h4">
+                  {{ t('PersonalManagement.Title.ChinaUnionPayCard') }}
                 </view>
-                <view class="bank-content" v-if="selectedBankType === 'credit'">
-                    <view class="bank-info" v-for="(item, index) in creditCards" :key="item.id">
-                        <view class="card-header">
-                            <view class="bank-header">
-                                <uni-row style="width: 100%;">
-                                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
-                                        <view class="bank-title">
-                                            <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
-                                            <text>{{ currentBankType?.label }} {{ index + 1 }} </text>
-                                            <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
-                                        </view>
-                                    </uni-col>
-                                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
-                                        <view class="bank-actions">
-                                            <view class="action-btn bg-secondary"
-                                                v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
-                                                v-t="'Btn.Editor'" />
-                                            <template v-if="editingId === item.id">
-                                                <view class="action-btn bg-secondary" @tap="saveBank(item)"
-                                                    v-t="'Btn.Save'" />
-                                                <view class="action-btn bg-secondary" @tap="cancelEdit()"
-                                                    v-t="'Btn.Cancel'" />
-                                            </template>
-                                            <view class="action-btn delete" @tap="confirmDelete(item)"
-                                                v-t="'Btn.Delete'" />
-                                        </view>
-                                    </uni-col>
-                                </uni-row>
-                            </view>
-                        </view>
-                        <uni-forms :model="item" labelWidth="200" label-position="top">
-                            <uni-row class="demo-uni-row">
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccountName')">
-                                        <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
-                                            :placeholder="t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccount')">
-                                        <uni-easyinput :clearable="false" v-model="item.bankCardNum"
-                                            :disabled="editingId !== item.id"
-                                            :placeholder="locale == 'es' ? 'Introduzca el número de tarjeta' : t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('PersonalManagement.Label.ExpirationYear')">
-                                        <uni-easyinput :clearable="false" v-model="item.expiryYearMonth"
-                                            :disabled="editingId !== item.id"
-                                            :placeholder="locale == 'es' ? 'Introduzca MM/AA' : t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-                                    <uni-forms-item :label="t('CVV')">
-                                        <uni-easyinput :clearable="false" v-model="item.cvv"
-                                            :disabled="editingId !== item.id"
-                                            :placeholder="locale == 'es' ? 'Introduzca el CVV' : t('placeholder.input')" />
-                                    </uni-forms-item>
-                                </uni-col>
-                                <uni-col :xs="24">
-                                    <uni-forms-item class="checkbox-item">
-                                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
-                                            multiple :localdata="hobbys" />
-                                    </uni-forms-item>
-                                </uni-col>
-
-                            </uni-row>
-                        </uni-forms>
-                    </view>
-                    <view class="add-wallet-btn" @click="addBank()">
-                        <text>+</text>
-                        <text>添加信用卡</text>
-                    </view>
+                <view class="add-wallet-btn" @click="addBank()" v-if="unionpayCards.length < 2">
+                  <text>+</text>
+                  <text>{{ `${t('Btn.New')}${t('PersonalManagement.Title.ChinaUnionPayCard')}` }}</text>
+                </view>
+              </view>
+              <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in unionpayCards" :key="item.id">
+                <view class="bank-header card-header">
+                  <uni-row style="width: 100%;">
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <view class="bank-title">
+                        <text>{{ currentBankType?.label }}{{ index + 1 }}</text>
+                      </view>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+                      <view class="bank-actions">
+                        <view class="action-btn bg-secondary btn-dark"
+                              v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
+                              v-t="'Btn.Editor'" />
+                        <template v-if="editingId === item.id">
+                          <view class="action-btn bg-secondary btn-dark" @tap="saveBank(item)"
+                                v-t="'Btn.Save'" />
+                          <view class="action-btn bg-secondary btn-dark" @tap="cancelEdit()"
+                                v-t="'Btn.Cancel'" />
+                        </template>
+                        <view class="action-btn delete btn-dark" @tap="confirmDelete(item)"
+                              v-t="'Btn.Delete'" />
+                      </view>
+                    </uni-col>
+                  </uni-row>
+                </view>
+                <uni-forms :model="item" labelWidth="200" label-position="top">
+                  <uni-row class="demo-uni-row" :gutter="20">
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
+                        <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
+                                       :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.BankName')">
+                        <cwg-combox :clearable="false" :filterable="true" v-model:value="item.bankName"
+                                    :options="bankOptions" :placeholder="t('placeholder.choose')"
+                                    :disabled="editingId !== item.id" @change="onStateChange" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')">
+                        <uni-easyinput :clearable="false" v-model="item.bankCardNum"
+                                       :disabled="editingId !== item.id"
+                                       :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.AccountOpeningBranch')">
+                        <uni-easyinput :clearable="false" v-model="item.bankBranchName"
+                                       :disabled="editingId !== item.id"
+                                       :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+                      <uni-forms-item :label="t('PersonalManagement.Label.CertificationPhoto')">
+                        <cwg-file-picker-wrapper
+                          v-model="item.bankFront"
+                          :delIcon="editingId === item.id"
+                          :limit="1"
+                          uploadUrl="/custom/bank/upload"
+                          :baseUrl="updateUrl"
+                          :imageWidth="120"
+                          :imageHeight="120"
+                          uploadText="点击上传"
+                          replaceText="点击替换" noImageText="暂无图片"
+                          :showPreviewDelete="editingId === item.id"
+                          @update:modelValue="(val) => handleFileUpdate(val, item, 'bankFront')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24">
+                      <uni-forms-item class="checkbox-item">
+                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
+                                           multiple :localdata="hobbys" />
+                      </uni-forms-item>
+                    </uni-col>
+
+                  </uni-row>
+                </uni-forms>
+              </view>
+
+            </view>
+            <view class="bank-content" v-if="selectedBankType === 'bank'">
+              <view class="d-flex flex-wrap align-items-center card-header header-title mb-3">
+                <view class="h4">
+                  {{ t('PersonalManagement.Title.BankWireTransfer') }}
+                </view>
+                <view class="add-wallet-btn" @click="addBank()" v-if="wireTransfers.length < 2">
+                  <text>+</text>
+                  <text>{{ `${t('Btn.New')}${t('PersonalManagement.Title.BankWireTransfer')}` }}</text>
+                </view>
+              </view>
+              <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in wireTransfers" :key="item.id">
+                <view class="bank-header card-header ">
+                  <uni-row style="width: 100%;">
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <view class="bank-title">
+                        <text>{{ currentBankType?.label }} {{ index + 1 }}</text>
+                      </view>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+                      <view class="bank-actions">
+                        <view class="action-btn bg-secondary btn-dark"
+                              v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
+                              v-t="'Btn.Editor'" />
+                        <template v-if="editingId === item.id">
+                          <view class="action-btn bg-secondary btn-dark" @tap="saveBank(item)"
+                                v-t="'Btn.Save'" />
+                          <view class="action-btn bg-secondary btn-dark" @tap="cancelEdit()"
+                                v-t="'Btn.Cancel'" />
+                        </template>
+                        <view class="action-btn delete btn-dark" @tap="confirmDelete(item)"
+                              v-t="'Btn.Delete'" />
+                      </view>
+                    </uni-col>
+                  </uni-row>
+                </view>
+                <uni-forms :model="item" labelWidth="200" label-position="top">
+                  <uni-row class="demo-uni-row">
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
+                        <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
+                                       :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')">
+                        <uni-easyinput :clearable="false" v-model="item.bankCardNum"
+                                       :disabled="editingId !== item.id"
+                                       :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.BankName')">
+                        <uni-easyinput :clearable="false" v-model="item.bankName"
+                                       :disabled="editingId !== item.id"
+                                       :placeholder="locale == 'es' ? 'Introduzca el nombre del banco' : t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.BankAddress')">
+                        <uni-easyinput :clearable="false" v-model="item.bankAddr"
+                                       :placeholder="locale == 'es' ? 'Introduzca la dirección del banco' : t('placeholder.input')"
+                                       :disabled="editingId !== item.id" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.SwiftBIC')">
+                        <uni-easyinput :clearable="false" v-model="item.swiftCode"
+                                       :placeholder="locale == 'es' ? 'Introduzca el SWIFT/BIC' : t('placeholder.input')"
+                                       :disabled="editingId !== item.id" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.BankCode')">
+                        <uni-easyinput :clearable="false" v-model="item.bankCode"
+                                       :placeholder="locale == 'es' ? 'Introduzca el código del banco' : t('placeholder.input')"
+                                       :disabled="editingId !== item.id" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item
+                        :label="locale == 'es' ? 'Número de sucursal (opcional)' : 'Account Agency NO'">
+                        <uni-easyinput :clearable="false" v-model="item.agencyNo"
+                                       :placeholder="locale == 'es' ? 'Introduzca el número de sucursal' : t('placeholder.input')"
+                                       :disabled="editingId !== item.id" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24">
+                      <uni-forms-item class="checkbox-item">
+                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
+                                           multiple :localdata="hobbys" />
+                      </uni-forms-item>
+                    </uni-col>
+                  </uni-row>
+                </uni-forms>
+              </view>
+
+            </view>
+            <view class="bank-content" v-if="selectedBankType === 'credit'">
+              <view class="d-flex flex-wrap align-items-center header-title card-header mb-3">
+                <view class="h4">
+                  {{ t('PersonalManagement.Label.CreditCard') }}
                 </view>
-            </uni-col>
-        </uni-row>
-    </view>
-    <!-- 删除确认弹窗 -->
-    <uni-popup ref="deletePopup" type="dialog">
-        <uni-popup-dialog :title="t('Msg.SystemPrompt')" :content="t('Msg.Delete')" @confirm="deleteBank"
-            @close="closeDeletePopup" />
-    </uni-popup>
-    <!-- 新增银行弹窗 -->
-    <add-bank-dialog ref="addBankDialogRef" @success="addSuccess" />
-    <!-- kyc认证弹窗 -->
-    <kyc-auth-dialog ref="kycDialogRef" />
-    <!-- 证件认证弹窗 -->
-    <card-auth-dialog ref="cardDialogRef" />
+                <view class="add-wallet-btn" @click="addBank()" v-if="creditCards.length < 2">
+                  <text>+</text>
+                  <text>{{ `${t('Btn.New')}${t('PersonalManagement.Label.CreditCard')}` }}</text>
+                </view>
+              </view>
+              <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in creditCards" :key="item.id">
+                <view class="bank-header card-header">
+                    <uni-row style="width: 100%;">
+                      <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                        <view class="bank-title">
+                          <text>{{ currentBankType?.label }} {{ index + 1 }}</text>
+                        </view>
+                      </uni-col>
+                      <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+                        <view class="bank-actions">
+                          <view class="action-btn bg-secondary btn-dark"
+                                v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
+                                v-t="'Btn.Editor'" />
+                          <template v-if="editingId === item.id">
+                            <view class="action-btn bg-secondary btn-dark" @tap="saveBank(item)"
+                                  v-t="'Btn.Save'" />
+                            <view class="action-btn bg-secondary btn-dark" @tap="cancelEdit()"
+                                  v-t="'Btn.Cancel'" />
+                          </template>
+                          <view class="action-btn delete btn-dark" @tap="confirmDelete(item)"
+                                v-t="'Btn.Delete'" />
+                        </view>
+                      </uni-col>
+                    </uni-row>
+                  </view>
+                <uni-forms :model="item" labelWidth="200" label-position="top">
+                  <uni-row class="demo-uni-row" :gutter="20">
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccountName')">
+                        <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
+                                       :placeholder="t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccount')">
+                        <uni-easyinput :clearable="false" v-model="item.bankCardNum"
+                                       :disabled="editingId !== item.id"
+                                       :placeholder="locale == 'es' ? 'Introduzca el número de tarjeta' : t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('PersonalManagement.Label.ExpirationYear')">
+                        <uni-easyinput :clearable="false" v-model="item.expiryYearMonth"
+                                       :disabled="editingId !== item.id"
+                                       :placeholder="locale == 'es' ? 'Introduzca MM/AA' : t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                      <uni-forms-item :label="t('CVV')">
+                        <uni-easyinput :clearable="false" v-model="item.cvv"
+                                       :disabled="editingId !== item.id"
+                                       :placeholder="locale == 'es' ? 'Introduzca el CVV' : t('placeholder.input')" />
+                      </uni-forms-item>
+                    </uni-col>
+                    <uni-col :xs="24">
+                      <uni-forms-item class="checkbox-item">
+                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
+                                           multiple :localdata="hobbys" />
+                      </uni-forms-item>
+                    </uni-col>
+
+                  </uni-row>
+                </uni-forms>
+              </view>
+
+            </view>
+          </view>
+
+        </view>
+      </uni-col>
+    </uni-row>
+  </view>
+  <!-- 删除确认弹窗 -->
+  <uni-popup ref="deletePopup" type="dialog">
+    <uni-popup-dialog :title="t('Msg.SystemPrompt')" :content="t('Msg.Delete')" @confirm="deleteBank"
+                      @close="closeDeletePopup" />
+  </uni-popup>
+  <!-- 新增银行弹窗 -->
+  <add-bank-dialog ref="addBankDialogRef" @success="addSuccess" />
+  <!-- kyc认证弹窗 -->
+  <kyc-auth-dialog ref="kycDialogRef" />
+  <!-- 证件认证弹窗 -->
+  <card-auth-dialog ref="cardDialogRef" />
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { personalApi } from '@/service/personal';
-import KycAuthDialog from './KycAuthDialog.vue';
-import CardAuthDialog from './CardAuthDialog.vue';
-import AddBankDialog from '@/components/AddBankDialog.vue';
-import config from '@/config'
-import { BankType } from './bank'
-const { t, locale } = useI18n();
-interface BankListType {
+  import { computed, ref, onMounted } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { personalApi } from '@/service/personal'
+  import KycAuthDialog from './KycAuthDialog.vue'
+  import CardAuthDialog from './CardAuthDialog.vue'
+  import AddBankDialog from '@/components/AddBankDialog.vue'
+  import config from '@/config'
+  import { BankType } from './bank'
+
+  const { t, locale } = useI18n()
+
+  interface BankListType {
     key: string;
     label: string;
     icon: string;
-}
+  }
 
-interface BankInfo {
+  interface BankInfo {
     id?: string;
     type: number;
     defaultBank: boolean;
@@ -391,677 +408,712 @@ interface BankInfo {
     expiryYearMonth?: string;
     expiryYear?: string;
     expiryMonth?: string;
+
     [key: string]: any;
-}
-const selectedBankType = ref<string>('crypto');
-const bankTypes = computed<BankListType[]>(() => [
+  }
+
+  const selectedBankType = ref<string>('crypto')
+  const bankTypes = computed<BankListType[]>(() => [
     { key: 'crypto', label: t('blockchain.item2'), icon: '/static/images/info/bank-info_1.png' },
-    { key: 'unionpay', label: t('PersonalManagement.Title.ChinaUnionPayCard'), icon: '/static/images/info/bank-info_2.png' },
+    {
+      key: 'unionpay',
+      label: t('PersonalManagement.Title.ChinaUnionPayCard'),
+      icon: '/static/images/info/bank-info_2.png',
+    },
     { key: 'bank', label: t('PersonalManagement.Title.BankWireTransfer'), icon: '/static/images/info/bank-info_3.png' },
-    { key: 'credit', label: t('PersonalManagement.Label.CreditCard'), icon: '/static/images/info/bank-info_4.png' }
-]);
-const currentBankType = computed(() => bankTypes.value.find((item: BankListType) => item.key === selectedBankType.value));
-const hobbys = computed(() => {
+    { key: 'credit', label: t('PersonalManagement.Label.CreditCard'), icon: '/static/images/info/bank-info_4.png' },
+  ])
+  const currentBankType = computed(() => bankTypes.value.find((item: BankListType) => item.key === selectedBankType.value))
+  const hobbys = computed(() => {
     switch (selectedBankType.value) {
-        case 'crypto':
-            return [{ value: 1, text: t('blockchain.item8') }]
-        case 'unionpay':
-            return [{ value: 1, text: t('PersonalManagement.Title.DefaultBank') }]
-        case 'bank':
-            return [{ value: 1, text: t('PersonalManagement.Title.DefaultWire') }]
-        case 'credit':
-            return [{ value: 1, text: t('PersonalManagement.Title.DefaultCredit') }]
+      case 'crypto':
+        return [{ value: 1, text: t('blockchain.item8') }]
+      case 'unionpay':
+        return [{ value: 1, text: t('PersonalManagement.Title.DefaultBank') }]
+      case 'bank':
+        return [{ value: 1, text: t('PersonalManagement.Title.DefaultWire') }]
+      case 'credit':
+        return [{ value: 1, text: t('PersonalManagement.Title.DefaultCredit') }]
     }
-});
-// 状态
-const updateUrl = config.Host80
-const editingId = ref(null)
-const bankList = ref([])
-const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value));
-
-const getLangName = (item: any) => (isZh.value ? item.name : item.enName);
-const createOptions = (list: any[], valueKey = 'code') => {
+  })
+  // 状态
+  const updateUrl = config.Host80
+  const editingId = ref(null)
+  const bankList = ref([])
+  const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value))
+
+  const getLangName = (item: any) => (isZh.value ? item.name : item.enName)
+  const createOptions = (list: any[], valueKey = 'code') => {
     return list.map((item) => ({
-        text: getLangName(item),
-        value: getLangName(item)
-    }));
-};
-
-const bankOptions = computed(() => createOptions(bankList.value, 'name'));
-// 银行数据
-const bankData = ref({
+      text: getLangName(item),
+      value: getLangName(item),
+    }))
+  }
+
+  const bankOptions = computed(() => createOptions(bankList.value, 'name'))
+  // 银行数据
+  const bankData = ref({
     [BankType.CRYPTO]: [],
     [BankType.UNIONPAY]: [],
     [BankType.WIRE_TRANSFER]: [],
-    [BankType.CREDIT_CARD]: []
-})
-
-// 计算属性 - 各类型银行列表
-const cryptoWallets = computed(() => bankData.value[BankType.CRYPTO] || [])
-const unionpayCards = computed(() => bankData.value[BankType.UNIONPAY] || [])
-const wireTransfers = computed(() => bankData.value[BankType.WIRE_TRANSFER] || [])
-const creditCards = computed(() => bankData.value[BankType.CREDIT_CARD] || [])
+    [BankType.CREDIT_CARD]: [],
+  })
 
+  // 计算属性 - 各类型银行列表
+  const cryptoWallets = computed(() => bankData.value[BankType.CRYPTO] || [])
+  const unionpayCards = computed(() => bankData.value[BankType.UNIONPAY] || [])
+  const wireTransfers = computed(() => bankData.value[BankType.WIRE_TRANSFER] || [])
+  const creditCards = computed(() => bankData.value[BankType.CREDIT_CARD] || [])
 
 
-// 弹出层ref
-const deletePopup = ref(null)
-const deleteTarget = ref(null)
+  // 弹出层ref
+  const deletePopup = ref(null)
+  const deleteTarget = ref(null)
 
 
-// 开始编辑
-const startEdit = (item) => {
+  // 开始编辑
+  const startEdit = (item) => {
     editingId.value = item.id
-}
+  }
 
-// 取消编辑
-const cancelEdit = () => {
+  // 取消编辑
+  const cancelEdit = () => {
     editingId.value = null
     getBankInfo() // 重新加载数据
-}
+  }
 
-// 保存银行信息
-const saveBank = async (item) => {
+  // 保存银行信息
+  const saveBank = async (item) => {
 
     if (selectedBankType.value === 'crypto' && item.approveStatus == 1) {
-        uni.showToast({
-            title: "加密钱包认证审核中",
-            icon: "none"
-        });
-        return;
+      uni.showToast({
+        title: '加密钱包认证审核中',
+        icon: 'none',
+      })
+      return
     }
     try {
-        const params = { ...item }
-        params.defaultBank = params.defaultBank1[0] ? 1 : 0
-
-        if (params.type === BankType.CREDIT_CARD && params.expiryYearMonth) {
-            const [year, month] = params.expiryYearMonth.split('/')
-            params.expiryYear = year
-            params.expiryMonth = month
-        }
-        const res = await personalApi.customBankUpdate(params)
-        if (res.code === 200) {
-            uni.hideLoading()
-            uni.showToast({
-                title: t('Msg.Success'),
-                icon: 'success'
-            })
-            editingId.value = null
-            getBankInfo()
-        } else {
-            throw new Error(res.msg)
-        }
-    } catch (error) {
+      const params = { ...item }
+      params.defaultBank = params.defaultBank1[0] ? 1 : 0
+
+      if (params.type === BankType.CREDIT_CARD && params.expiryYearMonth) {
+        const [year, month] = params.expiryYearMonth.split('/')
+        params.expiryYear = year
+        params.expiryMonth = month
+      }
+      const res = await personalApi.customBankUpdate(params)
+      if (res.code === 200) {
         uni.hideLoading()
         uni.showToast({
-            title: error.message || t('Msg.Fail'),
-            icon: 'none'
+          title: t('Msg.Success'),
+          icon: 'success',
         })
+        editingId.value = null
+        getBankInfo()
+      } else {
+        throw new Error(res.msg)
+      }
+    } catch (error) {
+      uni.hideLoading()
+      uni.showToast({
+        title: error.message || t('Msg.Fail'),
+        icon: 'none',
+      })
     }
-}
-// 删除
-const confirmDelete = (item) => {
+  }
+  // 删除
+  const confirmDelete = (item) => {
     if (selectedBankType.value === 'crypto' && item.approveStatus == 1) {
-        uni.showToast({
-            title: '加密钱包认证审核中',
-            icon: 'none'
-        })
-        return
+      uni.showToast({
+        title: '加密钱包认证审核中',
+        icon: 'none',
+      })
+      return
     }
     deleteTarget.value = item
     deletePopup.value.open()
-}
+  }
 
-// 关闭删除弹窗
-const closeDeletePopup = () => {
+  // 关闭删除弹窗
+  const closeDeletePopup = () => {
     deletePopup.value.close()
     deleteTarget.value = null
-}
+  }
 
-// 执行删除
-const deleteBank = async () => {
+  // 执行删除
+  const deleteBank = async () => {
     if (!deleteTarget.value) return
     try {
-        const res = await personalApi.customBankDelete({
-            ids: [deleteTarget.value.id]
-        })
-        if (res.code === 200) {
-            uni.hideLoading()
-            uni.showToast({
-                title: t('Msg.DeleteSuccess'),
-                icon: 'success'
-            })
-            deletePopup.value.close()
-            deleteTarget.value = null
-            getBankInfo()
-        } else {
-            uni.showToast({
-                title: res.msg,
-                icon: 'none'
-            })
-        }
-    } catch (error) {
+      const res = await personalApi.customBankDelete({
+        ids: [deleteTarget.value.id],
+      })
+      if (res.code === 200) {
         uni.hideLoading()
         uni.showToast({
-            title: error.msg,
-            icon: 'none'
+          title: t('Msg.DeleteSuccess'),
+          icon: 'success',
         })
         deletePopup.value.close()
+        deleteTarget.value = null
+        getBankInfo()
+      } else {
+        uni.showToast({
+          title: res.msg,
+          icon: 'none',
+        })
+      }
+    } catch (error) {
+      uni.hideLoading()
+      uni.showToast({
+        title: error.msg,
+        icon: 'none',
+      })
+      deletePopup.value.close()
     }
-}
-// 新增银行信息
-const addBankDialogRef = ref(null);
-function addBank() {
+  }
+  // 新增银行信息
+  const addBankDialogRef = ref(null)
+
+  function addBank() {
     switch (selectedBankType.value) {
-        case 'crypto':
-            openAddCrypto()
-            break;
-        case 'unionpay':
-            openAddUnionpay()
-            break;
-        case 'bank':
-            openAddBank()
-            break;
-        case 'credit':
-            openAddCredit()
-            break;
+      case 'crypto':
+        openAddCrypto()
+        break
+      case 'unionpay':
+        openAddUnionpay()
+        break
+      case 'bank':
+        openAddBank()
+        break
+      case 'credit':
+        openAddCredit()
+        break
     }
-}
-function openAddCrypto() {
-    const wallets = cryptoWallets.value || [];
+  }
+
+  function openAddCrypto() {
+    const wallets = cryptoWallets.value || []
     // 1️⃣ 没有钱包
     if (wallets.length === 0) {
-        addBankDialogRef.value?.open(4);
-        return;
+      addBankDialogRef.value?.open(4)
+      return
     }
     // 2️⃣ 是否存在未认证钱包
     const hasUnAuth = wallets.some(
-        item => item.authStatus === 0 || item.approveStatus === 1
-    );
+      item => item.authStatus === 0 || item.approveStatus === 1,
+    )
     if (hasUnAuth) {
-        uni.showToast({
-            title: "加密钱包未认证",
-            icon: "none"
-        });
-        return;
+      uni.showToast({
+        title: '加密钱包未认证',
+        icon: 'none',
+      })
+      return
     }
     // 3️⃣ 是否达到上限
     if (wallets.length >= 2) {
-        uni.showToast({
-            title: t('blockchain.item9'),
-            icon: "none"
-        });
-        return;
+      uni.showToast({
+        title: t('blockchain.item9'),
+        icon: 'none',
+      })
+      return
     }
     // 4️⃣ 正常打开
-    addBankDialogRef.value?.open(4);
-}
-function openAddUnionpay() {
-    const wallets = unionpayCards.value || [];
+    addBankDialogRef.value?.open(4)
+  }
+
+  function openAddUnionpay() {
+    const wallets = unionpayCards.value || []
     if (wallets.length === 0) {
-        addBankDialogRef.value?.open(1);
-        return;
+      addBankDialogRef.value?.open(1)
+      return
     }
     if (wallets.length >= 2) {
-        uni.showToast({
-            title: t('Msg.UnionPayCARDS'),
-            icon: "none"
-        });
-        return;
+      uni.showToast({
+        title: t('Msg.UnionPayCARDS'),
+        icon: 'none',
+      })
+      return
     }
-    addBankDialogRef.value?.open(1);
-}
-function openAddBank() {
-    const wallets = wireTransfers.value || [];
+    addBankDialogRef.value?.open(1)
+  }
+
+  function openAddBank() {
+    const wallets = wireTransfers.value || []
     if (wallets.length === 0) {
-        addBankDialogRef.value?.open(2);
-        return;
+      addBankDialogRef.value?.open(2)
+      return
     }
     if (wallets.length >= 2) {
-        uni.showToast({
-            title: t('Msg.WireTransfers'),
-            icon: "none"
-        });
-        return;
+      uni.showToast({
+        title: t('Msg.WireTransfers'),
+        icon: 'none',
+      })
+      return
     }
-    addBankDialogRef.value?.open(2);
-}
-function openAddCredit() {
-    const wallets = creditCards.value || [];
+    addBankDialogRef.value?.open(2)
+  }
+
+  function openAddCredit() {
+    const wallets = creditCards.value || []
     if (wallets.length === 0) {
-        addBankDialogRef.value?.open(3);
-        return;
+      addBankDialogRef.value?.open(3)
+      return
     }
-    addBankDialogRef.value?.open(3);
-}
-// 新增银行信息成功回调
-const addSuccess = (e) => {
+    addBankDialogRef.value?.open(3)
+  }
+
+  // 新增银行信息成功回调
+  const addSuccess = (e) => {
     if (selectedBankType.value === 'crypto') {
-        openKycDialog(e)
+      openKycDialog(e)
     }
-    getBankInfo();
-}
-
-// kyc认证和证件认证
-const kycDialogRef = ref(null);
-const cardDialogRef = ref(null);
-// kyc认证
-const doReady = (bankId, item) => {
+    getBankInfo()
+  }
+
+  // kyc认证和证件认证
+  const kycDialogRef = ref(null)
+  const cardDialogRef = ref(null)
+  // kyc认证
+  const doReady = (bankId, item) => {
     if (item.approveStatus == 1) {
-        uni.showToast({
-            title: "加密钱包认证审核中",
-            icon: "none"
-        });
-        return;
+      uni.showToast({
+        title: '加密钱包认证审核中',
+        icon: 'none',
+      })
+      return
     }
     if (item.authStatus == 1) {
-        uni.showToast({
-            title: "加密钱包已认证",
-            icon: "none"
-        });
-        return;
+      uni.showToast({
+        title: '加密钱包已认证',
+        icon: 'none',
+      })
+      return
     }
     openKycDialog(bankId)
-}
-// 打开kyc认证弹窗
-function openKycDialog(e) {
-    kycDialogRef.value?.open(e);
-}
-// 打开证件认证弹窗
-function openCardDialog(e, item) {
+  }
+
+  // 打开kyc认证弹窗
+  function openKycDialog(e) {
+    kycDialogRef.value?.open(e)
+  }
+
+  // 打开证件认证弹窗
+  function openCardDialog(e, item) {
     if (item.approveStatus == 1) {
-        uni.showToast({
-            title: "加密钱包认证审核中",
-            icon: "none"
-        });
-        return;
+      uni.showToast({
+        title: '加密钱包认证审核中',
+        icon: 'none',
+      })
+      return
     }
     if (item.authStatus == 1) {
-        uni.showToast({
-            title: "加密钱包已认证",
-            icon: "none"
-        });
-        return;
+      uni.showToast({
+        title: '加密钱包已认证',
+        icon: 'none',
+      })
+      return
     }
-    cardDialogRef.value?.open(e, item);
-}
+    cardDialogRef.value?.open(e, item)
+  }
 
 
-// 掩码卡号
-const maskCardNumber = (num) => {
+  // 掩码卡号
+  const maskCardNumber = (num) => {
     if (!num) return '--'
     if (num.length <= 4) return num
     return '**** **** **** ' + num.slice(-4)
-}
+  }
 
-// 获取银行列表
-const getBankList = async () => {
+  // 获取银行列表
+  const getBankList = async () => {
     const res = await personalApi.BankList({})
     if (res.code === 200) {
-        bankList.value = res.data
+      bankList.value = res.data
     }
-}
-// 文件更新处理
-const handleFileUpdate = (newValue, item, field) => {
+  }
+  // 文件更新处理
+  const handleFileUpdate = (newValue, item, field) => {
     item[field] = newValue
-}
+  }
 
-// 或者如果你需要在上传成功后做其他操作
-const handleUploadComplete = (result, item, field) => {
+  // 或者如果你需要在上传成功后做其他操作
+  const handleUploadComplete = (result, item, field) => {
     if (result.success) {
-        console.log('上传完成:', result.paths)
-        // 可以在这里做其他操作，比如保存到服务器
+      console.log('上传完成:', result.paths)
+      // 可以在这里做其他操作，比如保存到服务器
     }
-}
-// 获取银行信息
-const getBankInfo = async () => {
+  }
+  // 获取银行信息
+  const getBankInfo = async () => {
     try {
-        const res = await personalApi.customBankList({})
-        if (res.code === 200) {
-            // 清空数据
-            bankData.value = {
-                [BankType.CRYPTO]: [],
-                [BankType.UNIONPAY]: [],
-                [BankType.WIRE_TRANSFER]: [],
-                [BankType.CREDIT_CARD]: []
-            }
-            // 分类数据
-            res.data.forEach(item => {
-                item.defaultBank1 = item.defaultBank == 1 ? [1] : []
-                if (item.type === BankType.UNIONPAY) {
-                    bankData.value[BankType.UNIONPAY].push(item)
-                } else if (item.type === BankType.WIRE_TRANSFER) {
-                    bankData.value[BankType.WIRE_TRANSFER].push(item)
-                } else if (item.type === BankType.CREDIT_CARD) {
-                    item.expiryYearMonth = item.expiryYear && item.expiryMonth
-                        ? `${item.expiryYear}/${item.expiryMonth}`
-                        : ''
-                    bankData.value[BankType.CREDIT_CARD].push(item)
-                } else if (item.type === BankType.CRYPTO) {
-                    bankData.value[BankType.CRYPTO].push(item)
-                }
-            })
+      const res = await personalApi.customBankList({})
+      if (res.code === 200) {
+        // 清空数据
+        bankData.value = {
+          [BankType.CRYPTO]: [],
+          [BankType.UNIONPAY]: [],
+          [BankType.WIRE_TRANSFER]: [],
+          [BankType.CREDIT_CARD]: [],
         }
-    } catch (error) {
-        uni.showToast({
-            title: error.message || t('Msg.Fail'),
-            icon: 'none'
+        // 分类数据
+        res.data.forEach(item => {
+          item.defaultBank1 = item.defaultBank == 1 ? [1] : []
+          if (item.type === BankType.UNIONPAY) {
+            bankData.value[BankType.UNIONPAY].push(item)
+          } else if (item.type === BankType.WIRE_TRANSFER) {
+            bankData.value[BankType.WIRE_TRANSFER].push(item)
+          } else if (item.type === BankType.CREDIT_CARD) {
+            item.expiryYearMonth = item.expiryYear && item.expiryMonth
+              ? `${item.expiryYear}/${item.expiryMonth}`
+              : ''
+            bankData.value[BankType.CREDIT_CARD].push(item)
+          } else if (item.type === BankType.CRYPTO) {
+            bankData.value[BankType.CRYPTO].push(item)
+          }
         })
+      }
+    } catch (error) {
+      uni.showToast({
+        title: error.message || t('Msg.Fail'),
+        icon: 'none',
+      })
     }
-}
-// 获取银行信息
-onMounted(() => {
+  }
+  // 获取银行信息
+  onMounted(() => {
     getBankList()
-    getBankInfo();
-});
+    getBankInfo()
+  })
 </script>
 
 
-
 <style scoped lang="scss">
   @import "@/uni.scss";
-.user-form {
+
+  .user-form {
     margin-top: px2rpx(30);
-}
+  }
 
-:deep(.uni-row1) {
+  :deep(.uni-row1) {
     .uni-col {
-        padding: 0 0 !important;
     }
 
     .uni-forms-item {
-        min-height: px2rpx(79);
-        margin-bottom: px2rpx(10);
+      min-height: px2rpx(79);
+      margin-bottom: px2rpx(10);
     }
 
     .uni-easyinput__content {
-        border: none !important;
-        background-color: var(--bs-secondary-bg) !important;
+      background-color: var(--bs-secondary-bg) !important;
     }
-}
+  }
 
-.bank-menu {
+  .bank-menu {
     // background: #fff;
+    display: flex;
+    flex-wrap: wrap;
     overflow: hidden;
 
+    &.card-header {
+      padding: px2rpx(10) px2rpx(20);
+    }
+
     .bank-menu-item {
-        display: flex;
-        align-items: center;
-        gap: px2rpx(12);
-        padding: px2rpx(10) px2rpx(16);
-        cursor: pointer;
-        border: 1px solid var(--bs-border-color);
-        font-size: px2rpx(16);
-        font-weight: 500;
-        color: var(--bs-emphasis-color);
-        transition: all 0.3s;
-        height: px2rpx(50);
+      flex: 1;
+      min-width: px2rpx(260);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      //gap: px2rpx(12);
+      padding: 0 px2rpx(16);
+      cursor: pointer;
+      font-size: px2rpx(16);
+      font-weight: bold;
+      color: var(--bs-emphasis-color);
+      transition: all 0.3s;
+      height: px2rpx(36);
+      border-radius: px2rpx(8);
+
+      .bank-icon {
+        width: px2rpx(50);
+      }
+
+      &.active {
+        background: var(--bs-secondary);
+        color: #ffffff;
         border-radius: px2rpx(8);
-        margin-bottom: px2rpx(8);
-
-        .bank-icon {
-            width: px2rpx(50);
-        }
-
-        &.active {
-            background: var(--bs-secondary);
-            color: #ffffff;
-            border-radius: px2rpx(8);
-        }
 
         &:hover {
-            background: var(--bs-link-hover-color-rgb);
-            color: var(--bs-secondary);
+          background: var(--bs-link-hover-color-rgb);
+          color: #ffffff;
         }
+      }
 
-        &.active:hover {
-            background: #d11920;
-        }
+      &:hover {
+        background: var(--bs-link-hover-color-rgb);
+        color: var(--bs-secondary);
+      }
+
+      &.active:hover {
+        background: #d11920;
+      }
     }
-}
+  }
 
-.bank-content {
-    //background: #fff;
-    border-radius: px2rpx(8);
-    padding: 0 px2rpx(24);
+  .bank-content {
+    //border-radius: px2rpx(8);
 
     .bank-info {
-        .bank-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: px2rpx(24);
-            padding-bottom: px2rpx(16);
-            border-bottom: 1px solid #f3f4f6;
+      .bank-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        //border-bottom: 1px solid #f3f4f6;
+
+        .bank-title {
+          display: flex;
+          align-items: center;
+          font-size: px2rpx(20);
+          font-weight: 600;
+          line-height: px2rpx(32);
+          color: #1f2937;
+          //margin-bottom: px2rpx(20);
+        }
 
-            .bank-title {
-                display: flex;
-                align-items: center;
-                font-size: px2rpx(20);
-                font-weight: 600;
-                color: #1f2937;
-                margin-bottom: px2rpx(20);
-            }
+        .actions {
+          display: flex;
+          flex-direction: column;
+        }
 
-            .actions {
-                display: flex;
-                flex-direction: column;
+        @media screen and (max-width: 992px) {
+          .bank-actions {
+            justify-content: flex-start !important;
+          }
+        }
+
+        .bank-actions {
+          display: flex;
+          gap: px2rpx(20);
+          align-items: center;
+          flex-wrap: wrap;
+          //margin-bottom: px2rpx(10);
+          justify-content: flex-end;
+
+          .action-btn {
+            padding: px2rpx(8) px2rpx(16);
+            border: 1px solid #d1d5db;
+            border-radius: px2rpx(4);
+            font-size: px2rpx(14);
+            cursor: pointer;
+            background: #fff;
+            transition: all 0.3s;
+
+            &:hover {
+              background: #f3f4f6;
             }
 
-            .bank-actions {
-                display: flex;
-                gap: px2rpx(20);
-                align-items: center;
-                flex-wrap: wrap;
-                margin-bottom: px2rpx(10);
-                justify-content: flex-end;
-
-                .action-btn {
-                    padding: px2rpx(8) px2rpx(16);
-                    border: 1px solid #d1d5db;
-                    border-radius: px2rpx(4);
-                    font-size: px2rpx(14);
-                    cursor: pointer;
-                    background: #fff;
-                    transition: all 0.3s;
-
-                    &:hover {
-                        background: #f3f4f6;
-                    }
-
-                    &.delete {
-                        background: #ea2027;
-                        color: var(--bs-emphasis-color);
-                        border-color: #ea2027;
-
-                        &:hover {
-                            background: #d11920;
-                        }
-                    }
-                }
+            &.delete {
+              background: var(--bs-btn-bg);
+              color: #fff;
+              border-color: var(--bs-btn-bg);
+
+              &:hover {
+                background: var(--bs-btn-hover-bg);
+              }
             }
+          }
         }
+      }
     }
 
     .photo-upload {
-        display: flex;
-        flex-wrap: wrap;
+      display: flex;
+      flex-wrap: wrap;
 
-        gap: px2rpx(16);
+      gap: px2rpx(16);
 
-        .photo-item {
-            width: px2rpx(120);
-            height: px2rpx(120);
-            border-radius: px2rpx(8);
-            overflow: hidden;
-            background: #f3f4f6;
+      .photo-item {
+        width: px2rpx(120);
+        height: px2rpx(120);
+        border-radius: px2rpx(8);
+        overflow: hidden;
+        background: #f3f4f6;
 
-            .photo-preview {
-                width: 100%;
-                height: 100%;
-            }
+        .photo-preview {
+          width: 100%;
+          height: 100%;
         }
+      }
     }
 
-    .add-wallet-btn {
-        margin-top: px2rpx(24);
-        height: px2rpx(48);
-        background: #ea2027;
-        color: #fff;
-        border-radius: px2rpx(4);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: px2rpx(8);
-        font-size: px2rpx(16);
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.3s;
+    .header-title {
+      justify-content: space-between;
+      padding: 0 0 px2rpx(20) 0;
+    }
 
-        &:hover {
-            background: #d11920;
-        }
+    .add-wallet-btn {
+      height: px2rpx(40);
+      background: var(--bs-secondary);
+      color: #fff;
+      border-radius: px2rpx(20);
+      padding: 0 px2rpx(20);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: px2rpx(8);
+      font-size: px2rpx(16);
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        background: #d11920;
+      }
     }
 
     .bankFront {
-        width: 100%;
-
-        // 上传包装器
-        .upload-wrapper {
-            :deep(.uni-file-picker) {
-                .file-picker__box {
-                    border: none;
-                    background: transparent;
-                }
-
-                // 文件列表容器
-                .file-picker__box-list {
-                    display: flex;
-                    gap: px2rpx(16);
-                    flex-wrap: wrap;
-
-                    // 已上传的文件项
-                    .file-picker__box-item {
-                        width: px2rpx(300) !important;
-                        height: px2rpx(300) !important;
-                        margin: 0;
-                        border: 1px solid #e5e7eb;
-                        border-radius: px2rpx(8);
-                        overflow: hidden;
-                        position: relative;
-
-                        // 图片预览
-                        .file-picker__box-item-image {
-                            width: 100%;
-                            height: 100%;
-                            object-fit: cover;
-                        }
-
-                        // 删除按钮
-                        .file-picker__box-item-close {
-                            position: absolute;
-                            top: px2rpx(4);
-                            right: px2rpx(4);
-                            width: px2rpx(24);
-                            height: px2rpx(24);
-                            background: rgba(0, 0, 0, 0.5);
-                            border-radius: 50%;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-
-                            &::before {
-                                content: '×';
-                                color: var(--bs-emphasis-color);
-                                font-size: px2rpx(28);
-                                line-height: 1;
-                            }
-
-                            .close-icon {
-                                display: none;
-                            }
-                        }
-                    }
-                }
+      width: 100%;
+
+      // 上传包装器
+      .upload-wrapper {
+        :deep(.uni-file-picker) {
+          .file-picker__box {
+            border: none;
+            background: transparent;
+          }
+
+          // 文件列表容器
+          .file-picker__box-list {
+            display: flex;
+            gap: px2rpx(16);
+            flex-wrap: wrap;
+
+            // 已上传的文件项
+            .file-picker__box-item {
+              width: px2rpx(300) !important;
+              height: px2rpx(300) !important;
+              margin: 0;
+              border: 1px solid #e5e7eb;
+              border-radius: px2rpx(8);
+              overflow: hidden;
+              position: relative;
+
+              // 图片预览
+              .file-picker__box-item-image {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+
+              // 删除按钮
+              .file-picker__box-item-close {
+                position: absolute;
+                top: px2rpx(4);
+                right: px2rpx(4);
+                width: px2rpx(24);
+                height: px2rpx(24);
+                background: rgba(0, 0, 0, 0.5);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
 
-                // 上传按钮
-                .file-picker__box-add {
-                    width: px2rpx(300) !important;
-                    height: px2rpx(300) !important;
-                    margin: 0;
-                    border: 2rpx dashed #d1d5db;
-                    border-radius: px2rpx(8);
-                    background: #f9fafb;
-                    transition: all 0.3s;
-
-                    &:hover {
-                        border-color: #ea2027;
-                        background: #fef2f2;
-                    }
-
-                    // 自定义上传按钮内容
-                    .custom-upload-btn {
-                        width: 100%;
-                        height: 100%;
-                        display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                        justify-content: center;
-
-                        .plus {
-                            font-size: px2rpx(48);
-                            color: #9ca3af;
-                            line-height: 1;
-                            margin-bottom: px2rpx(8);
-                        }
-
-                        .tip {
-                            font-size: px2rpx(24);
-                            color: #6b7280;
-                        }
-                    }
-
-                    // 隐藏默认的加号
-                    .add-icon {
-                        display: none;
-                    }
+                &::before {
+                  content: '×';
+                  color: var(--bs-emphasis-color);
+                  font-size: px2rpx(28);
+                  line-height: 1;
                 }
 
-                // 上传进度
-                .file-picker__box-progress {
-                    width: px2rpx(300);
-                    height: px2rpx(300);
-                    border-radius: px2rpx(8);
-                    background: rgba(0, 0, 0, 0.5);
-                    color: var(--bs-emphasis-color);
+                .close-icon {
+                  display: none;
                 }
+              }
             }
-        }
+          }
+
+          // 上传按钮
+          .file-picker__box-add {
+            width: px2rpx(300) !important;
+            height: px2rpx(300) !important;
+            margin: 0;
+            border: 2rpx dashed #d1d5db;
+            border-radius: px2rpx(8);
+            background: #f9fafb;
+            transition: all 0.3s;
 
-        // 图片预览
-        .image-preview {
-            .preview-image {
-                width: px2rpx(300);
-                height: px2rpx(300);
-                border-radius: px2rpx(8);
-                object-fit: cover;
-                cursor: pointer;
-                border: 1px solid #e5e7eb;
+            &:hover {
+              border-color: #ea2027;
+              background: #fef2f2;
             }
 
-            .no-image {
-                width: px2rpx(300);
-                height: px2rpx(300);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background: #f5f5f5;
-                border-radius: px2rpx(8);
-                color: var(--bs-heading-color);
+            // 自定义上传按钮内容
+            .custom-upload-btn {
+              width: 100%;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+
+              .plus {
+                font-size: px2rpx(48);
+                color: #9ca3af;
+                line-height: 1;
+                margin-bottom: px2rpx(8);
+              }
+
+              .tip {
                 font-size: px2rpx(24);
-                border: 1px solid #e5e7eb;
+                color: #6b7280;
+              }
+            }
+
+            // 隐藏默认的加号
+            .add-icon {
+              display: none;
             }
+          }
+
+          // 上传进度
+          .file-picker__box-progress {
+            width: px2rpx(300);
+            height: px2rpx(300);
+            border-radius: px2rpx(8);
+            background: rgba(0, 0, 0, 0.5);
+            color: var(--bs-emphasis-color);
+          }
+        }
+      }
+
+      // 图片预览
+      .image-preview {
+        .preview-image {
+          width: px2rpx(300);
+          height: px2rpx(300);
+          border-radius: px2rpx(8);
+          object-fit: cover;
+          cursor: pointer;
+          border: 1px solid #e5e7eb;
         }
+
+        .no-image {
+          width: px2rpx(300);
+          height: px2rpx(300);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #f5f5f5;
+          border-radius: px2rpx(8);
+          color: var(--bs-heading-color);
+          font-size: px2rpx(24);
+          border: 1px solid #e5e7eb;
+        }
+      }
     }
-}
+  }
+
+  .custom-row {
+    gap: px2rpx(20); // 使用 gap 替代 gutter
+  }
 </style>