From 34b08e1c461f5e08675fcff95525956d7c4bef11 Mon Sep 17 00:00:00 2001
From: wayne <wayne8692wayne8692@gmail.com>
Date: 星期四, 17 二月 2022 11:38:48 +0800
Subject: [PATCH] Merge branch 'Phase3' into pollex-dev

---
 PAMapp/pages/recommendConsultant/result.vue |   68 +++++++++++++++++++++++++++++++---
 1 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/PAMapp/pages/recommendConsultant/result.vue b/PAMapp/pages/recommendConsultant/result.vue
index c92a75e..1bbf19f 100644
--- a/PAMapp/pages/recommendConsultant/result.vue
+++ b/PAMapp/pages/recommendConsultant/result.vue
@@ -4,6 +4,20 @@
     <ul class="pam-rec-agent__list">
         <li class="pam-rec-agent-card" v-for="(info,index) in pageList" :key="index">
             <div class="pam-rec-agent-card__content">
+
+              <div
+                class="pam-rec-agent-card-suitability"
+                :class="{
+                  'match--level1': info.suitability === 100,
+                  'match--level2': 50 < info.suitability && info.suitability < 100,
+                  'match--level3': info.suitability < 51
+                }">
+                </div>
+
+                <div class="pam-rec-agent-card-suitability-text">
+                  <div class="label">���漲</div>
+                  <div class="value">{{info.suitability}}%</div>
+                </div>
                 <div class="pam-rec-agent-card__content-header">
                     <div class="pam-rec-agent-card__avatar">
                         <UiAvatar
@@ -37,7 +51,6 @@
                             {{ info.seniority }}
                             </div>
                         </el-col>
-                        <!-- TODO:���遛��漲 -->
                         <el-col :span="12" v-if="!hideReviews">
                             <div class="field__label">
                             摰X皛踵�漲
@@ -63,7 +76,7 @@
 
     <UiPagination
         class="mb-30"
-        :totalList="strictQueryList"
+        :totalList="strictResultList"
         @changePage="changePage"
         :pageSize = 6
     ></UiPagination>
@@ -86,24 +99,27 @@
 <script lang="ts">
 import { AgentOfStrictQuery } from '~/shared/models/strict-query.model';
 import { hideReviews } from '~/shared/const/hide-reviews';
-import { Vue,Component, State, namespace, Action} from 'nuxt-property-decorator';
+import { Vue,Component, State, namespace, Action, Getter} from 'nuxt-property-decorator';
 
 const localStorage = namespace('localStorage');
 
 @Component
-export default class Reslut extends Vue{
+export default class Result extends Vue{
     @State('strictQueryList')
     strictQueryList!: AgentOfStrictQuery[];
 
     @Action
     storeStrictQueryList!: (data: any) => Promise<number>;
 
+    @Getter('strictResultList')
+    strictResultList!: AgentOfStrictQuery[];
+
     @localStorage.State
     recommendConsultantItem!: string;
 
     pageList: any[] = [];
     isVisiblePopUp = false;
-    popUpTxt = '';
+    popUpTxt = '撌脣�憿批��';
     hideReviews = hideReviews;
 
     //////////////////////////////////////////////////////////////////////
@@ -112,6 +128,7 @@
             const strictQueryDto = JSON.parse(this.recommendConsultantItem);
             this.storeStrictQueryList(strictQueryDto);
         }
+
     }
 
     //////////////////////////////////////////////////////////////////////
@@ -124,7 +141,6 @@
     }
 
     openPopUp(txt: string) {
-        this.popUpTxt = txt;
         this.isVisiblePopUp = true;
     }
 }
@@ -136,8 +152,48 @@
     border-radius: 10px;
     border: 1px solid $LIGHT_GREY;
     padding: 20px 33px;
+    overflow: hidden;
 
     .pam-rec-agent-card__content {
+      position: relative;
+        .pam-rec-agent-card-suitability{
+          left: -125px;
+          top: -108px;
+          width: 150px;
+          height: 150px;
+          transform: rotate(45deg);
+          position:absolute;
+          &.match--level3 {
+            background-color: #C3A787;
+          }
+          &.match--level2 {
+            background-color: #D0D0CE;
+          }
+          &.match--level1 {
+            background-color: #F2C75C;
+          }
+        }
+        .pam-rec-agent-card-suitability-text{
+          position: absolute;
+          left: -25px;
+          top: -10px;
+          z-index: 5;
+          line-height: 1.3;
+          .label {
+            font-size: 10px;
+            color: #68737A;
+            @include desktop {
+              display: none;
+            }
+          }
+          .value {
+            font-size: 12px;
+            color: #222222;
+            @include desktop {
+              padding-left: 8px;
+            }
+          }
+        }
         .pam-rec-agent-card__content-header {
             display: flex;
             .pam-rec-agent-card__avatar {

--
Gitblit v1.8.0