1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| <template>
| <div>
| <swiper ref="mySwiper"
| :options="swiperOptions"
| @click-slide="clkItem"
| >
| <swiper-slide
| v-for="(i, index) in 5"
| :key="index"
| >
| <span>連結到業務員{{i}}詳細資訊</span>
| </swiper-slide>
|
| <div class="swiper-button-prev" slot="button-prev"></div>
| <div class="swiper-button-next" slot="button-next"></div>
| </swiper>
| </div>
| </template>
|
| <script lang="ts">
| import { Vue, Component } from 'vue-property-decorator';
| import { SwiperOptions } from 'swiper';
|
| @Component
| export default class UiSwiper extends Vue {
| swiperOptions: SwiperOptions = {
| loop: true,
| slideToClickedSlide: false,
| navigation: {
| nextEl: '.swiper-button-next',
| prevEl: '.swiper-button-prev'
| },
| breakpoints: {
| 320: {
| slidesPerView: 2,
| slidesPerGroup: 2,
| spaceBetween: 20
| },
| 1024: {
| slidesPerView: 4,
| slidesPerGroup: 4,
| spaceBetween: 40
| }
| }
| }
|
| clkItem(loopIndex: number, realIndex: number) {
| this.$router.push('/agentInfo')
| }
| }
| </script>
|
| <style lang="scss" scoped>
| .swiper-container {
| height: 80px;
| width: 90%;
| }
| .swiper-slide {
| border: solid 1px;
| padding: 5px;
| cursor: pointer;
| }
| </style>
|
|
