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

---
 src/views/Wallet/Transfer/SearchPayeeView.vue | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/views/Wallet/Transfer/SearchPayeeView.vue b/src/views/Wallet/Transfer/SearchPayeeView.vue
index 330bf77..f14007b 100644
--- a/src/views/Wallet/Transfer/SearchPayeeView.vue
+++ b/src/views/Wallet/Transfer/SearchPayeeView.vue
@@ -87,30 +87,30 @@
             background-color: white;
           "
         >
-          <div style="display: flex; align-items: center; justify-content: space-between">
-            <div style="flex: 1; display: flex; align-items: center; gap: 4px">
+          <div style="display: flex; align-items: center; justify-content: space-between; gap: 4px">
+            <div style="flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px">
               <div
                 style="
                   width: 50px;
                   height: 50px;
-                  border-radius: 25px;
-                  background-color: #8b5cf6;
                   display: flex;
                   align-items: center;
                   justify-content: center;
-                  color: white;
-                  font-weight: 600;
-                  overflow: hidden;
                 "
               >
                 <img
-                  v-if="user.avatar"
-                  :src="user.avatar"
-                  style="width: 100%; height: 100%; object-fit: cover; display: block"
+                  :src="user.avatar || ''"
+                  style="
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    object-fit: cover;
+                    display: block;
+                  "
+                  @error="defaultAvatarUrl"
                 />
-                <span v-else>{{ user.name.charAt(0) }}</span>
               </div>
-              <div class="user-details">
+              <div class="user-details" style="flex: 1; min-width: 0">
                 <h4>{{ user.name }}</h4>
                 <div style="display: flex; align-items: center">
                   <p>ID</p>
@@ -250,6 +250,12 @@ const selectedUserType = ref('')
 const maskLayerShow = ref(false)
 const selectedUser = ref({})
 
+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 checkUserRole = async () => {
   isLoadingRole.value = true
@@ -439,6 +445,10 @@ onMounted(() => {
   font-size: 16px;
   font-weight: 700;
   margin-bottom: 4px;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .user-details p {