<template>
|
<div class="ioe-swiper h-304 ">
|
<van-swipe ref="swipe" :autoplay="3000" :show-indicators="false" lazy-render>
|
<van-swipe-item v-for="(item,index) in bannerList" :key="index + language" class="w-full h-304">
|
<img :src="item.image" alt="" title="" @click="toPath(item.url)" class="h-304 border bannerimg w-full" style="border-radius: 0" />
|
<!-- <img -->
|
<!-- <div class="w-full h-420 absolute top-1 flex flex-col text-white"
|
:class="item.subTitle ? 'pl-60' : 'items-center'">
|
<template v-if="$i18n.locale === 'CN' || $i18n.locale === 'zh-CN'">
|
<p :class="item.subTitle ? 'font-60 mt-124 mb-16' : 'font-48 mt-140 mb-54'">{{item.title}}</p>
|
</template>
|
<template v-else>
|
<p :class="item.subTitle ? 'font-45 mt-124 mb-16' : 'font-48 mt-140 mb-54'">{{item.title}}</p>
|
</template>
|
<p v-show="item.subTitle" class="font-25 mb-50">{{item.subTitle}}</p>
|
<p class="font-35 btn w-222 h-65 btnMain flex justify-center items-center">{{item.btnText}}</p>
|
</div> -->
|
</van-swipe-item>
|
</van-swipe>
|
</div>
|
</template>
|
|
<script>
|
import { Swipe, SwipeItem } from 'vant';
|
import { mapGetters } from 'vuex';
|
import Axios from "@/API/userCenter.js";
|
export default {
|
name: 'IndexSwiper',
|
components: {
|
[Swipe.name]: Swipe,
|
[SwipeItem.name]: SwipeItem
|
},
|
props: {
|
keyNum: {
|
type: Number,
|
default: 1
|
},
|
type: {
|
type: String,
|
default: 'home'
|
}
|
},
|
data(){
|
return{
|
bannerList:[
|
{
|
image:require('../../assets/image/11.png')
|
},
|
{
|
image:require('../../assets/image/22.png')
|
},
|
{
|
image:require('../../assets/image/33.png')
|
},
|
{
|
image:require('../../assets/image/44.png')
|
},
|
{
|
image:require('../../assets/image/55.png')
|
}
|
],
|
timer:null
|
}
|
},
|
computed: {
|
...mapGetters('language', ['language']),
|
imgList () {
|
return this.type === 'home' ? [
|
{ id: 1, img: 'swiper_item', title: this.$t('參與挖礦贏大獎'), subTitle: this.$t('加入我們，收益超乎你的想像！'), btnText: this.$t('立即加入')},
|
{ id: 2, img: 'swiper_item', title: this.$t('收益更簡單，免費領空投！'), subTitle: '', btnText: this.$t('立即加入')},
|
// { id: 3, img: 'swiper_item', title: this.$t('收益更簡單，免費領空投！'), subTitle: '', btnText: this.$t('立即加入') }
|
] : [
|
{ id: 3, img: 'swiper_item'},
|
]
|
},
|
language(){
|
this.getBanner();
|
return this.$i18n.locale;
|
}
|
},
|
mounted(){
|
this.getBanner();
|
},
|
activated() {
|
this.getBanner()
|
this.timer = setTimeout(() => {
|
this.$refs.swipe.resize()
|
}, 300);
|
},
|
deactivated(){
|
clearTimeout(this.timer)
|
},
|
methods:{
|
toPath(url) {
|
if (url) {
|
this.$router.push(url)
|
}
|
},
|
getBanner(){
|
let language
|
if (this.$i18n.locale === 'en-US') {
|
language = 'en'
|
} else if (this.$i18n.locale.indexOf('CN') >= 0) {
|
language = 'CN'
|
} else {
|
language = this.$i18n.locale
|
}
|
Axios.getBanner({
|
model:'top',
|
language
|
}).then((res) => {
|
// this.bannerList = res.data
|
}).catch((error) => {
|
if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
|
else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}
|
});
|
}
|
},
|
}
|
</script>
|
<style lang="scss" scoped>
|
|
.ioe-swiper{
|
box-sizing: border-box;
|
-webkit-overflow-scrolling: touch;
|
}
|
.btn {
|
border-radius: 55px;
|
}
|
.bannerimg{
|
border-radius: 9px;
|
}
|
</style>
|
