update: 1. 新增約訪預約資訊頭像圖片和型別icon，微調對齊方式 2. 約訪結案列表的樣式修正並調整進度條色彩

charlie

2022-01-22 38b68f92b9a47ca3947985d6b581603fe05106c7

update: 1. 新增約訪預約資訊頭像圖片和型別icon，微調對齊方式
        2. 約訪結案列表的樣式修正並調整進度條色彩

 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/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/pages/appointment/_appointmentId/index.vue

@@ -14,12 +14,13 @@

    <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' ? '男' : '女'}}
              <i class="icon-sex-male sex-icon" v-if="appointmentDetail.gender === 'male'"></i>
              <i class="icon-sex-female sex-icon" v-else></i>
            </div>
          </div>
        </div>
@@ -189,8 +190,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 +201,16 @@
            width: 30px;
            border-radius: 50%;
            background-color: #fff;
            border: 1px solid $PRIMARY_BLACK;
            border: 1px solid $SKY_BLUE;
            bottom: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            .sex-icon {
              font-size: 20px;
              color: $SKY_BLUE;
            }
          }
        }
      }
@@ -230,12 +234,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/myAppointmentList.vue

@@ -2,7 +2,7 @@
    <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;