feat(银行卡页面、翻译文件): 修改页面样式，修改翻译文本，新增图源

src/locales/ar.json

@@ -256,7 +256,7 @@
   "new_year_cash_out_minimum": "*يجب أن يكون مبلغ السحب أكبر من أو يساوي 10 دولارًا",
 
   "bank_card": "بطاقة مصرفية",
-  "currently_in_use": "قيد الاستخدام حالياً",
+  "currently_in_use": "بطاقتك (قيد الاستخدام)",
   "no_bank_cards_in_use": "البطاقات المصرفية غير مستخدمة حالياً.",
   "all_bank_cards": "جميع البطاقات المصرفية",
   "no_bank_cards_added": "لم تتم إضافة بطاقات مصرفية بعد.",

src/locales/bn.json

@@ -256,7 +256,7 @@
   "new_year_cash_out_minimum": "*নগদ উত্তোলনের পরিমাণ >= $10 হতে হবে",
 
   "bank_card": "ব্যাংক কার্ড",
-  "currently_in_use": "বর্তমানে ব্যবহারে",
+  "currently_in_use": "আপনার কার্ড (ব্যবহারে)",
   "no_bank_cards_in_use": "ব্যাংক কার্ড বর্তমানে ব্যবহারে নেই।",
   "all_bank_cards": "সমস্ত ব্যাংক কার্ড",
   "no_bank_cards_added": "এখনও কোনো ব্যাংক কার্ড যোগ করা হয়নি।",
@@ -264,7 +264,7 @@
   "payee": "প্রাপক",
   "delete": "মুছে ফেলুন",
   "use": "ব্যবহার",
-  "using": "ব্যবহার করা হচ্ছে",
+  "using": "ব্যবহারে",
   "add_new_payment_method": "নতুন পেমেন্ট পদ্ধতি যোগ করুন",
   "choose_withdrawal_method": "উত্তোলন পদ্ধতি নির্বাচন করুন",
   "card_name": "কার্ড নাম",

src/locales/en.json

@@ -256,7 +256,7 @@
   "new_year_cash_out_minimum": "*The cash out amount must be >= $10",
 
   "bank_card": "Bank Card",
-  "currently_in_use": "Currently In Use",
+  "currently_in_use": "Your Card (In Use)",
   "no_bank_cards_in_use": "Bank cards are not currently in use.",
   "all_bank_cards": "All Bank Cards",
   "no_bank_cards_added": "No bank cards have been added yet.",
@@ -264,7 +264,7 @@
   "payee": "Payee",
   "delete": "Delete",
   "use": "Use",
-  "using": "Using",
+  "using": "In Use",
   "add_new_payment_method": "Add new payment method",
   "choose_withdrawal_method": "Choose withdrawal method",
   "card_name": "Card Name",

src/locales/tr.json

@@ -256,7 +256,7 @@
   "new_year_cash_out_minimum": "*Nakit çekme miktarı >= $10 olmalıdır",
 
   "bank_card": "Banka Kartı",
-  "currently_in_use": "Şu Anda Kullanımda",
+  "currently_in_use": "Kartınız (Kullanımda)",
   "no_bank_cards_in_use": "Banka kartları şu anda kullanımda değil.",
   "all_bank_cards": "Tüm Banka Kartları",
   "no_bank_cards_added": "Henüz banka kartı eklenmedi.",
@@ -264,7 +264,7 @@
   "payee": "Alıcı",
   "delete": "Sil",
   "use": "Kullan",
-  "using": "Kullanılıyor",
+  "using": "Kullanımda",
   "add_new_payment_method": "Yeni ödeme yöntemi ekle",
   "choose_withdrawal_method": "Çekim yöntemini seç",
   "card_name": "Kart Adı",

src/locales/zh.json

@@ -256,7 +256,7 @@
   "new_year_cash_out_minimum": "*提现金额必须大于等于10美元",
 
   "bank_card": "银行卡",
-  "currently_in_use": "当前使用的银行卡",
+  "currently_in_use": "您的银行卡 (使用中)",
   "no_bank_cards_in_use": "当前未使用银行卡。",
   "all_bank_cards": "所有银行卡",
   "no_bank_cards_added": "尚未添加银行卡。",

src/views/Wallet/CashOut/BankCard.vue

@@ -19,27 +19,54 @@
         "
         :style="
           usedBankCard.cardNo
-            ? `border-radius: 11.75px;border: 0.5px solid rgba(255, 255, 255, 0.08);background: linear-gradient(137deg, #7352DD 11.08%, #AB91EA 42.04%, #9187E0 95.9%);box-shadow: -1px -3.25px 9.075px 0 rgba(88, 42, 255, 0.32) inset, 0.75px 3px 7.7px 0 rgba(115, 82, 221, 0.43) inset;backdrop-filter: blur(0.75px);`
+            ? `border-radius: 11.75px;border: 0.5px solid rgba(255, 255, 255, 0.08);`
             : ''
         "
       >
         <div v-if="!usedBankCard.cardNo" style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
           {{ t('no_bank_cards_in_use') }}
         </div>
-        <div v-else style="display: flex; flex-direction: column; justify-content: space-around">
+        <div v-else style="display: flex; align-items: center; gap: 2vw">
-          <div style="font-weight: 510; color: #fff">
+          <div style="width: 4.5em">
-            {{ t('card_number') }}: {{ usedBankCard.cardNo }}
+            <img
+              v-smart-img
+              v-if="usedBankCard.cardType == 'BANK'"
+              src="@/assets/icon/bank/BANK.png"
+              alt=""
+              style="width: 100%; display: block"
+            />
+            <img
+              v-smart-img
+              v-if="usedBankCard.cardType == 'USDT'"
+              src="@/assets/icon/bank/USDT.png"
+              alt=""
+              style="width: 100%; display: block"
+            />
           </div>
+
           <div
             style="
-              font-weight: 510;
+              flex: 1;
-              color: #fff;
+              min-width: 0;
-              overflow: hidden;
+              display: flex;
-              text-overflow: ellipsis;
+              flex-direction: column;
-              white-space: nowrap;
+              justify-content: space-around;
             "
           >
-            {{ t('payee') }}: {{ usedBankCard.payee }}
+            <div
+              style="
+                font-weight: 510;
+                color: rgba(0, 0, 0, 0.8);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              "
+            >
+              {{ t('payee') }}: {{ usedBankCard.payee }}
+            </div>
+            <div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
+              {{ t('card_number') }}: {{ usedBankCard.cardNo }}
+            </div>
           </div>
         </div>
       </div>
@@ -60,6 +87,7 @@
           {{ t('no_bank_cards_added') }}
         </div>
       </div>
+
       <!-- 列表不为空 -->
       <div
         v-else
@@ -70,17 +98,37 @@
           background: #fff;
           padding: 12px;
           box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+          display: flex;
+          flex-direction: column;
+          gap: 2vw;
         "
       >
-        <div style="display: flex; justify-content: space-between; align-items: center">
+        <!-- 银行卡信息 -->
+        <div style="display: flex; align-items: center; gap: 2vw">
+          <!-- 银行图 -->
+          <div style="width: 4.5em">
+            <img
+              v-smart-img
+              v-if="card.cardType == 'BANK'"
+              src="@/assets/icon/bank/BANK.png"
+              alt=""
+              style="width: 100%; display: block"
+            />
+            <img
+              v-smart-img
+              v-if="card.cardType == 'USDT'"
+              src="@/assets/icon/bank/USDT.png"
+              alt=""
+              style="width: 100%; display: block"
+            />
+          </div>
+
+          <!-- 信息 -->
           <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px">
-            <div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
-              {{ t('card_number') }}: {{ card.cardNo }}
-            </div>
             <div
               style="
                 font-weight: 510;
-                color: rgba(0, 0, 0, 0.4);
+                color: rgba(0, 0, 0, 0.8);
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
@@ -88,78 +136,79 @@
             >
               {{ t('payee') }}: {{ card.payee }}
             </div>
+            <div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
+              {{ t('card_number') }}: {{ card.cardNo }}
+            </div>
           </div>
-          <div style="display: flex; flex-direction: column; gap: 4px">
+        </div>
-            <div
-              style="
-                font-size: 0.9em;
-                font-weight: 700;
-                padding: 2px 12px;
-                color: #fff;
-                border-radius: 16px;
-                background: radial-gradient(
-                    107.94% 107.94% at 15.9% 13.54%,
-                    rgba(255, 255, 255, 0.2) 0%,
-                    rgba(255, 255, 255, 0) 100%
-                  ),
-                  linear-gradient(180deg, #fff 0%, #000 100%), #ff6464;
-                background-blend-mode: normal, soft-light, normal;
 
-                display: flex;
+        <!-- 按钮 -->
-                justify-content: center;
+        <div style="display: flex; justify-content: space-between; gap: 4vw">
-                align-items: center;
+          <!-- 删除按钮 -->
-              "
+          <div
-              @click="removeBankCard(card.id)"
+            style="
-            >
+              flex: 1;
-              {{ t('delete') }}
+              min-width: 0;
-            </div>
-            <div
-              v-if="!card.use"
-              style="
-                font-size: 0.9em;
-                font-weight: 700;
-                padding: 2px 12px;
-                color: #fff;
-                border-radius: 16px;
-                background: radial-gradient(
-                    107.94% 107.94% at 15.9% 13.54%,
-                    rgba(255, 255, 255, 0.2) 0%,
-                    rgba(255, 255, 255, 0) 100%
-                  ),
-                  linear-gradient(180deg, #fff 0%, #000 100%), #b464ff;
-                background-blend-mode: normal, soft-light, normal;
 
-                display: flex;
+              font-size: 1em;
-                justify-content: center;
+              font-weight: 700;
-                align-items: center;
+              padding: 12px 12px;
-              "
+              color: #fff;
-              @click="setDefaultBankCard(card.id)"
+              border-radius: 8px;
-            >
+              background: linear-gradient(135deg, #ff9294 2.82%, #ff4548 99.15%);
-              {{ t('use') }}
-            </div>
-            <div
-              v-else
-              style="
-                font-size: 0.9em;
-                font-weight: 700;
-                padding: 2px 12px;
-                color: #fff;
-                border-radius: 16px;
-                background: radial-gradient(
-                    107.94% 107.94% at 15.9% 13.54%,
-                    rgba(255, 255, 255, 0.2) 0%,
-                    rgba(255, 255, 255, 0) 100%
-                  ),
-                  linear-gradient(180deg, #fff 0%, #000 100%), #9d9d9d;
-                background-blend-mode: normal, soft-light, normal;
 
-                display: flex;
+              display: flex;
-                justify-content: center;
+              justify-content: center;
-                align-items: center;
+              align-items: center;
-              "
+            "
-            >
+            @click="removeBankCard(card.id)"
-              {{ t('using') }}
+          >
-            </div>
+            {{ t('delete') }}
+          </div>
+
+          <!-- 使用按钮 -->
+          <div
+            v-if="!card.use"
+            style="
+              flex: 1;
+              min-width: 0;
+
+              font-size: 1em;
+              font-weight: 700;
+              padding: 12px 12px;
+              color: #fff;
+              border-radius: 8px;
+              background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+            @click="setDefaultBankCard(card.id)"
+          >
+            {{ t('use') }}
+          </div>
+
+          <!-- 使用中按钮 -->
+          <div
+            v-else
+            style="
+              flex: 1;
+              min-width: 0;
+
+              font-size: 1em;
+              font-weight: 700;
+              padding: 12px 12px;
+              color: #fff;
+              border-radius: 8px;
+              background: linear-gradient(135deg, #d0d0d0 2.82%, #5b5b5b 99.15%);
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            {{ t('using') }}
           </div>
         </div>
       </div>
@@ -180,10 +229,9 @@
     >
       <div
         style="
-          padding: 12px;
+          padding: 8px 12px;
-          border-radius: 32px;
+          border-radius: 8px;
-          background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%),
+          background: linear-gradient(135deg, #a6f1b2 2.82%, #2fff3d 99.15%);
-            linear-gradient(135deg, #d1ced6 2.82%, #7c7882 99.15%);
           display: flex;
           align-items: center;
           gap: 4px;
@@ -192,13 +240,16 @@
       >
         <div style="width: 5vw; display: flex; justify-content: center; align-items: center">
           <img
+            v-smart-img
             src="/src/assets/icon/addWhite.png"
             alt=""
             style="display: block; width: 100%; object-fit: cover"
           />
         </div>
 
-        <div style="color: #fff; font-size: 0.9em">{{ t('add_new_payment_method') }}</div>
+        <div style="color: #fff; font-size: 1.1em; font-weight: 500">
+          {{ t('add_new_payment_method') }}
+        </div>
       </div>
     </div>
 
@@ -244,6 +295,7 @@
                   {{ t('choose_withdrawal_method') }}
                 </div>
                 <img
+                  v-smart-img
                   src="../../../assets/icon/arrow.png"
                   alt=""
                   style="display: block; width: 6vw; transition: transform 0.5s"