style(样式调整): 支付金币页

src/views/ExchangeGoldCoinsView.vue

@@ -4,48 +4,66 @@
 
     <div class="content">
       <!-- 信息部分 -->
-      <div class="info-section">
+      <div>
-        <div class="info-header">
+        <div
-          <button class="details-btn" @click="showDetails">
+          style="
-            ℹ️ Details
+            display: flex;
-          </button>
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+          "
+        >
+          <div style="font-weight: 600">Information</div>
+          <div style="display: flex; align-items: center" @click="showDetails">
+            <div style="color: rgba(0, 0, 0, 0.4)">Details</div>
+            <img src="../assets/icon/arrow.png" alt="" width="16px" />
           </div>
-        <div class="available-salary">
+        </div>
-          <span>Available salary: </span>
+        <div
+          style="
+            background-color: white;
+            padding: 16px;
+            border-radius: 12px;
+            margin-bottom: 12px;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+          "
+        >
+          <span style="font-weight: 510; font-size: 1em">Available salary: </span>
           <span v-if="loading" class="loading-text">Loading...</span>
-          <span v-else class="amount">{{ availableSalary }}</span>
+          <span v-else style="font-weight: 700; color: #333; font-size: 1.1em">{{
+            availableSalary
+          }}</span>
         </div>
       </div>
 
       <!-- 兑换部分 -->
+      <div>
+        <div style="font-weight: 600; margin-bottom: 10px">Exchange Gold Coins</div>
         <div class="exchange-section">
-        <h3>Exchange Gold Coins</h3>
-
           <!-- 金币选择 -->
-        <div class="coins-grid">
+          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
             <div
               v-for="coin in coinOptions"
               :key="coin.id"
               @click="selectCoin(coin)"
               :class="['coin-item', { selected: selectedCoin === coin.id }]"
             >
-            <div class="coin-icon">🪙</div>
+              <img src="../assets/icon/coin.png" alt="" style="width: 50%" />
-            <div class="coin-amount">{{ coin.amount }}</div>
+              <div style="font-weight: 500; color: #373232">{{ coin.amount }}</div>
-            <div class="coin-price">${{ coin.price }}</div>
+              <div style="font-weight: 500; color: #131111">${{ coin.price }}</div>
+            </div>
           </div>
         </div>
 
         <!-- 兑换按钮 -->
-        <button
+        <div style="display: flex; justify-content: center; margin-top: 10px">
-          class="exchange-btn"
+          <button class="exchange-btn" @click="exchangeCoins" :disabled="!selectedCoin">
-          @click="exchangeCoins"
-          :disabled="!selectedCoin"
-        >
             Exchange
           </button>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -53,7 +71,7 @@ import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
 import { getBankBalance, userSalaryCheckExchange, userBankExchangeGold } from '../api/wallet.js'
-import {showError, showSuccess, showWarning} from "@/utils/toast.js";
+import { showError, showSuccess, showWarning } from '@/utils/toast.js'
 
 const router = useRouter()
 
@@ -71,7 +89,7 @@ const coinOptions = reactive([
   { id: 3, amount: 100000, price: 10 },
   { id: 4, amount: 500000, price: 50 },
   { id: 5, amount: 1000000, price: 100 },
-  { id: 6, amount: 2000000, price: 200 }
+  { id: 6, amount: 2000000, price: 200 },
 ])
 
 // 获取银行余额
@@ -122,14 +140,15 @@ const checkUserRole = async () => {
       router.back() // 对于其他严重错误，也建议退出页面
     }
   } catch (error) {
-
     // 处理特定错误情况
     if (error.errorCode === 1083) {
       // NOT_OPEN_ERROR
       showWarning('Exchange NOT_OPEN_ERROR')
     } else if (error.message && error.message.includes('HTTP Error: 406')) {
       // 处理 406 Not Acceptable 状态码
-      showError('The server cannot produce a response matching the list of acceptable values defined in the request headers')
+      showError(
+        'The server cannot produce a response matching the list of acceptable values defined in the request headers'
+      )
     } else {
       // 其他错误情况
       showError('Failed to load user information')
@@ -150,19 +169,25 @@ const exchangeCoins = async () => {
     return
   }
 
-  const selectedCoinData = coinOptions.find(coin => coin.id === selectedCoin.value)
+  const selectedCoinData = coinOptions.find((coin) => coin.id === selectedCoin.value)
 
   // 检查余额是否足够
   const coinPrice = selectedCoinData.price
   const availableBalance = parseFloat(availableSalary.value)
 
   if (isNaN(availableBalance) || availableBalance < coinPrice) {
-    showError(`Insufficient balance. Your current balance is $${availableBalance.toFixed(2)}, but you need $${coinPrice} to exchange.`)
+    showError(
+      `Insufficient balance. Your current balance is $${availableBalance.toFixed(
+        2
+      )}, but you need $${coinPrice} to exchange.`
+    )
     return
   }
 
   // 显示确认对话框
-  const confirmExchange = confirm(`Do you want to exchange ${selectedCoinData.amount} coins for $${selectedCoinData.price}?`)
+  const confirmExchange = confirm(
+    `Do you want to exchange ${selectedCoinData.amount} coins for $${selectedCoinData.price}?`
+  )
 
   if (confirmExchange) {
     try {
@@ -170,18 +195,19 @@ const exchangeCoins = async () => {
       const response = await userBankExchangeGold({
         coinId: selectedCoinData.id,
         amount: selectedCoinData.price,
-        price: selectedCoinData.price
+        price: selectedCoinData.price,
       })
 
       if (response.status === true || response.errorCode === 0) {
-        showSuccess(`Successfully exchanged ${selectedCoinData.amount} coins for $${selectedCoinData.price}`)
+        showSuccess(
+          `Successfully exchanged ${selectedCoinData.amount} coins for $${selectedCoinData.price}`
+        )
 
         // 刷新银行余额
         await fetchBankBalance()
 
         // 重置选择
         selectedCoin.value = null
-
       } else {
         // 接口调用失败
         const errorMessage = response.message || 'Exchange failed, please try again later.'
@@ -217,6 +243,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
 .exchange-gold-coins {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -245,7 +276,7 @@ onMounted(() => {
 .details-btn {
   background: none;
   border: none;
-  color: #8B5CF6;
+  color: #8b5cf6;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -263,7 +294,7 @@ onMounted(() => {
 
 .details-btn:active {
   background-color: #e5e7eb;
-  color: #7C3AED;
+  color: #7c3aed;
 }
 
 .available-salary {
@@ -278,7 +309,7 @@ onMounted(() => {
 
 .available-salary .loading-text {
   font-weight: 500;
-  color: #8B5CF6;
+  color: #8b5cf6;
   font-style: italic;
 }
 
@@ -297,77 +328,63 @@ onMounted(() => {
   color: #333;
 }
 
-/* 金币网格 */
-.coins-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
 .coin-item {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
-  padding: 16px 8px;
   border: 2px solid #e5e7eb;
   border-radius: 12px;
   cursor: pointer;
   transition: all 0.2s;
   background-color: white;
+  aspect-ratio: 1/1;
 }
 
 .coin-item:hover {
-  border-color: #8B5CF6;
+  border-color: #8b5cf6;
 }
 
 .coin-item.selected {
-  border-color: #8B5CF6;
+  border-color: #8b5cf6;
-  background-color: #F3F4F6;
+  background-color: #f3f4f6;
 }
 
 .coin-item:active {
   transform: scale(0.98);
 }
 
-.coin-icon {
-  font-size: 24px;
-  margin-bottom: 8px;
-}
-
-.coin-amount {
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 4px;
-}
-
-.coin-price {
-  font-size: 12px;
-  color: #666;
-}
-
 /* 兑换按钮 */
 .exchange-btn {
-  width: 100%;
+  width: 70%;
-  padding: 14px;
+  border-radius: 32px;
-  background-color: #FCD34D;
+  background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
-  color: #92400E;
   border: none;
-  border-radius: 12px;
+  padding: 12px;
-  font-size: 16px;
+  color: white;
-  font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s;
 }
 
 .exchange-btn:disabled {
-  background-color: #ccc;
-  color: #666;
   cursor: not-allowed;
 }
 
-.exchange-btn:not(:disabled):active {
+@media screen and (max-width: 360px) {
-  background-color: #F59E0B;
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
 }
 </style>