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

charlie

2022-01-22 38b68f92b9a47ca3947985d6b581603fe05106c7

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