<template>
|
<div class="ioe-swiper h-330 ">
|
<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-330">
|
<img :src="item.image" alt="" title="" @click="toPath(item.url)" class="h-330 border bannerimg w-full" />
|
<!-- <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, showToast } from 'vant';
|
import { mapGetters } from 'vuex';
|
import Axios from "@/service/userCenter.js";
|
import { _getBanner } from '@/service/user.api'
|
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: [],
|
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
|
}
|
_getBanner({
|
model: 'top',
|
language
|
}).then((res) => {
|
this.bannerList = res
|
}).catch((error) => {
|
if (error.code === 'ECONNABORTED') { showToast(this.$t('网络超时！')); }
|
else if (error.msg !== undefined) { showToast(this.$t(error.msg)); }
|
});
|
}
|
},
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import "@/assets/init.scss";
|
|
#cryptos {
|
.ioe-swiper {
|
box-sizing: border-box;
|
}
|
|
.btn {
|
border-radius: 55px;
|
}
|
|
.bannerimg {
|
border-radius: 30px !important;
|
border: none !important;
|
}
|
.h-330 {
|
height: 340px;
|
}
|
}
|
</style>
|
