TODO#128784 首頁-推薦保險顧問 畫面刻版+串假資料

Mila

2021-10-25 df7e9c57ee754752e11ae0b4e2adb293d27e2f92

 PAMapp/components/Ui/UiSwiper.vue

@@ -2,13 +2,14 @@
<div>
    <swiper ref="mySwiper"
      :options="swiperOptions"
      class="swiperStyle"
      @click-slide="clkItem"
    >
        <swiper-slide
          v-for="(i, index) in 5"
          v-for="(info, index) in agents"
          :key="index"
        >
          <span>連結到業務員{{i}}詳細資訊</span>
            <SwiperConsultantCard :agentInfo="info"></SwiperConsultantCard>
        </swiper-slide>

        <div class="swiper-button-prev" slot="button-prev"></div>
@@ -18,11 +19,14 @@
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
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,
@@ -32,14 +36,14 @@
        },
        breakpoints: {
          320: {
            slidesPerView: 2,
            slidesPerGroup: 2,
            spaceBetween: 20
            slidesPerView: 3,
            slidesPerGroup: 3,
            spaceBetween: 3
          },
          1024: {
            slidesPerView: 4,
            slidesPerGroup: 4,
            spaceBetween: 40
          768: {
            slidesPerView: 6,
            slidesPerGroup: 6,
            spaceBetween: 3
          }
        }
    }
@@ -48,16 +52,39 @@
      this.$router.push('/agentInfo')
    }
}


</script>

<style lang="scss" scoped>
.swiper-container {
  height: 80px;
  width: 90%;
}
.swiper-slide {
  border: solid 1px;
  padding: 5px;
  cursor: pointer;
.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>