|
@@ -22,14 +22,24 @@
|
|
|
<div class="plate03 plate01" >
|
|
|
|
|
|
<div class="event plate">
|
|
|
- <touch class="touch-layout" :iactive='iactive' :data="imgs" :width="360" :loop="3000">
|
|
|
+ <swiper class="touch-layout" :options="swiperOption" ref="mySwiper">
|
|
|
+ <!-- slides -->
|
|
|
+ <swiper-slide v-for="(item, index) in imgs" :key="index" class="swiper-item">
|
|
|
+ <div class="banner-bg" :style="{'background-image': `url(${item.img})`}"></div>
|
|
|
+ </swiper-slide>
|
|
|
+ <!-- Optional controls -->
|
|
|
+ </swiper>
|
|
|
+ <ul class="ban" >
|
|
|
+ <span @click="slide(i)" v-for="(item, i) in imgs" :key="i" :class="{active: i === iactive}"></span>
|
|
|
+ </ul>
|
|
|
+ <!-- <touch class="touch-layout" :iactive='iactive' :data="imgs" :width="360" :loop="3000">
|
|
|
<div class="item" slot="item" slot-scope="{item}">
|
|
|
<img @dragstart='()=>{return false}' :src="item.img">
|
|
|
</div>
|
|
|
<div slot="foot" slot-scope="{data, index}" class="ban">
|
|
|
<span @click="iactive=i" v-for="(item, i) in data" :key="i" :class="{active: i===index}"></span>
|
|
|
</div>
|
|
|
- </touch>
|
|
|
+ </touch> -->
|
|
|
<div class="e-node-w">
|
|
|
<h2 class="common-title">{{langAbout.events.title}}</h2>
|
|
|
<ul class="e-node">
|
|
@@ -63,6 +73,8 @@ import aboutBg from '@/components/aboutBg'
|
|
|
import touch from '@/components/touch'
|
|
|
import footer from '@/page/layout/footer'
|
|
|
import { getPosition, detectZoom } from '@/util'
|
|
|
+import 'swiper/css/swiper.css'
|
|
|
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
|
|
|
|
|
// import * as luxy from 'luxy.js'
|
|
|
|
|
@@ -91,19 +103,35 @@ export default {
|
|
|
return {
|
|
|
devicePixelRatio: detectZoom(),
|
|
|
imgs,
|
|
|
- iactive: 0
|
|
|
+ iactive: 0,
|
|
|
+ swiperOption: {
|
|
|
+ autoplay: {
|
|
|
+ delay: 3000,
|
|
|
+ autoplayStopOnLast: false,
|
|
|
+ disableOnInteraction: false
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ slideChangeTransitionStart: () => {
|
|
|
+ this.iactive = this.mySwiper.activeIndex
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
aboutBg,
|
|
|
touch,
|
|
|
- ifooter: footer
|
|
|
+ ifooter: footer,
|
|
|
+ Swiper, SwiperSlide
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState({
|
|
|
split: state => state.ui.navDivision,
|
|
|
langAbout: state => state.language.home.about
|
|
|
- })
|
|
|
+ }),
|
|
|
+ mySwiper () {
|
|
|
+ return this.$refs['mySwiper'].$swiper
|
|
|
+ }
|
|
|
},
|
|
|
mounted () {
|
|
|
this.timeout = setTimeout(() => {
|
|
@@ -132,6 +160,12 @@ export default {
|
|
|
})
|
|
|
}, 100)
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ slide (i) {
|
|
|
+ this.mySwiper.slideTo(i, 500, false)
|
|
|
+ this.iactive = i
|
|
|
+ }
|
|
|
+ },
|
|
|
destroyed () {
|
|
|
clearTimeout(this.timeout)
|
|
|
window.removeEventListener('scroll', this.scrollHandle)
|
|
@@ -171,4 +205,10 @@ export default {
|
|
|
left: 40px;
|
|
|
}
|
|
|
}
|
|
|
+.banner-bg {
|
|
|
+ width: 360px;
|
|
|
+ height: 240px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
</style>
|