<template>
|
<div class="lang">
|
<assets-head :title="$t('语言设置')" />
|
<div v-for="(item, index) in lang" :key="index" class="lang-padding" @click="handleSetLang(item.key)">
|
<div class="lang-title flex items-center font-26 textColor">
|
<img class="w-75 h-50 mr-24" :src="item.image" alt="">
|
{{ item.title }}
|
</div>
|
<div class="lang-flex"></div>
|
<img v-if="item.key == $i18n.locale" src="../../assets/image/public/checked.png"
|
style="width: 20px;height: 20px;" />
|
</div>
|
</div>
|
</template>
|
<script>
|
import { mapGetters, mapMutations } from "vuex";
|
import assetsHead from "@/components/assets-head";
|
import { setStorage } from '@/utils/utis'
|
export default {
|
data() {
|
return {
|
lang: [
|
{ title: '繁体中文', key: 'zh-TW', image: require('../../assets/image/lang/hongkong.png') },
|
{ title: '简体中文', key: 'zh-CN', image: require('../../assets/image/lang/zh-CN.png') },
|
{ title: 'English', key: 'en', image: require('../../assets/image/lang/en-US.png') },//英语
|
{ title: '한국인', key: 'ko', image: require('../../assets/image/lang/Korean.png') },//韩语
|
{ title: 'Deutsch', key: 'de', image: require('../../assets/image/lang/de.png') }, //德语
|
{ title: 'Français', key: 'fr', image: require('../../assets/image/lang/French.png') }, //法语
|
{ title: 'やまと', key: 'ja', image: require('../../assets/image/lang/Japanese.png') }, //日语
|
{ title: 'ไทย', key: 'th', image: require('../../assets/image/lang/Thai.png') }, //泰语
|
// { title: 'español', key: 'es', image: require('../../assets/image/lang/Spanish.png') }, //西班牙
|
// { title: 'عرب', key: 'ar', image: require('../../assets/image/lang/alb.png') }, //阿拉伯语
|
{ title: 'Tiếng Việt', key: 'vi', image: require('../../assets/image/lang/vi.png') },//越南语
|
{ title: 'Italiano', key: 'it', image: require('../../assets/image/lang/Italy.png') }, //意大利语
|
|
]
|
}
|
},
|
components: {
|
assetsHead,
|
},
|
computed: {
|
...mapGetters({
|
activeLang: 'language'
|
})
|
},
|
methods: {
|
...mapMutations('language', ['setLanguage']),
|
handleSetLang(lang) {
|
// 设置i18n.locale 组件库会按照上面的配置使用对应的文案文件
|
this.$i18n.locale = lang
|
// 提交mutations
|
this.setLanguage(lang)
|
setStorage('popNotice', false)
|
},
|
onClickLeft() {
|
this.$router.push('/')
|
console.log(this.$i18n.locale)
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.lang {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.CommonProblem-padding {
|
padding-left: 50px;
|
padding-right: 50px;
|
}
|
|
.lang-padding {
|
padding: 43px 35px 43px 35px;
|
box-sizing: border-box;
|
|
@include themify() {
|
border-bottom: 1px solid themed("line_color");
|
}
|
|
font-weight: 400;
|
font-size: 35px;
|
color: #000000;
|
display: flex;
|
}
|
|
.lang-flex {
|
flex: 1;
|
}
|
</style>
|
