update#129050 - [業務員詳細資訊] 前端畫面刻版

Tomas

2021-10-31 a40791c415b60b29e2d8fe3af88db980ea409241

 PAMapp/pages/agentInfo/index.vue

@@ -14,9 +14,10 @@
        class="pt-10"
        justify="center"
        align="middle">
          <i class="pam-icon icon-primary icon-star"></i>
          <i class="pam-icon icon--primary icon-star"></i>
          <h3 class="mdTxt">{{ agentInfo.avgReviews }}</h3>
      </el-row>

      <el-row
        type="flex"
        class="pt-10"
@@ -26,18 +27,18 @@

      <el-row
        type="flex"
        class="mt-30">
        <UiField span="12" icon="agent" label="頭銜">
        class="pam-paragraph">
        <UiField :span="12" icon="agent" label="頭銜">
          {{ agentInfo.title }}
        </UiField>
        <UiField span="12" icon="phone" label="電話">
        <UiField :span="12" icon="phone" label="電話">
          {{ agentInfo.phoneNumber }}
        </UiField>
      </el-row>

      <el-row
        type="flex"
        class="mt-30">
        class="pam-paragraph">
        <UiField icon="company" label="服務地區">
          {{ agentInfo.serveArea }}
        </UiField>
@@ -45,7 +46,7 @@

      <el-row
        type="flex"
        class="mt-30">
        class="pam-paragraph">
        <UiField icon="address" label="服務地區">
          {{ agentInfo.companyAddress }}
        </UiField>
@@ -53,30 +54,31 @@

      <el-row
        type="flex"
        class="mt-30">
        <UiField span="12" icon="time" label="最後上線時間">
          {{ agentInfo.lastestLoginTime }}
        class="pam-paragraph">
        <UiField :span="12" icon="time" label="最後上線時間">
          {{ agentInfo.lastestLoginTime | formatDate }}
        </UiField>
        <UiField span="12" icon="calender" label="服務資歷">
        <UiField :span="12" icon="calender" label="服務資歷">
          {{ agentInfo.seniority }}
        </UiField>
      </el-row>

      <el-row
        type="flex"
        class="mt-30">
        class="pam-paragraph">
        <el-col :span="24" class="pam-field">
          <div class="pam-field-label pam-progress-label">
          <div class="pam-field__label pam-progress__label">
            <div>
              <div class="pam-field-title">
                <i class="pam-icon icon-agent"></i>匹配度(找不到拼圖 icon) <i class="text--primary icon-information"></i>
              <div class="pam-field__title">
                <!-- TODO: 如從首頁推薦顧問進入，不會出現匹配度 [Tomas, 2021/10/29] -->
                <i class="pam-icon icon-puzzle"></i>匹配度 <i class="text--primary icon-information"></i>
              </div>
            </div>
            <div class="xsTxt">
              {{ agentInfo.suitability }}%
            </div>
          </div>
          <div class="pam-field-content pam-field-suitability pt-10">
          <div class="pam-field__content pam-field-suitability pt-10">
            <el-progress
              :show-text="false"
              :text-inside="true"
@@ -88,11 +90,11 @@

      <el-row
        type="flex"
        class="mt-30">
        class="pam-paragraph">
        <el-col :span="24" class="pam-field">
          <div class="pam-field-label pam-progress-label">
          <div class="pam-field__label pam-progress__label">
            <div>
              <div class="pam-field-title">
              <div class="pam-field__title">
                <i class="pam-icon icon-thumbs-up"></i>諮詢度表現 <i class="text--primary icon-information"></i>
              </div>
            </div>
@@ -100,7 +102,7 @@
              {{ agentInfo.evaluation }}/50 (近一個月/累計)
            </div>
          </div>
          <div class="pam-field-content pam-field-evaluation pt-10">
          <div class="pam-field__content pam-field-evaluation pt-10">
            <el-progress :show-text="false" :stroke-width="15" :percentage="agentInfo.evaluation"></el-progress>
          </div>
        </el-col>
@@ -108,7 +110,7 @@

      <el-row
        type="flex"
        class="mt-30">
        class="pam-paragraph">
        <UiField icon="flag" label="專長領域">
          <div class="pam-field-experts">
            <div class="text--secondary bold pr-10" v-for="(expert, index) in agentInfo.expertises" :key="index">
@@ -120,7 +122,7 @@

      <el-row
        type="flex"
        class="mt-30">
        class="pam-paragraph">
        <UiField icon="comment" label="個人理念">
          {{ agentInfo.concept }}
        </UiField>
@@ -128,7 +130,7 @@

      <el-row
        type="flex"
        class="mt-30">
        class="pam-paragraph">
        <UiField icon="school" label="個人背景">
          <span v-for="(experience, index) in agentInfo.experiences" :key="index">
            {{ experience }}<span v-if="index !== agentInfo.experiences.length - 1">, </span>
@@ -138,7 +140,7 @@

      <el-row
        type="flex"
        class="mt-30">
        class="pam-paragraph">
        <UiField icon="trophy" label="得獎經歷">
          {{ agentInfo.awards }}
        </UiField>
@@ -147,7 +149,7 @@
      <el-row
        type="flex"
        justify="center"
        class="mt-30">
        class="pam-paragraph">
          <el-button>+ 顧問清單</el-button>
          <el-button type="primary">進行預約</el-button>
      </el-row>
@@ -172,7 +174,7 @@
    seniority: '4年2個月',
    suitability: 53,
    evaluation: 31,
    expertises: ['財務規劃', '資產移轉', '節稅', '樂活退休', '樂活退休'],
    expertises: ['財務規劃', '資產移轉', '節稅', '樂活退休'],
    concept: '壽險路上沒有捷徑，唯有給客戶信任感、安全感，才是最好的方法。從業以來，我一直秉持著「助人為快樂之本」的信念堅持著，她相信，一個好的業務人員，必須抱持著一顆熱心助人的心，才是永續經營壽險事業的不二法門。',
    experiences: ['台大財金系', '美莓有精算師執政'],
    awards: '入選：2020年伯樂十大最佳業務員 擁有證照：人身保險業務員證照、外幣收付保險證照、人身保險代理人證照、財產保險代理人證照'
@@ -207,20 +209,20 @@
  font-size: 15px;
  padding-right: 8px;
  color: #68737A;
  &.icon-primary {
  &.icon--primary {
    color: #ED1B2E;
  }
}
.pam-field {
  display: flex;
  flex-direction: column;
  .pam-field-label {
  .pam-field__label {
    display: flex;
    align-items: center;
    .pam-icon {
      font-size: 12px;
    }
    .pam-field-title {
    .pam-field__title {
      font-size: 16px;
      font-weight: bold;
    }
@@ -244,8 +246,10 @@
  flex-wrap: wrap;
}

.pam-progress-label {
.pam-progress__label {
  justify-content: space-between;
  flex-wrap: wrap;
  line-height: 24px;
}

</style>