feat(斋月活动页): 添加背景图片最小高度
This commit is contained in:
hzj
parent
43c953b72c
commit
2534f7f643
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<div style="position: relative">
|
||||
<div style="position: relative" :style="{ minHeight: ranking == '1' ? '62.68vw' : '46.50vw' }">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="BorderImgUrl"
|
||||
|
||||
@ -29,61 +29,61 @@
|
||||
></Barrage>
|
||||
|
||||
<!-- 切换按钮 -->
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
|
||||
<!-- 排行榜按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="handleBt('ranking')">
|
||||
<img
|
||||
v-show="!rankingShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rankBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="rankingShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rankBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="min-height: 14.3vw; display: flex; justify-content: space-around; margin-top: 2vw"
|
||||
>
|
||||
<!-- 排行榜按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="handleBt('ranking')">
|
||||
<img
|
||||
v-show="!rankingShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rankBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="rankingShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rankBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 抽奖按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="handleBt('lottery')">
|
||||
<img
|
||||
v-show="!lotteryShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('lotteryBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="lotteryShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('lotteryBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
<!-- 抽奖按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="handleBt('lottery')">
|
||||
<img
|
||||
v-show="!lotteryShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('lotteryBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="lotteryShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('lotteryBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 收益按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="handleBt('withdrawal')">
|
||||
<img
|
||||
v-show="!incomeShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('withdrawalBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="incomeShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('withdrawalBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
<!-- 收益按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="handleBt('withdrawal')">
|
||||
<img
|
||||
v-show="!incomeShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('withdrawalBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="incomeShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('withdrawalBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -92,7 +92,7 @@
|
||||
<!-- 排行榜模块 -->
|
||||
<div v-show="rankingShow">
|
||||
<!-- 每周礼物 -->
|
||||
<itemCenter :imgUrl="imageUrl(getImgName('eventGiftsBg'))">
|
||||
<itemCenter style="min-height: 72vw" :imgUrl="imageUrl(getImgName('eventGiftsBg'))">
|
||||
<div
|
||||
style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%"
|
||||
>
|
||||
@ -101,7 +101,7 @@
|
||||
:key="index"
|
||||
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%" />
|
||||
</itemCenter>
|
||||
<div
|
||||
@ -123,6 +123,7 @@
|
||||
|
||||
<!-- 总排行榜前三 -->
|
||||
<itemCenter
|
||||
style="min-height: 110.33vw"
|
||||
:imgUrl="imageUrl(getImgName('overallRankingBg'))"
|
||||
:contentStyle="`inset: 15vw 4vw 5vw;flex-direction: column;`"
|
||||
>
|
||||
@ -190,9 +191,10 @@
|
||||
</itemCenter>
|
||||
|
||||
<!-- 倒计时 -->
|
||||
<div class="timeBox">
|
||||
<div class="timeBox" style="min-height: 16vw">
|
||||
<div style="width: 30%">
|
||||
<itemCenter
|
||||
style="min-height: 16vw"
|
||||
:imgUrl="imageUrl('timeDayBg')"
|
||||
:contentStyle="`left:3vw;right: auto;top:1vw;bottom:auto;width: 10vw;height: 11vw;`"
|
||||
>
|
||||
@ -201,19 +203,19 @@
|
||||
</div>
|
||||
<div class="timeText timeGap"></div>
|
||||
<div style="width: 13%">
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||
<itemCenter style="min-height: 13.25vw" :imgUrl="imageUrl('timeBg')">
|
||||
<div class="timeText" style="">{{ Hours }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
<div class="timeText timeGap">:</div>
|
||||
<div style="width: 13%">
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||
<itemCenter style="min-height: 13.25vw" :imgUrl="imageUrl('timeBg')">
|
||||
<div class="timeText" style="">{{ Minutes }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
<div class="timeText timeGap">:</div>
|
||||
<div style="width: 13%">
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||
<itemCenter style="min-height: 13.25vw" :imgUrl="imageUrl('timeBg')">
|
||||
<div class="timeText" style="">{{ Second }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
@ -245,7 +247,7 @@
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('RankingTopBorder'))"
|
||||
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>
|
||||
@ -254,7 +256,7 @@
|
||||
v-smart-img
|
||||
:src="imageUrl('RankingBottomBorder')"
|
||||
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
|
||||
style="min-height: 20.33vw"
|
||||
:imgUrl="imageUrl(index < 3 ? `itemTop${index + 1}Bg` : 'itemFrom4Bg')"
|
||||
:contentStyle="`padding: 0 2vw`"
|
||||
:lazy="true"
|
||||
@ -457,6 +460,7 @@
|
||||
|
||||
<!-- 前10名奖励 -->
|
||||
<itemCenter
|
||||
style="min-height: 8.33vw"
|
||||
:imgUrl="imageUrl('itemTopRewardBg')"
|
||||
:contentStyle="`padding:0 2vw 0 11vw`"
|
||||
:lazy="true"
|
||||
@ -505,6 +509,7 @@
|
||||
style="position: relative; z-index: 2"
|
||||
>
|
||||
<itemCenter
|
||||
style="min-height: 20.33vw"
|
||||
:imgUrl="imageUrl('itemFrom4Bg')"
|
||||
:contentStyle="`padding: 0 2vw`"
|
||||
@click="viewUserInfo(listItem.userId)"
|
||||
@ -662,7 +667,7 @@
|
||||
|
||||
<!-- 奖池 -->
|
||||
<itemCenter
|
||||
style="margin-top: 6vw"
|
||||
style="min-height: 100.66vw; margin-top: 6vw"
|
||||
:imgUrl="imageUrl('lottery')"
|
||||
:contentStyle="`
|
||||
inset: 10vw;
|
||||
@ -782,7 +787,10 @@
|
||||
</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
|
||||
v-smart-img
|
||||
@ -1550,7 +1558,7 @@
|
||||
<!-- 我的排名 -->
|
||||
<itemCenter
|
||||
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')"
|
||||
:contentStyle="`padding: 1vw 3vw 0`"
|
||||
>
|
||||
@ -1648,9 +1656,10 @@
|
||||
"
|
||||
@click="closedPopup"
|
||||
>
|
||||
<!-- 前三名奖励展示 -->
|
||||
<!-- 前10名奖励展示 -->
|
||||
<div v-show="topRewardShow" style="width: 90%; position: relative" @click.stop>
|
||||
<itemCenter
|
||||
style="min-height: 90.32vw"
|
||||
:imgUrl="imageUrl(getImgName('rewardBg'))"
|
||||
: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>
|
||||
<itemCenter
|
||||
style="min-height: 90.24vw"
|
||||
:imgUrl="imageUrl('resultBg')"
|
||||
:contentStyle="`inset: 20vw 7vw 8vw;
|
||||
flex-direction: column;
|
||||
@ -1784,6 +1794,7 @@
|
||||
<!-- 中奖历史 -->
|
||||
<div v-show="historyShow" style="position: relative; width: 95%" @click.stop>
|
||||
<itemCenter
|
||||
style="min-height: 95.25vw"
|
||||
:imgUrl="imageUrl(getImgName('historyBg'))"
|
||||
:contentStyle="`padding: 22vw 6vw 11vw;`"
|
||||
>
|
||||
@ -1843,6 +1854,7 @@
|
||||
<!-- 排行榜帮助弹窗 -->
|
||||
<div v-show="rankingHelpShow" @click.stop>
|
||||
<itemCenter
|
||||
style="min-height: 158.93vw"
|
||||
:imgUrl="imageUrl('rankingHelpBg_ar')"
|
||||
:contentStyle="`inset: 26vw 6vw 13vw;overflow-y: auto;display:block;`"
|
||||
>
|
||||
@ -1858,6 +1870,7 @@
|
||||
<!-- 总榜前三规则弹窗 -->
|
||||
<div v-show="top3HelpShow" @click.stop>
|
||||
<itemCenter
|
||||
style="min-height: 158.93vw"
|
||||
:imgUrl="imageUrl('top3HelpBg_ar')"
|
||||
:contentStyle="`inset: 26vw 6vw 13vw;overflow-y: auto;display:block;`"
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user