From a40791c415b60b29e2d8fe3af88db980ea409241 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期日, 31 十月 2021 18:07:16 +0800
Subject: [PATCH] update#129050 - [業務員詳細資訊] 前端畫面刻版
---
PAMapp/components/Ui/UiField.vue | 25 +++++++++---
PAMapp/pages/agentInfo/index.vue | 62 ++++++++++++++++--------------
2 files changed, 51 insertions(+), 36 deletions(-)
diff --git a/PAMapp/components/Ui/UiField.vue b/PAMapp/components/Ui/UiField.vue
index f069cc7..588af8d 100644
--- a/PAMapp/components/Ui/UiField.vue
+++ b/PAMapp/components/Ui/UiField.vue
@@ -1,9 +1,11 @@
<template>
- <el-col :span="24" class="pam-field">
- <div class="pam-field-label">
- <div class="pam-field-title"><i :class="fieldIcon"></i>{{ fieldLabel }}</div>
+ <el-col :span="fieldSpan" class="pam-field"
+ v-if="fieldDisplayDevice === 'ALL'
+ || fieldDisplayDevice === currentDevice">
+ <div class="pam-field__label">
+ <div class="pam-field__title"><i :class="fieldIcon"></i>{{ fieldLabel }}</div>
</div>
- <p class="pam-field-content pt-10">
+ <p class="pam-field__content">
<slot></slot>
</p>
</el-col>
@@ -19,7 +21,9 @@
@Prop() icon!: string;
@Prop() label!: string;
@Prop() content!: string;
- // @Prop() displayDevice!: 'MOBILE' | 'DESKTOP';
+ @Prop() displayDevice!: 'MOBILE' | 'DESKTOP' | 'ALL';
+
+ currentDevice: 'MOBILE' | 'DESKTOP' = 'MOBILE';
get fieldSpan(): number {
return this.span || 24;
@@ -33,6 +37,10 @@
return `${this.label}`;
}
+ get fieldDisplayDevice(): 'MOBILE' | 'DESKTOP' | 'ALL' {
+ return this.displayDevice || 'ALL';
+ }
+
}
</script>
@@ -41,18 +49,21 @@
.pam-field {
display: flex;
flex-direction: column;
- .pam-field-label {
+ .pam-field__label {
display: flex;
align-items: center;
.pam-icon {
font-size: 12px;
}
- .pam-field-title {
+ .pam-field__title {
font-size: 16px;
font-weight: bold;
display: flex;
align-items: center;
}
}
+ .pam-field__content {
+ padding-top: 10px;
+ }
}
</style>
diff --git a/PAMapp/pages/agentInfo/index.vue b/PAMapp/pages/agentInfo/index.vue
index cabf942..d4e704b 100644
--- a/PAMapp/pages/agentInfo/index.vue
+++ b/PAMapp/pages/agentInfo/index.vue
@@ -14,9 +14,10 @@
class="pt-10"
justify="center"
align="middle">
- <i class="pam-icon icon-primary icon-star"></i>
+ <i class="pam-icon icon--primary icon-star"></i>
<h3 class="mdTxt">{{ agentInfo.avgReviews }}</h3>
</el-row>
+
<el-row
type="flex"
class="pt-10"
@@ -26,18 +27,18 @@
<el-row
type="flex"
- class="mt-30">
- <UiField span="12" icon="agent" label="����">
+ class="pam-paragraph">
+ <UiField :span="12" icon="agent" label="����">
{{ agentInfo.title }}
</UiField>
- <UiField span="12" icon="phone" label="�閰�">
+ <UiField :span="12" icon="phone" label="�閰�">
{{ agentInfo.phoneNumber }}
</UiField>
</el-row>
<el-row
type="flex"
- class="mt-30">
+ class="pam-paragraph">
<UiField icon="company" label="�����">
{{ agentInfo.serveArea }}
</UiField>
@@ -45,7 +46,7 @@
<el-row
type="flex"
- class="mt-30">
+ class="pam-paragraph">
<UiField icon="address" label="�����">
{{ agentInfo.companyAddress }}
</UiField>
@@ -53,30 +54,31 @@
<el-row
type="flex"
- class="mt-30">
- <UiField span="12" icon="time" label="��敺�����">
- {{ agentInfo.lastestLoginTime }}
+ class="pam-paragraph">
+ <UiField :span="12" icon="time" label="��敺�����">
+ {{ agentInfo.lastestLoginTime | formatDate }}
</UiField>
- <UiField span="12" icon="calender" label="����風">
+ <UiField :span="12" icon="calender" label="����風">
{{ agentInfo.seniority }}
</UiField>
</el-row>
<el-row
type="flex"
- class="mt-30">
+ class="pam-paragraph">
<el-col :span="24" class="pam-field">
- <div class="pam-field-label pam-progress-label">
+ <div class="pam-field__label pam-progress__label">
<div>
- <div class="pam-field-title">
- <i class="pam-icon icon-agent"></i>���漲(�銝���� icon) <i class="text--primary icon-information"></i>
+ <div class="pam-field__title">
+ <!-- TODO: 憒����憿批��脣嚗������漲 [Tomas, 2021/10/29] -->
+ <i class="pam-icon icon-puzzle"></i>���漲 <i class="text--primary icon-information"></i>
</div>
</div>
<div class="xsTxt">
{{ agentInfo.suitability }}%
</div>
</div>
- <div class="pam-field-content pam-field-suitability pt-10">
+ <div class="pam-field__content pam-field-suitability pt-10">
<el-progress
:show-text="false"
:text-inside="true"
@@ -88,11 +90,11 @@
<el-row
type="flex"
- class="mt-30">
+ class="pam-paragraph">
<el-col :span="24" class="pam-field">
- <div class="pam-field-label pam-progress-label">
+ <div class="pam-field__label pam-progress__label">
<div>
- <div class="pam-field-title">
+ <div class="pam-field__title">
<i class="pam-icon icon-thumbs-up"></i>隢株岷摨西”� <i class="text--primary icon-information"></i>
</div>
</div>
@@ -100,7 +102,7 @@
{{ agentInfo.evaluation }}/50 (餈����/蝝航��)
</div>
</div>
- <div class="pam-field-content pam-field-evaluation pt-10">
+ <div class="pam-field__content pam-field-evaluation pt-10">
<el-progress :show-text="false" :stroke-width="15" :percentage="agentInfo.evaluation"></el-progress>
</div>
</el-col>
@@ -108,7 +110,7 @@
<el-row
type="flex"
- class="mt-30">
+ class="pam-paragraph">
<UiField icon="flag" label="撠����">
<div class="pam-field-experts">
<div class="text--secondary bold pr-10" v-for="(expert, index) in agentInfo.expertises" :key="index">
@@ -120,7 +122,7 @@
<el-row
type="flex"
- class="mt-30">
+ class="pam-paragraph">
<UiField icon="comment" label="�犖��艙">
{{ agentInfo.concept }}
</UiField>
@@ -128,7 +130,7 @@
<el-row
type="flex"
- class="mt-30">
+ class="pam-paragraph">
<UiField icon="school" label="�犖��">
<span v-for="(experience, index) in agentInfo.experiences" :key="index">
{{ experience }}<span v-if="index !== agentInfo.experiences.length - 1">, </span>
@@ -138,7 +140,7 @@
<el-row
type="flex"
- class="mt-30">
+ class="pam-paragraph">
<UiField icon="trophy" label="敺��風">
{{ agentInfo.awards }}
</UiField>
@@ -147,7 +149,7 @@
<el-row
type="flex"
justify="center"
- class="mt-30">
+ class="pam-paragraph">
<el-button>+ 憿批��</el-button>
<el-button type="primary">�脰����</el-button>
</el-row>
@@ -172,7 +174,7 @@
seniority: '4撟�2���',
suitability: 53,
evaluation: 31,
- expertises: ['鞎∪����', '鞈蝘餉��', '蝭�蝔�', '璅暑��隡�', '璅暑��隡�'],
+ expertises: ['鞎∪����', '鞈蝘餉��', '蝭�蝔�', '璅暑��隡�'],
concept: '憯賡頝臭���敺���策摰Ｘ靽∩遙����������憟賜�瘜��平隞乩�����蝘���鈭箇敹急����縑敹萄����旦�靽∴���末��平��犖�嚗������憿敹鈭箇����瘞貊���ˊ�鈭平��������',
experiences: ['�憭扯瓷��頂', '蝢��移蝞葦��'],
awards: '��嚗�2020撟港摩璅�之��雿單平�� ����嚗犖頨思�璆剖�霅��馳�隞�霅�犖頨思�隞���犖霅�瓷�靽隞���犖霅'
@@ -207,20 +209,20 @@
font-size: 15px;
padding-right: 8px;
color: #68737A;
- &.icon-primary {
+ &.icon--primary {
color: #ED1B2E;
}
}
.pam-field {
display: flex;
flex-direction: column;
- .pam-field-label {
+ .pam-field__label {
display: flex;
align-items: center;
.pam-icon {
font-size: 12px;
}
- .pam-field-title {
+ .pam-field__title {
font-size: 16px;
font-weight: bold;
}
@@ -244,8 +246,10 @@
flex-wrap: wrap;
}
-.pam-progress-label {
+.pam-progress__label {
justify-content: space-between;
+ flex-wrap: wrap;
+ line-height: 24px;
}
</style>
--
Gitblit v1.8.0