152 lines
3.0 KiB
Vue
152 lines
3.0 KiB
Vue
<template>
|
|
<div class="fullPage">
|
|
<GeneralHeader :title="t('cp_reward')" :isHomePage="true" color="black" class="page-header" />
|
|
|
|
<div v-if="isLoading" class="loading-container">
|
|
<LoadingSpinner />
|
|
<p>{{ t('loading') }}...</p>
|
|
</div>
|
|
|
|
<div v-show="!isLoading" class="reward-content">
|
|
<img
|
|
v-for="imageName in rewardImages"
|
|
:key="imageName"
|
|
v-smart-img
|
|
:src="imageUrl(getImgName(imageName))"
|
|
alt=""
|
|
class="reward-image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { connectToApp } from '@/utils/appConnector.js'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useLangStore } from '@/stores/lang'
|
|
import { getWebpUrl } from '@/config/imagePaths.js'
|
|
import { preloadImages } from '@/utils/image/imagePreloader.js'
|
|
import GeneralHeader from '@/components/GeneralHeader.vue'
|
|
|
|
const isLoading = ref(true)
|
|
const rewardImages = ['CP1', 'CP2', 'CP3']
|
|
|
|
const { t } = useI18n()
|
|
const langStore = useLangStore()
|
|
|
|
const currentLangType = computed(() => {
|
|
return langStore.selectedLang?.type || 'en'
|
|
})
|
|
|
|
const imageUrl = (filename) => getWebpUrl('Activities/CPReward/', filename)
|
|
|
|
const getImgName = (filename) => {
|
|
return currentLangType.value === 'en' ? filename : `${filename}_${currentLangType.value}`
|
|
}
|
|
|
|
const preloadCriticalImages = async () => {
|
|
await preloadImages(rewardImages.map((imageName) => imageUrl(getImgName(imageName))))
|
|
}
|
|
|
|
const completePreloading = async () => {
|
|
try {
|
|
await preloadCriticalImages()
|
|
} catch (error) {
|
|
console.error('Image preloading failed:', error)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
const connectToAppHandler = async () => {
|
|
await connectToApp(() => {
|
|
completePreloading()
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
connectToAppHandler()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
color: #fff;
|
|
}
|
|
|
|
.fullPage {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-image: url(../../assets/images/Azizi/secondBg.png);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.fullPage::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.page-header {
|
|
position: relative;
|
|
z-index: 999;
|
|
background: transparent;
|
|
}
|
|
|
|
.loading-container {
|
|
width: 100vw;
|
|
min-height: calc(100vh - 60px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #666;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.reward-content {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow-x: hidden;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.reward-content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.reward-image {
|
|
display: block;
|
|
width: 100vw;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
* {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 360px) {
|
|
* {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
* {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
* {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style>
|