Update:[顧問流程]-樣式變更 & Fixed#134591 [ 顧問管理流程 ] 約訪中 : 新增約訪紀錄文字跑版

HelenHuang

2022-01-22 8481d8e25454b145ad1e38b411c9e6a0d7034d67

 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;
}