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
v-for="(rewardsTop, index) in showRewardsTop3"
style=""
:style="{ minHeight: index < 3 ? '112.26vw' : '142.39vw' }"
style="min-height: 112.26vw"
:imgUrl="imageUrl(`rewardTop${index + 1}`)"
:contentStyle="`
inset: 30vw 9vw 14vw;
inset: 31vw 7vw 21vw;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap:2vw 4vw;
gap:6vw 4vw;
`"
>
<div
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
:src="reward.cover || ''"
alt=""
width="70%"
style="
display: block;
min-width: 0;
width: 80%;
height: 100%;
object-fit: contain;
"
@error="(e) => handleRewardImageError(e, reward.type)"
/>
</itemCenter>
</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) }}
</div>
</div>
@ -2587,11 +2617,11 @@ const rewardContentLayer = (index) => {
gridStyle = 'direction: ltr;'
}
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) {
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) {
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}`
}
}