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