From b4d6944076f1df6eedaae35c4c2a7072fe988e8a Mon Sep 17 00:00:00 2001 From: Tomas <tomasysh@gmail.com> Date: 星期二, 30 四月 2024 15:34:02 +0800 Subject: [PATCH] update: package-lock.json --- PAMapp/components/Consultant/ConsultantSwiper.vue | 53 +++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 37 insertions(+), 16 deletions(-) diff --git a/PAMapp/components/Consultant/ConsultantSwiper.vue b/PAMapp/components/Consultant/ConsultantSwiper.vue index 44d95ed..ae61981 100644 --- a/PAMapp/components/Consultant/ConsultantSwiper.vue +++ b/PAMapp/components/Consultant/ConsultantSwiper.vue @@ -5,22 +5,31 @@ class="swiperStyle" @click-slide="clkItem" > - <swiper-slide + <swiper-slide class="fix-chrome-click--issue" v-for="(agentInfo, index) in agents" :key="index" > <div class="consultantCardStyle" > - <el-avatar class="mb-10" :size="80" :src="agentInfo.img"></el-avatar> + <UiAvatar + class="mb-10" + :size="80" + :agentNo="agentInfo.agentNo" + > + </UiAvatar> <div class="name">{{agentInfo.name}}</div> - <div> + <div v-if="!hideReviews" style="display: flex; align-items: center; justify-content: center; margin-top: 4px"> <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> + <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> @@ -28,14 +37,18 @@ <script lang="ts"> import { Vue, Component, Prop } from 'vue-property-decorator'; import { SwiperOptions } from 'swiper'; -import { Consultants } from '~/assets/ts/api/consultant' +import { Consultant } from '~/shared/models/consultant.model'; +import { hideReviews } from '~/shared/const/hide-reviews'; @Component export default class UiSwiper extends Vue { - @Prop() agents!: Consultants[]; + @Prop() + agents!: Consultant[]; + + hideReviews = hideReviews ; swiperOptions: SwiperOptions = { - loop: true, + loop: false, slideToClickedSlide: false, navigation: { nextEl: '.swiper-button-next', @@ -44,20 +57,20 @@ breakpoints: { 320: { slidesPerView: 3, - slidesPerGroup: 3, - spaceBetween: 3 + spaceBetween: -20 }, 768: { slidesPerView: 6, - slidesPerGroup: 6, - spaceBetween: 3 + spaceBetween: -20 } } } + ////////////////////////////////////////////////////////////////////// + clkItem(loopIndex: number, realIndex: number) { - this.$router.push('/agentInfo'); - console.log(loopIndex, realIndex, 'clkItem') + const agentNo = this.agents[loopIndex].agentNo; + this.$router.push(`/agentInfo/${agentNo}`); } } @@ -77,14 +90,22 @@ } .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; - font-weight: bold; - color: #707A81; + color: $CORAL; + } + + &.swiper-button-disabled { + pointer-events: auto; } } -- Gitblit v1.8.0