style(钱包操作页): 转账对象模块样式调整

This commit is contained in:
hzj 2025-12-12 11:30:24 +08:00
parent ed06b53d72
commit 5370596832
2 changed files with 40 additions and 21 deletions

View File

@ -87,6 +87,7 @@
<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: 3.5em;
@ -109,6 +110,8 @@
@error="handleAvatarImageError"
/>
</div>
<!-- 账号信息 -->
<div
style="
flex: 1;

View File

@ -103,7 +103,7 @@
aspectRatio: '1/1',
}"
>
<img src="../../assets/icon/coin.png" alt="" style="width: 40%" />
<img src="../../assets/icon/coin.png" alt="" style="width: 2.5em" />
<div style="font-weight: 500; color: #373232">
<!-- {{ option.coins }} -->
</div>
@ -158,14 +158,14 @@
>
<!-- 用户信息 -->
<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">
<!-- 头像 -->
<div
style="
width: 50px;
height: 50px;
margin-right: 12px;
width: 3.5em;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
@ -176,55 +176,71 @@
:alt="selectedPayee.name"
style="
display: block;
object-fit: cover;
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
"
@error="handleAvatarImageError"
/>
</div>
<!-- 个人信息 -->
<div style="flex: 1; min-width: 0">
<!-- 账号信息 -->
<div
style="
flex: 1;
min-width: 0;
align-self: stretch;
display: flex;
flex-direction: column;
gap: 4px;
"
>
<div
style="
margin: 0 0 4px 0;
font-size: 16px;
font-weight: 600;
color: #333;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
"
>
{{ selectedPayee.name }}
</div>
<div style="margin: 0; font-size: 14px; color: #666">
<div style="font-size: 0.9em; font-weight: 500; color: rgba(0, 0, 0, 0.4)">
{{ t('user_id_prefix') }} {{ selectedPayee.account || selectedPayee.id }}
</div>
</div>
<!-- 换人按钮 -->
<button
style="
border-radius: 12px;
border: 1px solid #e6e6e6;
width: auto;
background-color: transparent;
color: rgba(0, 0, 0, 0.4);
border: 1px solid #e6e6e6;
border-radius: 12px;
font-size: 0.9em;
font-weight: 500;
padding: 2px 8px;
background: none;
cursor: pointer;
"
@click="searchPayee"
>
{{ t('change') }}
</button>
</div>
<!-- 身份 -->
<div style="margin-left: 62px; height: 20px; display: flex; gap: 5px">
<div style="margin-top: 4px; margin-left: 3em; height: 20px">
<img
src="../../assets/icon/identity/coinSeller.png"
alt=""
height="100%"
style="display: block"
style="display: block; object-fit: cover"
/>
</div>
</div>
@ -276,7 +292,7 @@
aspectRatio: '1/1',
}"
>
<img src="../../assets/icon/coin.png" alt="" style="width: 40%" />
<img src="../../assets/icon/coin.png" alt="" style="width: 2.5em" />
<div style="font-weight: 500; color: #373232">
<!-- {{ coin.amount }} -->
</div>