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-03-19 19:19:12 +08:00
parent 613f6f613f
commit 57df7a8f05
1 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/views/Activities/LesserBairam/index.vue
View File

@ -500,36 +500,66 @@
> >
<itemCenter <itemCenter
v-for="(rewardsTop, index) in showRewardsTop3" v-for="(rewardsTop, index) in showRewardsTop3"
style="" style="min-height: 112.26vw"
:style="{ minHeight: index < 3 ? '112.26vw' : '142.39vw' }"
:imgUrl="imageUrl(`rewardTop${index + 1}`)" :imgUrl="imageUrl(`rewardTop${index + 1}`)"
:contentStyle="` :contentStyle="`
inset: 30vw 9vw 14vw; inset: 31vw 7vw 21vw;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
gap:2vw 4vw; gap:6vw 4vw;
`" `"
> >
<div <div
v-for="(reward, index) in rewardsTop.rewards" v-for="(reward, index) in rewardsTop.rewards"
style="height: 100%; display: flex; flex-direction: column; align-items: center" style="
height: 100%;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
"
> >
<!-- 奖励图 --> <!-- 奖品图 -->
<itemCenter style="min-height: 27.13vw; width: 100%" :imgUrl="imageUrl('giftBg')"> <div
style="
width: 80%;
height: 75%;
padding: 6vw 0 2vw;
min-width: 0;
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- 奖励图片 -->
<img <img
:src="reward.cover || ''" :src="reward.cover || ''"
alt="" alt=""
width="70%" style="
display: block;
min-width: 0;
width: 80%;
height: 100%;
object-fit: contain;
"
@error="(e) => handleRewardImageError(e, reward.type)" @error="(e) => handleRewardImageError(e, reward.type)"
/> />
</itemCenter> </div>
<!-- 奖励信息 --> <!-- 数值 -->
<div <div
style="display: flex; justify-content: center; align-items: center; gap: 2px" style="
width: 80%;
height: 5.5vw;
display: flex;
justify-content: center;
align-items: center;
"
> >
<div style="font-weight: 700; color: #f9e447"> <div style="min-width: 0; font-size: 1em; font-weight: 590; color: #fff">
{{ formatRewardDisplay(reward.type, reward) }} {{ formatRewardDisplay(reward.type, reward) }}
</div> </div>
</div> </div>
@ -2587,11 +2617,11 @@ const rewardContentLayer = (index) => {
gridStyle = 'direction: ltr;' gridStyle = 'direction: ltr;'
} }
if (index == 0) { if (index == 0) {
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 5vw 26vw 8vw;${gridStyle}` return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 7vw 26vw 7vw;${gridStyle}`
} else if (index == 1 || index == 2) { } else if (index == 1 || index == 2) {
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 5vw 26vw 8vw;${gridStyle}` return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 7vw 26vw 7vw;${gridStyle}`
} else if (index == 3 || index == 4 || index == 5) { } else if (index == 3 || index == 4 || index == 5) {
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 5vw 26vw 8vw;${gridStyle}` return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 7vw 26vw 7vw;${gridStyle}`
} }
} }