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

chore(游戏王): 背景新增动画

Browse Source
This commit is contained in:
hzj 2026-01-26 10:36:51 +08:00
parent 557e44cc6c
commit 5665a09d98
1 changed files with 793 additions and 566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

481
src/views/Ranking/GamesKing/index.vue
View File

@ -10,28 +10,49 @@
<!-- 主要内容 --> <!-- 主要内容 -->
<div v-else> <div v-else>
<!-- 新增的背景图层 --> <!-- 新增的背景图层 -->
<img v-smart-img :src="imageUrl('bg2')" alt="" <img
style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0" /> v-smart-img
:src="imageUrl('bg2')"
alt=""
style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0"
/>
<div class="bg"> <div class="bg">
<img v-smart-img :src="imageUrl('bg')" alt="" <itemCenter :imgUrl="imageUrl('bg')" style="position: absolute; z-index: 0">
style="display: block; width: 100%; position: absolute; z-index: 0" /> <img
v-smart-img
:src="webpUrl('bg')"
alt=""
style="display: block; width: 100%; object-fit: cover"
/>
</itemCenter>
<!-- 状态栏占位区域（仅在APP中显示） --> <!-- 状态栏占位区域（仅在APP中显示） -->
<div v-if="isInAppEnvironment" style="height: 30px"></div> <div v-if="isInAppEnvironment" style="height: 30px"></div>
<!-- 第一名 --> <!-- 第一名 -->
<div style="display: flex; justify-content: center; margin-top: 11vw"> <div style="display: flex; justify-content: center; margin-top: 11vw">
<TopUser ranking="1" :BorderImgUrl="imageUrl('top1')" :avatarUrl="RankingHasTop10[0].avatar" <TopUser
:name="RankingHasTop10[0].nickname" :distributionValue="RankingHasTop10[0].quantity || ''" ranking="1"
style="width: 55%" @click="viewUserInfo(RankingHasTop10[0].userId)" /> :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>
<!-- 按钮 --> <!-- 按钮 -->
<div style="margin-top: 6vw; display: flex; justify-content: flex-end; align-items: center"> <div style="margin-top: 6vw; display: flex; justify-content: flex-end; align-items: center">
<!-- 帮助按钮 --> <!-- 帮助按钮 -->
<img v-smart-img :src="imageUrl('helpBt')" alt="" <img
style="display: block; position: relative; width: 8vw; margin-right: 4vw" @click="maskLayerShow = true" /> v-smart-img
:src="imageUrl('helpBt')"
alt=""
style="display: block; position: relative; width: 8vw; margin-right: 4vw"
@click="maskLayerShow = true"
/>
</div> </div>
<!-- 倒计时 --> <!-- 倒计时 -->
@ -66,26 +87,56 @@
<div style="display: flex; justify-content: space-around; margin-top: 2vw"> <div style="display: flex; justify-content: space-around; margin-top: 2vw">
<!-- 历史模块按钮 --> <!-- 历史模块按钮 -->
<div style="width: 30%; position: relative" @click="changeModule('history')"> <div style="width: 30%; position: relative" @click="changeModule('history')">
<img v-show="!historyShow" v-smart-img :src="imageUrl(getImgName('historyBt'))" alt="" <img
style="display: block; width: 100%" /> v-show="!historyShow"
<img v-show="historyShow" v-smart-img :src="imageUrl(getImgName('historyBtActive'))" alt="" v-smart-img
style="display: block; width: 100%" /> :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>
<!-- 排行榜模块按钮 --> <!-- 排行榜模块按钮 -->
<div style="width: 30%; position: relative" @click="changeModule('ranking')"> <div style="width: 30%; position: relative" @click="changeModule('ranking')">
<img v-show="!rankingShow" v-smart-img :src="imageUrl(getImgName('rankingBt'))" alt="" <img
style="display: block; width: 100%" /> v-show="!rankingShow"
<img v-show="rankingShow" v-smart-img :src="imageUrl(getImgName('rankingBtActive'))" alt="" v-smart-img
style="display: block; width: 100%" /> :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>
<!-- 奖励模块按钮 --> <!-- 奖励模块按钮 -->
<div style="width: 30%; position: relative" @click="changeModule('rewards')"> <div style="width: 30%; position: relative" @click="changeModule('rewards')">
<img v-show="!rewardsShow" v-smart-img :src="imageUrl(getImgName('rewardsBt'))" alt="" <img
style="display: block; width: 100%" /> v-show="!rewardsShow"
<img v-show="rewardsShow" v-smart-img :src="imageUrl(getImgName('rewardBtActive'))" alt="" v-smart-img
style="display: block; width: 100%" /> :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> </div>
</div> </div>
@ -93,59 +144,89 @@
<!-- 模块 --> <!-- 模块 -->
<div> <div>
<!-- history --> <!-- 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; flex-direction: column;
justify-content: center; justify-content: center;
gap:2vw`"> gap:2vw`"
>
<!-- 主要内容 --> <!-- 主要内容 -->
<div style=" <div
style="
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 2vw; gap: 2vw;
"> "
>
<!-- 上一周榜首按钮 --> <!-- 上一周榜首按钮 -->
<div style=" <div
style="
width: 8vw; width: 8vw;
align-self: stretch; align-self: stretch;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
"> "
<img v-smart-img v-show="historyTopList.length > 1 && historyTopIndex > 0" >
:src="imageUrl('topBackBt')" alt="" class="flipImg" <img
style="display: block; width: 100%; object-fit: cover" @click="historyTopIndex--" /> 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> </div>
<!-- 榜首 --> <!-- 榜首 -->
<TopUser :BorderImgUrl="imageUrl('historyTopFrame')" <TopUser
:BorderImgUrl="imageUrl('historyTopFrame')"
:avatarUrl="historyTopList[historyTopIndex].topUser.avatar" :avatarUrl="historyTopList[historyTopIndex].topUser.avatar"
:name="historyTopList[historyTopIndex].topUser.nickname" :name="historyTopList[historyTopIndex].topUser.nickname"
:distributionValue="historyTopList[historyTopIndex].topUser.quantity || ''" :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; width: 8vw;
align-self: stretch; align-self: stretch;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
"> "
<img v-smart-img v-show="historyTopList.length > 1 && historyTopIndex + 1 < historyTopList.length >
" :src="imageUrl('topNextBt')" alt="" class="flipImg" <img
style="display: block; width: 100%; object-fit: cover" @click="historyTopIndex++" /> 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> </div>
<!-- 结算时间 --> <!-- 结算时间 -->
<div style=" <div
style="
font-weight: 590; font-weight: 590;
background-image: -webkit-linear-gradient( background-image: -webkit-linear-gradient(
top, top,
@ -154,14 +235,22 @@
); );
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
"> "
>
{{ historyTopList[historyTopIndex].cycleDisplay }} {{ historyTopList[historyTopIndex].cycleDisplay }}
</div> </div>
</itemCenter> </itemCenter>
<!-- 特殊奖励 --> <!-- 特殊奖励 -->
<itemCenter :imgUrl="imageUrl(getImgName('specialRewardsBg'))" :contentStyle="`inset: 43vw 3vw 5vw;`"> <itemCenter
<img :src="specialReward?.cover" alt="" style="display: block; width: 70%; object-fit: cover" /> :imgUrl="imageUrl(getImgName('specialRewardsBg'))"
:contentStyle="`inset: 43vw 3vw 5vw;`"
>
<img
:src="specialReward?.cover"
alt=""
style="display: block; width: 70%; object-fit: cover"
/>
</itemCenter> </itemCenter>
</div> </div>
@ -169,54 +258,97 @@
<div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0"> <div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
<div style="position: relative; z-index: 1"> <div style="position: relative; z-index: 1">
<!-- 第2-4名 --> <!-- 第2-4名 -->
<itemCenter :imgUrl="imageUrl(getImgName('RankingMain'))" <itemCenter
:contentStyle="`padding: 25% 4% 0;flex-direction: column;`"> :imgUrl="imageUrl(getImgName('RankingMain'))"
:contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
>
<div> <div>
<!-- 第2名 --> <!-- 第2名 -->
<div style="display: flex; justify-content: center"> <div style="display: flex; justify-content: center">
<TopUser ranking="2" :BorderImgUrl="imageUrl('top2')" :avatarUrl="RankingHasTop10[1].avatar" <TopUser
:name="RankingHasTop10[1].nickname" :distributionValue="RankingHasTop10[1].quantity || ''" ranking="2"
style="width: 40%" @click="viewUserInfo(RankingHasTop10[1].userId)" /> :BorderImgUrl="imageUrl('top2')"
:avatarUrl="RankingHasTop10[1].avatar"
:name="RankingHasTop10[1].nickname"
:distributionValue="RankingHasTop10[1].quantity || ''"
style="width: 40%"
@click="viewUserInfo(RankingHasTop10[1].userId)"
/>
</div> </div>
<!-- 第3-4名 --> <!-- 第3-4名 -->
<div style="display: flex; justify-content: space-between; margin-top: -5vw"> <div style="display: flex; justify-content: space-between; margin-top: -5vw">
<TopUser ranking="3" :BorderImgUrl="imageUrl('top3')" :avatarUrl="RankingHasTop10[2].avatar" <TopUser
:name="RankingHasTop10[2].nickname" :distributionValue="RankingHasTop10[2].quantity || ''" ranking="3"
style="width: 38%" @click="viewUserInfo(RankingHasTop10[2].userId)" /> :BorderImgUrl="imageUrl('top3')"
<TopUser ranking="4" :BorderImgUrl="imageUrl('top4')" :avatarUrl="RankingHasTop10[3].avatar" :avatarUrl="RankingHasTop10[2].avatar"
:name="RankingHasTop10[3].nickname" :distributionValue="RankingHasTop10[3].quantity || ''" :name="RankingHasTop10[2].nickname"
style="width: 38%" @click="viewUserInfo(RankingHasTop10[3].userId)" /> :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>
</div> </div>
</itemCenter> </itemCenter>
<!-- 第5-10名 --> <!-- 第5-10名 -->
<itemCenter :imgUrl="imageUrl('RankingCenterBg')" <itemCenter
:contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"> :imgUrl="imageUrl('RankingCenterBg')"
:contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
>
<!-- 5-7 --> <!-- 5-7 -->
<div style="width: 100%; display: flex; justify-content: space-between"> <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" <TopUser
:BorderImgUrl="imageUrl('top5_7')" :avatarUrl="topUser.avatar" :name="topUser.nickname" v-for="topUser in RankingHasTop10.slice(4, 7)"
:distributionValue="topUser.quantity || ''" style="width: 30%" :key="topUser.userId"
@click="viewUserInfo(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> </div>
<!-- 8-10 --> <!-- 8-10 -->
<div style="width: 100%; display: flex; justify-content: space-between"> <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" <TopUser
:BorderImgUrl="imageUrl('top8_10')" :avatarUrl="topUser.avatar" :name="topUser.nickname" v-for="topUser in RankingHasTop10.slice(7, 10)"
:distributionValue="topUser.quantity || ''" style="width: 30%" :key="topUser.userId"
@click="viewUserInfo(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> </div>
</itemCenter> </itemCenter>
<!-- 第11名开始 --> <!-- 第11名开始 -->
<div v-if="showRanking.length > 0" style="position: relative; z-index: 2"> <div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
<itemCenter v-for="(listItem, index) in showRanking" :key="listItem.userId" <itemCenter
:imgUrl="imageUrl('RankingItem')" :contentStyle="`padding: 0 10%`" :lazy="true" :immediate="index < 2" v-for="(listItem, index) in showRanking"
@click="viewUserInfo(listItem.userId)"> :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; flex: 1;
min-width: 0; min-width: 0;
@ -225,23 +357,31 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
"> "
>
<!-- 排名 --> <!-- 排名 -->
<div style="color: #ffe601; font-weight: 700"> <div style="color: #ffe601; font-weight: 700">
{{ listItem?.rank }} {{ listItem?.rank }}
</div> </div>
<!-- 头像 --> <!-- 头像 -->
<img v-smart-img :src="listItem?.avatar || ''" alt="" style=" <img
v-smart-img
:src="listItem?.avatar || ''"
alt=""
style="
display: block; display: block;
width: 13vw; width: 13vw;
aspect-ratio: 1/1; aspect-ratio: 1/1;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
" @error="handleAvatarImageError" /> "
@error="handleAvatarImageError"
/>
<!-- 名称、id --> <!-- 名称、id -->
<div style=" <div
style="
flex: 1; flex: 1;
min-width: 0; min-width: 0;
align-self: stretch; align-self: stretch;
@ -249,14 +389,18 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
"> "
<div style=" >
<div
style="
color: #fff; color: #fff;
font-weight: 860; font-weight: 860;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
" class="UserNickname"> "
class="UserNickname"
>
{{ listItem?.nickname }} {{ listItem?.nickname }}
</div> </div>
<div style="color: #fff; font-weight: 590" class="UserNickname"> <div style="color: #fff; font-weight: 590" class="UserNickname">
@ -266,15 +410,21 @@
</div> </div>
<!-- 贡献值 --> <!-- 贡献值 -->
<div style=" <div
style="
width: auto; width: auto;
min-width: 0; min-width: 0;
display: flex; display: flex;
align-items: center; 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"> <div style="color: #ffe601; font-weight: 700" class="UserNickname">
{{ listItem?.quantity }} {{ listItem?.quantity }}
</div> </div>
@ -283,19 +433,36 @@
</div> </div>
<!-- 底框 --> <!-- 底框 -->
<img v-smart-img :src="imageUrl('RankingBottomBorder')" alt="" width="100%" <img
style="display: block; margin-top: -6vw; position: relative; z-index: 2" /> v-smart-img
:src="imageUrl('RankingBottomBorder')"
alt=""
width="100%"
style="display: block; margin-top: -6vw; position: relative; z-index: 2"
/>
</div> </div>
</div> </div>
<!-- Rewards --> <!-- Rewards -->
<div v-show="rewardsShow" style="display: flex; flex-direction: column; align-items: center"> <div
<div v-for="(rewardsTop, top) in rewardsList" :key="top" v-show="rewardsShow"
style="position: relative; width: 100%; margin: 10px 0"> 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]" <itemCenter
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 2vw;padding: 28vw 4vw 8vw 37vw;`"> v-if="top == 0"
<div v-for="(reward, rewardIndex) in rewardsTop.rewards" :key="rewardIndex" style=" :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%; width: 100%;
min-width: 0; min-width: 0;
align-self: stretch; align-self: stretch;
@ -304,43 +471,55 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
"> "
<div style=" >
<div
style="
width: 100%; width: 100%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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" style="display: block; width: 70%; object-fit: cover"
@error="(e) => handleRewardImageError(e, reward.type)" /> @error="(e) => handleRewardImageError(e, reward.type)"
/>
</div> </div>
<!-- 数值 --> <!-- 数值 -->
<div style=" <div
style="
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
"> "
<div style=" >
<div
style="
min-width: 0; min-width: 0;
color: #f9e447; color: #f9e447;
text-align: center; text-align: center;
font-size: 1.2em; font-size: 1.2em;
font-weight: 900; font-weight: 900;
"> "
>
{{ showDetail(reward.type, reward) }} {{ showDetail(reward.type, reward) }}
</div> </div>
</div> </div>
</div> </div>
<!-- 启动时间 --> <!-- 启动时间 -->
<div style=" <div
style="
position: absolute; position: absolute;
left: 3.5vw; left: 3.5vw;
bottom: 10vw; bottom: 10vw;
@ -349,47 +528,67 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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 7Days
</div> </div>
</div> </div>
</itemCenter> </itemCenter>
<!-- 第2-4、5-7、8-10名奖励 --> <!-- 第2-4、5-7、8-10名奖励 -->
<itemCenter v-else :imgUrl="topImg[Number(rewardsTop.rankRange) - 1]" <itemCenter
:contentStyle="`display: grid;grid-template-columns: repeat(3, 1fr);gap: 4vw;padding: 28vw 3vw 10vw;`"> v-else
<div v-for="(reward, rewardIndex) in rewardsTop.rewards" :key="rewardIndex" style="width: 100%" :imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
:style="rewardIndex == 3 ? `grid-row: 2;grid-column: 2;` : ''"> :contentStyle="`display: grid;grid-template-columns: repeat(3, 1fr);gap: 4vw;padding: 28vw 3vw 10vw;`"
<div style=" >
<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%; width: 100%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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" style="display: block; width: 70%; object-fit: cover"
@error="(e) => handleRewardImageError(e, reward.type)" /> @error="(e) => handleRewardImageError(e, reward.type)"
/>
</div> </div>
<!-- 数值 --> <!-- 数值 -->
<div style=" <div
style="
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
"> "
<div style=" >
<div
style="
min-width: 0; min-width: 0;
color: #f9e447; color: #f9e447;
text-align: center; text-align: center;
font-size: 1.2em; font-size: 1.2em;
font-weight: 900; font-weight: 900;
"> "
>
{{ showDetail(reward.type, reward) }} {{ showDetail(reward.type, reward) }}
</div> </div>
</div> </div>
@ -403,10 +602,15 @@
<div v-if="rankingShow" style="height: 22vw"></div> <div v-if="rankingShow" style="height: 22vw"></div>
<!-- 我的排名 --> <!-- 我的排名 -->
<itemCenter v-if="rankingShow" style="position: fixed; bottom: 0; z-index: 3" :imgUrl="imageUrl('myRankingBg')" <itemCenter
:contentStyle="`padding: 0 8%`"> v-if="rankingShow"
style="position: fixed; bottom: 0; z-index: 3"
:imgUrl="imageUrl('myRankingBg')"
:contentStyle="`padding: 0 8%`"
>
<!-- 基本信息 --> <!-- 基本信息 -->
<div style=" <div
style="
flex: 1; flex: 1;
min-width: 0; min-width: 0;
@ -415,45 +619,61 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
"> "
>
<!-- 排名 --> <!-- 排名 -->
<div style="color: #ffe601; font-weight: 700"> <div style="color: #ffe601; font-weight: 700">
{{ myRanking.rank || 999 }} {{ myRanking.rank || 999 }}
</div> </div>
<!-- 头像 --> <!-- 头像 -->
<img v-smart-img :src="myRanking.avatar || ''" alt="" style=" <img
v-smart-img
:src="myRanking.avatar || ''"
alt=""
style="
display: block; display: block;
width: 15vw; width: 15vw;
aspect-ratio: 1/1; aspect-ratio: 1/1;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
" @error="handleAvatarImageError" /> "
@error="handleAvatarImageError"
/>
<!-- 名称 --> <!-- 名称 -->
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column"> <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
<div style=" <div
style="
color: #fff; color: #fff;
font-weight: 860; font-weight: 860;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
" class="UserNickname"> "
class="UserNickname"
>
{{ myRanking.nickname }} {{ myRanking.nickname }}
</div> </div>
</div> </div>
</div> </div>
<!-- 贡献值 --> <!-- 贡献值 -->
<div style=" <div
style="
width: auto; width: auto;
min-width: 0; min-width: 0;
display: flex; display: flex;
align-items: center; 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"> <div style="color: #ffe601; font-weight: 700">
{{ myRanking.quantity || 0 }} {{ myRanking.quantity || 0 }}
</div> </div>
@ -464,10 +684,16 @@
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false"> <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
<!-- help弹窗 --> <!-- help弹窗 -->
<div style="margin: 10vh 0 5vh" @click.stop> <div style="margin: 10vh 0 5vh" @click.stop>
<itemCenter :imgUrl="imageUrl(getImgName('helpBg'))" <itemCenter
:contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`"> :imgUrl="imageUrl(getImgName('helpBg'))"
<img v-smart-img :src="imageUrl(getImgName('helpInfo'))" alt="" :contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`"
style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw" /> >
<img
v-smart-img
:src="imageUrl(getImgName('helpInfo'))"
alt=""
style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
/>
</itemCenter> </itemCenter>
</div> </div>
</maskLayer> </maskLayer>
@ -481,7 +707,7 @@
import { isInApp, viewUserInfo } from '@/utils/appBridge.js' import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js' import { connectToApp } from '@/utils/appConnector.js'
import { useLangStore } from '@/stores/lang' import { useLangStore } from '@/stores/lang'
import { getPngUrl } from '@/config/imagePaths.js' import { getPngUrl, getWebpUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/imagePreloader.js' import { preloadImages } from '@/utils/imagePreloader.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js' import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
@ -510,6 +736,7 @@
// 获取OSS图片URL的函数 // 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/GamesKing/', filename) const imageUrl = (filename) => getPngUrl('Ranking/GamesKing/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/GamesKing/', filename)
// 根据语言获取图片名 // 根据语言获取图片名
const getImgName = (filename) => { const getImgName = (filename) => {