From f8ab133a7dc20562c25a092a402266f5e7b0b296 Mon Sep 17 00:00:00 2001
From: Jack <jack.su@pollex.com.tw>
Date: 星期一, 24 一月 2022 10:29:38 +0800
Subject: [PATCH] Merge branch 'Phase3' of ssh://dev.pollex.com.tw:29418/pcalife/PAM into Phase3
---
PAMapp/components/Interview/InterviewCard.vue | 101 +++++++++++++++++++++++++++++++++-----------------
1 files changed, 66 insertions(+), 35 deletions(-)
diff --git a/PAMapp/components/Interview/InterviewCard.vue b/PAMapp/components/Interview/InterviewCard.vue
index e3f4f54..c0e9a0f 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,14 @@
}
}
.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;
+ margin-bottom: 20px;
.record-card-date{
display: flex;
flex-direction: column;
@@ -126,11 +146,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 +161,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;
}
--
Gitblit v1.8.0