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