From 00ef003d1ac498363f508adb803687e43ccd14c3 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期二, 09 十一月 2021 17:13:06 +0800
Subject: [PATCH] update [嚴選顧問] 結果頁面
---
PAMapp/pages/recommendConsultant/result.vue | 131 +++++++++++++++++++++++++++++++------------
1 files changed, 94 insertions(+), 37 deletions(-)
diff --git a/PAMapp/pages/recommendConsultant/result.vue b/PAMapp/pages/recommendConsultant/result.vue
index 6c8d44c..8aba627 100644
--- a/PAMapp/pages/recommendConsultant/result.vue
+++ b/PAMapp/pages/recommendConsultant/result.vue
@@ -1,25 +1,71 @@
<template>
<div>
- <div>��憿批��</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 class="pam-rec-agent-card__main-info">
- <div class="fz-20 pt-10">{{ info.name }}</div>
- <div class="rec-company">{{ info.company }}</div>
- <span class="rec-detail pt-30">閰喟敦鞈��</span>
+ </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>
- <span class="rec-sub-title">撠����</span>
- <div>
- {{info.expertise}}
- </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>
@@ -29,70 +75,74 @@
export default class Reslut extends Vue{
recAgentList =[
- {
+ {
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
name:'�蝢��',
- company:'隡舀��蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
+ role:'隡舀��蝬�鈭�',
+ expertises: ['鞎∪����', '鞈頧宏', '蝭�蝔�', '璅暑��隡�'],
seniority:'1撟�2���',
avgScore:4.8
},
- {
+ {
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
name:'鞈�',
- company:'擙剝��蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
+ role:'擙剝��蝬�鈭�',
+ expertises: ['鞎∪����', '鞈頧宏', '蝭�蝔�', '璅暑��隡�'],
seniority:'1撟�2���',
avgScore:4.8
},
{
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
name:'�摰嗅弧',
- company:'���收靽蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
+ role:'���收靽蝬�鈭�',
+ expertises: ['鞎∪����', '鞈頧宏', '蝭�蝔�', '璅暑��隡�'],
seniority:'1撟�2���',
avgScore:4.8
},
{
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
name:'撘萄���',
- company:'擙剝��蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
+ role:'擙剝��蝬�鈭�',
+ expertises: ['鞎∪����', '鞈頧宏', '蝭�蝔�', '璅暑��隡�'],
seniority:'1撟�2���',
avgScore:4.8
},
{
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
name:'���戊',
- company:'���收靽蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
+ role:'���收靽蝬�鈭�',
+ expertises: ['鞎∪����', '鞈頧宏', '蝭�蝔�', '璅暑��隡�'],
seniority:'1撟�2���',
avgScore:4.8
},
{
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
name:'�撣亙',
- company:'擙剝��蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
+ 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;
+ 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;
@@ -102,13 +152,12 @@
.pam-rec-agent-card__main-info {
display: flex;
flex-direction: column;
- margin-left:19px;
- .rec-company{
+ justify-content: flex-end;
+ .rec-role {
font-size: 16px;
color: $PRUDENTIAL_GREY;
- font-weight:bold;
+ font-weight: bold;
margin-top: 4px;
- margin-bottom: 30px;
}
.rec-detail{
font-size: 20px;
@@ -116,11 +165,19 @@
font-weight: bold;
}
}
- .rec-sub-title{
- font-size: 16px;
- color: $PRUDENTIAL_GREY;
- font-weight:bold;
- }
+ }
}
}
-</style>
\ No newline at end of file
+
+.field__label {
+ font-size: 16px;
+ color: $PRUDENTIAL_GREY;
+ font-weight:bold;
+ margin-bottom: 7px;
+}
+
+.expertieses-container {
+ display: flex;
+ flex-wrap: wrap;
+}
+</style>
--
Gitblit v1.8.0