From 38b68f92b9a47ca3947985d6b581603fe05106c7 Mon Sep 17 00:00:00 2001
From: charlie <charlie@lvguanqingdeMacBook-Pro.local>
Date: 星期六, 22 一月 2022 11:56:00 +0800
Subject: [PATCH] update: 1. 新增約訪預約資訊頭像圖片和型別icon，微調對齊方式 2. 約訪結案列表的樣式修正並調整進度條色彩
---
PAMapp/pages/myAppointmentList/closedList.vue | 10 +++++++---
PAMapp/components/Appointment/AppointmentProgress.vue | 4 ++--
PAMapp/assets/images/appointment/avatar_bg.svg | 9 +++++++++
PAMapp/pages/myAppointmentList.vue | 2 +-
PAMapp/pages/appointment/_appointmentId/index.vue | 16 +++++++++++-----
5 files changed, 30 insertions(+), 11 deletions(-)
diff --git a/PAMapp/assets/images/appointment/avatar_bg.svg b/PAMapp/assets/images/appointment/avatar_bg.svg
new file mode 100644
index 0000000..88abc04
--- /dev/null
+++ b/PAMapp/assets/images/appointment/avatar_bg.svg
@@ -0,0 +1,9 @@
+<svg id="Component_29" data-name="Component 29" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+ <circle id="Ellipse_726" data-name="Ellipse 726" cx="50" cy="50" r="50" fill="#feecdc"/>
+ <g id="Group_3685" data-name="Group 3685" transform="translate(-4269 -1812)">
+ <circle id="Ellipse_723" data-name="Ellipse 723" cx="50" cy="50" r="50" transform="translate(4269 1812)" fill="#feecdc"/>
+ <path id="Intersection_4" data-name="Intersection 4" d="M8376.456,8861.851v-2.594c0-14.428,24.235-18.738,38.724-18.738s38.367,4.313,38.367,18.738v2.59A49.9,49.9,0,0,1,8415.013,8880H8415A49.892,49.892,0,0,1,8376.456,8861.851Zm17.021-48.454a21.7,21.7,0,0,1,21.7-21.686h.014a21.693,21.693,0,1,1-21.716,21.686Z" transform="translate(-4095.456 -6968)" fill="#d0d0ce" opacity="0.789"/>
+ <circle id="Ellipse_724" data-name="Ellipse 724" cx="15" cy="15" r="15" transform="translate(4334 1882)" fill="none"/>
+ <path id="female" d="M14.817,13.279l1.116,1.11c.457.457.92.914,1.377,1.383a.856.856,0,0,1-1.235,1.187c-.665-.653-1.324-1.318-1.983-1.977l-.516-.522a.938.938,0,0,1-.107.16l-2.339,2.339a.837.837,0,0,1-.867.231.813.813,0,0,1-.594-.641.843.843,0,0,1,.261-.819l2.321-2.315a.771.771,0,0,1,.125-.095l-1.395-1.4a5.9,5.9,0,0,1-5.028.968,5.734,5.734,0,0,1-3.383-2.333,5.936,5.936,0,1,1,9.669.107l1.431,1.4c.071-.083.142-.184.231-.273.736-.736,1.466-1.472,2.208-2.2A.859.859,0,1,1,17.3,10.822l-1.6,1.6C15.4,12.7,15.114,12.965,14.817,13.279ZM11.683,7.124a4.244,4.244,0,1,0-4.256,4.232A4.244,4.244,0,0,0,11.683,7.124Z" transform="matrix(0.719, 0.695, -0.695, 0.719, 4348.543, 1882.728)" fill="none"/>
+ </g>
+</svg>
diff --git a/PAMapp/components/Appointment/AppointmentProgress.vue b/PAMapp/components/Appointment/AppointmentProgress.vue
index 3debf04..5d31d83 100644
--- a/PAMapp/components/Appointment/AppointmentProgress.vue
+++ b/PAMapp/components/Appointment/AppointmentProgress.vue
@@ -96,14 +96,14 @@
position : relative;
.circle {
background-color: white;
- border : 1px solid #707070;
+ border : 1px solid #CCCCCC;
border-radius : 50%;
height : 8px;
margin : 0;
width : 8px;
z-index : 5;
&.activate {
- background-color: $PRIMARY_BLACK;
+ background-color: $BEIGE;
}
}
.line {
diff --git a/PAMapp/pages/appointment/_appointmentId/index.vue b/PAMapp/pages/appointment/_appointmentId/index.vue
index d96baa5..5e75edc 100644
--- a/PAMapp/pages/appointment/_appointmentId/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/index.vue
@@ -14,12 +14,13 @@
<section class="client-detail">
- <div class="client-detail-info">
+ <div class="client-detail-info mb-30">
<div class="client-detail-info__avatar">
<div class="circle">
{{ appointmentDetail.name || 'NO NAME' }}
<div class="sm-circle">
- {{ appointmentDetail.gender === 'male' ? '�' : '憟�'}}
+ <i class="icon-sex-male sex-icon" v-if="appointmentDetail.gender === 'male'"></i>
+ <i class="icon-sex-female sex-icon" v-else></i>
</div>
</div>
</div>
@@ -189,8 +190,7 @@
height: 100px;
width: 100px;
border-radius: 50%;
- background-color: #fff;
- border: 1px solid $PRIMARY_BLACK;
+ background-image: url('~/assets/images/appointment/avatar_bg.svg');
position: relative;
display: flex;
justify-content: center;
@@ -201,12 +201,16 @@
width: 30px;
border-radius: 50%;
background-color: #fff;
- border: 1px solid $PRIMARY_BLACK;
+ border: 1px solid $SKY_BLUE;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
+ .sex-icon {
+ font-size: 20px;
+ color: $SKY_BLUE;
+ }
}
}
}
@@ -230,12 +234,14 @@
@extend .mb-10;
@extend .mdTxt;
@extend .mr-10;
+ line-height: 1.3;
color : $DARK_BLUE;
flex-basis: auto;
min-width : 40px;
}
.client-detail-demand__demand-list-content {
text-align: justify;
+ line-height: 1.3;
text-justify: auto;
word-break: break-all;
}
diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue
index d1a6847..bb814d1 100644
--- a/PAMapp/pages/myAppointmentList.vue
+++ b/PAMapp/pages/myAppointmentList.vue
@@ -2,7 +2,7 @@
<div>
<InterviewNotification></InterviewNotification>
<div class="pam-container">
- <div class="pam-cus-tabs mb-30">
+ <div class="pam-cus-tabs mb-10">
<div
class="cus-tab-item"
:class="{'is-active': activeTabName === 'appointmentList'}"
diff --git a/PAMapp/pages/myAppointmentList/closedList.vue b/PAMapp/pages/myAppointmentList/closedList.vue
index b050cab..4802f56 100644
--- a/PAMapp/pages/myAppointmentList/closedList.vue
+++ b/PAMapp/pages/myAppointmentList/closedList.vue
@@ -126,15 +126,19 @@
.closed-appointment__tag-filter {
display: flex;
.el-radio {
- border-color: $PRIMARY_BLACK;
- border-width: 2px;
+ border-color: $LIGHT_GREY;
+ border-radius: 30px;
+ border-width: 1px;
font-size : 16px;
margin-left : 0 !important;
margin-right: 10px;
padding : 10px;
@extend .fix-chrome-click--issue;
&.is-checked {
- background-color: #D0D0CE;
+ background-color: $CORAL;
+ .el-radio__label {
+ color : $PRIMARY_WHITE !important;
+ }
}
.el-radio__input {
display: none;
--
Gitblit v1.8.0