|
@@ -16,7 +16,16 @@
|
|
|
<div class="plate03">
|
|
|
<div class="e-node">
|
|
|
<h2 class="common-title">{{langAbout.events.title}}</h2>
|
|
|
- <img src="@/assets/images/refactor/about/img2.png" />
|
|
|
+ <div>
|
|
|
+ <swiper class="swiper-wrapper swiper-wrapper-n" :options="swiperOption">
|
|
|
+ <swiper-slide class="swiper-slide" v-for="(item,index) in imgs" :key="index">
|
|
|
+ <div class="s-item" >
|
|
|
+ <img class="main-img" :src="item.img">
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <!-- <div class="swiper-pagination" slot="pagination"></div> -->
|
|
|
+ </swiper>
|
|
|
+ </div>
|
|
|
<ul>
|
|
|
<li v-for="(item,idx) in langAbout.events.nodes" :key="idx">
|
|
|
<h3>{{item.year}}</h3>
|
|
@@ -31,6 +40,7 @@
|
|
|
<script>
|
|
|
import {mapState} from 'vuex'
|
|
|
|
|
|
+let _cdn = 'https://4dscene.4dage.com/new4dkk/'
|
|
|
export default {
|
|
|
computed: {
|
|
|
...mapState({
|
|
@@ -38,8 +48,39 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
data () {
|
|
|
+ const imgs = [
|
|
|
+ {
|
|
|
+ img: _cdn + 'images/event.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: _cdn + 'images/about1.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: _cdn + 'images/about2.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: _cdn + 'images/about3.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: _cdn + 'images/about4.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: _cdn + 'images/about5.jpg'
|
|
|
+ }
|
|
|
+ ]
|
|
|
return {
|
|
|
-
|
|
|
+ imgs,
|
|
|
+ swiperOption: {
|
|
|
+ slidesPerView: 'auto',
|
|
|
+ autoplay: false,
|
|
|
+ centeredSlides: true,
|
|
|
+ watchSlidesProgress: true,
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination'
|
|
|
+ },
|
|
|
+ loop: true,
|
|
|
+ paginationClickable: true
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -59,4 +100,17 @@ export default {
|
|
|
margin: 0 auto;
|
|
|
display: block;
|
|
|
}
|
|
|
+.swiper-pagination-bullet-active{
|
|
|
+ background: #1fe4dc!important;
|
|
|
+}
|
|
|
+.swiper-pagination-bullet {
|
|
|
+ background: #ebebeb;
|
|
|
+}
|
|
|
+.video-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #202020;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
</style>
|