<template>
|
<div>
|
<swiper ref="mySwiper"
|
:options="swiperOptions"
|
class="swiperStyle"
|
@click-slide="clkItem"
|
>
|
<swiper-slide class="fix-chrome-click--issue"
|
v-for="(agentInfo, index) in agents"
|
:key="index"
|
>
|
<div class="consultantCardStyle" >
|
<UiAvatar :size="80" :fileName="agentInfo.img" class="mb-10"></UiAvatar>
|
<div class="name">{{agentInfo.name}}</div>
|
<div>
|
<i class="icon-star pam-icon icon--yellow"></i>
|
<span class="satisfaction">{{agentInfo.avgScore}}</span>
|
</div>
|
</div>
|
</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 { Consultants } from '~/assets/ts/models/consultant.model';
|
|
|
@Component
|
export default class UiSwiper extends Vue {
|
@Prop() agents!: Consultants[];
|
|
swiperOptions: SwiperOptions = {
|
loop: false,
|
slideToClickedSlide: false,
|
navigation: {
|
nextEl: '.swiper-button-next',
|
prevEl: '.swiper-button-prev'
|
},
|
breakpoints: {
|
320: {
|
slidesPerView: 3,
|
spaceBetween: -20
|
},
|
768: {
|
slidesPerView: 6,
|
spaceBetween: -20
|
}
|
}
|
}
|
|
clkItem(loopIndex: number, realIndex: number) {
|
const agentNo = this.agents[loopIndex].agentNo;
|
this.$router.push(`/agentInfo/${agentNo}`);
|
}
|
|
}
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
.swiperStyle {
|
box-shadow: 0 0 6px #22222229;
|
border-radius: 10px;
|
padding: 45px 0 37px 0;
|
background-color: $PRIMARY_WHITE;
|
|
.swiper-slide {
|
cursor: pointer;
|
}
|
|
.swiper-button-next,.swiper-button-prev {
|
@extend .fix-chrome-click--issue;
|
background-color: $PRIMARY_WHITE;
|
top: 0px;
|
height: 100%;
|
|
&:after {
|
font-size: 20px;
|
font-weight: bold;
|
color: #707A81;
|
}
|
|
&.swiper-button-disabled {
|
pointer-events: auto;
|
}
|
}
|
|
.swiper-button-prev {
|
left: 0;
|
}
|
|
.swiper-button-next {
|
right: 0;
|
}
|
}
|
|
.consultantCardStyle {
|
text-align: center;
|
|
.name {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
|
.satisfaction {
|
font-size: 20px;
|
}
|
}
|
</style>
|
