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

HelenHuang

2022-01-22 8481d8e25454b145ad1e38b411c9e6a0d7034d67

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

 PAMapp/assets/scss/_common.scss

@@ -91,4 +91,48 @@
        line-height: 40px;
        padding-right: 10px;
    }
}
}

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

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

 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;