101 lines
2.3 KiB
Vue

<template>
<div class="policy-container">
<!-- 顶部导航 -->
<GeneralHeader
:title="t('admin_policy')"
color="black"
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
/>
<img
v-smart-img
:src="imageUrl(getImgName('policy0'))"
alt=""
style="width: 100%; display: block"
/>
<img
v-smart-img
:src="imageUrl(getImgName('policy1'))"
alt=""
style="width: 100%; display: block"
/>
<img
v-smart-img
:src="imageUrl(getImgName('policy2'))"
alt=""
style="width: 100%; display: block"
/>
<img
v-smart-img
:src="imageUrl(getImgName('policy3'))"
alt=""
style="width: 100%; display: block"
/>
</div>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useLangStore } from '@/stores/lang'
import { getPngUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/imagePreloader.js'
import GeneralHeader from '@/components/GeneralHeader.vue'
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('AdminCenter/Policy/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
}
const langStore = useLangStore()
const { t, locale } = useI18n()
// 当前语言类型
const currentLangType = computed(() => {
return langStore.selectedLang?.type || 'en'
})
const policyImgUrl = ref('') //政策图
// 预加载关键图片
const preloadCriticalImages = () => {
const criticalImages = [
imageUrl('policy0'),
imageUrl('policy1'),
imageUrl('policy2'),
imageUrl('policy3'),
]
const criticalImages_ar = [
imageUrl('policy0_ar'),
imageUrl('policy1_ar'),
imageUrl('policy2_ar'),
imageUrl('policy3_ar'),
]
if (currentLangType.value == 'en') {
preloadImages(criticalImages)
} else if (currentLangType.value == 'ar') {
preloadImages(criticalImages_ar)
}
}
onMounted(() => {
preloadCriticalImages() //预加载关键图片
})
</script>
<style lang="scss" scoped>
.policy-container {
height: 100vh;
background-image: url(../../assets/images/secondBg.png);
overflow-y: auto;
}
.policy-container::-webkit-scrollbar {
display: none;
}
</style>