|
|
@@ -0,0 +1,259 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="carousel-box" >
|
|
|
+ <div class="carousel-desc common-width">
|
|
|
+ <h2>
|
|
|
+ <p style="width: 687px;">Lead with Purpose, Embody Culture & Be Decisive</p>
|
|
|
+ </h2>
|
|
|
+ <div class="text-center second-title">
|
|
|
+ <p>Advice to new CEOs for establishing</p>
|
|
|
+ <p>a high-performing top team</p>
|
|
|
+ </div>
|
|
|
+ <div class="sshr__hero-slide__actions">
|
|
|
+ <div class="sshr__hero-slide__read-more">Read More</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="common-width service">
|
|
|
+ <h2>我们的服务</h2>
|
|
|
+ <div class="d-flex font-size-16 content-box mt-5">
|
|
|
+ <div>凭借全方位服务及在各行业、职能和地域等方面的深厚专业知识，我们协助企业建立高绩效的董事会及执行团队，并帮助其提升效率，为企业带来实质性变化。</div>
|
|
|
+ <div class="ml-15">我们通过提供专业见解，与您携手制定可靠的领导力决策，打造成绩斐然、充满活力的成长型企业。</div>
|
|
|
+ </div>
|
|
|
+ <div class="service-content mt-5">
|
|
|
+ <div class="service-item" v-for="(item, index) in service" :key="index"
|
|
|
+ @mouseenter="item.active = true" @mouseleave="item.active = false"
|
|
|
+ >
|
|
|
+ <div v-if="!item.active" class="service-title">
|
|
|
+ {{ item.title }}
|
|
|
+ <v-icon color="#00695c">mdi-menu-right</v-icon>
|
|
|
+ </div>
|
|
|
+ <div v-else class="service-desc">{{ item.desc }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="common-button">查看所有能力</div>
|
|
|
+ </div>
|
|
|
+ <div class="common-width" style="margin: auto; color: #4c4c4b;">
|
|
|
+ <div class="common-line" v-for="(k, i) in list" :key="i">
|
|
|
+ <h2>{{ k.title }}</h2>
|
|
|
+ <div class="d-flex industry">
|
|
|
+ <div class="industry-item mt-5">
|
|
|
+ <p class="font-size-16">{{ k.desc }}</p>
|
|
|
+ <div class="common-button">{{ k.btnTitle }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="industry-item mt-5 industry-right ml-10 d-flex justify-space-around">
|
|
|
+ <ul style="list-style-type: none; width: 50%;">
|
|
|
+ <li v-for="(val, index) in k.items1" :key="index" class="right-item">{{ val.title }}</li>
|
|
|
+ </ul>
|
|
|
+ <ul style="list-style-type: none; width: 50%;">
|
|
|
+ <li v-for="(val, index) in k.items2" :key="index" class="right-item">{{ val.title }}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+defineOptions({ name: 'headhunting-serviceContent'})
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+// 我们的服务
|
|
|
+const service = ref([
|
|
|
+ { title: '高管搜索与招募', desc: '我们协助世界一流企业构建成功的领导团队。', active: false },
|
|
|
+ { title: '董事会服务', desc: '我我们协助建立专业合规、经验丰富且多元化的董事会，并为董事会交接、业绩及治理等问题提供建议。', active: false },
|
|
|
+ { title: '首席执行官继任计划', desc: '我们在CEO继任领域拥有数十年的顾问经验，致力于协助董事会制定、规划和执行CEO继任的全过程。', active: false },
|
|
|
+ { title: '高管评估服务', desc: '我们的综合评估方法能提供翔实数据和深入见解，从而评价和预测领导者的表现、契合度和影响力。', active: false },
|
|
|
+ { title: '领导力咨询服务', desc: '我们提供甄选和培养领导者、优化团队效能，以及评估和改进企业文化所需的见解。', active: false },
|
|
|
+ { title: '董事会服务', desc: '我们提供的高管和董事人选，能够制定明确的数字化战略，并驾驭企业转型所需的人才、运营及文化变革。', active: false },
|
|
|
+ { title: '中国业务部', desc: '我们的中国业务部为中国企业进入德国和欧洲拓展业务提供高管寻聘和领导力咨询服务，同时陪伴德国企业在中国市场的发展。', active: false },
|
|
|
+ { title: '多样性', desc: '我们致力于广泛发展关于多文化问题的专业基础，确保我们能为客户提供当前候选人名单中最具资格的人才。', active: false },
|
|
|
+ { title: '家族业务', desc: '作为家族控股公司和家族支配公司的受托顾问，我们具有家族客户所注重的敏感、谨慎和灵活的特征', active: false }
|
|
|
+])
|
|
|
+
|
|
|
+const list = [
|
|
|
+ {
|
|
|
+ title: '我们服务的行业',
|
|
|
+ desc: '最佳的领导力决策，源于对行业动态及企业关键需求的深入理解。我们的顾问在各自领域拥有丰富的实践经验。凭借一套行之有效的高管寻访流程，我们能够帮助您找到与企业独特需求无缝对接，且适应竞争环境的领导者。凭借我们的经验、国际声望，以及与卓越领导者的深厚关系，我们能够在全球范围内寻觅炙手可热的候选人。',
|
|
|
+ btnTitle: '查看所有行业',
|
|
|
+ items1: [
|
|
|
+ { title: '技术、媒体与电讯' },
|
|
|
+ { title: '消费品行业及零售业' },
|
|
|
+ { title: '金融服务' },
|
|
|
+ { title: '工业' }
|
|
|
+ ],
|
|
|
+ items2: [
|
|
|
+ { title: '教育、非营利和政府' },
|
|
|
+ { title: '私募股权' },
|
|
|
+ { title: '生命科学' },
|
|
|
+ { title: '商业与专业服务' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '我们服务的行业',
|
|
|
+ desc: '最佳的领导力决策，源于对行业动态及企业关键需求的深入理解。我们的顾问在各自领域拥有丰富的实践经验。凭借一套行之有效的高管寻访流程，我们能够帮助您找到与企业独特需求无缝对接，且适应竞争环境的领导者。凭借我们的经验、国际声望，以及与卓越领导者的深厚关系，我们能够在全球范围内寻觅炙手可热的候选人。',
|
|
|
+ btnTitle: '查看所有职能',
|
|
|
+ items1: [
|
|
|
+ { title: '董事会业务' },
|
|
|
+ { title: '首席执行官' },
|
|
|
+ { title: '财务高管' },
|
|
|
+ { title: '营销官' },
|
|
|
+ { title: '信息官' }
|
|
|
+ ],
|
|
|
+ items2: [
|
|
|
+ { title: '法律合规' },
|
|
|
+ { title: '人力资源高管' },
|
|
|
+ { title: '销售主管' },
|
|
|
+ { title: '供应链高管' },
|
|
|
+ { title: '企业公关' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.common-width {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 1000px;
|
|
|
+}
|
|
|
+.common-button {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: .85rem;
|
|
|
+ font-weight: 600;
|
|
|
+ text-transform: uppercase;
|
|
|
+ text-decoration: none;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ padding: 15px 15px 11px;
|
|
|
+ text-align: center;
|
|
|
+ min-width: 220px;
|
|
|
+ border: 2px solid #338441;
|
|
|
+ background-color: transparent;
|
|
|
+ color: #4c4c4e;
|
|
|
+ outline: 0;
|
|
|
+ margin-top: 24px;
|
|
|
+ margin-bottom: 64px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700;
|
|
|
+ background-color: #338441;
|
|
|
+ }
|
|
|
+}
|
|
|
+.common-line {
|
|
|
+ border-top: 1px dotted #ccc;
|
|
|
+ padding: 64px 0;
|
|
|
+}
|
|
|
+.common-mb {
|
|
|
+ margin: 64px 0;
|
|
|
+}
|
|
|
+.carousel-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 748px;
|
|
|
+ color: #fff;
|
|
|
+ background-image: url('https://www.spencerstuart.com/-/media/2024/04/ceo-acceleration-building-team/thmb-ceoacceleration-dec2023-1600x900.jpg');
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ font-family: FFScalaSansWebBold, Georgia, Utopia, Charter, sans-serif;
|
|
|
+ font-style: normal;
|
|
|
+ .carousel-desc {
|
|
|
+ height: 100%;
|
|
|
+ margin: auto;
|
|
|
+ padding: 95px 0 165px 0;
|
|
|
+ h2 {
|
|
|
+ margin: auto;
|
|
|
+ text-align: center;
|
|
|
+ max-width: 870px;
|
|
|
+ font-size: 80px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 1.136364;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ }
|
|
|
+ .second-title {
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: FFScalaSansWebRegular;
|
|
|
+ }
|
|
|
+ .sshr__hero-slide__actions {
|
|
|
+ margin-top: 55px;
|
|
|
+ font-family: FFScalaSansWebRegular;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ -webkit-transition: opacity 750ms ease-out 1.25s;
|
|
|
+ transition: opacity 750ms ease-out 1.25s;
|
|
|
+ .sshr__hero-slide__read-more {
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 220px;
|
|
|
+ padding: 13px 45px 10px;
|
|
|
+ font-family: FFScalaSansWebBold;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 1.4;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: none;
|
|
|
+ text-transform: uppercase;
|
|
|
+ border: 2px solid #fbcc11;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #fbcc11;
|
|
|
+ &:hover {
|
|
|
+ color: #000;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.service {
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 50px;
|
|
|
+ color: #4c4c4b;
|
|
|
+ .content-box {
|
|
|
+ div {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .service-content {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .service-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 160px;
|
|
|
+ width: calc((100% - 30px) / 3);
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 12px 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ &:nth-child(3n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ background-color: #003d79;
|
|
|
+ }
|
|
|
+ .service-title {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.industry {
|
|
|
+ .industry-item {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ .right-item {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #00695c;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ opacity: .6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Xiao_123