<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
|
class="mb-10"
|
:size="80"
|
:agentNo="agentInfo.agentNo"
|
>
|
</UiAvatar>
|
<div class="name">{{agentInfo.name}}</div>
|
<div v-if="!hideReviews">
|
<!-- TODO:隱藏滿意度 -->
|
<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">
|
<i class="icon-left"></i>
|
</div>
|
<div class="swiper-button-next" slot="button-next">
|
<i class="icon-right"></i>
|
</div>
|
</swiper>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
import { SwiperOptions } from 'swiper';
|
import { Consultant } from '~/shared/models/consultant.model';
|
import { hideReviews } from '~/shared/const/hide-reviews';
|
|
@Component
|
export default class UiSwiper extends Vue {
|
|
@Prop()
|
agents!: Consultant[];
|
|
hideReviews = hideReviews ;
|
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 {
|
display: none;
|
}
|
|
.icon-right,.icon-left {
|
font-size: 20px;
|
color: $CORAL;
|
}
|
|
&.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>
|
