86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<template>
|
|
<div class="policy-container">
|
|
<img src="/src/assets/icon/arrowBlackGold.png" alt="" class="back-bt" @click="goBack" />
|
|
<img
|
|
:src="imageUrl(getImgName('rechargeGuide'))"
|
|
alt=""
|
|
style="display: block; width: 100vw; object-fit: cover"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useRouter } from 'vue-router'
|
|
import { useLangStore } from '@/stores/lang'
|
|
import { getPngUrl } from '@/config/imagePaths.js'
|
|
import { preloadImages } from '@/utils/imagePreloader.js'
|
|
|
|
const router = useRouter()
|
|
// 获取OSS图片URL的函数
|
|
const imageUrl = (filename) => getPngUrl('Recharge/', filename)
|
|
// 根据语言获取图片名
|
|
const getImgName = (filename) => {
|
|
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
|
|
}
|
|
|
|
const goBack = () => {
|
|
router.go(-1)
|
|
}
|
|
|
|
const langStore = useLangStore()
|
|
const { t, locale } = useI18n()
|
|
|
|
// 当前语言类型
|
|
const currentLangType = computed(() => {
|
|
return langStore.selectedLang?.type || 'en'
|
|
})
|
|
|
|
const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
|
|
|
|
// 预加载关键图片
|
|
const preloadCriticalImages = () => {
|
|
const criticalImages = [imageUrl('rechargeGuide')]
|
|
const criticalImages_ar = [imageUrl('rechargeGuide_ar')]
|
|
|
|
if (currentLangType.value == 'en') {
|
|
preloadImages(criticalImages)
|
|
} else if (currentLangType.value == 'ar') {
|
|
preloadImages(criticalImages_ar)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
preloadCriticalImages() // 预加载关键图片
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.policy-container {
|
|
position: relative;
|
|
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.policy-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.back-bt {
|
|
display: block;
|
|
width: 9vw;
|
|
|
|
position: absolute;
|
|
top: 15vw;
|
|
left: 5vw;
|
|
}
|
|
|
|
[dir='rtl'] .back-bt {
|
|
transform: scaleX(-1);
|
|
left: auto;
|
|
right: 5vw;
|
|
}
|
|
</style>
|