style(样式调整): 转账页

src/views/TransferView.vue

@@ -4,74 +4,184 @@
 
     <div class="content">
       <!-- 信息部分 -->
-      <div class="info-section">
+      <div>
-        <div class="info-header">
+        <div
-          <h3>Information</h3>
+          style="
-          <button class="details-btn" @click="showDetails">
+            display: flex;
-            Details <span>></span>
+            justify-content: space-between;
-          </button>
+            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>
-        <div class="available-salary">
+        <div
-          <span>Available salary: </span>
+          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">Transfer to others</div>
+        <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);
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+          "
+        >
+          <!-- 用户信息 -->
+          <div v-if="selectedPayee.id" style="width: 100%">
+            <!-- 头像信息 -->
+            <div style="display: flex; align-items: center; margin-bottom: 12px">
+              <!-- 头像 -->
+              <div
+                style="
+                  position: relative;
+                  width: 50px;
+                  height: 50px;
+                  border-radius: 25px;
+                  background-color: #8b5cf6;
+                  color: white;
+
+                  margin-right: 12px;
+                  overflow: hidden;
+
+                  font-size: 20px;
+                  font-weight: 600;
+
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                "
+              >
+                <img
+                  v-if="selectedPayee.avatar"
+                  :src="selectedPayee.avatar"
+                  :alt="selectedPayee.name"
+                  style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%"
+                />
+                <span v-else>{{ selectedPayee.name.charAt(0) }}</span>
+              </div>
+              <!-- 个人信息 -->
+              <div style="flex: 1">
+                <div style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #333">
+                  {{ selectedPayee.name }}
+                </div>
+                <div style="margin: 0; font-size: 14px; color: #666">
+                  ID: {{ selectedPayee.account || selectedPayee.id }}
+                </div>
+              </div>
+              <!-- 换人按钮 -->
+              <button
+                style="
+                  border-radius: 12px;
+                  border: 1px solid #e6e6e6;
+                  color: rgba(0, 0, 0, 0.4);
+                  font-weight: 500;
+                  padding: 2px 8px;
+                  background: none;
+                "
+                @click="searchPayee"
+              >
+                Change
+              </button>
+            </div>
+            <!-- 身份 -->
+            <div style="margin-left: 62px; height: 20px; display: flex; gap: 5px">
+              <img v-if="selectedPayee.isHost" src="../assets/icon/host.png" alt="" height="100%" />
+              <img
+                v-if="selectedPayee.isAgency"
+                src="../assets/icon/agency.png"
+                alt=""
+                height="100%"
+              />
+              <img
+                v-if="selectedPayee.hasSalary"
+                src="../assets/icon/sellerTab.png"
+                alt=""
+                height="100%"
+              />
+            </div>
+          </div>
+
+          <!-- 空状态 - 默认显示 -->
+          <div v-else style="display: flex; justify-content: center; align-items: center">
+            <div
+              style="
+                font-weight: 590;
+                color: rgba(0, 0, 0, 0.4);
+                padding: 16px;
+                border-radius: 12px;
+                box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+              "
+              @click="searchPayee"
+            >
+              Search
+            </div>
+          </div>
         </div>
       </div>
 
       <!-- 转账部分 -->
-      <div class="transfer-section">
+      <div>
-        <h3>Transfer to others</h3>
+        <div
-
+          style="
-        <!-- 收款人信息 -->
+            background-color: white;
-        <div v-if="selectedPayee.id" class="payee-info" @click="searchPayee">
+            padding: 16px;
-          <div class="payee-details">
+            border-radius: 12px;
-            <div class="payee-avatar">
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-              <img v-if="selectedPayee.avatar" :src="selectedPayee.avatar" :alt="selectedPayee.name" />
+          "
-              <span v-else>{{ selectedPayee.name.charAt(0) }}</span>
+        >
+          <!-- 转账金额选择 -->
+          <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 }]"
+            >
+              <img src="../assets/icon/coin.png" alt="" style="width: 40%" />
+              <div style="font-weight: 500; color: #373232">{{ coin.amount }}</div>
+              <div style="font-weight: 500; color: #131111">${{ coin.price }}</div>
             </div>
-            <div class="payee-text">
-              <h4>{{ selectedPayee.name }}</h4>
-              <p>ID: {{ selectedPayee.account || selectedPayee.id }}</p>
-              <div class="payee-tags">
-                <span v-if="selectedPayee.isHost" class="tag host-tag">👑 Host</span>
-                <span v-if="selectedPayee.isAgency" class="tag agency-tag">🏢 Agency</span>
-                <span v-if="selectedPayee.hasSalary" class="tag salary-tag">💰 Salary</span>
-              </div>
-            </div>
-          </div>
-          <button class="change-btn" @click.stop="clearPayee">Change</button>
-        </div>
-
-        <!-- 空状态 - 默认显示 -->
-        <div v-else class="empty-payee-state" @click="searchPayee">
-          <div class="search-placeholder">
-            <div class="search-icon">🔍</div>
-            <span>Search</span>
-          </div>
-        </div>
-
-        <!-- 转账金额选择 -->
-        <div class="coins-grid">
-          <div
-            v-for="coin in coinOptions"
-            :key="coin.id"
-            @click="selectCoin(coin)"
-            :class="['coin-item', { selected: selectedCoin === coin.id }]"
-          >
-            <div class="coin-icon">🪙</div>
-            <div class="coin-amount">{{ coin.amount }}</div>
-            <div class="coin-price">${{ coin.price }}</div>
           </div>
         </div>
 
         <!-- 转账按钮 -->
-        <button
+        <div style="display: flex; justify-content: center; margin-top: 10px">
-          class="transfer-btn"
+          <button
-          @click="transfer"
+            style="border-radius: 32px"
-          :disabled="!selectedCoin || !selectedPayee.id"
+            class="transfer-btn"
-        >
+            @click="transfer"
-          Transfer
+            :disabled="!selectedCoin || !selectedPayee.id"
-        </button>
+          >
+            Transfer
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -81,9 +191,9 @@
 import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
-import {getBankBalance, userBankTransfer} from '../api/wallet.js'
+import { getBankBalance, userBankTransfer } from '../api/wallet.js'
 import { getSelectedPayee, clearSelectedPayee } from '../utils/payeeStore.js'
-import {showError, showSuccess} from "@/utils/toast.js";
+import { showError, showSuccess } from '@/utils/toast.js'
 
 const router = useRouter()
 
@@ -100,7 +210,7 @@ const selectedPayee = reactive({
   type: '',
   isHost: false,
   isAgency: false,
-  hasSalary: false
+  hasSalary: false,
 })
 
 // 初始化收款人信息
@@ -118,7 +228,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 },
 ])
 
 // 获取银行余额
@@ -163,7 +273,7 @@ const clearPayee = () => {
     type: '',
     isHost: false,
     isAgency: false,
-    hasSalary: false
+    hasSalary: false,
   })
   clearSelectedPayee()
 }
@@ -188,7 +298,7 @@ const transfer = async () => {
     return
   }
 
-  const selectedCoinData = coinOptions.find(coin => coin.id === selectedCoin.value)
+  const selectedCoinData = coinOptions.find((coin) => coin.id === selectedCoin.value)
 
   // 获取支付密码
   // const password = prompt('Please enter your payment password:')
@@ -219,7 +329,6 @@ const transfer = async () => {
 
     // 刷新银行余额
     await fetchBankBalance()
-
   } catch (error) {
     // 错误处理
     console.error('Transfer failed:', error)
@@ -242,6 +351,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
 .transfer {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -258,7 +372,7 @@ onMounted(() => {
   padding: 16px;
   border-radius: 12px;
   margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .info-header {
@@ -298,25 +412,10 @@ onMounted(() => {
 
 .available-salary .loading-text {
   font-weight: 500;
-  color: #8B5CF6;
+  color: #8b5cf6;
   font-style: italic;
 }
 
-/* 转账部分 */
-.transfer-section {
-  background-color: white;
-  padding: 16px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-
-.transfer-section h3 {
-  margin: 0 0 16px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
 /* 收款人信息 */
 .payee-info {
   display: flex;
@@ -344,7 +443,7 @@ onMounted(() => {
   width: 40px;
   height: 40px;
   border-radius: 20px;
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -387,22 +486,22 @@ onMounted(() => {
 }
 
 .host-tag {
-  background-color: #E0E7FF;
+  background-color: #e0e7ff;
-  color: #5B21B6;
+  color: #5b21b6;
 }
 
 .agency-tag {
-  background-color: #DBEAFE;
+  background-color: #dbeafe;
-  color: #1E40AF;
+  color: #1e40af;
 }
 
 .salary-tag {
-  background-color: #FEF3C7;
+  background-color: #fef3c7;
-  color: #D97706;
+  color: #d97706;
 }
 
 .change-btn {
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   color: white;
   border: none;
   padding: 6px 12px;
@@ -413,30 +512,7 @@ onMounted(() => {
 }
 
 .change-btn:active {
-  background-color: #7C3AED;
+  background-color: #7c3aed;
-}
-
-/* 空状态样式 */
-.empty-payee-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  border: 2px dashed #ddd;
-  border-radius: 12px;
-  margin-bottom: 20px;
-  cursor: pointer;
-  transition: all 0.2s;
-  background-color: #fafafa;
-}
-
-.empty-payee-state:hover {
-  border-color: #8B5CF6;
-  background-color: #f8f5ff;
-}
-
-.empty-payee-state:active {
-  background-color: #f0e6ff;
 }
 
 .search-placeholder {
@@ -457,28 +533,23 @@ onMounted(() => {
 }
 
 /* 金币网格 */
-.coins-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  margin-bottom: 24px;
-}
 
 .coin-item {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
-  padding: 16px 8px;
+  border: 2px solid #e5e7eb;
-  border: 2px solid #e0e0e0;
   border-radius: 12px;
   cursor: pointer;
   transition: all 0.2s;
   background-color: white;
+  aspect-ratio: 1/1;
 }
 
 .coin-item.selected {
-  border-color: #8B5CF6;
+  border-color: #8b5cf6;
-  background-color: #F3F4F6;
+  background-color: #f3f4f6;
 }
 
 .coin-item:active {
@@ -504,24 +575,39 @@ onMounted(() => {
 
 /* 转账按钮 */
 .transfer-btn {
-  width: 100%;
+  width: 70%;
-  padding: 14px;
+
-  background-color: #8B5CF6;
+  padding: 12px;
+  background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
   color: white;
   border: none;
   border-radius: 12px;
-  font-size: 16px;
   font-weight: 600;
-  cursor: pointer;
-  transition: background-color 0.2s;
 }
 
 .transfer-btn:disabled {
-  background-color: #ccc;
+  background: #ccc;
-  cursor: not-allowed;
 }
 
 .transfer-btn:not(:disabled):active {
-  background-color: #7C3AED;
+  background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
 }
 </style>