From a1511c6fe993e10668dcd0ee20aac20a1cfee2e2 Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期四, 11 十一月 2021 11:19:30 +0800
Subject: [PATCH] [update]:#129049 嚴選配對畫面調整
---
PAMapp/pages/recommendConsultant/result.vue | 189 ++++++++++++++++++++++++++++++-------
PAMapp/pages/recommendConsultant/index.vue | 88 +++++++++++++----
2 files changed, 219 insertions(+), 58 deletions(-)
diff --git a/PAMapp/pages/recommendConsultant/index.vue b/PAMapp/pages/recommendConsultant/index.vue
index 3678695..106a164 100644
--- a/PAMapp/pages/recommendConsultant/index.vue
+++ b/PAMapp/pages/recommendConsultant/index.vue
@@ -1,4 +1,4 @@
-<template>
+ <template>
<div class="pam-page">
<div class="pb-10 mdTxt">����批</div>
<div class="mb-30 pam-tags ">
@@ -7,25 +7,38 @@
</div>
<div class="mb-30">
<div class="pb-10 mdTxt required">������</div>
- <div class="area-choice"><div class="fz-20 area-txt">�����</div><i class="icon-down area-icon"></i></div>
+ <div class="job-pick" @click="showAddress = true">
+ <input class="fz-20 pl-18 input"
+ style="outline:none margin-right:-18px"
+ :value="district"
+ placeholder="隢���">
+ <i class="icon-down down-icon " style="margin-right:18px"></i>
+ </div>
+ <PopUpFrame :isOpen.sync="showAddress" :drawerSize=" '45%' ">
+ <AddressPicker
+ @close="showAddress = false"
+ @change="selectedDistrict"/>
+ </PopUpFrame>
</div>
+
+
<div class="mb-10">
<div class="pb-10 mdTxt required">�閬岷������<span class="hint text--bold" @click="showDialog = true"><i class="icon-information text--bold" @click="showDialog = true"></i>�銴</span></div>
</div>
- <ConsultantQues class="mb-30"/>
-
+ <ConsultantQues @change="selectedQuestion = $event" class="mb-30"/>
+
<div class="mb-30 pam-tags">
<div class= "pb-10 mdTxt">憿批�僑鞈�</div>
- <div class="rec-ageDesktop">
- <el-button class="mb-10 qaTags" @click="seniority = 'unlimited'" :class="{'active':seniority === 'unlimited'}">
+ <div>
+ <el-button class="mb-10" @click="seniority = 'unlimited'" :class="{'active':seniority === 'unlimited'}">
<span class="text--bold">銝�� </span><span>撟湧翩銝����</span>
</el-button>
- <el-button class="mb-10 qaTags" @click="seniority = 'junior'" :class="{'active':seniority === 'junior'}">
+ <el-button style="margin-left:-0.5px" class="mb-10 " @click="seniority = 'junior'" :class="{'active':seniority === 'junior'}">
<span class="text--bold">撟渲�� </span><span>蝯血僑頛犖銝�����</span>
</el-button>
- <el-button class="mb-10 qaTags" @click="seniority = 'senior'" :class="{'active':seniority === 'senior'}">
+ <el-button style="margin-left:-0.5px" class="mb-10" @click="seniority = 'senior'" :class="{'active':seniority === 'senior'}">
<span class="text--bold">鞈楛 </span><span>����麾</span>
</el-button>
</div>
@@ -62,11 +75,13 @@
<div class="rec-footer">
<el-button
- :disabled="disableActionButton"
- @click="$router.push('recommendConsultant/result')">擐砌����</el-button>
+ type="primary"
+
+ :disabled="!district || !selectedQuestion.length"
+ @click="$router.push('/recommendConsultant/result')">擐砌����</el-button>
</div>
- <UiDrawer :is-visible.sync="showDialog" size='95%'>
-
+
+ <PopUpFrame :isOpen.sync="showDialog" :drawerSize=" '95%' ">
<div class="qaTextTitle mdTxt"><strong>�閬岷������</strong></div>
<div class="qa-dialog">
@@ -77,14 +92,9 @@
</div>
</div>
</div>
- <div class="qa-dialog-footer mdTxt" @click="showDialog = false"><p>������</p></div>
- </UiDrawer>
- <!-- <UiDialog :is-visible.sync="showDialog" >
+ <div class="qa-dialog-footer mdTxt" @click="showDialog = false"><p>������</p></div>
+ </PopUpFrame>
-
-
-
- </UiDialog> -->
</div>
</template>
<script lang="ts">
@@ -94,6 +104,9 @@
ratevalue = null;
showDialog = false;
+ showAddress=false;
+ district = '';
+ selectedQuestion = [];
elRateColors=['#ED1B2E','#ED1B2E','#ED1B2E'];
gender: 'male'|'female' = 'male';
seniority:'unlimited'|'junior'|'senior' = 'unlimited' ;
@@ -148,7 +161,7 @@
name:'����',
reversation:false
}
- ]
+ ];
queaAboutList=[
{
title:'�摨瑁����',
@@ -178,7 +191,7 @@
title:'�隞�',
content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��'
},
- ]
+ ];
ageTarget(index: any){
this.yearList[index].reversation = !this.yearList[index].reversation ;
}
@@ -189,6 +202,7 @@
get disableActionButton(): boolean {
return true;
}
+
@@ -204,10 +218,42 @@
selected() {
console.log(this.ratevalue);
}
+
+ selectedDistrict(selectDistrict: string): void {
+ console.log('sel', selectDistrict);
+ this.district = selectDistrict;
+ console.log('sel2', selectDistrict);
+
+ // this.showAddress = false;
+ }
}
</script>
<style lang="scss">
+
+input:focus,textarea:focus {
+ outline: none;
+}
+.input{
+ border:none;
+ border-radius: 10px;
+}
+.job-pick{
+ height: 50px;
+ border-radius:10px;
+ border:1px solid #D0D0CE ;
+ display: flex;
+ justify-content: space-between;
+ background-color: #FFFFFF;
+}
+.down-icon{
+ color:#ED1B2E;
+ font-size: 25px;
+ display: flex;
+ justify-content: flex-end;
+ padding-top: 11px;
+ margin-left: -20px;
+ }
.popOtherBtn{
margin-left: -190px;
diff --git a/PAMapp/pages/recommendConsultant/result.vue b/PAMapp/pages/recommendConsultant/result.vue
index 8aba627..8792bcc 100644
--- a/PAMapp/pages/recommendConsultant/result.vue
+++ b/PAMapp/pages/recommendConsultant/result.vue
@@ -2,73 +2,74 @@
<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">
+ <li class="pam-rec-agent-card" v-for="(info,index) in pageList" :key="index">
<div class="pam-rec-agent-card__content">
- <div class="pam-rec-agent-card__content-header">
+ <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="fz-20 pt-10 rec-desktop-name">{{ info.name }}</div>
<div class="rec-role">{{ info.role }}</div>
- <span class="rec-detail pt-30">閰喟敦鞈��</span>
+ <span class="rec-detail">閰喟敦鞈��</span>
</div>
- </div>
- <div class="pam-rec-agent-card__content-body">
+ </div>
+ <div class="pam-rec-agent-card__content-body">
<el-row type="flex" class="pam-paragraph">
- <div class="field">
+ <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">
+ <div class="pr-10 pb-10" v-for="(expert, index) in info.expertises" :key="index">
#{{ expert }}
- </div>
</div>
- </div>
+ </div>
+ </div>
</el-row>
- <el-row type="flex" class="pam-paragraph">
- <el-col :span="12">
+ <el-row type="flex" class="pam-paragraph">
+ <el-col :span="12">
<div class="field__label">
����風
</div>
<div class="field__content">
- {{ info.seniority }}
+ {{ info.seniority }}
</div>
- </el-col>
- <el-col :span="12">
+ </el-col>
+ <el-col :span="12">
<div class="field__label">
摰Ｘ皛踵�漲
</div>
<div class="field__content">
- {{ info.avgScore }}
+ <i class="icon-star" style="color:#F2C75C"></i>
+ {{ info.avgScore }}
</div>
- </el-col>
+ </el-col>
</el-row>
- </div>
- <div class="pam-rec-agent-card__content-footer">
+ </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>
+ type="flex"
+ justify="center"
+ >
+ <el-button class="btn">+ 憿批��</el-button>
+ <el-button class="btn2" type="primary" style="margin-left: 10px" @click="$router.push('/questionnaire')"
+ >�脰����</el-button>
</el-row>
- </div>
-
+ </div>
</div>
</li>
</ul>
-
- <div class="mt-30">
- ���
- </div>
+ <UiPagination
+ :totalList="recAgentList"
+ @changePage="changePage"
+ ></UiPagination>
</div>
</template>
-<script>
+<script lang="ts">
import {Vue,Component} from 'vue-property-decorator';
@Component
@@ -124,20 +125,36 @@
avgScore:4.8
}
];
+ pageList: any[] = [];
+
+ changePage(pageList: any[]) {
+ this.pageList = pageList;
+ }
}
</script>
<style lang="scss" scoped>
+.btn{
+ width: 139px;
+ height: 47px;
+}
+.btn2{
+ width: 120px;
+ height: 47px;
+}
.pam-rec-agent-card {
margin-bottom: 10px;
border-radius: 10px;
border: 1px solid $LIGHT_GREY;
padding: 20px 33px;
+ margin-right:-20px;
+ margin-left:-20px;
+
.pam-rec-agent-card__content {
- width: 270px;
- .pam-rec-agent-card__content-header {
+ width: 270px;
+ .pam-rec-agent-card__content-header {
display: flex;
.pam-rec-agent-card__avatar {
display: flex;
@@ -163,9 +180,10 @@
font-size: 20px;
color:$PRIMARY_RED;
font-weight: bold;
+ padding-top: 30px;
}
}
- }
+ }
}
}
@@ -175,9 +193,106 @@
font-weight:bold;
margin-bottom: 7px;
}
-
+.field__content{
+ font-size: 18px;
+}
.expertieses-container {
- display: flex;
- flex-wrap: wrap;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+@include desktop{
+ .pam-rec-agent__list{
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .pam-paragraph{
+ margin-top: 10px;
+ }
+ .pam-rec-agent-card {
+ margin-right: 20px;
+ margin-bottom: 10px;
+ border-radius: 10px;
+ border: 1px solid $LIGHT_GREY;
+ padding-top: 15px;
+ padding-bottom: 15px;
+ padding-left: 28px;
+ padding-right: 20px;
+ width: 30%;
+ margin-left: 10px;
+
+ .pam-rec-agent-card__content {
+ width: 190px;
+ .pam-rec-agent-card__content-header {
+ display: flex;
+ .pam-rec-agent-card__avatar {
+ display: flex;
+ flex-direction: row;
+ margin-right: 20px;
+ .avatar{
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ margin-bottom: 10px;
+ }
+ }
+ .pam-rec-agent-card__main-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ .rec-desktop-name{
+ font-size: 12px;
+ font-weight: bold;
+ }
+ .rec-role {
+ font-size: 12px;
+ color:$PRUDENTIAL_GREY;
+ }
+ .rec-detail{
+ font-size: 12px;
+ color:$PRIMARY_RED;
+ font-weight: bold;
+ padding-top: 10px;
+ }
+ }
+ }
+ }
+
+ }
+.field__label {
+ font-size: 12px;
+ color: $PRUDENTIAL_GREY;
+ font-weight:bold;
+ margin-bottom: 7px;
+}
+.field__content{
+ font-size: 12px;
+}
+.expertieses-container {
+ display: flex;
+ flex-wrap: wrap;
+
+}
+.btn{
+ width: 90px;
+ height: 43px;
+ font-size: 14px;
+ display: flex;
+ justify-content: center;
+ padding-top: 12px;
+ margin-right: 20px;
+}
+.btn2{
+ width: 90px;
+ height: 43px;
+ font-size: 14px;
+ display: flex;
+ justify-content: center;
+ padding-top: 12px;
+ margin-right: -10px;
+}
+.el-row--flex.is-justify-center{
+ justify-content:none;
+}
}
</style>
--
Gitblit v1.8.0