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

feat(斋月活动页): 添加背景图片最小高度

Browse Source
This commit is contained in:
hzj 2026-02-27 16:42:58 +08:00
parent 43c953b72c
commit 2534f7f643
2 changed files with 79 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Activities/LuckyDollars/Season3/components/topUser.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div style="width: 100%"> <div style="width: 100%">
<div style="position: relative"> <div style="position: relative" :style="{ minHeight: ranking == '1' ? '62.68vw' : '46.50vw' }">
<img <img
v-smart-img v-smart-img
:src="BorderImgUrl" :src="BorderImgUrl"

143
src/views/Activities/LuckyDollars/Season3/index.vue
View File

@ -29,61 +29,61 @@
></Barrage> ></Barrage>
<!-- 切换按钮 --> <!-- 切换按钮 -->
<div> <div
<div style="display: flex; justify-content: space-around; margin-top: 2vw"> style="min-height: 14.3vw; display: flex; justify-content: space-around; margin-top: 2vw"
<!-- 排行榜按钮 --> >
<div style="width: 30%; position: relative" @click="handleBt('ranking')"> <!-- 排行榜按钮 -->
<img <div style="width: 30%; position: relative" @click="handleBt('ranking')">
v-show="!rankingShow" <img
v-smart-img v-show="!rankingShow"
:src="imageUrl(getImgName('rankBt'))" v-smart-img
alt="" :src="imageUrl(getImgName('rankBt'))"
style="display: block; width: 100%" alt=""
/> style="display: block; width: 100%"
<img />
v-show="rankingShow" <img
v-smart-img v-show="rankingShow"
:src="imageUrl(getImgName('rankBtActive'))" v-smart-img
alt="" :src="imageUrl(getImgName('rankBtActive'))"
style="display: block; width: 100%" alt=""
/> style="display: block; width: 100%"
</div> />
</div>
<!-- 抽奖按钮 --> <!-- 抽奖按钮 -->
<div style="width: 30%; position: relative" @click="handleBt('lottery')"> <div style="width: 30%; position: relative" @click="handleBt('lottery')">
<img <img
v-show="!lotteryShow" v-show="!lotteryShow"
v-smart-img v-smart-img
:src="imageUrl(getImgName('lotteryBt'))" :src="imageUrl(getImgName('lotteryBt'))"
alt="" alt=""
style="display: block; width: 100%" style="display: block; width: 100%"
/> />
<img <img
v-show="lotteryShow" v-show="lotteryShow"
v-smart-img v-smart-img
:src="imageUrl(getImgName('lotteryBtActive'))" :src="imageUrl(getImgName('lotteryBtActive'))"
alt="" alt=""
style="display: block; width: 100%" style="display: block; width: 100%"
/> />
</div> </div>
<!-- 收益按钮 --> <!-- 收益按钮 -->
<div style="width: 30%; position: relative" @click="handleBt('withdrawal')"> <div style="width: 30%; position: relative" @click="handleBt('withdrawal')">
<img <img
v-show="!incomeShow" v-show="!incomeShow"
v-smart-img v-smart-img
:src="imageUrl(getImgName('withdrawalBt'))" :src="imageUrl(getImgName('withdrawalBt'))"
alt="" alt=""
style="display: block; width: 100%" style="display: block; width: 100%"
/> />
<img <img
v-show="incomeShow" v-show="incomeShow"
v-smart-img v-smart-img
:src="imageUrl(getImgName('withdrawalBtActive'))" :src="imageUrl(getImgName('withdrawalBtActive'))"
alt="" alt=""
style="display: block; width: 100%" style="display: block; width: 100%"
/> />
</div>
</div> </div>
</div> </div>
@ -92,7 +92,7 @@
<!-- 排行榜模块 --> <!-- 排行榜模块 -->
<div v-show="rankingShow"> <div v-show="rankingShow">
<!-- 每周礼物 --> <!-- 每周礼物 -->
<itemCenter :imgUrl="imageUrl(getImgName('eventGiftsBg'))"> <itemCenter style="min-height: 72vw" :imgUrl="imageUrl(getImgName('eventGiftsBg'))">
<div <div
style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%" style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%"
> >
@ -101,7 +101,7 @@
:key="index" :key="index"
style="width: 30%; display: flex; flex-direction: column" style="width: 30%; display: flex; flex-direction: column"
> >
<itemCenter :imgUrl="imageUrl('giftBg')"> <itemCenter style="min-height: 24vw" :imgUrl="imageUrl('giftBg')">
<img :src="gift.giftPhoto" alt="" width="50%" /> <img :src="gift.giftPhoto" alt="" width="50%" />
</itemCenter> </itemCenter>
<div <div
@ -123,6 +123,7 @@
<!-- 总排行榜前三 --> <!-- 总排行榜前三 -->
<itemCenter <itemCenter
style="min-height: 110.33vw"
:imgUrl="imageUrl(getImgName('overallRankingBg'))" :imgUrl="imageUrl(getImgName('overallRankingBg'))"
:contentStyle="`inset: 15vw 4vw 5vw;flex-direction: column;`" :contentStyle="`inset: 15vw 4vw 5vw;flex-direction: column;`"
> >
@ -190,9 +191,10 @@
</itemCenter> </itemCenter>
<!-- 倒计时 --> <!-- 倒计时 -->
<div class="timeBox"> <div class="timeBox" style="min-height: 16vw">
<div style="width: 30%"> <div style="width: 30%">
<itemCenter <itemCenter
style="min-height: 16vw"
:imgUrl="imageUrl('timeDayBg')" :imgUrl="imageUrl('timeDayBg')"
:contentStyle="`left:3vw;right: auto;top:1vw;bottom:auto;width: 10vw;height: 11vw;`" :contentStyle="`left:3vw;right: auto;top:1vw;bottom:auto;width: 10vw;height: 11vw;`"
> >
@ -201,19 +203,19 @@
</div> </div>
<div class="timeText timeGap"></div> <div class="timeText timeGap"></div>
<div style="width: 13%"> <div style="width: 13%">
<itemCenter :imgUrl="imageUrl('timeBg')"> <itemCenter style="min-height: 13.25vw" :imgUrl="imageUrl('timeBg')">
<div class="timeText" style="">{{ Hours }}</div> <div class="timeText" style="">{{ Hours }}</div>
</itemCenter> </itemCenter>
</div> </div>
<div class="timeText timeGap">:</div> <div class="timeText timeGap">:</div>
<div style="width: 13%"> <div style="width: 13%">
<itemCenter :imgUrl="imageUrl('timeBg')"> <itemCenter style="min-height: 13.25vw" :imgUrl="imageUrl('timeBg')">
<div class="timeText" style="">{{ Minutes }}</div> <div class="timeText" style="">{{ Minutes }}</div>
</itemCenter> </itemCenter>
</div> </div>
<div class="timeText timeGap">:</div> <div class="timeText timeGap">:</div>
<div style="width: 13%"> <div style="width: 13%">
<itemCenter :imgUrl="imageUrl('timeBg')"> <itemCenter style="min-height: 13.25vw" :imgUrl="imageUrl('timeBg')">
<div class="timeText" style="">{{ Second }}</div> <div class="timeText" style="">{{ Second }}</div>
</itemCenter> </itemCenter>
</div> </div>
@ -245,7 +247,7 @@
v-smart-img v-smart-img
:src="imageUrl(getImgName('RankingTopBorder'))" :src="imageUrl(getImgName('RankingTopBorder'))"
alt="" alt=""
style="display: block; width: 100%; min-width: 0" style="min-height: 46.66vw; display: block; width: 100%; min-width: 0"
/> />
<!-- 边框中部占位 --> <!-- 边框中部占位 -->
<div style="flex: 1; min-width: 0"></div> <div style="flex: 1; min-width: 0"></div>
@ -254,7 +256,7 @@
v-smart-img v-smart-img
:src="imageUrl('RankingBottomBorder')" :src="imageUrl('RankingBottomBorder')"
alt="" alt=""
style="display: block; width: 100%; min-width: 0" style="min-height: 25vw; display: block; width: 100%; min-width: 0"
/> />
<!-- 边框中部 --> <!-- 边框中部 -->
@ -293,6 +295,7 @@
> >
<!-- 基本信息 --> <!-- 基本信息 -->
<itemCenter <itemCenter
style="min-height: 20.33vw"
:imgUrl="imageUrl(index < 3 ? `itemTop${index + 1}Bg` : 'itemFrom4Bg')" :imgUrl="imageUrl(index < 3 ? `itemTop${index + 1}Bg` : 'itemFrom4Bg')"
:contentStyle="`padding: 0 2vw`" :contentStyle="`padding: 0 2vw`"
:lazy="true" :lazy="true"
@ -457,6 +460,7 @@
<!-- 前10名奖励 --> <!-- 前10名奖励 -->
<itemCenter <itemCenter
style="min-height: 8.33vw"
:imgUrl="imageUrl('itemTopRewardBg')" :imgUrl="imageUrl('itemTopRewardBg')"
:contentStyle="`padding:0 2vw 0 11vw`" :contentStyle="`padding:0 2vw 0 11vw`"
:lazy="true" :lazy="true"
@ -505,6 +509,7 @@
style="position: relative; z-index: 2" style="position: relative; z-index: 2"
> >
<itemCenter <itemCenter
style="min-height: 20.33vw"
:imgUrl="imageUrl('itemFrom4Bg')" :imgUrl="imageUrl('itemFrom4Bg')"
:contentStyle="`padding: 0 2vw`" :contentStyle="`padding: 0 2vw`"
@click="viewUserInfo(listItem.userId)" @click="viewUserInfo(listItem.userId)"
@ -662,7 +667,7 @@
<!-- 奖池 --> <!-- 奖池 -->
<itemCenter <itemCenter
style="margin-top: 6vw" style="min-height: 100.66vw; margin-top: 6vw"
:imgUrl="imageUrl('lottery')" :imgUrl="imageUrl('lottery')"
:contentStyle="` :contentStyle="`
inset: 10vw; inset: 10vw;
@ -782,7 +787,10 @@
</div> </div>
<!-- 抽奖按钮 --> <!-- 抽奖按钮 -->
<div style="display: flex; justify-content: center; gap: 4vw" class="drawBts"> <div
style="min-height: 19.05vw; display: flex; justify-content: center; gap: 4vw"
class="drawBts"
>
<!-- 单抽 --> <!-- 单抽 -->
<img <img
v-smart-img v-smart-img
@ -1550,7 +1558,7 @@
<!-- 我的排名 --> <!-- 我的排名 -->
<itemCenter <itemCenter
v-show="rankingShow" v-show="rankingShow"
style="position: fixed; bottom: -1px; z-index: 3" style="min-height: 22.33vw; position: fixed; bottom: -1px; z-index: 3"
:imgUrl="imageUrl('myRankingBg')" :imgUrl="imageUrl('myRankingBg')"
:contentStyle="`padding: 1vw 3vw 0`" :contentStyle="`padding: 1vw 3vw 0`"
> >
@ -1648,9 +1656,10 @@
" "
@click="closedPopup" @click="closedPopup"
> >
<!-- 前三名奖励展示 --> <!-- 前10名奖励展示 -->
<div v-show="topRewardShow" style="width: 90%; position: relative" @click.stop> <div v-show="topRewardShow" style="width: 90%; position: relative" @click.stop>
<itemCenter <itemCenter
style="min-height: 90.32vw"
:imgUrl="imageUrl(getImgName('rewardBg'))" :imgUrl="imageUrl(getImgName('rewardBg'))"
:contentStyle="`padding: 22vw 6vw 11vw;flex-direction: column;gap: 2vw;`" :contentStyle="`padding: 22vw 6vw 11vw;flex-direction: column;gap: 2vw;`"
> >
@ -1687,6 +1696,7 @@
<!-- 抽奖结果 --> <!-- 抽奖结果 -->
<div v-show="resultShow" style="position: relative; width: 90%" @click.stop> <div v-show="resultShow" style="position: relative; width: 90%" @click.stop>
<itemCenter <itemCenter
style="min-height: 90.24vw"
:imgUrl="imageUrl('resultBg')" :imgUrl="imageUrl('resultBg')"
:contentStyle="`inset: 20vw 7vw 8vw; :contentStyle="`inset: 20vw 7vw 8vw;
flex-direction: column; flex-direction: column;
@ -1784,6 +1794,7 @@
<!-- 中奖历史 --> <!-- 中奖历史 -->
<div v-show="historyShow" style="position: relative; width: 95%" @click.stop> <div v-show="historyShow" style="position: relative; width: 95%" @click.stop>
<itemCenter <itemCenter
style="min-height: 95.25vw"
:imgUrl="imageUrl(getImgName('historyBg'))" :imgUrl="imageUrl(getImgName('historyBg'))"
:contentStyle="`padding: 22vw 6vw 11vw;`" :contentStyle="`padding: 22vw 6vw 11vw;`"
> >
@ -1843,6 +1854,7 @@
<!-- 排行榜帮助弹窗 --> <!-- 排行榜帮助弹窗 -->
<div v-show="rankingHelpShow" @click.stop> <div v-show="rankingHelpShow" @click.stop>
<itemCenter <itemCenter
style="min-height: 158.93vw"
:imgUrl="imageUrl('rankingHelpBg_ar')" :imgUrl="imageUrl('rankingHelpBg_ar')"
:contentStyle="`inset: 26vw 6vw 13vw;overflow-y: auto;display:block;`" :contentStyle="`inset: 26vw 6vw 13vw;overflow-y: auto;display:block;`"
> >
@ -1858,6 +1870,7 @@
<!-- 总榜前三规则弹窗 --> <!-- 总榜前三规则弹窗 -->
<div v-show="top3HelpShow" @click.stop> <div v-show="top3HelpShow" @click.stop>
<itemCenter <itemCenter
style="min-height: 158.93vw"
:imgUrl="imageUrl('top3HelpBg_ar')" :imgUrl="imageUrl('top3HelpBg_ar')"
:contentStyle="`inset: 26vw 6vw 13vw;overflow-y: auto;display:block;`" :contentStyle="`inset: 26vw 6vw 13vw;overflow-y: auto;display:block;`"
> >