From df7e9c57ee754752e11ae0b4e2adb293d27e2f92 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期一, 25 十月 2021 18:12:16 +0800
Subject: [PATCH] TODO#128784 首頁-推薦保險顧問 畫面刻版+串假資料
---
PAMapp/components/Ui/UiSwiper.vue | 63 ++++++++++++++++++++++---------
1 files changed, 45 insertions(+), 18 deletions(-)
diff --git a/PAMapp/components/Ui/UiSwiper.vue b/PAMapp/components/Ui/UiSwiper.vue
index e2e66b5..cc9f26d 100644
--- a/PAMapp/components/Ui/UiSwiper.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.8.0