文章

src/utils/headhuntingData.js

@@ -1,4 +1,4 @@
-// 五大服务模块钻取
+// 服务模块钻取
 export const serviceData = [
   {
     title: '高级管理精英甄选',
@@ -237,4 +237,27 @@ export const consultantData = [
       '姚嘉庆女士对酒店行业及其他相关行业的市场动态、企业需求、人才分布等有深入的了解，这有助于她更准确地把握客户需求，提高寻访效率。她具备出色的人才评估能力，能够准确地判断候选人的专业技能、职业素养、性格特质等是否符合客户企业的要求。同时，她也是一位注重持续学习和自我提升的顶尖猎头顾问，在快速变化的市场动向中不断掌握新的行业知识、招聘技巧和行业动态，以保持自己的专业竞争力。'
     ]
   }
+]
+
+// 见解
+export const articleData = [
+  {
+    id: 'china-needs-more-women-in-executive-leadership',
+    title: '女性领导力崛起：《走进中国女性高管的职场现状》',
+    bgUrl: 'https://minio.citupro.com/dev/menduner/article/Hero-CNWomen-Mar23.jpg',
+    desc: '高管团队性别多样性是企业价值创造的重要抓手，若女性不能充分发挥自身潜力，企业也无法实现全部潜力。既然性别多样性有助于优化企业管理和业绩表现，如何让更多女性晋升高管层是一个重要的议题。'
+  },
+  {
+    id: 'leadership-for-a-complex-world-planning-for-the-ceo-of-the-future',
+    title: '纷繁复杂世界中的领导力：为未来的首席执行官做好规划',
+    bgUrl: 'https://minio.citupro.com/dev/menduner/article/THMB-CEOoftheFuture.jpg',
+    desc: '随着首席执行官在过去三年间承受了工作的重重压力精疲力尽，并考虑退休，一家大型全球性公司正面临着严峻的领导层和战略层面的挑战。这家公司以高质量产品和卓越客户服务而著称，长期以来一直占据着市场主导地位。然而，为了跟上技术进步、新进入者和富有创新性的竞争对手的步伐，它可谓步履维艰。其文化偏向规避风险和以共识为导向，这使得变革难以实施和维持。与许多公司一样，该公司正在应对2020年代的诸多挑战 - 宏观经济不确定性、地缘政治动荡、供应链中断、人才争夺战、对工作态度的转变、更广泛的社会变革以及ESG（环境、社会和公司治理）压力，包括管理层更多元化的需求。员工流动率居高不下，一名高层领导刚刚因为其他机会辞职。公司股价表现不及整体市场，并且有关股东可能采取激进行动的传闻不绝于耳。'
+  },
+  {
+    id: 'the-evolution-of-the-cfo-role-from-a-global-perspective',
+    title: '全球视角下的CFO角色演变：跨领域高管的洞察与应对策略',
+    isBgFull: true,
+    bgUrl: 'https://minio.citupro.com/dev/menduner/article/PageBanner_Migration_Default.png',
+    desc: '信息高度发达的今天，人们实时知道世界在发生什么，深切感受全球经济、金融和政治的跌宕起伏。从科技巨头到创业企业，从古老的制造业到新生的互联网数字平台，每一个角落都充斥着挑战与机遇。近期，史宾沙（Spencer Stuart）和AICPA&CIMA国际专业注册会计师公会组织了一场CFO讨论会，来自消费品、电商、餐饮服务、新能源汽车、医疗健康服务以及私募基金等不同领域的嘉宾们探讨了热点问题和CFO的角色变化。大家的分享交流不仅显示了市场的复杂性，也展示了应对策略的多元化。本文概况了嘉宾们的主要观点以及我们更广范围与高管交流获得的洞见。'
+  }
 ]

src/views/headhunting/components/content.vue

@@ -65,7 +65,7 @@
       <div class="line"></div>
       <h2 class="text-center">我们的见解</h2>
       <div class="d-flex article-box">
-        <div v-for="(val, i) in articles" :key="i" class="article-box-item">
+        <div v-for="(val, i) in articles" :key="i" class="article-box-item" @click="handleClick('article', val.id)">
           <div class="sshr__article__flyout-placeholder"></div>
           <div class="sshr__article__content-wrapper active">
             <div class="sshr__article__picture">
@@ -144,9 +144,9 @@ const consultant = [
 ]
 // 我们的见解
 const articles = [
-  { title: '女性领导力崛起：《走进中国女性高管的职场现状》', url: 'https://cn.spencerstuart.com/-/media/2023/march/chinaneedsmorewomen/web-cnwomen-mar23.jpg' },
-  { title: '纷繁复杂世界中的领导力：为未来的首席执行官做好规划', url: 'https://cn.spencerstuart.com/-/media/2023/september/ceofuture/thmb-ceoofthefuture-sept2023-616x434.jpg' },
-  { title: '全球视角下的CFO角色演变：跨领域高管的洞察与应对策略', url: 'https://cn.spencerstuart.com/-/media/search-images/placeholder-hdr.jpg' }
+  { title: '女性领导力崛起：《走进中国女性高管的职场现状》', id: 'china-needs-more-women-in-executive-leadership', url: 'https://cn.spencerstuart.com/-/media/2023/march/chinaneedsmorewomen/web-cnwomen-mar23.jpg' },
+  { title: '纷繁复杂世界中的领导力：为未来的首席执行官做好规划', id: 'leadership-for-a-complex-world-planning-for-the-ceo-of-the-future', url: 'https://cn.spencerstuart.com/-/media/2023/september/ceofuture/thmb-ceoofthefuture-sept2023-616x434.jpg' },
+  { title: '全球视角下的CFO角色演变：跨领域高管的洞察与应对策略', id: 'the-evolution-of-the-cfo-role-from-a-global-perspective', url: 'https://cn.spencerstuart.com/-/media/search-images/placeholder-hdr.jpg' }
 ]
 // 联系我们
 const social = [

src/views/headhunting/details.vue

@@ -4,6 +4,7 @@
     <div>
       <service v-if="query.type === 'service' || query.type === 'industry'" :id="query.key" :type="query.type" class="content-box"></service>
       <consultant v-if="query.type === 'consultant'" :id="query.key" class="content-box"></consultant>
+      <ArticleDrill v-if="query.type === 'article'" :id="query.key"></ArticleDrill>
     </div>
   </div>
 </template>
@@ -14,6 +15,7 @@ import { useRouter } from 'vue-router'
 import navBar from './components/nav.vue'
 import service from './drill/service.vue'
 import consultant from './drill/consultant.vue'
+import ArticleDrill from './drill/article.vue'
 
 const router = useRouter()
 const query = router.currentRoute.value.query

src/views/headhunting/drill/article.vue

@@ -0,0 +1,86 @@
+<template>
+  <div style="color: #4c4c4e;">
+    <div v-if="data.isBgFull" class="bg-full" :style="{'background-image': `url('${data.bgUrl}')`}">
+      <div class="width content-box">
+        <h1>{{ data.title }}</h1>
+      </div>
+    </div>
+    <div v-else class="half-bg">
+      <div class="half-bg-item half-bg-title">
+        <h1>{{ data.title }}</h1>
+      </div>
+      <div class="half-bg-item half-bg-img" :style="{'background-image': `url('${data.bgUrl}')`}"></div>
+    </div>
+    <div class="width">
+      <p>{{ data.desc }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'headhunting-drill-article'})
+import { ref } from 'vue'
+import { articleData } from '@/utils/headhuntingData'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: ''
+  }
+})
+
+const data = ref(articleData.find(e => e.id === props.id))
+
+</script>
+
+<style scoped lang="scss">
+.bg-full {
+  position: relative;
+  height: 363px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  .content-box {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 241px;
+    padding: 64px 200px 0 95px;
+    background-color: #fff;
+    color: #000;
+  }
+}
+.width {
+  width: 1190px;
+  margin: 0 auto;
+  min-width: 1190px;
+  max-width: 1190px;
+  margin-top: 96px;
+}
+h1 {
+  font-family: FFScalaWeb, Georgia, Utopia, Charter, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.134;
+  font-size: 52px;
+  margin-left: -3px;
+}
+.half-bg {
+  display: flex;
+  height: 520px;
+  .half-bg-item {
+    width: 50%;
+  }
+  .half-bg-title {
+    background-color: #202020;
+    color: #fff;
+    padding: 173px 93px;
+  }
+  .half-bg-img {
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+</style>