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="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="flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px">
<!-- 头像 -->
<div <div
style=" style="
width: 3.5em; width: 3.5em;
@ -109,6 +110,8 @@
@error="handleAvatarImageError" @error="handleAvatarImageError"
/> />
</div> </div>
<!-- 账号信息 -->
<div <div
style=" style="
flex: 1; flex: 1;

View File

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