<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"
|
>
|
<el-avatar
|
:size="200"
|
class="mx-auto cursor--pointer"
|
@click="$router.push('/agentInfo')"
|
src=""
|
/>
|
<div class="mdTxt mt-30 mb-10 text--center">蔡美莓(伯樂保險經紀人)</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="fixedBtn text--center">
|
<el-button @click="addConsultant">
|
<i class="icon-add smTxt"></i>
|
<span>顧問清單</span>
|
</el-button>
|
<el-button
|
@click="reserveCommunication"
|
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 cursor--pointer"
|
@click="isVisibleDrawer = false">我知道了</p>
|
</div>
|
</Ui-Drawer>
|
|
<Ui-Dialog
|
:isVisible.sync="isVisibleDialog"
|
>
|
<div class="text--center mdTxt">
|
<p class="mb-50">成功加入顧問清單</p>
|
<p class="text--primary cursor--pointer"
|
@click="isVisibleDialog = false">我知道了</p>
|
</div>
|
</Ui-Dialog>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { ElCarousel } from 'element-ui/types/carousel';
|
import { Vue, Component } from 'vue-property-decorator';
|
import { isLogin } from '~/assets/ts/auth';
|
import { isMobileDevice } from '~/assets/ts/device';
|
|
@Component
|
export default class QuickFilterConsultantList extends Vue {
|
isVisibleDrawer = false;
|
isVisibleDialog = 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();
|
}
|
|
addConsultant() {
|
isMobileDevice()
|
? this.isVisibleDrawer = true
|
: this.isVisibleDialog = true;
|
}
|
|
reserveCommunication() {
|
isLogin() ? this.$router.push('/questionnaire') : this.$router.push('/login');
|
}
|
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.fill {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-content: center;
|
padding: 20px 30px 30px 30px;
|
}
|
|
.mx-auto {
|
margin: 0 auto;
|
}
|
|
.fixedBtn {
|
position: fixed;
|
bottom: 30px;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 100%;
|
}
|
|
.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;
|
}
|
|
@media (min-width: 768px) {
|
.relative {
|
overflow: hidden;
|
}
|
|
.arrow-right-position {
|
right: -20px;
|
}
|
|
.arrow-left-position {
|
left: -20px;
|
}
|
}
|
|
</style>
|
