<template>
|
<div class="relative">
|
<el-carousel
|
height="600px"
|
:autoplay="false"
|
indicator-position="none"
|
arrow="never"
|
class="pam-consultant-carousel"
|
ref="carouselRef"
|
>
|
<el-carousel-item
|
v-for="(item, index) in 5"
|
:key="index"
|
>
|
<div
|
class="fill"
|
@touchstart="touchStart"
|
@touchend="moveCard"
|
>
|
<img class="avator cursor--pointer" @click="$router.push('/agentInfo')" src="" />
|
<div class="mdTxt mt-30 mb-10">蔡美莓(伯樂保險經紀人)</div>
|
<el-row>
|
<el-col :span="12">
|
<div class="smTxt_bold mb-10 text--prudential_grey">服務資歷</div>
|
<div class="mb-10">一年12個月</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="smTxt_bold mb-10 text--prudential_grey">客戶滿意度</div>
|
<div>
|
<i class="icon-star pam-icon"></i>
|
4.8</div>
|
</el-col>
|
</el-row>
|
<div class="smTxt_bold mb-10 text--prudential_grey">專長領域</div>
|
<div class="p bold">#財務規劃</div>
|
</div>
|
<div class="parallelBtns">
|
<el-button @click="isVisibleDrawer = true">
|
<i class="icon-add smTxt"></i>
|
<span>顧問清單</span>
|
</el-button>
|
<el-button
|
@click="$router.push('/communication/myDemand')"
|
type="primary"
|
>進行預約</el-button>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<div class="absolute arrow-left-position" @click="nextCard">
|
<i class="icon-left pam-left-arrow"></i>
|
</div>
|
<div class="absolute arrow-right-position" @click="nextCard">
|
<i class="icon-right pam-right-arrow"></i>
|
</div>
|
|
<Ui-Drawer
|
:isVisible.sync="isVisibleDrawer"
|
>
|
<div class="text--center mdTxt">
|
<p class="mb-50">成功加入顧問清單</p>
|
<p class="text--primary" @click="isVisibleDrawer = false">我知道了</p>
|
</div>
|
</Ui-Drawer>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { ElCarousel } from 'element-ui/types/carousel';
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
|
@Component
|
export default class UiCardCarousel extends Vue {
|
isVisibleDrawer = false;
|
startPosition = 0;
|
endPosition = 0;
|
|
touchStart(event: TouchEvent) {
|
this.startPosition = event.changedTouches[0].clientX;
|
}
|
|
moveCard(event: any) {
|
this.endPosition = event.changedTouches[0].clientX;
|
if (this.endPosition < this.startPosition) {
|
this.nextCard();
|
return;
|
}
|
|
if (this.endPosition > this.startPosition) {
|
this.prevCard();
|
return;
|
}
|
}
|
|
nextCard() {
|
(this.$refs.carouselRef as ElCarousel).next();
|
}
|
|
prevCard() {
|
(this.$refs.carouselRef as ElCarousel).prev();
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.fill {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-content: center;
|
padding: 20px 30px 30px 30px;
|
}
|
|
.avator {
|
width: 200px;
|
height: 200px;
|
border-radius: 50%;
|
background-color: $MID_GREY;
|
margin: 0 auto;
|
}
|
|
.parallelBtns {
|
display: flex;
|
justify-content: center;
|
position: fixed;
|
bottom: 30px;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 100%;
|
|
.el-button {
|
padding: 10px 0;
|
width: 45%;
|
}
|
}
|
|
.pam-left-arrow,.pam-right-arrow {
|
display: inline-block;
|
width: 50px;
|
height: 50px;
|
border-radius: 50px;
|
background-color: $LIGHT_GREY;
|
color: $CORAL;
|
z-index: 2;
|
cursor: pointer;
|
|
&:before {
|
display: block;
|
line-height: 50px;
|
}
|
}
|
|
.pam-right-arrow {
|
&:before {
|
margin-left: 15px;
|
}
|
}
|
|
.pam-left-arrow {
|
&:before {
|
margin-left: 25px;
|
}
|
}
|
|
.arrow-right-position {
|
top: 50%;
|
right: -60px;
|
transform: translateY(-50%);
|
}
|
|
.arrow-left-position {
|
top: 50%;
|
left: -60px;
|
transform: translateY(-50%);
|
}
|
|
.relative {
|
position: relative;
|
}
|
|
.absolute {
|
position: absolute;
|
}
|
|
</style>
|
