TODO#129054 我的顧問清單 畫面刻版

Mila

2021-11-03 2b4ffaea5c43c32a9335d4aa9becceea220ce68c

 PAMapp/components/Consultant/ConsultantSwiper.vue

File was renamed from PAMapp/components/Ui/UiSwiper.vue
@@ -6,10 +6,17 @@
      @click-slide="clkItem"
    >
        <swiper-slide
          v-for="(info, index) in agents"
          v-for="(agentInfo, index) in agents"
          :key="index"
        >
            <SwiperConsultantCard :agentInfo="info"></SwiperConsultantCard>
            <div class="consultantCardStyle" >
              <el-avatar class="mb-10" :size="80" :src="agentInfo.img"></el-avatar>
              <div class="name">{{agentInfo.name}}</div>
              <div>
                <i class="icon-star pam-icon icon--yellow"></i>
                <span class="satisfaction">{{agentInfo.satisfaction}}</span>
              </div>
          </div>
        </swiper-slide>

        <div class="swiper-button-prev" slot="button-prev"></div>
@@ -25,7 +32,7 @@

@Component
export default class UiSwiper extends Vue {
    @Prop() agents!: Agents;
    @Prop() agents!: Agents[];

    swiperOptions: SwiperOptions = {
        loop: true,
@@ -49,8 +56,10 @@
    }

    clkItem(loopIndex: number, realIndex: number) {
      this.$router.push('/agentInfo')
      this.$router.push('/agentInfo');
      console.log(loopIndex, realIndex, 'clkItem')
    }

}


@@ -69,7 +78,7 @@

  .swiper-button-next,.swiper-button-prev {
    background-color: $PRIMARY_WHITE;
    top: 20px;
    top: 0px;
    height: 100%;

    &:after {
@@ -87,4 +96,17 @@
    right: 0;
  }
}

.consultantCardStyle {
        text-align: center;

        .name {
            font-size: 16px;
            font-weight: bold;
        }

        .satisfaction {
            font-size: 20px;
        }
    }
</style>