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

style(春节活动页面): 调整个人充值信息模块的样式

Browse Source
This commit is contained in:
hzj 2026-02-11 17:21:56 +08:00
parent 8af010d81d
commit 2bab935f4e
1 changed files with 78 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/views/Activities/SpringFestival/RechargeReward.vue
View File

@ -1,97 +1,99 @@
<template>
<div style="display: flex; flex-direction: column; gap: 2vw">
<!-- 个人充值信息 -->
<itemCenter
style="z-index: 0"
:imgUrl="imageUrl('earningInfoBg')"
:flip="true"
:contentStyle="`inset:11vw 10vw 9vw 9vw;justify-content: space-between;gap: 10vw;`"
>
<!-- 头像 -->
<img
v-smart-img
:src="myRechargeRecode?.userAvatar || ''"
alt=""
style="
position: relative;
z-index: -1;
width: 23vw;
min-width: 0;
border-radius: 50%;
aspect-ratio: 1/1;
object-fit: cover;
"
@error="handleAvatarImageError"
/>
<!-- 基本信息 -->
<div
style="
position: relative;
flex: 1;
min-width: 0;
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1vw;
"
<div style="padding: 0 4vw">
<itemCenter
style="z-index: 0"
:imgUrl="imageUrl('earningInfoBg')"
:flip="true"
:contentStyle="`inset:11vw 10vw 9vw 9vw;justify-content: space-between;gap: 10vw;`"
>
<!-- 充值帮助按钮 -->
<!-- 头像 -->
<img
v-smart-img
src="/src/assets/icon/helpWhite.png"
:src="myRechargeRecode?.userAvatar || ''"
alt=""
class="ruleBt"
@click="openPopup('rechargeHelp')"
style="
position: relative;
z-index: -1;
width: 23vw;
min-width: 0;
border-radius: 50%;
aspect-ratio: 1/1;
object-fit: cover;
"
@error="handleAvatarImageError"
/>
<!-- 名称 -->
<!-- 基本信息 -->
<div
style="
max-width: 70%;
position: relative;
flex: 1;
min-width: 0;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1vw;
"
>
{{ myRechargeRecode?.userName || '' }}
</div>
<!-- 充值帮助按钮 -->
<img
v-smart-img
src="/src/assets/icon/helpWhite.png"
alt=""
class="ruleBt"
@click="openPopup('rechargeHelp')"
/>
<!-- 账号 -->
<div>{{ $t('user_id_prefix') }} {{ myRechargeRecode?.account }}</div>
<!-- 总充值 -->
<div style="display: flex; justify-content: space-between; align-items: center">
<div>
{{ t('Accumulated recharge') }}:${{
formatRechargeAmount(myRechargeRecode?.totalAmount)
}}
<!-- 名称 -->
<div
style="
max-width: 70%;
min-width: 0;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>
{{ myRechargeRecode?.userName || '' }}
</div>
<img
v-show="rechargehidden"
v-smart-img
:src="imageUrl('rechargeNumHidden')"
alt=""
style="width: 5vw; display: block; object-fit: cover"
@click="rechargehidden = !rechargehidden"
/>
<img
v-show="!rechargehidden"
v-smart-img
:src="imageUrl('rechargeNumShow')"
alt=""
style="width: 5vw; display: block; object-fit: cover"
@click="rechargehidden = !rechargehidden"
/>
<!-- 账号 -->
<div>{{ $t('user_id_prefix') }} {{ myRechargeRecode?.account }}</div>
<!-- 总充值 -->
<div style="display: flex; justify-content: space-between; align-items: center">
<div>
{{ t('Accumulated recharge') }}:${{
formatRechargeAmount(myRechargeRecode?.totalAmount)
}}
</div>
<img
v-show="rechargehidden"
v-smart-img
:src="imageUrl('rechargeNumHidden')"
alt=""
style="width: 5vw; display: block; object-fit: cover"
@click="rechargehidden = !rechargehidden"
/>
<img
v-show="!rechargehidden"
v-smart-img
:src="imageUrl('rechargeNumShow')"
alt=""
style="width: 5vw; display: block; object-fit: cover"
@click="rechargehidden = !rechargehidden"
/>
</div>
</div>
</div>
</itemCenter>
</itemCenter>
</div>
<itemCenter
v-for="(rewardsTop, index) in RechargeRewards"