<template>
|
<div>
|
<div class="mdTxt pb-10">嚴選顧問推薦</div>
|
<ul class="pam-rec-agent__list">
|
<li class="pam-rec-agent-card" v-for="(info,index) in recAgentList" :key="index">
|
<div class="pam-rec-agent-card__content">
|
<div class="pam-rec-agent-card__content-header">
|
<div class="pam-rec-agent-card__avatar">
|
<img :src="info.avatar" class="avatar">
|
</div>
|
<div class="pam-rec-agent-card__main-info">
|
<div class="fz-20 pt-10">{{ info.name }}</div>
|
<div class="rec-role">{{ info.role }}</div>
|
<span class="rec-detail pt-30">詳細資料</span>
|
</div>
|
</div>
|
<div class="pam-rec-agent-card__content-body">
|
<el-row type="flex" class="pam-paragraph">
|
<div class="field">
|
<div class="field__label">
|
專長領域
|
</div>
|
<div class="field__content expertieses-container">
|
<div class="pr-10 pb-10" v-for="(expert, index) in info.expertises" :key="index">
|
#{{ expert }}
|
</div>
|
</div>
|
</div>
|
</el-row>
|
|
<el-row type="flex" class="pam-paragraph">
|
<el-col :span="12">
|
<div class="field__label">
|
服務資歷
|
</div>
|
<div class="field__content">
|
{{ info.seniority }}
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="field__label">
|
客戶滿意度
|
</div>
|
<div class="field__content">
|
{{ info.avgScore }}
|
</div>
|
</el-col>
|
</el-row>
|
|
</div>
|
<div class="pam-rec-agent-card__content-footer">
|
<el-row
|
type="flex"
|
justify="center"
|
class="">
|
<el-button>+ 顧問清單</el-button>
|
<el-button type="primary" style="margin-left: 10px">進行預約</el-button>
|
</el-row>
|
</div>
|
|
</div>
|
</li>
|
</ul>
|
|
<div class="mt-30">
|
分頁器
|
</div>
|
|
</div>
|
</template>
|
<script>
|
import {Vue,Component} from 'vue-property-decorator';
|
|
@Component
|
export default class Reslut extends Vue{
|
|
recAgentList =[
|
{
|
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
name:'蔡美莓',
|
role:'伯樂保險經紀人',
|
expertises: ['財務規劃', '資產轉移', '節稅', '樂活退休'],
|
seniority:'1年2個月',
|
avgScore:4.8
|
},
|
{
|
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
name:'賈斯町',
|
role:'鮭魚保險經紀人',
|
expertises: ['財務規劃', '資產轉移', '節稅', '樂活退休'],
|
seniority:'1年2個月',
|
avgScore:4.8
|
},
|
{
|
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
name:'陳家婷',
|
role:'千里馬保險經紀人',
|
expertises: ['財務規劃', '資產轉移', '節稅', '樂活退休'],
|
seniority:'1年2個月',
|
avgScore:4.8
|
},
|
{
|
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
name:'張小美',
|
role:'鮭魚保險經紀人',
|
expertises: ['財務規劃', '資產轉移', '節稅', '樂活退休'],
|
seniority:'1年2個月',
|
avgScore:4.8
|
},
|
{
|
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
name:'林美女',
|
role:'千里馬保險經紀人',
|
expertises: ['財務規劃', '資產轉移', '節稅', '樂活退休'],
|
seniority:'1年2個月',
|
avgScore:4.8
|
},
|
{
|
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
name:'蔣帥哥',
|
role:'鮭魚保險經紀人',
|
expertises: ['財務規劃', '資產轉移', '節稅', '樂活退休'],
|
seniority:'1年2個月',
|
avgScore:4.8
|
}
|
];
|
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pam-rec-agent-card {
|
margin-bottom: 10px;
|
border-radius: 10px;
|
border: 1px solid $LIGHT_GREY;
|
padding: 20px 33px;
|
.pam-rec-agent-card__content {
|
width: 270px;
|
.pam-rec-agent-card__content-header {
|
display: flex;
|
.pam-rec-agent-card__avatar {
|
display: flex;
|
flex-direction: row;
|
margin-right: 20px;
|
.avatar{
|
width: 120px;
|
height: 120px;
|
border-radius: 50%;
|
}
|
}
|
.pam-rec-agent-card__main-info {
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-end;
|
.rec-role {
|
font-size: 16px;
|
color: $PRUDENTIAL_GREY;
|
font-weight: bold;
|
margin-top: 4px;
|
}
|
.rec-detail{
|
font-size: 20px;
|
color:$PRIMARY_RED;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
}
|
|
.field__label {
|
font-size: 16px;
|
color: $PRUDENTIAL_GREY;
|
font-weight:bold;
|
margin-bottom: 7px;
|
}
|
|
.expertieses-container {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
</style>
|
