feat(游戏王排行榜): 调整默认展示榜单
This commit is contained in:
hzj
parent
74f04bd171
commit
08b5399349
@ -10,47 +10,28 @@
|
||||
<!-- 主要内容 -->
|
||||
<div v-else>
|
||||
<!-- 新增的背景图层 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('bg2')"
|
||||
alt=""
|
||||
style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0"
|
||||
/>
|
||||
<img v-smart-img :src="imageUrl('bg2')" alt=""
|
||||
style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0" />
|
||||
|
||||
<div class="bg">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('bg')"
|
||||
alt=""
|
||||
style="display: block; width: 100%; position: absolute; z-index: 0"
|
||||
/>
|
||||
<img v-smart-img :src="imageUrl('bg')" alt=""
|
||||
style="display: block; width: 100%; position: absolute; z-index: 0" />
|
||||
|
||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
||||
|
||||
<!-- 第一名 -->
|
||||
<div style="display: flex; justify-content: center; margin-top: 11vw">
|
||||
<TopUser
|
||||
ranking="1"
|
||||
:BorderImgUrl="imageUrl('top1')"
|
||||
:avatarUrl="RankingHasTop10[0].avatar"
|
||||
:name="RankingHasTop10[0].nickname"
|
||||
:distributionValue="RankingHasTop10[0].quantity || ''"
|
||||
style="width: 55%"
|
||||
@click="viewUserInfo(RankingHasTop10[0].userId)"
|
||||
/>
|
||||
<TopUser ranking="1" :BorderImgUrl="imageUrl('top1')" :avatarUrl="RankingHasTop10[0].avatar"
|
||||
:name="RankingHasTop10[0].nickname" :distributionValue="RankingHasTop10[0].quantity || ''"
|
||||
style="width: 55%" @click="viewUserInfo(RankingHasTop10[0].userId)" />
|
||||
</div>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<div style="margin-top: 6vw; display: flex; justify-content: flex-end; align-items: center">
|
||||
<!-- 帮助按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('helpBt')"
|
||||
alt=""
|
||||
style="display: block; position: relative; width: 8vw; margin-right: 4vw"
|
||||
@click="maskLayerShow = true"
|
||||
/>
|
||||
<img v-smart-img :src="imageUrl('helpBt')" alt=""
|
||||
style="display: block; position: relative; width: 8vw; margin-right: 4vw" @click="maskLayerShow = true" />
|
||||
</div>
|
||||
|
||||
<!-- 倒计时 -->
|
||||
@ -85,56 +66,26 @@
|
||||
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
|
||||
<!-- 历史模块按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="changeModule('history')">
|
||||
<img
|
||||
v-show="!historyShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('historyBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="historyShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('historyBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img v-show="!historyShow" v-smart-img :src="imageUrl(getImgName('historyBt'))" alt=""
|
||||
style="display: block; width: 100%" />
|
||||
<img v-show="historyShow" v-smart-img :src="imageUrl(getImgName('historyBtActive'))" alt=""
|
||||
style="display: block; width: 100%" />
|
||||
</div>
|
||||
|
||||
<!-- 排行榜模块按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="changeModule('ranking')">
|
||||
<img
|
||||
v-show="!rankingShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rankingBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="rankingShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rankingBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img v-show="!rankingShow" v-smart-img :src="imageUrl(getImgName('rankingBt'))" alt=""
|
||||
style="display: block; width: 100%" />
|
||||
<img v-show="rankingShow" v-smart-img :src="imageUrl(getImgName('rankingBtActive'))" alt=""
|
||||
style="display: block; width: 100%" />
|
||||
</div>
|
||||
|
||||
<!-- 奖励模块按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="changeModule('rewards')">
|
||||
<img
|
||||
v-show="!rewardsShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rewardsBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="rewardsShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rewardBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img v-show="!rewardsShow" v-smart-img :src="imageUrl(getImgName('rewardsBt'))" alt=""
|
||||
style="display: block; width: 100%" />
|
||||
<img v-show="rewardsShow" v-smart-img :src="imageUrl(getImgName('rewardBtActive'))" alt=""
|
||||
style="display: block; width: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,89 +93,59 @@
|
||||
<!-- 模块 -->
|
||||
<div>
|
||||
<!-- history -->
|
||||
<div
|
||||
v-show="historyShow"
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
>
|
||||
<div v-show="historyShow" style="display: flex; flex-direction: column; align-items: center">
|
||||
<!-- 历史榜首 -->
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl(getImgName('historyTopBg'))"
|
||||
:contentStyle="`inset: 25vw 5vw 4vw;
|
||||
<itemCenter :imgUrl="imageUrl(getImgName('historyTopBg'))" :contentStyle="`inset: 25vw 5vw 4vw;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap:2vw`"
|
||||
>
|
||||
gap:2vw`">
|
||||
<!-- 主要内容 -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
gap: 2vw;
|
||||
"
|
||||
>
|
||||
">
|
||||
<!-- 上一周榜首按钮 -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
width: 8vw;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
v-show="historyTopList.length > 1 && historyTopIndex > 0"
|
||||
:src="imageUrl('topBackBt')"
|
||||
alt=""
|
||||
class="flipImg"
|
||||
style="display: block; width: 100%; object-fit: cover"
|
||||
@click="historyTopIndex--"
|
||||
/>
|
||||
">
|
||||
<img v-smart-img v-show="historyTopList.length > 1 && historyTopIndex > 0"
|
||||
:src="imageUrl('topBackBt')" alt="" class="flipImg"
|
||||
style="display: block; width: 100%; object-fit: cover" @click="historyTopIndex--" />
|
||||
</div>
|
||||
|
||||
<!-- 榜首 -->
|
||||
<TopUser
|
||||
:BorderImgUrl="imageUrl('historyTopFrame')"
|
||||
<TopUser :BorderImgUrl="imageUrl('historyTopFrame')"
|
||||
:avatarUrl="historyTopList[historyTopIndex].topUser.avatar"
|
||||
:name="historyTopList[historyTopIndex].topUser.nickname"
|
||||
:distributionValue="historyTopList[historyTopIndex].topUser.quantity || ''"
|
||||
style="flex: 1; min-width: 0"
|
||||
@click="viewUserInfo(historyTopList[historyTopIndex].topUser.userId)"
|
||||
/>
|
||||
style="flex: 1; min-width: 0" @click="viewUserInfo(historyTopList[historyTopIndex].topUser.userId)" />
|
||||
|
||||
<!-- 下一周榜首按钮 -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
width: 8vw;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
v-show="
|
||||
historyTopList.length > 1 && historyTopIndex + 1 < historyTopList.length
|
||||
"
|
||||
:src="imageUrl('topNextBt')"
|
||||
alt=""
|
||||
class="flipImg"
|
||||
style="display: block; width: 100%; object-fit: cover"
|
||||
@click="historyTopIndex++"
|
||||
/>
|
||||
">
|
||||
<img v-smart-img v-show="historyTopList.length > 1 && historyTopIndex + 1 < historyTopList.length
|
||||
" :src="imageUrl('topNextBt')" alt="" class="flipImg"
|
||||
style="display: block; width: 100%; object-fit: cover" @click="historyTopIndex++" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结算时间 -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
font-weight: 590;
|
||||
background-image: -webkit-linear-gradient(
|
||||
top,
|
||||
@ -233,22 +154,14 @@
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
"
|
||||
>
|
||||
">
|
||||
{{ historyTopList[historyTopIndex].cycleDisplay }}
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 特殊奖励 -->
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl(getImgName('specialRewardsBg'))"
|
||||
:contentStyle="`inset: 43vw 3vw 5vw;`"
|
||||
>
|
||||
<img
|
||||
:src="specialReward?.cover"
|
||||
alt=""
|
||||
style="display: block; width: 70%; object-fit: cover"
|
||||
/>
|
||||
<itemCenter :imgUrl="imageUrl(getImgName('specialRewardsBg'))" :contentStyle="`inset: 43vw 3vw 5vw;`">
|
||||
<img :src="specialReward?.cover" alt="" style="display: block; width: 70%; object-fit: cover" />
|
||||
</itemCenter>
|
||||
</div>
|
||||
|
||||
@ -256,97 +169,54 @@
|
||||
<div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
|
||||
<div style="position: relative; z-index: 1">
|
||||
<!-- 第2-4名 -->
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl(getImgName('RankingMain'))"
|
||||
:contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
|
||||
>
|
||||
<itemCenter :imgUrl="imageUrl(getImgName('RankingMain'))"
|
||||
:contentStyle="`padding: 25% 4% 0;flex-direction: column;`">
|
||||
<div>
|
||||
<!-- 第2名 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<TopUser
|
||||
ranking="2"
|
||||
:BorderImgUrl="imageUrl('top2')"
|
||||
:avatarUrl="RankingHasTop10[1].avatar"
|
||||
:name="RankingHasTop10[1].nickname"
|
||||
:distributionValue="RankingHasTop10[1].quantity || ''"
|
||||
style="width: 40%"
|
||||
@click="viewUserInfo(RankingHasTop10[1].userId)"
|
||||
/>
|
||||
<TopUser ranking="2" :BorderImgUrl="imageUrl('top2')" :avatarUrl="RankingHasTop10[1].avatar"
|
||||
:name="RankingHasTop10[1].nickname" :distributionValue="RankingHasTop10[1].quantity || ''"
|
||||
style="width: 40%" @click="viewUserInfo(RankingHasTop10[1].userId)" />
|
||||
</div>
|
||||
<!-- 第3-4名 -->
|
||||
<div style="display: flex; justify-content: space-between; margin-top: -5vw">
|
||||
<TopUser
|
||||
ranking="3"
|
||||
:BorderImgUrl="imageUrl('top3')"
|
||||
:avatarUrl="RankingHasTop10[2].avatar"
|
||||
:name="RankingHasTop10[2].nickname"
|
||||
:distributionValue="RankingHasTop10[2].quantity || ''"
|
||||
style="width: 38%"
|
||||
@click="viewUserInfo(RankingHasTop10[2].userId)"
|
||||
/>
|
||||
<TopUser
|
||||
ranking="4"
|
||||
:BorderImgUrl="imageUrl('top4')"
|
||||
:avatarUrl="RankingHasTop10[3].avatar"
|
||||
:name="RankingHasTop10[3].nickname"
|
||||
:distributionValue="RankingHasTop10[3].quantity || ''"
|
||||
style="width: 38%"
|
||||
@click="viewUserInfo(RankingHasTop10[3].userId)"
|
||||
/>
|
||||
<TopUser ranking="3" :BorderImgUrl="imageUrl('top3')" :avatarUrl="RankingHasTop10[2].avatar"
|
||||
:name="RankingHasTop10[2].nickname" :distributionValue="RankingHasTop10[2].quantity || ''"
|
||||
style="width: 38%" @click="viewUserInfo(RankingHasTop10[2].userId)" />
|
||||
<TopUser ranking="4" :BorderImgUrl="imageUrl('top4')" :avatarUrl="RankingHasTop10[3].avatar"
|
||||
:name="RankingHasTop10[3].nickname" :distributionValue="RankingHasTop10[3].quantity || ''"
|
||||
style="width: 38%" @click="viewUserInfo(RankingHasTop10[3].userId)" />
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 第5-10名 -->
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl('RankingCenterBg')"
|
||||
:contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
|
||||
>
|
||||
<itemCenter :imgUrl="imageUrl('RankingCenterBg')"
|
||||
:contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`">
|
||||
<!-- 5-7 -->
|
||||
<div style="width: 100%; display: flex; justify-content: space-between">
|
||||
<TopUser
|
||||
v-for="topUser in RankingHasTop10.slice(4, 7)"
|
||||
:key="topUser.userId"
|
||||
ranking="5-7"
|
||||
:BorderImgUrl="imageUrl('top5_7')"
|
||||
:avatarUrl="topUser.avatar"
|
||||
:name="topUser.nickname"
|
||||
:distributionValue="topUser.quantity || ''"
|
||||
style="width: 30%"
|
||||
@click="viewUserInfo(topUser.userId)"
|
||||
/>
|
||||
<TopUser v-for="topUser in RankingHasTop10.slice(4, 7)" :key="topUser.userId" ranking="5-7"
|
||||
:BorderImgUrl="imageUrl('top5_7')" :avatarUrl="topUser.avatar" :name="topUser.nickname"
|
||||
:distributionValue="topUser.quantity || ''" style="width: 30%"
|
||||
@click="viewUserInfo(topUser.userId)" />
|
||||
</div>
|
||||
|
||||
<!-- 8-10 -->
|
||||
<div style="width: 100%; display: flex; justify-content: space-between">
|
||||
<TopUser
|
||||
v-for="topUser in RankingHasTop10.slice(7, 10)"
|
||||
:key="topUser.userId"
|
||||
ranking="8-10"
|
||||
:BorderImgUrl="imageUrl('top8_10')"
|
||||
:avatarUrl="topUser.avatar"
|
||||
:name="topUser.nickname"
|
||||
:distributionValue="topUser.quantity || ''"
|
||||
style="width: 30%"
|
||||
@click="viewUserInfo(topUser.userId)"
|
||||
/>
|
||||
<TopUser v-for="topUser in RankingHasTop10.slice(7, 10)" :key="topUser.userId" ranking="8-10"
|
||||
:BorderImgUrl="imageUrl('top8_10')" :avatarUrl="topUser.avatar" :name="topUser.nickname"
|
||||
:distributionValue="topUser.quantity || ''" style="width: 30%"
|
||||
@click="viewUserInfo(topUser.userId)" />
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 第11名开始 -->
|
||||
<div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
|
||||
<itemCenter
|
||||
v-for="(listItem, index) in showRanking"
|
||||
:key="listItem.userId"
|
||||
:imgUrl="imageUrl('RankingItem')"
|
||||
:contentStyle="`padding: 0 10%`"
|
||||
:lazy="true"
|
||||
:immediate="index < 2"
|
||||
@click="viewUserInfo(listItem.userId)"
|
||||
>
|
||||
<itemCenter v-for="(listItem, index) in showRanking" :key="listItem.userId"
|
||||
:imgUrl="imageUrl('RankingItem')" :contentStyle="`padding: 0 10%`" :lazy="true" :immediate="index < 2"
|
||||
@click="viewUserInfo(listItem.userId)">
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
@ -355,31 +225,23 @@
|
||||
align-items: center;
|
||||
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
">
|
||||
<!-- 排名 -->
|
||||
<div style="color: #ffe601; font-weight: 700">
|
||||
{{ listItem?.rank }}
|
||||
</div>
|
||||
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="listItem?.avatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
<img v-smart-img :src="listItem?.avatar || ''" alt="" style="
|
||||
display: block;
|
||||
width: 13vw;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
" @error="handleAvatarImageError" />
|
||||
|
||||
<!-- 名称、id -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
@ -387,18 +249,14 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
">
|
||||
<div style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="UserNickname"
|
||||
>
|
||||
" class="UserNickname">
|
||||
{{ listItem?.nickname }}
|
||||
</div>
|
||||
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
||||
@ -408,21 +266,15 @@
|
||||
</div>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
|
||||
/>
|
||||
">
|
||||
<img v-smart-img src="/src/assets/icon/coin.png" alt=""
|
||||
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover" />
|
||||
<div style="color: #ffe601; font-weight: 700" class="UserNickname">
|
||||
{{ listItem?.quantity }}
|
||||
</div>
|
||||
@ -431,36 +283,19 @@
|
||||
</div>
|
||||
|
||||
<!-- 底框 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('RankingBottomBorder')"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block; margin-top: -6vw; position: relative; z-index: 2"
|
||||
/>
|
||||
<img v-smart-img :src="imageUrl('RankingBottomBorder')" alt="" width="100%"
|
||||
style="display: block; margin-top: -6vw; position: relative; z-index: 2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rewards -->
|
||||
<div
|
||||
v-show="rewardsShow"
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
>
|
||||
<div
|
||||
v-for="(rewardsTop, top) in rewardsList"
|
||||
:key="top"
|
||||
style="position: relative; width: 100%; margin: 10px 0"
|
||||
>
|
||||
<div v-show="rewardsShow" style="display: flex; flex-direction: column; align-items: center">
|
||||
<div v-for="(rewardsTop, top) in rewardsList" :key="top"
|
||||
style="position: relative; width: 100%; margin: 10px 0">
|
||||
<!-- 第一名奖励 -->
|
||||
<itemCenter
|
||||
v-if="top == 0"
|
||||
:imgUrl="topImg[0]"
|
||||
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 2vw;padding: 28vw 4vw 8vw 37vw;`"
|
||||
>
|
||||
<div
|
||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
||||
:key="rewardIndex"
|
||||
style="
|
||||
<itemCenter v-if="top == 0" :imgUrl="topImg[0]"
|
||||
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 2vw;padding: 28vw 4vw 8vw 37vw;`">
|
||||
<div v-for="(reward, rewardIndex) in rewardsTop.rewards" :key="rewardIndex" style="
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
@ -469,55 +304,43 @@
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
">
|
||||
<div style="
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
">
|
||||
<!-- 奖励图片 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="reward.cover || ''"
|
||||
alt=""
|
||||
<img v-smart-img :src="reward.cover || ''" alt=""
|
||||
style="display: block; width: 70%; object-fit: cover"
|
||||
@error="(e) => handleRewardImageError(e, reward.type)"
|
||||
/>
|
||||
@error="(e) => handleRewardImageError(e, reward.type)" />
|
||||
</div>
|
||||
|
||||
<!-- 数值 -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
">
|
||||
<div style="
|
||||
min-width: 0;
|
||||
color: #f9e447;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
font-weight: 900;
|
||||
"
|
||||
>
|
||||
">
|
||||
{{ showDetail(reward.type, reward) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 启动时间 -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
position: absolute;
|
||||
left: 3.5vw;
|
||||
bottom: 10vw;
|
||||
@ -526,67 +349,47 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="color: #f9e447; text-align: center; font-size: 1.2em; font-weight: 900"
|
||||
>
|
||||
">
|
||||
<div style="color: #f9e447; text-align: center; font-size: 1.2em; font-weight: 900">
|
||||
7Days
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 第2-4、5-7、8-10名奖励 -->
|
||||
<itemCenter
|
||||
v-else
|
||||
:imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
|
||||
:contentStyle="`display: grid;grid-template-columns: repeat(3, 1fr);gap: 4vw;padding: 28vw 3vw 10vw;`"
|
||||
>
|
||||
<div
|
||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
||||
:key="rewardIndex"
|
||||
style="width: 100%"
|
||||
:style="rewardIndex == 3 ? `grid-row: 2;grid-column: 2;` : ''"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
<itemCenter v-else :imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
|
||||
:contentStyle="`display: grid;grid-template-columns: repeat(3, 1fr);gap: 4vw;padding: 28vw 3vw 10vw;`">
|
||||
<div v-for="(reward, rewardIndex) in rewardsTop.rewards" :key="rewardIndex" style="width: 100%"
|
||||
:style="rewardIndex == 3 ? `grid-row: 2;grid-column: 2;` : ''">
|
||||
<div style="
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
">
|
||||
<!-- 奖励图片 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="reward.cover || ''"
|
||||
alt=""
|
||||
<img v-smart-img :src="reward.cover || ''" alt=""
|
||||
style="display: block; width: 70%; object-fit: cover"
|
||||
@error="(e) => handleRewardImageError(e, reward.type)"
|
||||
/>
|
||||
@error="(e) => handleRewardImageError(e, reward.type)" />
|
||||
</div>
|
||||
|
||||
<!-- 数值 -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
">
|
||||
<div style="
|
||||
min-width: 0;
|
||||
color: #f9e447;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
font-weight: 900;
|
||||
"
|
||||
>
|
||||
">
|
||||
{{ showDetail(reward.type, reward) }}
|
||||
</div>
|
||||
</div>
|
||||
@ -600,15 +403,10 @@
|
||||
<div v-if="rankingShow" style="height: 22vw"></div>
|
||||
|
||||
<!-- 我的排名 -->
|
||||
<itemCenter
|
||||
v-if="rankingShow"
|
||||
style="position: fixed; bottom: 0; z-index: 3"
|
||||
:imgUrl="imageUrl('myRankingBg')"
|
||||
:contentStyle="`padding: 0 8%`"
|
||||
>
|
||||
<itemCenter v-if="rankingShow" style="position: fixed; bottom: 0; z-index: 3" :imgUrl="imageUrl('myRankingBg')"
|
||||
:contentStyle="`padding: 0 8%`">
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
@ -617,61 +415,45 @@
|
||||
align-items: center;
|
||||
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
">
|
||||
<!-- 排名 -->
|
||||
<div style="color: #ffe601; font-weight: 700">
|
||||
{{ myRanking.rank || 999 }}
|
||||
</div>
|
||||
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="myRanking.avatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
<img v-smart-img :src="myRanking.avatar || ''" alt="" style="
|
||||
display: block;
|
||||
width: 15vw;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
" @error="handleAvatarImageError" />
|
||||
|
||||
<!-- 名称 -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="UserNickname"
|
||||
>
|
||||
" class="UserNickname">
|
||||
{{ myRanking.nickname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
|
||||
/>
|
||||
">
|
||||
<img v-smart-img src="/src/assets/icon/coin.png" alt=""
|
||||
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover" />
|
||||
<div style="color: #ffe601; font-weight: 700">
|
||||
{{ myRanking.quantity || 0 }}
|
||||
</div>
|
||||
@ -682,16 +464,10 @@
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||||
<!-- help弹窗 -->
|
||||
<div style="margin: 10vh 0 5vh" @click.stop>
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl(getImgName('helpBg'))"
|
||||
:contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('helpInfo'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
|
||||
/>
|
||||
<itemCenter :imgUrl="imageUrl(getImgName('helpBg'))"
|
||||
:contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`">
|
||||
<img v-smart-img :src="imageUrl(getImgName('helpInfo'))" alt=""
|
||||
style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw" />
|
||||
</itemCenter>
|
||||
</div>
|
||||
</maskLayer>
|
||||
@ -748,8 +524,8 @@ const Second = ref(0)
|
||||
let timer = null
|
||||
|
||||
// 模块切换展示
|
||||
const historyShow = ref(true) //历史榜首
|
||||
const rankingShow = ref(false) //排行榜
|
||||
const historyShow = ref(false) //历史榜首
|
||||
const rankingShow = ref(true) //排行榜
|
||||
const rewardsShow = ref(false) //奖励模块
|
||||
const changeModule = (module) => {
|
||||
switch (module) {
|
||||
@ -938,18 +714,24 @@ const preloadCriticalImages = async () => {
|
||||
imageUrl('helpInfo'),
|
||||
imageUrl('historyBt'),
|
||||
imageUrl('historyBtActive'),
|
||||
imageUrl('historyTopBg'),
|
||||
imageUrl('historyTopFrame'),
|
||||
imageUrl('specialRewardsBg'),
|
||||
imageUrl('myRankingBg'),
|
||||
imageUrl('rankingBt'),
|
||||
imageUrl('rankingBtActive'),
|
||||
imageUrl('rewardBtActive'),
|
||||
imageUrl('rewardsBt'),
|
||||
imageUrl('RankingBottomBorder'),
|
||||
imageUrl('RankingCenterBg'),
|
||||
imageUrl('RankingItem'),
|
||||
imageUrl('RankingMain'),
|
||||
imageUrl('timeBg'),
|
||||
imageUrl('topBackBt'),
|
||||
imageUrl('topNextBt'),
|
||||
imageUrl('top1'),
|
||||
imageUrl('top2'),
|
||||
imageUrl('top3'),
|
||||
imageUrl('top4'),
|
||||
imageUrl('top5_7'),
|
||||
imageUrl('top8_10'),
|
||||
]
|
||||
|
||||
const criticalImages_ar = [
|
||||
@ -959,18 +741,24 @@ const preloadCriticalImages = async () => {
|
||||
imageUrl('helpInfo_ar'),
|
||||
imageUrl('historyBt_ar'),
|
||||
imageUrl('historyBtActive_ar'),
|
||||
imageUrl('historyTopBg_ar'),
|
||||
imageUrl('historyTopFrame'),
|
||||
imageUrl('specialRewardsBg_ar'),
|
||||
imageUrl('myRankingBg'),
|
||||
imageUrl('rankingBt_ar'),
|
||||
imageUrl('rankingBtActive_ar'),
|
||||
imageUrl('rewardBtActive_ar'),
|
||||
imageUrl('rewardsBt_ar'),
|
||||
imageUrl('RankingBottomBorder'),
|
||||
imageUrl('RankingCenterBg'),
|
||||
imageUrl('RankingItem'),
|
||||
imageUrl('RankingMain_ar'),
|
||||
imageUrl('timeBg'),
|
||||
imageUrl('topBackBt'),
|
||||
imageUrl('topNextBt'),
|
||||
imageUrl('top1'),
|
||||
imageUrl('top2'),
|
||||
imageUrl('top3'),
|
||||
imageUrl('top4'),
|
||||
imageUrl('top5_7'),
|
||||
imageUrl('top8_10'),
|
||||
]
|
||||
|
||||
if (currentLangType.value == 'en') {
|
||||
@ -996,35 +784,23 @@ const completePreloading = async () => {
|
||||
// 预加载其他图片
|
||||
const preloadOtherImages = async () => {
|
||||
const criticalImages = [
|
||||
imageUrl('RankingBottomBorder'),
|
||||
imageUrl('RankingCenterBg'),
|
||||
imageUrl('RankingItem'),
|
||||
imageUrl('RankingMain'),
|
||||
imageUrl('historyTopBg'),
|
||||
imageUrl('historyTopFrame'),
|
||||
imageUrl('specialRewardsBg'),
|
||||
imageUrl('top1RewardBg'),
|
||||
imageUrl('top2_4RewardBg'),
|
||||
imageUrl('top5_7RewardBg'),
|
||||
imageUrl('top8_10RewardBg'),
|
||||
imageUrl('top2'),
|
||||
imageUrl('top3'),
|
||||
imageUrl('top4'),
|
||||
imageUrl('top5_7'),
|
||||
imageUrl('top8_10'),
|
||||
]
|
||||
|
||||
const criticalImages_ar = [
|
||||
imageUrl('RankingBottomBorder'),
|
||||
imageUrl('RankingCenterBg'),
|
||||
imageUrl('RankingItem'),
|
||||
imageUrl('RankingMain_ar'),
|
||||
imageUrl('historyTopBg_ar'),
|
||||
imageUrl('historyTopFrame'),
|
||||
imageUrl('specialRewardsBg_ar'),
|
||||
imageUrl('top1RewardBg'),
|
||||
imageUrl('top2_4RewardBg'),
|
||||
imageUrl('top5_7RewardBg'),
|
||||
imageUrl('top8_10RewardBg'),
|
||||
imageUrl('top2'),
|
||||
imageUrl('top3'),
|
||||
imageUrl('top4'),
|
||||
imageUrl('top5_7'),
|
||||
imageUrl('top8_10'),
|
||||
]
|
||||
|
||||
if (currentLangType.value == 'en') {
|
||||
@ -1141,6 +917,7 @@ onUnmounted(() => {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user