feat(幸运冠军活动页): 新增图片预加载缓冲动画，并修复切换按钮的显示问题
This commit is contained in:
hzj
parent
dcea805840
commit
e4d532af3e
@ -1,439 +1,452 @@
|
||||
<!-- src/views/Activities/Game/index.vue -->
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<!-- 新增的背景图层 -->
|
||||
<div class="background-overlay" :style="{ '--bg2-url': `url(${imageUrl('bg2')})` }"></div>
|
||||
<!-- 预加载状态 -->
|
||||
<div v-if="isLoading" class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>{{ $t('loading') }}...</p>
|
||||
</div>
|
||||
|
||||
<div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
|
||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
||||
<!-- 主要内容 -->
|
||||
<div v-else>
|
||||
<!-- 新增的背景图层 -->
|
||||
<div class="background-overlay" :style="{ '--bg2-url': `url(${imageUrl('bg2')})` }"></div>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<div style="margin-top: 72vw; display: flex; justify-content: flex-end; align-items: center">
|
||||
<!-- 帮助按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('helpBt')"
|
||||
alt=""
|
||||
style="display: block; position: relative; width: 12vw; margin-right: 8px"
|
||||
@click="maskLayerShow = true"
|
||||
/>
|
||||
</div>
|
||||
<div class="bg">
|
||||
<itemCenter :imgUrl="imageUrl('bg')" :contentStyle="`display: block;`">
|
||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||
<!-- <div v-if="isInAppEnvironment" style="height: 30px"></div> -->
|
||||
|
||||
<!-- 倒计时 -->
|
||||
<div class="timeBox">
|
||||
<div style="width: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||
<div class="timeText" style="">{{ Days }}D</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
<div class="timeText timeGap"></div>
|
||||
<div style="width: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||
<div class="timeText" style="">{{ Hours }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
<div class="timeText timeGap">:</div>
|
||||
<div style="width: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||
<div class="timeText" style="">{{ Minutes }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
<div class="timeText timeGap">:</div>
|
||||
<div style="width: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||
<div class="timeText" style="">{{ Second }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 切换按钮 -->
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
|
||||
<!-- 排行榜按钮 -->
|
||||
<div style="width: 40%; position: relative">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rankingBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
:style="{ opacity: rankingShow ? 0 : 1 }"
|
||||
@click="rankingShow = true"
|
||||
/>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rankingBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
|
||||
:style="{ opacity: rankingShow ? 1 : 0 }"
|
||||
@click="rankingShow = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 奖励按钮 -->
|
||||
<div style="width: 40%; position: relative">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rewardsBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
:style="{ opacity: rankingShow ? 1 : 0 }"
|
||||
@click="rankingShow = false"
|
||||
/>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rewardBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
|
||||
:style="{ opacity: rankingShow ? 0 : 1 }"
|
||||
@click="rankingShow = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 展示内容 -->
|
||||
<div>
|
||||
<!-- Ranking -->
|
||||
<div v-show="rankingShow" style="position: relative; width: 100%">
|
||||
<!-- 背景图 -->
|
||||
<!-- 按钮 -->
|
||||
<div
|
||||
class="ranking-bg"
|
||||
:style="{ '--ranking-bg-url': `url(${imageUrl('RankingBg')})` }"
|
||||
></div>
|
||||
style="margin-top: 72vw; display: flex; justify-content: flex-end; align-items: center"
|
||||
>
|
||||
<!-- 帮助按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('helpBt')"
|
||||
alt=""
|
||||
style="display: block; position: relative; width: 12vw; margin-right: 8px"
|
||||
@click="maskLayerShow = true"
|
||||
/>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<div style="position: relative; z-index: 1">
|
||||
<!-- 前三名 -->
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl(getImgName('RankingMain'))"
|
||||
:contentStyle="`padding: 21% 5% 0;flex-direction: column;`"
|
||||
>
|
||||
<div>
|
||||
<!-- 第一 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<TopUser
|
||||
:BorderImgUrl="imageUrl('topOne')"
|
||||
:avatarUrl="RankingHasTop3[0].avatar"
|
||||
:name="RankingHasTop3[0].nickname"
|
||||
:distributionValue="RankingHasTop3[0].quantity"
|
||||
style="width: 60%"
|
||||
@click="viewUserInfo(RankingHasTop3[0].userId)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 第二三 -->
|
||||
<div
|
||||
style="
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: -23%;
|
||||
pointer-events: none;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="pointer-events: auto; width: 36%"
|
||||
@click.stop="viewUserInfo(RankingHasTop3[1].userId)"
|
||||
>
|
||||
<TopUser
|
||||
:isTopOne="false"
|
||||
ranking="2"
|
||||
:BorderImgUrl="imageUrl('topTwo')"
|
||||
:avatarUrl="RankingHasTop3[1].avatar"
|
||||
:name="RankingHasTop3[1].nickname"
|
||||
:distributionValue="RankingHasTop3[1].quantity"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="pointer-events: auto; width: 36%"
|
||||
@click.stop="viewUserInfo(RankingHasTop3[2].userId)"
|
||||
>
|
||||
<TopUser
|
||||
:isTopOne="false"
|
||||
ranking="3"
|
||||
:BorderImgUrl="imageUrl('topThree')"
|
||||
:avatarUrl="RankingHasTop3[2].avatar"
|
||||
:name="RankingHasTop3[2].nickname"
|
||||
:distributionValue="RankingHasTop3[2].quantity"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 倒计时 -->
|
||||
<div class="timeBox">
|
||||
<div style="width: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||
<div class="timeText" style="">{{ Days }}D</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
<div class="timeText timeGap"></div>
|
||||
<div style="width: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||
<div class="timeText" style="">{{ Hours }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
<div class="timeText timeGap">:</div>
|
||||
<div style="width: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||
<div class="timeText" style="">{{ Minutes }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
<div class="timeText timeGap">:</div>
|
||||
<div style="width: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')">
|
||||
<div class="timeText" style="">{{ Second }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四名开始 -->
|
||||
<div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
|
||||
<!-- 切换按钮 -->
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
|
||||
<!-- 排行榜按钮 -->
|
||||
<div style="width: 40%; position: relative" @click="rankingShow = true">
|
||||
<img
|
||||
v-show="!rankingShow"
|
||||
v-smart-img
|
||||
class="toggle-image"
|
||||
:src="imageUrl(getImgName('rankingBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="rankingShow"
|
||||
v-smart-img
|
||||
class="toggle-image"
|
||||
:src="imageUrl(getImgName('rankingBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 奖励按钮 -->
|
||||
<div style="width: 40%; position: relative" @click="rankingShow = false">
|
||||
<img
|
||||
v-show="rankingShow"
|
||||
v-smart-img
|
||||
class="toggle-image"
|
||||
:src="imageUrl(getImgName('rewardsBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="!rankingShow"
|
||||
v-smart-img
|
||||
class="toggle-image"
|
||||
:src="imageUrl(getImgName('rewardBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 展示内容 -->
|
||||
<div>
|
||||
<!-- Ranking -->
|
||||
<div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
|
||||
<!-- 背景图 -->
|
||||
<div
|
||||
class="ranking-bg"
|
||||
:style="{ '--ranking-bg-url': `url(${imageUrl('RankingBg')})` }"
|
||||
></div>
|
||||
|
||||
<div style="position: relative; z-index: 1">
|
||||
<!-- 前三名 -->
|
||||
<itemCenter
|
||||
v-for="(listItem, index) in showRanking"
|
||||
:key="listItem.userId"
|
||||
:imgUrl="imageUrl('RankingItem')"
|
||||
:contentStyle="`padding: 0 13%`"
|
||||
:lazy="true"
|
||||
:immediate="index < 2"
|
||||
@click="viewUserInfo(listItem.userId)"
|
||||
:imgUrl="imageUrl(getImgName('RankingMain'))"
|
||||
:contentStyle="`padding: 21% 5% 0;flex-direction: column;`"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
<div>
|
||||
<!-- 第一 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<TopUser
|
||||
:BorderImgUrl="imageUrl('topOne')"
|
||||
:avatarUrl="RankingHasTop3[0].avatar"
|
||||
:name="RankingHasTop3[0].nickname"
|
||||
:distributionValue="RankingHasTop3[0].quantity"
|
||||
style="width: 60%"
|
||||
@click="viewUserInfo(RankingHasTop3[0].userId)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 第二三 -->
|
||||
<div
|
||||
style="
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: -23%;
|
||||
pointer-events: none;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="pointer-events: auto; width: 36%"
|
||||
@click.stop="viewUserInfo(RankingHasTop3[1].userId)"
|
||||
>
|
||||
<TopUser
|
||||
:isTopOne="false"
|
||||
ranking="2"
|
||||
:BorderImgUrl="imageUrl('topTwo')"
|
||||
:avatarUrl="RankingHasTop3[1].avatar"
|
||||
:name="RankingHasTop3[1].nickname"
|
||||
:distributionValue="RankingHasTop3[1].quantity"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
gap: 4px;
|
||||
"
|
||||
<div
|
||||
style="pointer-events: auto; width: 36%"
|
||||
@click.stop="viewUserInfo(RankingHasTop3[2].userId)"
|
||||
>
|
||||
<TopUser
|
||||
:isTopOne="false"
|
||||
ranking="3"
|
||||
:BorderImgUrl="imageUrl('topThree')"
|
||||
:avatarUrl="RankingHasTop3[2].avatar"
|
||||
:name="RankingHasTop3[2].nickname"
|
||||
:distributionValue="RankingHasTop3[2].quantity"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 第四名开始 -->
|
||||
<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 13%`"
|
||||
:lazy="true"
|
||||
:immediate="index < 2"
|
||||
@click="viewUserInfo(listItem.userId)"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<div style="color: #ffe601; font-weight: 700">
|
||||
{{ listItem?.rank }}
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<div style="color: #ffe601; font-weight: 700">
|
||||
{{ listItem?.rank }}
|
||||
</div>
|
||||
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="listItem?.avatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 3.5em;
|
||||
margin: 0 2%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
|
||||
<!-- 名称、id -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="UserNickname"
|
||||
>
|
||||
{{ listItem?.nickname }}
|
||||
</div>
|
||||
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
||||
{{ $t('user_id_prefix') }} {{ listItem?.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="listItem?.avatar || ''"
|
||||
alt=""
|
||||
<!-- 贡献值 -->
|
||||
<div
|
||||
style="
|
||||
display: block;
|
||||
width: 3.5em;
|
||||
margin: 0 2%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
|
||||
<!-- 名称、id -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||||
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"
|
||||
/>
|
||||
<div style="color: #ffe601; font-weight: 700" class="UserNickname">
|
||||
{{ listItem?.quantity }}
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
|
||||
<!-- 底框 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('RankingBottomBorder')"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block; margin-top: -13vw; position: relative; z-index: 1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rewards -->
|
||||
<div
|
||||
v-show="!rankingShow"
|
||||
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
|
||||
:imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
|
||||
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;padding: 20vw 8vw 8vw;`"
|
||||
>
|
||||
<div
|
||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
||||
:key="rewardIndex"
|
||||
style="width: 100%"
|
||||
>
|
||||
<div style="position: relative">
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl('giftItemBg')"
|
||||
:contentStyle="`padding-bottom: 15%;`"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="reward.cover || ''"
|
||||
alt=""
|
||||
style="display: block; width: 70%; object-fit: cover"
|
||||
@error="(e) => handleRewardImageError(e, reward.type)"
|
||||
/>
|
||||
</itemCenter>
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 16%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="UserNickname"
|
||||
>
|
||||
{{ listItem?.nickname }}
|
||||
</div>
|
||||
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
||||
{{ $t('user_id_prefix') }} {{ listItem?.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
min-width: 0;
|
||||
padding: 0 1vw;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#fff677 6.36%,
|
||||
#d39f1e 26%,
|
||||
#fff891 49.56%,
|
||||
#ffc93e 70.51%,
|
||||
#ffc 93.64%
|
||||
);
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<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"
|
||||
/>
|
||||
<div style="color: #ffe601; font-weight: 700" class="UserNickname">
|
||||
{{ listItem?.quantity }}
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
"
|
||||
>
|
||||
{{ showDetail(reward.type, reward) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底框 -->
|
||||
<!-- 我的排名占位 -->
|
||||
<div style="height: 30vw"></div>
|
||||
|
||||
<!-- 我的排名 -->
|
||||
<itemCenter
|
||||
style="position: fixed; bottom: 0; z-index: 2"
|
||||
:imgUrl="imageUrl('myRankingBg')"
|
||||
:contentStyle="`padding: 2% 8% 0`"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<div style="color: #ffe601; font-weight: 700">
|
||||
{{ myRanking.rank || 999 }}
|
||||
</div>
|
||||
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('RankingBottomBorder')"
|
||||
:src="myRanking.avatar || ''"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block; margin-top: -13vw; position: relative; z-index: 1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rewards -->
|
||||
<div
|
||||
v-show="!rankingShow"
|
||||
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
|
||||
:imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
|
||||
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;padding: 20vw 8vw 8vw;`"
|
||||
>
|
||||
<div
|
||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
||||
:key="rewardIndex"
|
||||
style="width: 100%"
|
||||
>
|
||||
<div style="position: relative">
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl('giftItemBg')"
|
||||
:contentStyle="`padding-bottom: 15%;`"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="reward.cover || ''"
|
||||
alt=""
|
||||
style="display: block; width: 70%; object-fit: cover"
|
||||
@error="(e) => handleRewardImageError(e, reward.type)"
|
||||
/>
|
||||
</itemCenter>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 16%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
min-width: 0;
|
||||
padding: 0 1vw;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#fff677 6.36%,
|
||||
#d39f1e 26%,
|
||||
#fff891 49.56%,
|
||||
#ffc93e 70.51%,
|
||||
#ffc 93.64%
|
||||
);
|
||||
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
"
|
||||
>
|
||||
{{ showDetail(reward.type, reward) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的排名占位 -->
|
||||
<div style="height: 30vw"></div>
|
||||
|
||||
<!-- 我的排名 -->
|
||||
<itemCenter
|
||||
style="position: fixed; bottom: 0; z-index: 2"
|
||||
:imgUrl="imageUrl('myRankingBg')"
|
||||
:contentStyle="`padding: 2% 8% 0`"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
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="
|
||||
display: block;
|
||||
width: 4em;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
|
||||
<!-- 名称 -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
width: 4em;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
class="UserNickname"
|
||||
>
|
||||
{{ myRanking.nickname }}
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
|
||||
<!-- 名称 -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="UserNickname"
|
||||
>
|
||||
{{ myRanking.nickname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
<!-- 贡献值 -->
|
||||
<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"
|
||||
/>
|
||||
<div style="color: #ffe601; font-weight: 700">
|
||||
{{ myRanking.quantity || 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"
|
||||
/>
|
||||
<div style="color: #ffe601; font-weight: 700">
|
||||
{{ myRanking.quantity || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 弹窗遮罩层 -->
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||||
<!-- help弹窗 -->
|
||||
<div style="margin: 20% 0" @click.stop>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('helpInfo'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</maskLayer>
|
||||
<!-- 弹窗遮罩层 -->
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||||
<!-- help弹窗 -->
|
||||
<div style="margin: 20% 0" @click.stop>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('helpInfo'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</maskLayer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -456,6 +469,9 @@ import maskLayer from '@/components/MaskLayer.vue'
|
||||
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
|
||||
const maskLayerShow = ref(false) //帮助模块
|
||||
|
||||
// 预加载状态
|
||||
const isLoading = ref(true)
|
||||
|
||||
const langStore = useLangStore()
|
||||
// 当前语言类型
|
||||
const currentLangType = computed(() => {
|
||||
@ -600,21 +616,23 @@ const getRewardsAndGifts = async () => {
|
||||
}
|
||||
|
||||
// 刷新页面数据
|
||||
const initData = () => {
|
||||
getListAndMy() // 获取排行榜和我的排名
|
||||
getRewardsAndGifts() //获取本周的礼物和奖励列表
|
||||
const initData = async () => {
|
||||
await Promise.all([
|
||||
getListAndMy(), // 获取排行榜和我的排名
|
||||
getRewardsAndGifts(), //获取本周的礼物和奖励列表
|
||||
])
|
||||
}
|
||||
|
||||
// 预加载关键图片
|
||||
const preloadCriticalImages = () => {
|
||||
const preloadCriticalImages = async () => {
|
||||
const criticalImages = [
|
||||
imageUrl('bg'),
|
||||
imageUrl('bg2'),
|
||||
// imageUrl('bg2'),
|
||||
imageUrl('giftItemBg'),
|
||||
imageUrl('helpBt'),
|
||||
imageUrl('helpInfo'),
|
||||
imageUrl('myRankingBg'),
|
||||
imageUrl('RankingBg'),
|
||||
// imageUrl('RankingBg'),
|
||||
imageUrl('RankingBottomBorder'),
|
||||
imageUrl('rankingBt'),
|
||||
imageUrl('rankingBtActive'),
|
||||
@ -633,12 +651,12 @@ const preloadCriticalImages = () => {
|
||||
|
||||
const criticalImages_ar = [
|
||||
imageUrl('bg'),
|
||||
imageUrl('bg2'),
|
||||
// imageUrl('bg2'),
|
||||
imageUrl('giftItemBg'),
|
||||
imageUrl('helpBt'),
|
||||
imageUrl('helpInfo_ar'),
|
||||
imageUrl('myRankingBg'),
|
||||
imageUrl('RankingBg'),
|
||||
// imageUrl('RankingBg'),
|
||||
imageUrl('RankingBottomBorder'),
|
||||
imageUrl('rankingBt_ar'),
|
||||
imageUrl('rankingBtActive_ar'),
|
||||
@ -656,9 +674,22 @@ const preloadCriticalImages = () => {
|
||||
]
|
||||
|
||||
if (currentLangType.value == 'en') {
|
||||
preloadImages(criticalImages)
|
||||
await preloadImages(criticalImages)
|
||||
} else if (currentLangType.value == 'ar') {
|
||||
preloadImages(criticalImages_ar)
|
||||
await preloadImages(criticalImages_ar)
|
||||
}
|
||||
}
|
||||
|
||||
// 完成预加载
|
||||
const completePreloading = async () => {
|
||||
try {
|
||||
// 执行所有初始化操作
|
||||
await Promise.all([initData(), preloadCriticalImages()])
|
||||
} catch (error) {
|
||||
console.error('预加载过程中发生错误:', error)
|
||||
} finally {
|
||||
// 无论成功或失败都结束加载状态
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
@ -666,8 +697,7 @@ const preloadCriticalImages = () => {
|
||||
const connectToAppHandler = async () => {
|
||||
await connectToApp(() => {
|
||||
// 连接成功回调
|
||||
initData() //初始化数据
|
||||
preloadCriticalImages() //预加载关键图片
|
||||
completePreloading() // 完成预加载
|
||||
})
|
||||
}
|
||||
|
||||
@ -699,9 +729,6 @@ onUnmounted(() => {
|
||||
.bg {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-image: var(--bg-url);
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -770,6 +797,40 @@ onUnmounted(() => {
|
||||
margin-top: 10vw;
|
||||
}
|
||||
|
||||
/* 添加加载动画样式 */
|
||||
.loading-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #f59e0b;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.toggle-image {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user