From da55af6a87ee777b1ab7d6f0fbb5dd4c29bf466a Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Mon, 24 Nov 2025 10:41:46 +0800
Subject: [PATCH] =?UTF-8?q?style(=E8=BD=AC=E8=B4=A6=E9=A1=B5):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E9=95=BF=E5=90=8D=E7=A7=B0=E6=8C=A4=E5=8E=8B=E5=85=B6?=
 =?UTF-8?q?=E4=BB=96=E5=86=85=E5=AE=B9=E7=9A=84=E6=A0=B7=E5=BC=8F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Wallet/Transfer/Transfer.vue | 246 +++++--------------------
 1 file changed, 44 insertions(+), 202 deletions(-)

diff --git a/src/views/Wallet/Transfer/Transfer.vue b/src/views/Wallet/Transfer/Transfer.vue
index d3e8254..1f91716 100644
--- a/src/views/Wallet/Transfer/Transfer.vue
+++ b/src/views/Wallet/Transfer/Transfer.vue
@@ -11,6 +11,7 @@
     <div class="content">
       <!-- 信息部分 -->
       <div>
+        <!-- 标题 -->
         <div
           style="
             display: flex;
@@ -31,6 +32,8 @@
             />
           </div>
         </div>
+
+        <!-- 信息内容 -->
         <div
           style="
             background-color: white;
@@ -50,7 +53,9 @@
 
       <!-- 转账对象 -->
       <div>
+        <!-- 标题 -->
         <div style="font-weight: 600; margin-bottom: 10px">{{ t('transfer_to_others') }}</div>
+        <!-- 对象内容 -->
         <div
           style="
             background-color: white;
@@ -65,52 +70,54 @@
             cursor: pointer;
           "
         >
-          <!-- 用户信息 -->
+          <!-- 有用户信息 -->
           <div v-if="selectedPayee.id" style="width: 100%">
             <!-- 头像信息 -->
-            <div style="display: flex; align-items: center; margin-bottom: 12px">
+            <div style="display: flex; align-items: center; gap: 4px; 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;
-
+                  width: 15%;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                 "
               >
                 <img
-                  v-if="selectedPayee.avatar"
-                  :src="selectedPayee.avatar"
+                  v-smart-img
+                  :src="selectedPayee.avatar || ''"
                   :alt="selectedPayee.name"
-                  style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%"
+                  style="
+                    display: block;
+                    width: 100%;
+                    aspect-ratio: 1/1;
+                    border-radius: 50%;
+                    object-fit: cover;
+                  "
+                  @error="defaultAvatarUrl"
                 />
-                <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">
+              <div style="flex: 1; min-width: 0">
+                <div
+                  style="
+                    margin-bottom: 4px;
+                    font-weight: 600;
+                    color: #333;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
                   {{ selectedPayee.name }}
                 </div>
-                <div style="margin: 0; display: flex; align-items: center">
-                  <p style="font-size: 14px; color: #666">ID</p>
-                  <p style="font-size: 14px; color: #666">:</p>
-                  <p style="font-size: 14px; color: #666">
-                    {{ selectedPayee.account || selectedPayee.id }}
-                  </p>
+                <div style="font-size: 0.9em; color: #666">
+                  ID:{{ selectedPayee.account || selectedPayee.id }}
                 </div>
               </div>
+
               <!-- 换人按钮 -->
               <button
                 style="
@@ -126,8 +133,9 @@
                 {{ t('change') }}
               </button>
             </div>
-            <!-- 身份 -->
-            <div style="margin-left: 62px; height: 20px; display: flex; gap: 5px">
+
+            <!-- 身份标识 -->
+            <div style="margin-left: 10%; height: 20px; display: flex">
               <img
                 src="../../../assets/icon/identity/coinSeller.png"
                 alt=""
@@ -227,6 +235,12 @@ const selectedPayee = reactive({
   hasSalary: false,
 })
 
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
 // 初始化收款人信息
 const initializePayee = () => {
   const savedPayee = getSelectedPayee()
@@ -399,174 +413,7 @@ onUnmounted(() => {
   z-index: 2;
 }
 
-/* 信息部分 */
-.info-section {
-  background-color: white;
-  padding: 16px;
-  border-radius: 12px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.info-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.info-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.details-btn {
-  background: none;
-  border: none;
-  color: #666;
-  font-size: 14px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.available-salary {
-  font-size: 14px;
-  color: #666;
-}
-
-.available-salary .amount {
-  font-weight: 600;
-  color: #333;
-}
-
-.available-salary .loading-text {
-  font-weight: 500;
-  color: #8b5cf6;
-  font-style: italic;
-}
-
-/* 收款人信息 */
-.payee-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  border: 1px solid #e0e0e0;
-  border-radius: 12px;
-  margin-bottom: 20px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.payee-info:active {
-  background-color: #f9f9f9;
-}
-
-.payee-details {
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-
-.payee-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-  background-color: #8b5cf6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 16px;
-  font-weight: 600;
-  margin-right: 12px;
-  overflow: hidden;
-}
-
-.payee-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.payee-text h4 {
-  margin: 0 0 4px 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-}
-
-.payee-text p {
-  margin: 0 0 8px 0;
-  font-size: 12px;
-  color: #666;
-}
-
-.payee-tags {
-  display: flex;
-  gap: 4px;
-}
-
-.tag {
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 10px;
-  font-weight: 600;
-}
-
-.host-tag {
-  background-color: #e0e7ff;
-  color: #5b21b6;
-}
-
-.agency-tag {
-  background-color: #dbeafe;
-  color: #1e40af;
-}
-
-.salary-tag {
-  background-color: #fef3c7;
-  color: #d97706;
-}
-
-.change-btn {
-  background-color: #8b5cf6;
-  color: white;
-  border: none;
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.change-btn:active {
-  background-color: #7c3aed;
-}
-
-.search-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  color: #666;
-}
-
-.search-icon {
-  font-size: 24px;
-}
-
-.search-placeholder span {
-  font-size: 14px;
-  font-weight: 500;
-}
-
 /* 金币网格 */
-
 .coin-item {
   display: flex;
   flex-direction: column;
@@ -656,13 +503,8 @@ onUnmounted(() => {
 }
 
 /* RTL支持 */
-[dir='rtl'] .payee-avatar {
-  margin-right: 0;
-  margin-left: 12px;
-}
-
-[dir='rtl'] .change-btn {
+/* [dir='rtl'] .change-btn {
   margin-left: 0;
   margin-right: 12px;
-}
+} */
 </style>