hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(招募金币代理页面): 修复名称过长挤压其他内容的bug

Browse Source
This commit is contained in:
hzj 2025-11-28 16:43:46 +08:00
parent 0d55fc76e1
commit d664d74f02
1 changed files with 43 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/views/RechargeAgency/Recruit.vue
View File

@ -23,10 +23,10 @@
>
<!-- 头部 -->
<div style="display: flex; gap: 4px; align-items: flex-end; margin: 0 12px 12px">
<div style="font-size: 0.7em; font-weight: 700">Want To Become A Recharge Agency?</div>
<div style="font-size: 0.8em; font-weight: 700">Want To Become A Recharge Agency?</div>
<div
style="
font-size: 0.7em;
font-size: 0.9em;
color: #ff3e13;
font-weight: 700;
border-bottom: 1px solid #ff3e13;
@ -56,11 +56,20 @@
>
<!-- 基本信息 -->
<div style="display: flex; gap: 4px">
<div style="width: 15%; display: flex; align-items: center">
<!-- 头像 -->
<div
style="
width: 15%;
min-width: 0;
align-self: stretch;
display: flex;
align-items: center;
"
>
<img
:src="FreightAgency.userBaseInfo.userAvatar"
alt=""
@error="defaultAvatarUrl"
style="
display: block;
width: 100%;
@ -68,22 +77,44 @@
aspect-ratio: 1/1;
object-fit: cover;
"
@error="defaultAvatarUrl"
/>
</div>
<!-- 身份信息 -->
<div
style="
width: 80%;
flex: 1;
min-width: 0;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 4px;
"
>
<!-- 基本信息 -->
<div style="display: flex; align-items: center; gap: 4px">
<!-- 国家 -->
<img :src="FreightAgency.ownNationalFlag" alt="" width="8%" style="display: block" />
<div style="font-weight: 700">{{ FreightAgency.userBaseInfo.userNickname }}</div>
<!-- 用户名 -->
<div
style="
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
{{ FreightAgency.userBaseInfo.userNickname }}
</div>
</div>
<!-- 身份 -->
<div style="display: flex; align-items: center; gap: 4px">
<!-- 账号 -->
<div style="position: relative; width: 30%">
<img :src="images.idBg" alt="" width="100%" style="display: block" />
<div
@ -126,6 +157,8 @@
/>
</div>
</div>
<!-- 身份标识 -->
<img
src="../../assets/icon/identity/coinSeller.png"
alt=""
@ -135,6 +168,7 @@
</div>
</div>
</div>
<!-- 代理信息 -->
<div>
<!-- 财力展示 -->
@ -179,6 +213,7 @@
{{ FreightAgency.contactInfo || '' }}
</div>
</div>
<!-- 按钮 -->
<div style="display: flex; justify-content: space-between">
<!-- 关注按钮 -->
@ -545,13 +580,13 @@ onMounted(() => {
@media screen and (max-width: 360px) {
* {
font-size: 12px;
font-size: 10px;
}
}
@media screen and (min-width: 360px) {
* {
font-size: 16px;
font-size: 12px;
}
}