From 505f666d3ecf3688778c079a8bbfb366d695cf22 Mon Sep 17 00:00:00 2001 From: wayne <wayne8692wayne8692@gmail.com> Date: 星期五, 12 十一月 2021 17:32:08 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- PAMapp/pages/recommendConsultant/result.vue | 189 ++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 152 insertions(+), 37 deletions(-) diff --git a/PAMapp/pages/recommendConsultant/result.vue b/PAMapp/pages/recommendConsultant/result.vue index 8aba627..8792bcc 100644 --- a/PAMapp/pages/recommendConsultant/result.vue +++ b/PAMapp/pages/recommendConsultant/result.vue @@ -2,73 +2,74 @@ <div> <div class="mdTxt pb-10">��憿批��</div> <ul class="pam-rec-agent__list"> - <li class="pam-rec-agent-card" v-for="(info,index) in recAgentList" :key="index"> + <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__content-header"> + <div class="pam-rec-agent-card__content-header"> <div class="pam-rec-agent-card__avatar"> <img :src="info.avatar" class="avatar"> </div> <div class="pam-rec-agent-card__main-info"> - <div class="fz-20 pt-10">{{ info.name }}</div> + <div class="fz-20 pt-10 rec-desktop-name">{{ info.name }}</div> <div class="rec-role">{{ info.role }}</div> - <span class="rec-detail pt-30">閰喟敦鞈��</span> + <span class="rec-detail">閰喟敦鞈��</span> </div> - </div> - <div class="pam-rec-agent-card__content-body"> + </div> + <div class="pam-rec-agent-card__content-body"> <el-row type="flex" class="pam-paragraph"> - <div class="field"> + <div class="field"> <div class="field__label"> 撠���� </div> <div class="field__content expertieses-container"> - <div class="pr-10 pb-10" v-for="(expert, index) in info.expertises" :key="index"> + <div class="pr-10 pb-10" v-for="(expert, index) in info.expertises" :key="index"> #{{ expert }} - </div> </div> - </div> + </div> + </div> </el-row> - <el-row type="flex" class="pam-paragraph"> - <el-col :span="12"> + <el-row type="flex" class="pam-paragraph"> + <el-col :span="12"> <div class="field__label"> ����風 </div> <div class="field__content"> - {{ info.seniority }} + {{ info.seniority }} </div> - </el-col> - <el-col :span="12"> + </el-col> + <el-col :span="12"> <div class="field__label"> 摰X皛踵�漲 </div> <div class="field__content"> - {{ info.avgScore }} + <i class="icon-star" style="color:#F2C75C"></i> + {{ info.avgScore }} </div> - </el-col> + </el-col> </el-row> - </div> - <div class="pam-rec-agent-card__content-footer"> + </div> + <div class="pam-rec-agent-card__content-footer"> <el-row - type="flex" - justify="center" - class=""> - <el-button>+ 憿批��</el-button> - <el-button type="primary" style="margin-left: 10px">�脰����</el-button> + type="flex" + justify="center" + > + <el-button class="btn">+ 憿批��</el-button> + <el-button class="btn2" type="primary" style="margin-left: 10px" @click="$router.push('/questionnaire')" + >�脰����</el-button> </el-row> - </div> - + </div> </div> </li> </ul> - - <div class="mt-30"> - ��� - </div> + <UiPagination + :totalList="recAgentList" + @changePage="changePage" + ></UiPagination> </div> </template> -<script> +<script lang="ts"> import {Vue,Component} from 'vue-property-decorator'; @Component @@ -124,20 +125,36 @@ avgScore:4.8 } ]; + pageList: any[] = []; + + changePage(pageList: any[]) { + this.pageList = pageList; + } } </script> <style lang="scss" scoped> +.btn{ + width: 139px; + height: 47px; +} +.btn2{ + width: 120px; + height: 47px; +} .pam-rec-agent-card { margin-bottom: 10px; border-radius: 10px; border: 1px solid $LIGHT_GREY; padding: 20px 33px; + margin-right:-20px; + margin-left:-20px; + .pam-rec-agent-card__content { - width: 270px; - .pam-rec-agent-card__content-header { + width: 270px; + .pam-rec-agent-card__content-header { display: flex; .pam-rec-agent-card__avatar { display: flex; @@ -163,9 +180,10 @@ font-size: 20px; color:$PRIMARY_RED; font-weight: bold; + padding-top: 30px; } } - } + } } } @@ -175,9 +193,106 @@ font-weight:bold; margin-bottom: 7px; } - +.field__content{ + font-size: 18px; +} .expertieses-container { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; +} + +@include desktop{ + .pam-rec-agent__list{ + display: flex; + flex-wrap: wrap; + } + .pam-paragraph{ + margin-top: 10px; + } + .pam-rec-agent-card { + margin-right: 20px; + margin-bottom: 10px; + border-radius: 10px; + border: 1px solid $LIGHT_GREY; + padding-top: 15px; + padding-bottom: 15px; + padding-left: 28px; + padding-right: 20px; + width: 30%; + margin-left: 10px; + + .pam-rec-agent-card__content { + width: 190px; + .pam-rec-agent-card__content-header { + display: flex; + .pam-rec-agent-card__avatar { + display: flex; + flex-direction: row; + margin-right: 20px; + .avatar{ + width: 80px; + height: 80px; + border-radius: 50%; + margin-bottom: 10px; + } + } + .pam-rec-agent-card__main-info { + display: flex; + flex-direction: column; + justify-content: center; + .rec-desktop-name{ + font-size: 12px; + font-weight: bold; + } + .rec-role { + font-size: 12px; + color:$PRUDENTIAL_GREY; + } + .rec-detail{ + font-size: 12px; + color:$PRIMARY_RED; + font-weight: bold; + padding-top: 10px; + } + } + } + } + + } +.field__label { + font-size: 12px; + color: $PRUDENTIAL_GREY; + font-weight:bold; + margin-bottom: 7px; +} +.field__content{ + font-size: 12px; +} +.expertieses-container { + display: flex; + flex-wrap: wrap; + +} +.btn{ + width: 90px; + height: 43px; + font-size: 14px; + display: flex; + justify-content: center; + padding-top: 12px; + margin-right: 20px; +} +.btn2{ + width: 90px; + height: 43px; + font-size: 14px; + display: flex; + justify-content: center; + padding-top: 12px; + margin-right: -10px; +} +.el-row--flex.is-justify-center{ + justify-content:none; +} } </style> -- Gitblit v1.8.0