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 2025-12-10 16:50:58 +08:00
parent c095d7885a
commit 18b53e627a
1 changed files with 52 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/views/Activities/Game/index.vue
View File

@ -18,7 +18,7 @@
</div>
<!-- 倒计时 -->
<div style="display: flex; justify-content: center; margin-top: 15vw">
<div class="timeBox">
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<div class="timeText" style="">{{ Days }}D</div>
@ -46,15 +46,12 @@
<!-- 切换按钮 -->
<div>
<div
v-if="currentLangType == 'en'"
style="display: flex; justify-content: space-around; margin-top: 2vw"
>
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
<!-- 排行榜按钮 -->
<div style="width: 40%; position: relative">
<img
v-smart-img
:src="imageUrl('rankingBt')"
:src="imageUrl(getImgName('rankingBt'))"
alt=""
style="display: block; width: 100%"
:style="{ opacity: rankingShow ? 0 : 1 }"
@ -62,7 +59,7 @@
/>
<img
v-smart-img
:src="imageUrl('rankingBtActive')"
:src="imageUrl(getImgName('rankingBtActive'))"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: rankingShow ? 1 : 0 }"
@ -74,7 +71,7 @@
<div style="width: 40%; position: relative">
<img
v-smart-img
:src="imageUrl('rewardsBt')"
:src="imageUrl(getImgName('rewardsBt'))"
alt=""
style="display: block; width: 100%"
:style="{ opacity: rankingShow ? 1 : 0 }"
@ -82,53 +79,7 @@
/>
<img
v-smart-img
:src="imageUrl('rewardBtActive')"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: rankingShow ? 0 : 1 }"
@click="rankingShow = false"
/>
</div>
</div>
<!-- 阿拉伯语版本 -->
<div
v-if="currentLangType == 'ar'"
style="display: flex; justify-content: space-around; margin-top: 2vw"
>
<!-- 排行榜按钮 -->
<div style="width: 40%; position: relative">
<img
v-smart-img
:src="imageUrl('rankingBtAr')"
alt=""
style="display: block; width: 100%"
:style="{ opacity: rankingShow ? 0 : 1 }"
@click="rankingShow = true"
/>
<img
v-smart-img
:src="imageUrl('rankingBtActiveAr')"
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('rewardsBtAr')"
alt=""
style="display: block; width: 100%"
:style="{ opacity: rankingShow ? 1 : 0 }"
@click="rankingShow = false"
/>
<img
v-smart-img
:src="imageUrl('rewardBtActiveAr')"
:src="imageUrl(getImgName('rewardBtActive'))"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: rankingShow ? 0 : 1 }"
@ -430,16 +381,8 @@
<!-- help弹窗 -->
<div style="margin: 20% 0" @click.stop>
<img
v-if="currentLangType == 'en'"
v-smart-img
:src="imageUrl('helpInfo')"
alt=""
style="display: block; width: 100%"
/>
<img
v-if="currentLangType == 'ar'"
v-smart-img
:src="imageUrl('helpInfoAr')"
:src="imageUrl(getImgName('helpInfo'))"
alt=""
style="display: block; width: 100%"
/>
@ -464,18 +407,22 @@ import itemCenter from '@/components/itemCenter.vue'
import TopUser from './components/topUser.vue'
import maskLayer from '@/components/MaskLayer.vue'
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Activities/Game/', filename)
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
const maskLayerShow = ref(false) //帮助模块
const langStore = useLangStore()
// 当前语言类型
const currentLangType = computed(() => {
return langStore.selectedLang?.type || 'en'
})
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Activities/Game/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `${filename}Ar` : filename
}
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
const maskLayerShow = ref(false) //帮助模块
// 倒计时
const Days = ref(0)
const Hours = ref(0)
@ -619,11 +566,29 @@ const preloadCriticalImages = () => {
imageUrl('timeBg'),
imageUrl('rankingBt'),
imageUrl('rankingBtActive'),
imageUrl('rewardBtActive'),
imageUrl('rewardsBt'),
imageUrl('RankingMain'),
imageUrl('topOne'),
imageUrl('topTwo'),
imageUrl('topThree'),
imageUrl('RankingItem'),
imageUrl('RankingBottomBorder'),
imageUrl('myRankingBg'),
imageUrl('helpInfo'),
imageUrl('helpInfoAr'),
imageUrl('top1RewardBg'),
imageUrl('top2RewardBg'),
imageUrl('top3RewardBg'),
imageUrl('giftItemBg'),
]
const criticalImages_ar = [
imageUrl('bg'),
imageUrl('timeBg'),
imageUrl('rankingBtAr'),
imageUrl('rankingBtActiveAr'),
imageUrl('rewardBtActive'),
imageUrl('rewardBtActiveAr'),
imageUrl('rewardsBt'),
imageUrl('rewardsBtAr'),
imageUrl('RankingMain'),
imageUrl('topOne'),
@ -640,7 +605,11 @@ const preloadCriticalImages = () => {
imageUrl('giftItemBg'),
]
preloadImages(criticalImages)
if (currentLangType.value == 'en') {
preloadImages(criticalImages)
} else if (currentLangType.value == 'ar') {
preloadImages(criticalImages_ar)
}
}
// 使用工具函数连接APP
@ -732,6 +701,12 @@ onUnmounted(() => {
font-size: 0.8em;
}
.timeBox {
display: flex;
justify-content: center;
margin-top: 15vw;
}
@media screen and (max-width: 360px) {
* {
font-size: 10px;
@ -755,4 +730,8 @@ onUnmounted(() => {
font-size: 32px;
}
}
[dir='rtl'] .timeBox {
flex-direction: row-reverse;
}
</style>