猎聘-顾问详情展示

src/utils/headhuntingData.js

@@ -70,4 +70,43 @@ export const serviceData = [
       '6. 法律合规性：我们的服务严格遵守相关法律法规，确保调查过程的合法性、合规性，保护候选人的隐私权益。'
     ]
   }
+]
+
+// 顾问
+export const consultantData = [
+  {
+    id: 'simon',
+    title: '田森先生（Simon Tian）',
+    job: '创始人兼首席执行官',
+    country: '苏州',
+    avatar: 'https://minio.citupro.com/dev/menduner/consultant/simon.png',
+    desc: [
+      '2018年10月创办门墩儿人力资源一体化技术平台，田森博士为酒店行业提供了专业的人才招聘和寻访服务。通过搭建线上线下相结合的学习平台、组织行业交流活动、提供定制化培训方案等方式，帮助酒店从业者提升专业技能和职业素养。同时他还致力于人才数据的开发和利用，为酒店业的人力资源管理提供了更加科学、智能的解决方案。',
+      '田森博士凭借其丰富的酒店行业工作经历和卓越的学术背景，在酒店运营管理、市场营销、人力资源管理及人才数据开发等方面展现出了深厚的专业知识和创新能力。他的工作成果不仅为酒店业的发展做出了积极贡献，也为行业内的其他从业者树立了榜样。'
+    ],
+    edu: ['香港理工大学酒店及旅游管理博士', '香港理工大学信息管理理学硕士', '瑞士恺撒里兹大学国际饭店管理研究生', '中国旅游饭店国家级星评员', '中山大学校外兼职研究生导师', '苏州大学旅游管理专业学位研究生教育指导委员会委员'],
+  },
+  {
+    id: 'peter',
+    title: '潘青海先生（Peter Pan）',
+    job: '猎头顾问',
+    country: '北京',
+    avatar: 'https://minio.citupro.com/dev/menduner/consultant/peter.png',
+    desc: [
+      '潘青海先生在酒店及酒店式服务公寓领域积累的16年房务背景经验，积累了丰富的专业知识和实践经验。拥有深入的理解和实战经验。这段经历不仅让他掌握了高效运营客房部门的技巧，还培养了他对细节的关注和对服务质量的执着追求。2018年9月加入门墩儿人力资源一体化技术平台，是公司创始团队成员之一，并承担起日常运营的重任。他利用自己的专业技能优化了公司的运营流程，提高了工作效率。注重团队协作，通过有效的沟通和协调，确保与同事和客户之间的顺畅衔接，为公司的整体运营提供了坚实的保障。',
+      '在招聘和猎头业务方面，展现出了敏锐的洞察力和精准的判断力。利用自己的行业资源和人脉，积极开拓招聘渠道，与各大集团、酒店及业主公司建立了良好的合作关系。',
+      '注重客户需求分析，为客户提供个性化的解决方案，赢得了客户的信任和好评。在他的带领下门墩儿的销售业绩持续攀升，市场份额不断扩大，为公司的发展奠定了坚实的基础。'
+    ]
+  },
+  {
+    id: 'julie',
+    title: '姚嘉庆女士（Julie）',
+    job: '猎头顾问',
+    country: '北京',
+    avatar: 'https://minio.citupro.com/dev/menduner/consultant/julie.png',
+    desc: [
+      '在酒店行业深耕十五年之久，是一位拥有丰富市场销售经验与深厚行业洞察力的专业人士。多年的酒店从业经历使姚嘉庆女士具备了敏锐的市场洞察力、卓越的团队领导力和深厚的行业资源积累。她能够迅速适应不同市场环境的变化，灵活调整销售策略，确保酒店业绩的持续增长。',
+      '姚嘉庆女士对酒店行业及其他相关行业的市场动态、企业需求、人才分布等有深入的了解，这有助于她更准确地把握客户需求，提高寻访效率。她具备出色的人才评估能力，能够准确地判断候选人的专业技能、职业素养、性格特质等是否符合客户企业的要求。同时，她也是一位注重持续学习和自我提升的顶尖猎头顾问，在快速变化的市场动向中不断掌握新的行业知识、招聘技巧和行业动态，以保持自己的专业竞争力。'
+    ]
+  }
 ]

src/views/headhunting/components/content.vue

@@ -37,7 +37,7 @@
     <div class="country-offices common-width mb-10">
       <h2 class="section-header--country-page">我们的顾问</h2>
       <div class="d-flex consultant-box">
-        <div v-for="(val, i) in consultant" :key="i" class="consultant-item">
+        <div v-for="(val, i) in consultant" :key="i" class="consultant-item" @click="handleClick('consultant', val.id)">
           <div class="consultant-item__img" :style="{'background-image': `url('${val.avatar}')`, 'width': '100%', 'height': '100%' }"></div>
           <div class="consultant-item__name">{{ val.enName }}</div>
           <p class="consultant-item__country">{{ val.country }}</p>
@@ -138,9 +138,9 @@ const countryOffice = [
 ]
 // 我们的顾问
 const consultant = [
-  { country: '苏州', enName: '田森', avatar: 'https://cn.spencerstuart.com/-/media/consultant-photos-new/hong-kong/young_jeremy-web-5d.jpg' },
-  { country: '北京', enName: '潘青海', avatar: 'https://cn.spencerstuart.com/-/media/consultant-photos-new/singapore/ng_siewkiang-web-5a.jpg' },
-  { country: '北京', enName: '姚嘉庆', avatar: 'https://cn.spencerstuart.com/-/media/consultant-photos-new/hong-kong/au_alice-web-2d.jpg' }
+  { country: '苏州', enName: '田森先生（Simon Tian）', id: 'simon', avatar: 'https://minio.citupro.com/dev/menduner/consultant/simon.png' },
+  { country: '北京', enName: '潘青海先生（Peter Pan）', id: 'peter', avatar: 'https://minio.citupro.com/dev/menduner/consultant/peter.png' },
+  { country: '北京', enName: '姚嘉庆女士（Julie）', id: 'julie', avatar: 'https://minio.citupro.com/dev/menduner/consultant/julie.png' }
 ]
 // 我们的见解
 const articles = [
@@ -348,7 +348,7 @@ const handleClick = (type, id) => {
 }
 .consultant-box {
   width: 100%;
-  height: 200px;
+  height: 250px;
   .consultant-item {
     width: calc((100% - 60px) / 3);
     max-width: 350px;
@@ -360,19 +360,21 @@ const handleClick = (type, id) => {
     .consultant-item__img {
       background-repeat: no-repeat;
       background-position: center center;
-      background-size: cover;
+      background-size: contain;
     }
     .consultant-item__name {
       font-family: FFScalaWebBold, Georgia, Utopia, Charter, serif;
       font-weight: 700;
       color: #4c4c4e;
       margin-top: 10px;
+      margin-left: 55px;
     }
     .consultant-item__country {
       font-family: FFScalaWebItalic, Georgia, Utopia, Charter, sans-serif;
       font-style: italic;
       font-weight: 400;
       color: #818183;
+      margin-left: 55px;
     }
   }
 }

src/views/headhunting/details.vue

@@ -3,6 +3,7 @@
     <navBar @click="handleClickNav"></navBar>
     <div>
       <service v-if="query.type === 'service'" :id="query.key" class="content-box"></service>
+      <consultant v-if="query.type === 'consultant'" :id="query.key" class="content-box"></consultant>
     </div>
   </div>
 </template>
@@ -12,6 +13,7 @@ defineOptions({ name: 'headhuntingDetails' })
 import { useRouter } from 'vue-router'
 import navBar from './components/nav.vue'
 import service from './drill/service.vue'
+import consultant from './drill/consultant.vue'
 
 const router = useRouter()
 const query = router.currentRoute.value.query

src/views/headhunting/drill/consultant.vue

@@ -0,0 +1,83 @@
+<template>
+  <div style="color: #4c4c4e;">
+    <div class="mt-5">
+      <v-breadcrumbs :items="paths" class="pa-0 ma-0"></v-breadcrumbs>
+    </div>
+    <div class="d-flex mt-10 justify-space-between">
+      <div>
+        <v-img :src="data.avatar" width="250" height="350"></v-img>
+        <p class="title-job">{{ data.job }}</p>
+      </div>
+      <div class="mt-10">
+        <h1 class="name">{{ data.title }}</h1>
+        <p class="tips mt-3">Consultant</p>
+        <p class="country">{{ data.country }}</p>
+        <ul v-if="data?.edu" class="mt-5">
+          <li v-for="(edu, index) in data.edu" :key="index">{{ edu }}</li>
+        </ul>
+      </div>
+    </div>
+    <div class="mt-10" style="flex: 1;">
+      <p v-for="(k, i) in data.desc" :key="i" class="desc">{{ k }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'headhunting-drill-consultant'})
+import { ref } from 'vue'
+import { consultantData } from '@/utils/headhuntingData'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: ''
+  }
+})
+
+const data = ref(consultantData.find(e => e.id === props.id))
+
+const paths = [
+  { title: '主页', disabled: false, href: '/headhunting' },
+  { title: '我们的顾问', disabled: true, href: '' },
+  { title: data.value.title, disabled: true, href: '' }
+]
+</script>
+
+<style scoped lang="scss">
+.info {
+  width: 400px;
+}
+.desc {
+  margin-bottom: 20px;
+}
+li {
+  list-style-type: none;
+}
+.title-name {
+  font-family: FFScalaWebBold, Georgia, Utopia, Charter, serif;
+  font-weight: 700;
+}
+.title-job {
+  font-family: FFScalaWebItalic, Georgia, Utopia, Charter, sans-serif;
+  font-style: italic;
+  font-weight: 400;
+}
+.name {
+  font-family: FFScalaWebBold, Georgia, Utopia, Charter, sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  color: #00695C;
+}
+.tips {
+  font-family: FFScalaWebItalic, Georgia, Utopia, Charter, serif;
+  font-style: italic;
+  font-weight: 400;
+}
+.country {
+  font-family: FFScalaWebItalic, Georgia, Utopia, Charter, sans-serif;
+  font-style: italic;
+  font-weight: 400;
+  color: #00695C;
+}
+</style>

src/views/headhunting/drill/service.vue

@@ -28,7 +28,7 @@ const props = defineProps({
 const data = ref(serviceData.find(e => e.id === props.id))
 
 const paths = [
-  { title: '首页', disabled: false, href: '/headhunting' },
+  { title: '主页', disabled: false, href: '/headhunting' },
   { title: '我们的服务', disabled: false, href: '/headhunting/service' },
   { title: data.value.title, disabled: true, href: '' }
 ]