Merge remote-tracking branch 'origin/Phase3' into Phase3

wayne

2022-01-22 e422239791b35a7c466372eda8c99d2775a6bae1

Merge remote-tracking branch 'origin/Phase3' into Phase3

 PAMapp/assets/images/appointment/avatar_bg.svg

¤ñ¹ï·sÀÉ®×
@@ -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>

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

 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 {

 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>


 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>

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

 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>
</style>

 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>

 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>

 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>

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

    }
  }


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

 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>

 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'}"

 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;