From 04b25b25c477309298e1d7433ddb14bb8e57778d Mon Sep 17 00:00:00 2001
From: charlie <charlie@lvguanqingdeMacBook-Pro.local>
Date: 星期六, 22 一月 2022 12:17:58 +0800
Subject: [PATCH] Fixed: 修正預約資訊中的性別icon顯示判斷
---
PAMapp/pages/appointment/_appointmentId/index.vue | 22 +++++++++++++++++-----
PAMapp/assets/scss/_variable.scss | 1 +
2 files changed, 18 insertions(+), 5 deletions(-)
diff --git a/PAMapp/assets/scss/_variable.scss b/PAMapp/assets/scss/_variable.scss
index 0fd2878..3eb388f 100644
--- a/PAMapp/assets/scss/_variable.scss
+++ b/PAMapp/assets/scss/_variable.scss
@@ -10,6 +10,7 @@
$SKY_BLUE: #009CBD;
$LIGHT_BLUE: #8DB9CA;
$DARK_BLUE: #1B365D;
+$LIGHT_RED: #DA3738;
$BEIGE: #A89968;
$PRUDENTIAL_GREY: #68737A;
$LIGHT_GREY: #D0D0CE;
diff --git a/PAMapp/pages/appointment/_appointmentId/index.vue b/PAMapp/pages/appointment/_appointmentId/index.vue
index 5e75edc..0fe4c50 100644
--- a/PAMapp/pages/appointment/_appointmentId/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/index.vue
@@ -18,9 +18,11 @@
<div class="client-detail-info__avatar">
<div class="circle">
{{ appointmentDetail.name || 'NO NAME' }}
- <div class="sm-circle">
- <i class="icon-sex-male sex-icon" v-if="appointmentDetail.gender === 'male'"></i>
- <i class="icon-sex-female sex-icon" v-else></i>
+ <div class="sm-circle sm-circle-male" v-if="appointmentDetail.gender === 'male'">
+ <i class="icon-sex-male sex-icon"></i>
+ </div>
+ <div class="sm-circle sm-circle-female" v-if="appointmentDetail.gender === 'female'">
+ <i class="icon-sex-female sex-icon"></i>
</div>
</div>
</div>
@@ -201,7 +203,6 @@
width: 30px;
border-radius: 50%;
background-color: #fff;
- border: 1px solid $SKY_BLUE;
bottom: 0;
right: 0;
display: flex;
@@ -209,7 +210,18 @@
align-items: center;
.sex-icon {
font-size: 20px;
- color: $SKY_BLUE;
+ &.icon-sex-male{
+ color: $SKY_BLUE;
+ }
+ &.icon-sex-female{
+ color: $CORAL;
+ }
+ }
+ &-male {
+ border: 1px solid $SKY_BLUE;
+ }
+ &-female {
+ border: 1px solid $LIGHT_RED;
}
}
}
--
Gitblit v1.8.0