style(搜索代理页): 修复名称过长挤压其他内容的问题

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="display: flex; align-items: center; justify-content: space-between; gap: 4px">
-            <div style="flex: 1; display: flex; align-items: center; 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 || ''"
-                  :src="user.avatar"
+                  style="
-                  style="width: 100%; height: 100%; object-fit: cover; display: block"
+                    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 {