From e422239791b35a7c466372eda8c99d2775a6bae1 Mon Sep 17 00:00:00 2001
From: wayne <wayne8692wayne8692@gmail.com>
Date: 星期六, 22 一月 2022 14:55:51 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/Phase3' into Phase3
---
PAMapp/components/Interview/InterviewAdd.vue | 16 -
PAMapp/components/Ui/UiTimePicker.vue | 69 ++++++
PAMapp/pages/myAppointmentList/closedList.vue | 10
PAMapp/components/Appointment/AppointmentProgress.vue | 4
PAMapp/components/Ui/UiDatePicker.vue | 20 ++
PAMapp/components/Interview/InterviewRecordCard.vue | 4
PAMapp/pages/myAppointmentList.vue | 3
PAMapp/components/DateTimePicker.vue | 16 +
PAMapp/pages/appointment/_appointmentId/close/index.vue | 7
PAMapp/assets/scss/_common.scss | 46 +++++
PAMapp/components/Interview/InterviewCard.vue | 100 +++++++---
PAMapp/components/Interview/InterviewMsg.vue | 16 +
PAMapp/pages/appointmentAgenda/index.vue | 92 ++++-----
PAMapp/assets/images/appointment/avatar_bg.svg | 9 +
PAMapp/components/Interview/interviewNotification.vue | 46 +---
PAMapp/pages/appointment/_appointmentId/index.vue | 35 +++
PAMapp/assets/scss/_variable.scss | 1
17 files changed, 330 insertions(+), 164 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/assets/scss/_common.scss b/PAMapp/assets/scss/_common.scss
index 768bb07..1898ed7 100644
--- a/PAMapp/assets/scss/_common.scss
+++ b/PAMapp/assets/scss/_common.scss
@@ -91,4 +91,48 @@
line-height: 40px;
padding-right: 10px;
}
-}
\ No newline at end of file
+}
+
+.remind-container{
+ margin-top: 13px;
+ margin-bottom: 20px;
+ display: flex;
+ .remind-date{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-weight: bold;
+ width: 70px;
+ border-radius: 6px;
+ border-bottom: 1px solid #CCCCCC;
+ border-right: 1px solid #CCCCCC;
+ border-left: 1px solid #CCCCCC;
+ }
+ .remind-content-txt{
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #CCCCCC;
+ flex:1;
+ border-radius: 5px;
+ padding: 10px;
+ }
+ .mb-3{
+ margin-bottom: 3px;
+ }
+ .mt-2{
+ margin-top:2px;
+ }
+ .date-year{
+ color: #fff;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ }
+ .bgc-primary-red{
+ background-color:$PRIMARY_RED;
+ width: 70.5px;
+ border-top-left-radius:6px;
+ border-top-right-radius:6px;
+ border: 1px solid #CCCCCC;
+ }
+}
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/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/components/DateTimePicker.vue b/PAMapp/components/DateTimePicker.vue
index 7916c77..f2a8763 100644
--- a/PAMapp/components/DateTimePicker.vue
+++ b/PAMapp/components/DateTimePicker.vue
@@ -4,25 +4,31 @@
<div class="dateTime">
<UiDatePicker
@changeDate="changeDateTime($event, 'date')"
+ :isPastDateDisabled="isPastDateDisabled"
:defaultValue="defaultValue"
></UiDatePicker>
<UiTimePicker
@changeTime="changeDateTime($event, 'time')"
:defaultValue="defaultValue"
+ :isPastDateDisabled="isPastDateDisabled"
+ :changeDate="changeDate"
></UiTimePicker>
</div>
</template>
<script lang="ts">
-import { Component, Emit, Prop, Vue } from "nuxt-property-decorator";
+import { Component, Emit, Prop, Vue, Watch } from "nuxt-property-decorator";
@Component
export default class DateTimePicker extends Vue {
- changeDate!: Date;
+ changeDate: Date | string = '';
changeTime!: string;
@Prop()
defaultValue!: string;
+
+ @Prop()
+ isPastDateDisabled!: boolean;
@Emit('changeDateTime')
changeDateTime(event, type) {
@@ -33,12 +39,14 @@
this.changeTime = event;
}
if (this.changeDate && this.changeTime) {
- const timeArray = this.changeTime.split(':');
- const interViewTime = this.changeDate.setHours(+timeArray[0], +timeArray[1]);
+ const hour = this.changeTime.split(':')[0];
+ const minute = this.changeTime.split(':')[1];
+ const interViewTime = new Date(this.changeDate).setHours(+hour, +minute);
return new Date(interViewTime);
}
return '';
}
+
}
</script>
diff --git a/PAMapp/components/Interview/InterviewAdd.vue b/PAMapp/components/Interview/InterviewAdd.vue
index d86d7a6..5106383 100644
--- a/PAMapp/components/Interview/InterviewAdd.vue
+++ b/PAMapp/components/Interview/InterviewAdd.vue
@@ -5,7 +5,7 @@
<span>{{interviewRecord.lastModifiedDate | formatDate}} ��</span>
</div>
<el-row class="mdTxt mb-10">
- <el-col :xs="16" :sm="20" class="required">蝝赤����</el-col>
+ <el-col :xs="16" :sm="20">蝝赤����</el-col>
<el-col :xs="8" :sm="4" class="text--right" v-if="interviewId">
<span
v-if="!isEdit"
@@ -86,6 +86,7 @@
<InterviewMsg
:isVisible.sync="showInterviewMsgPopup"
:client="appointmentDetail"
+ :defaultValue="interviewTime"
@closeDialog="closePopup"
></InterviewMsg>
</div>
@@ -248,18 +249,5 @@
font-size: 20px;
}
}
-.required {
- position: relative;
- transform: translateX(10px);
- &::before {
- content: '*';
- font-size: 15px;
- font-weight: bold;
- position: absolute;
- color: #FF0000;
- transform: translateX(-10px);
- z-index: 5;
- }
-}
</style>
diff --git a/PAMapp/components/Interview/InterviewCard.vue b/PAMapp/components/Interview/InterviewCard.vue
index e3f4f54..edef55d 100644
--- a/PAMapp/components/Interview/InterviewCard.vue
+++ b/PAMapp/components/Interview/InterviewCard.vue
@@ -1,35 +1,46 @@
<template>
<div>
- <template v-if="!interviewList.length">
- <div class="record-card record-card--empty">
+ <template v-if="!interviewList.length">
+ <span class="record-card record-card--empty" style="display:flex">
�蝝赤蝝����
- </div>
+ </span>
</template>
<template v-else>
<div class="interview--future">
- <div class="record-card mb-10"
+ <div class="record-card mb-10"
v-for="(item, index) in futureList"
:key="index + 'feature'"
@click="editInterview(item)"
- >
- <div class="record-card-date">
- <div>
- <UiDateFormat
+ >
+ <div class="remind-container">
+ <div class="remind-date mr-10">
+ <div class="mb-3 smTxt bgc-primary-red date-year">
+ <div class="mb-3 mt-2">
+ <UiDateFormat
class="date bold"
:date="item.interviewDate"
- onlyShowSection="DAY" />
- </div>
- <div>
- <UiDateFormat
- class="time mt-5 line-space"
+ onlyShowSection="YEAR" />
+ </div>
+ </div>
+ <div class="p mt-5">
+ <UiDateFormat
+ class="date bold"
+ :date="item.interviewDate"
+ onlyShowSection="DATE" />
+ </div>
+ </div>
+ <div class="remind-content-txt">
+ <div style="display:flex">
+ <UiDateFormat
+ class="date bold "
:date="item.interviewDate"
onlyShowSection="TIME" />
- </div>
- </div>
- <div class="record-card-content">
- <span>{{item.content}}</span>
- </div>
+ </div>
+ <div class="interview-card-content">{{item.content}}</div>
+ </div>
+
+ </div>
</div>
</div>
@@ -39,23 +50,34 @@
:key="index + 'past'"
@click="editInterview(item)"
>
- <div class="record-card-date">
- <div>
- <UiDateFormat
- class="date bold"
+
+ <div class="remind-container">
+ <div class="remind-date mr-10">
+ <div class="mb-3 smTxt bgc-primary-red date-year">
+ <div class="mb-3 mt-2">
+ <UiDateFormat
+ class="bold date"
:date="item.interviewDate"
- onlyShowSection="DAY" />
+ onlyShowSection="YEAR" />
</div>
- <div>
- <UiDateFormat
- class="time mt-5 line-space"
+ </div>
+ <div class="p mt-5">
+ <UiDateFormat
+ class="mt-5 line-space time"
+ :date="item.interviewDate"
+ onlyShowSection="DATE" />
+ </div>
+ </div>
+ <div class="remind-content-txt">
+ <div style="display:flex">
+ <UiDateFormat
+ class="mt-5 line-space mb-3 time"
:date="item.interviewDate"
onlyShowSection="TIME" />
- </div>
+ </div>
+ <div class="interview-card-content">{{item.content}}</div>
</div>
- <div class="record-card-content">
- <span>{{item.content}}</span>
- </div>
+ </div>
</div>
</section>
</template>
@@ -109,16 +131,13 @@
}
}
.interview--past {
+ margin-top: 10px;
border-top: 1px solid #CCCCCC;
padding-top: 17px;
margin-top: 17px;
}
.record-card {
- height: 62px;
- border: 1px solid #707070;
- border-radius: 5px;
- display: flex;
- border-bottom: 1px solid #000;
+ height: 64px;
.record-card-date{
display: flex;
flex-direction: column;
@@ -126,11 +145,13 @@
margin-right: 10px;
margin-top: 10px;
}
+
.record-card-content{
height: 42px;
margin-top: 10px;
margin-right: 10px;
line-height: 1.2;
+
}
&.record-card--empty {
align-items : center;
@@ -139,6 +160,15 @@
justify-content : center;
}
}
+.interview-card-content{
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ word-break: break-all;
+ word-wrap: break-word;
+ -webkit-line-clamp: 2;
+}
.line-space{
letter-spacing: 1px;
}
diff --git a/PAMapp/components/Interview/InterviewMsg.vue b/PAMapp/components/Interview/InterviewMsg.vue
index 9695183..17837dc 100644
--- a/PAMapp/components/Interview/InterviewMsg.vue
+++ b/PAMapp/components/Interview/InterviewMsg.vue
@@ -20,9 +20,11 @@
</el-input>
<div v-if="client.phone">
- <div class="mdTxt mt-30 mb-10">����赤��挾</div>
+ <div class="mdTxt mt-30 mb-10 required">����赤��挾</div>
<DateTimePicker
@changeDateTime="interviewTime = $event"
+ :isPastDateDisabled="true"
+ :defaultValue="defaultValue"
></DateTimePicker>
</div>
@@ -68,6 +70,9 @@
@Prop()
client!: Appointment;
+
+ @Prop()
+ defaultValue!: string;
@Emit('closeDialog')
closeDialog() {
@@ -118,6 +123,15 @@
<style lang="scss" >
.interview-msg-component{
+ .required {
+ position: relative;
+ &::before {
+ content: '*';
+ position: absolute;
+ color: #FF0000;
+ transform: translate(-12px, 0);
+ }
+ }
.msg-dialog-title{
display: flex;
justify-content: center;
diff --git a/PAMapp/components/Interview/InterviewRecordCard.vue b/PAMapp/components/Interview/InterviewRecordCard.vue
index a02c7a6..9baae4b 100644
--- a/PAMapp/components/Interview/InterviewRecordCard.vue
+++ b/PAMapp/components/Interview/InterviewRecordCard.vue
@@ -70,6 +70,8 @@
justify-content: center;
align-items: center;
align-content: center;
+ background-color:#1B365D;
+ color: #fff;
}
}
}
@@ -93,4 +95,4 @@
margin-left: 13px;
margin-top: 10px;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/PAMapp/components/Interview/interviewNotification.vue b/PAMapp/components/Interview/interviewNotification.vue
index 8b4f687..9bb6253 100644
--- a/PAMapp/components/Interview/interviewNotification.vue
+++ b/PAMapp/components/Interview/interviewNotification.vue
@@ -4,17 +4,22 @@
<div class="mdTxt text--black">�撠�赤����</div>
<div class="smTxt_bold text--primary sub-title cursor--pointer" @click="toAgendaPage">����</div>
</div>
+
<div class="remind-container">
- <div class="remind-content">
- <div class="remind-first-line mr-10">
- <div class="txt-margin">2021</div>
- <div>12/25</div>
+ <div class="remind-date mr-10">
+ <div class="mb-3 smTxt bgc-primary-red date-year">
+ <div class="mb-3 mt-2">2021</div>
</div>
- <div class="remind-content-txt">
- <div class="txt-margin">09:00</div>
- <div>蝝赤���</div>
- </div>
+ <div class="p mt-5">
+ <div>12/25</div>
+ </div>
</div>
+
+ <div class="remind-content-txt">
+ <div class="mb-3">09:00</div>
+ <div>蝝赤���</div>
+ </div>
+
</div>
</div>
</template>
@@ -48,29 +53,6 @@
border-bottom: 1px solid $PRIMARY_RED;
}
}
- .remind-container{
- margin-top: 13px;
- border: 1px solid #CCCCCC;
- height: 61px;
- border-radius: 5px;
- margin-bottom: 20px;
- .remind-content{
- display: flex;
- padding: 13px 10px;
- .remind-first-line{
- display: flex;
- flex-direction: column;
- align-items: center;
- font-weight: bold;
- }
- }
- }
}
-.remind-content-txt{
- display: flex;
- flex-direction: column;
-}
-.txt-margin{
- margin-bottom: 3px;
-}
+
</style>
diff --git a/PAMapp/components/Ui/UiDatePicker.vue b/PAMapp/components/Ui/UiDatePicker.vue
index ef89297..20132bc 100644
--- a/PAMapp/components/Ui/UiDatePicker.vue
+++ b/PAMapp/components/Ui/UiDatePicker.vue
@@ -8,13 +8,14 @@
format="yyyy/MM/dd"
placeholder="������"
prefix-icon="icon-down down-icon"
+ :picker-options="pickerOptions"
@change="changeDate"
>
</el-date-picker>
</template>
<script lang="ts">
-import { Component, Emit, Prop, Vue, Watch } from "nuxt-property-decorator";
+import { Component, Emit, Prop, PropSync, Vue, Watch } from "nuxt-property-decorator";
@Component
export default class UiDatePicker extends Vue {
@@ -22,6 +23,9 @@
@Prop()
defaultValue!: string;
+
+ @Prop({default: false})
+ isPastDateDisabled!: boolean;
@Emit('changeDate')
changeDate() {
@@ -35,5 +39,19 @@
this.changeDate();
}
}
+
+ get pickerOptions() {
+ if (this.isPastDateDisabled) {
+ return {
+ disabledDate(time: Date) {
+ const date = new Date();
+ const currentDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+ const pickedDate = `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}`
+ return new Date(pickedDate).getTime() < new Date(currentDate).getTime();
+ }
+ }
+ }
+ }
+
}
</script>
\ No newline at end of file
diff --git a/PAMapp/components/Ui/UiTimePicker.vue b/PAMapp/components/Ui/UiTimePicker.vue
index 6803eae..b661e00 100644
--- a/PAMapp/components/Ui/UiTimePicker.vue
+++ b/PAMapp/components/Ui/UiTimePicker.vue
@@ -19,14 +19,17 @@
@Component
export default class UiTimePicker extends Vue {
timeValue = '';
- pickerOptions = {
- start: '09:00',
- step: '00:15',
- end: '21:00'
- }
@Prop()
defaultValue!: string;
+
+ @Prop({default: ''})
+ changeDate!: Date | string;
+
+ @Prop()
+ isPastDateDisabled!: boolean;
+
+ ///////////////////////////////////////////////////////////////////////
@Emit('changeTime')
changeTime() {
@@ -36,11 +39,61 @@
@Watch('defaultValue', {immediate: true})
updateDefault() {
if (this.defaultValue) {
- const hours = new Date(this.defaultValue).getHours();
- const minutes = new Date(this.defaultValue).getMinutes();
- this.timeValue = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
+ const defaultDate = new Date(this.defaultValue);
+ this.timeValue = this.formatTimeString(defaultDate);
this.changeTime();
}
}
+
+ ///////////////////////////////////////////////////////////////////////
+
+ get pickerOptions() {
+ let minTime = '';
+ const currentDate = new Date();
+
+ if (this.isPastDateDisabled && this.changeDate && this.isPickedToday(currentDate)) {
+ minTime = this.formatTimeString(currentDate);
+ this.isPickedDisableTime(currentDate, minTime);
+ }
+
+ return {
+ start: '09:00',
+ step: '00:15',
+ end: '21:00',
+ minTime: minTime
+ }
+ }
+
+ private isPickedDisableTime(currentDate: Date, minTime: string) {
+ const currentTime = this.getTimeValue(currentDate, minTime);
+ const pickedTime = this.getTimeValue(currentDate, this.timeValue);
+ if (pickedTime < currentTime) {
+ this.timeValue = '';
+ this.changeTime();
+ }
+ }
+
+ private isPickedToday(currentDate: Date) {
+ const pickedDate = new Date(this.changeDate);
+ const today = this.formatDateString(currentDate);
+ const picked = this.formatDateString(pickedDate);
+ return today === picked;
+ }
+
+ private getTimeValue(date: Date, time: string) {
+ const hour = time.split(':')[0];
+ const minute = time.split(':')[1];
+ return date.setHours(+hour, +minute);
+ }
+
+ private formatDateString(date: Date) {
+ return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+ }
+
+ private formatTimeString(date: Date) {
+ const hours = date.getHours();
+ const minutes = date.getMinutes();
+ return `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
+ }
}
</script>
\ No newline at end of file
diff --git a/PAMapp/pages/appointment/_appointmentId/close/index.vue b/PAMapp/pages/appointment/_appointmentId/close/index.vue
index 94e02fd..d10476c 100644
--- a/PAMapp/pages/appointment/_appointmentId/close/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/close/index.vue
@@ -196,8 +196,11 @@
contactStatus : this.contactStatus.CLOSE,
remark : this.appointmentCloseInfo.remark,
}
- appointmentService.closeAppointment(toCloseAppointment).then((_) => this.updateAppointmentDetail(appointmentId));
- this.isShowSuccessAlert = true;
+ appointmentService.closeAppointment(toCloseAppointment).then((_) => {
+ this.updateAppointmentDetail(appointmentId);
+ this.isShowSuccessAlert = true;
+ });
+
}
}
diff --git a/PAMapp/pages/appointment/_appointmentId/index.vue b/PAMapp/pages/appointment/_appointmentId/index.vue
index d96baa5..e825ab2 100644
--- a/PAMapp/pages/appointment/_appointmentId/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/index.vue
@@ -14,12 +14,15 @@
<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' ? '�' : '憟�'}}
+ <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>
@@ -161,8 +164,9 @@
}
inviteReview(): void {
- reviewsService.sendSatisfactionToClient(this.appointmentDetail.id).then(res => res);
- this.isShowInviteReviewDialog = true ;
+ reviewsService.sendSatisfactionToClient(this.appointmentDetail.id).then(res => {
+ this.isShowInviteReviewDialog = true;
+ });
}
}
</script>
@@ -189,8 +193,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 +204,26 @@
width: 30px;
border-radius: 50%;
background-color: #fff;
- border: 1px solid $PRIMARY_BLACK;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
+ .sex-icon {
+ font-size: 20px;
+ &.icon-sex-male{
+ color: $SKY_BLUE;
+ }
+ &.icon-sex-female{
+ color: $CORAL;
+ }
+ }
+ &-male {
+ border: 1px solid $SKY_BLUE;
+ }
+ &-female {
+ border: 1px solid $LIGHT_RED;
+ }
}
}
}
@@ -230,12 +247,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/appointmentAgenda/index.vue b/PAMapp/pages/appointmentAgenda/index.vue
index a1b5568..4e3db90 100644
--- a/PAMapp/pages/appointmentAgenda/index.vue
+++ b/PAMapp/pages/appointmentAgenda/index.vue
@@ -1,41 +1,56 @@
<template>
<div>
<div class="mdTxt">�撠�赤����(3)</div>
+
<div class="remind-container">
- <div class="remind-content">
- <div class="remind-first-line mr-10">
- <div class="txt-margin">2021</div>
- <div>12/25</div>
+ <div class="remind-date mr-10">
+ <div class="mb-3 smTxt bgc-primary-red date-year">
+ <div class="mb-3 mt-2">2021</div>
</div>
- <div class="remind-content-txt">
- <div class="txt-margin">09:00</div>
- <div>蝝赤���</div>
- </div>
+ <div class="p mt-5">
+ <div>12/25</div>
+ </div>
+ </div>
+
+ <div class="remind-content-txt">
+ <div class="mb-3">09:00</div>
+ <div>蝝赤���</div>
</div>
</div>
- <div class="remind-container">
- <div class="remind-content">
- <div class="remind-first-line mr-10">
- <div class="txt-margin">2021</div>
- <div>12/22</div>
+
+ <div class="remind-container">
+
+ <div class="remind-date mr-10">
+ <div class="mb-3 smTxt bgc-primary-red date-year">
+ <div class="mb-3 mt-2">2021</div>
</div>
- <div class="remind-content-txt">
- <div class="txt-margin">13:00</div>
- <div>蝝赤�����</div>
- </div>
+ <div class="p mt-5">
+ <div>12/25</div>
+ </div>
</div>
+
+ <div class="remind-content-txt">
+ <div class="mb-3">09:00</div>
+ <div>蝝赤���</div>
+ </div>
+
</div>
- <div class="remind-container">
- <div class="remind-content">
- <div class="remind-first-line mr-10">
- <div class="txt-margin">2021</div>
- <div>12/18</div>
+ <div class="remind-container">
+
+ <div class="remind-date mr-10">
+ <div class="mb-3 smTxt bgc-primary-red date-year">
+ <div class="mb-3 mt-2">2021</div>
</div>
- <div class="remind-content-txt">
- <div class="txt-margin">09:00</div>
- <div>蝝赤��摩隡�</div>
- </div>
+ <div class="p mt-5">
+ <div>12/25</div>
+ </div>
</div>
+
+ <div class="remind-content-txt">
+ <div class="mb-3">09:00</div>
+ <div>蝝赤���</div>
+ </div>
+
</div>
</div>
</template>
@@ -50,29 +65,4 @@
}
</script>
<style lang="scss" scoped>
- .remind-container{
- margin-top: 13px;
- border: 1px solid #CCCCCC;
- height: 61px;
- border-radius: 5px;
- margin-bottom: 20px;
- background-color: #fff;
- .remind-content{
- display: flex;
- padding: 13px 10px;
- .remind-first-line{
- display: flex;
- flex-direction: column;
- align-items: center;
- font-weight: bold;
- }
- }
- }
-.remind-content-txt{
- display: flex;
- flex-direction: column;
-}
-.txt-margin{
- margin-bottom: 3px;
-}
</style>
diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue
index d1a6847..5045e5f 100644
--- a/PAMapp/pages/myAppointmentList.vue
+++ b/PAMapp/pages/myAppointmentList.vue
@@ -1,8 +1,9 @@
<template>
<div>
+ <div class="pam-myAppointment-banner"></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