From 8481d8e25454b145ad1e38b411c9e6a0d7034d67 Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期六, 22 一月 2022 12:47:58 +0800
Subject: [PATCH] Update:[顧問流程]-樣式變更 & Fixed#134591 [ 顧問管理流程 ] 約訪中 : 新增約訪紀錄文字跑版
---
PAMapp/assets/scss/_common.scss | 46 +++++++++++++++
PAMapp/components/Interview/InterviewCard.vue | 100 +++++++++++++++++++++-----------
PAMapp/components/Interview/InterviewMsg.vue | 11 +++
3 files changed, 120 insertions(+), 37 deletions(-)
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/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 8d6de8d..17837dc 100644
--- a/PAMapp/components/Interview/InterviewMsg.vue
+++ b/PAMapp/components/Interview/InterviewMsg.vue
@@ -20,7 +20,7 @@
</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"
@@ -123,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;
--
Gitblit v1.8.0