<template>
|
<div>
|
<swiper ref="mySwiper"
|
:options="swiperOptions"
|
class="swiperStyle"
|
@click-slide="clkItem"
|
>
|
<swiper-slide
|
v-for="(info, index) in agents"
|
:key="index"
|
>
|
<SwiperConsultantCard :agentInfo="info"></SwiperConsultantCard>
|
</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, Prop } from 'vue-property-decorator';
|
import { SwiperOptions } from 'swiper';
|
import { Agents } from '~/plugins/api/home'
|
|
@Component
|
export default class UiSwiper extends Vue {
|
@Prop() agents!: Agents;
|
|
swiperOptions: SwiperOptions = {
|
loop: true,
|
slideToClickedSlide: false,
|
navigation: {
|
nextEl: '.swiper-button-next',
|
prevEl: '.swiper-button-prev'
|
},
|
breakpoints: {
|
320: {
|
slidesPerView: 3,
|
slidesPerGroup: 3,
|
spaceBetween: 3
|
},
|
768: {
|
slidesPerView: 6,
|
slidesPerGroup: 6,
|
spaceBetween: 3
|
}
|
}
|
}
|
|
clkItem(loopIndex: number, realIndex: number) {
|
this.$router.push('/agentInfo')
|
}
|
}
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
.swiperStyle {
|
box-shadow: 0 0 6px #22222229;
|
border-radius: 10px;
|
padding: 45px 0 37px 0;
|
background-color: #FFFFFF;
|
|
.swiper-slide {
|
cursor: pointer;
|
}
|
|
.swiper-button-next,.swiper-button-prev {
|
background-color: white;
|
top: 20px;
|
height: 100%;
|
|
&:after {
|
font-size: 20px;
|
font-weight: bold;
|
color: #707A81;
|
}
|
}
|
|
.swiper-button-prev {
|
left: 0;
|
}
|
|
.swiper-button-next {
|
right: 0;
|
}
|
}
|
</style>
|
