猎聘首页

src/views/headhunting/components/carousel.vue → src/views/headhunting/components/content.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="carousel">
+    <!-- 背景图 -->
     <div class="carousel-box">
       <div class="carousel-desc common-width">
         <h1>我们的服务</h1>
@@ -7,12 +8,14 @@
         <div class="carousel-desc-text">优秀领导者能够带动业绩增长。我们致力于提供企业所需的见解，协助其做出有关人才寻聘、培养及晋升的正确决策，提升高管团队与董事会的绩效。</div>
       </div>
     </div>
+    <!-- 数值示例 -->
     <div class="three-up-promo-cards common-width">
       <div class="three-up-promo-cards__card" v-for="(k, i) in list" :key="i">
         <span class="impact-messaging__number">{{ k.title }}</span>
         <span class="impact-messaging__copy">{{ k.desc }}</span>
       </div>
     </div>
+    <!-- 服务 -->
     <div class="service-link">
       <div class="service-link-box common-width">
         <ul>
@@ -20,10 +23,12 @@
         </ul>
       </div>
     </div>
+    <!-- 简介 -->
     <div class="site-width__constraint">
       <p class="text-center">依托在高管寻聘和领导力咨询方面的深厚专业知识，我们的顾问可进行跨行业、跨部门和跨地区的合作，以便更好地服务我们的客户。
         我们帮助组织寻找和培养优秀的领导者，提高团队效力，支持战略或文化转型。</p>
     </div>
+    <!-- 我们的顾问 -->
     <div class="country-offices common-width mb-10">
       <h2 class="section-header--country-page">我们的顾问</h2>
       <div class="d-flex consultant-box">
@@ -34,6 +39,7 @@
         </div>
       </div>
     </div>
+    <!-- 我们的办公地点 -->
     <div class="country-offices common-width mb-10">
       <h2 class="section-header--country-page">我们的办公地点</h2>
       <ul>
@@ -49,17 +55,59 @@
         </li>
       </ul>
     </div>
+    <!-- 我们的见解 -->
+    <div class="articles common-width">
+      <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 class="sshr__article__flyout-placeholder"></div>
+          <div class="sshr__article__content-wrapper active">
+            <div class="sshr__article__picture">
+              <div class="sshr__article__picture-overlay"></div>
+              <img class="bg-img" :src="val.url" alt="" style="transition: transform 0.5s ease;">
+            </div>
+            <div class="sshr__article__content">
+              <div class="sshr__article__bar-placeholder"></div>
+              <h2 class="sshr__article__title">{{ val.title }}</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 联系我们 -->
+    <div class="social-media common-width">
+      <h5 class="social-media-header">
+        <span class="inner-text">联系我们</span>
+      </h5>
+      <div class="d-flex">
+        <div class="left">
+          <h2>欢迎关注，了解门墩儿的新动态。</h2>
+          <p class="mt-3" style="font-size: .9rem;">史宾沙在所有主流社交媒体都有账号。欢迎关注我们，以便了解关于发展趋势和领导力问题的最新见解。</p>
+          <div class="social-contact">
+            <div v-for="(item, index) in social" :key="index" class="d-flex" :class="{'mb-5': index !== social.length - 1}">
+              <v-img :src="item.url" width="52" height="48"></v-img>
+              <p class="ml-5">{{ item.desc }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="right text-end">
+          <img src="https://cn.spencerstuart.com/-/media/2019/november/homepagesocial_1039.jpg?h=770&amp;w=1093&amp;la=en&amp;hash=FA4B0309C1DDFD2FC1648005B9232838" height="324" width="460" alt="" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'headhunting-carousel'})
-
+// 数值示例
 const list = [
   { title: '70家', desc: '全球分支机构' },
   { title: '67年', desc: '领导力咨询经验' },
   { title: '450+位', desc: '经验丰富的顾问' }
 ]
+// 服务
 const service = [
   { title: '高管搜索与招募' },
   { title: '董事会服务' },
@@ -67,16 +115,29 @@ const service = [
   { title: '高管评估服务' },
   { title: '领导力咨询服务' }
 ]
+// 办公地点
 const countryOffice = [
   { name: '北京', desc: '故宫', url: 'https://cn.spencerstuart.com/-/media/offices-search/beijing-office.jpg' },
   { name: '上海', desc: '东方明珠', url: 'https://cn.spencerstuart.com/-/media/offices-search/hong-kong-office.jpg' },
   { name: '广州', desc: '珠江新城', url: 'https://cn.spencerstuart.com/-/media/offices-search/shanghai-1597-15257628-office-hdr.jpg' }
 ]
+// 我们的顾问
 const consultant = [
   { country: '北京', enName: 'Siew Kiang Ng', avatar: 'https://cn.spencerstuart.com/-/media/consultant-photos-new/singapore/ng_siewkiang-web-5a.jpg' },
   { country: '上海', enName: 'Alice Au', avatar: 'https://cn.spencerstuart.com/-/media/consultant-photos-new/hong-kong/young_jeremy-web-5d.jpg' },
   { country: '苏州', enName: 'Jeremy Young', avatar: 'https://cn.spencerstuart.com/-/media/consultant-photos-new/hong-kong/au_alice-web-2d.jpg' }
 ]
+// 我们的见解
+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' }
+]
+// 联系我们
+const social = [
+  { desc: '敬请查询我们的领英账号以关注最新的研究报告和 职业机会。', url: 'https://cn.spencerstuart.com/-/media/linkedin-logo.png?h=50&amp;w=50&amp;la=zh-CN&amp;hash=80E76CEDF468709061F46EE02219B4DA' },
+  { desc: '关注史宾沙官方微信号@SpencerStuart，获悉热点资讯和行业洞见。', url: 'https://cn.spencerstuart.com/-/media/wechat.jpg?h=75&amp;w=75&amp;la=zh-CN&amp;hash=B9D5E58A097630C3C5A878D5ED49B4A6' }
+]
 </script>
 
 <style scoped lang="scss">
@@ -126,7 +187,7 @@ const consultant = [
   z-index: 700;
   font-weight: 400;
   .three-up-promo-cards__card {
-    color: #003d79;
+    color: #008037;
     width: 33.3%;
     flex: 1 0 auto;
     padding: 32px 24px;
@@ -157,11 +218,11 @@ const consultant = [
   font-style: normal;
   font-weight: 700;
   color: #fff;
-  font-size: .75rem;
+  font-size: .85rem;
   letter-spacing: 3px;
   text-transform: uppercase;
   padding: 20px 0;
-  background-color: #00396f;
+  background-color: #008037;
   &-box {
     margin: auto;
     ul {
@@ -296,4 +357,153 @@ const consultant = [
     }
   }
 }
+.articles {
+  margin: auto;
+  margin-bottom: 100px;
+  .line {
+    background-color: #fbcc11;
+    content: "";
+    display: block;
+    height: 5px;
+    width: 42px;
+    left: 50%;
+    margin-bottom: 16px;
+    position: relative;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
+  h2 {
+    font-size: 30px;
+    padding: 0 0 25px;
+  }
+  .article-box {
+    width: 100%;
+    margin-bottom: 40px;
+    &-item {
+      width: calc((100% - 150px) / 3);
+      height: 385px;
+      margin-right: 50px;
+      position: relative;
+      cursor: pointer;
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+      .sshr__article__flyout-placeholder {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+        display: block;
+        height: 100%;
+        width: 100%;
+        background-color: #fbcc11;
+      }
+      .sshr__article__content-wrapper {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        color: #fff;
+        transition: transform 0.3s ease;
+        z-index: 20;
+        &:hover {
+          transform: translate(-20px, -20px);
+        }
+        .sshr__article__picture {
+          position: absolute;
+          z-index: 10;
+          height: 100%;
+          width: 100%;
+          overflow: hidden;
+          background-color: #4c4c4e;
+          .sshr__article__picture-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+            height: 100%;
+            width: 100%;
+            background-color: #000;
+            opacity: .5;
+          }
+          img {
+            display: block;
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+          }
+        }
+        .sshr__article__content {
+          position: relative;
+          z-index: 20;
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+          flex-direction: column;
+          min-height: 100%;
+          width: auto;
+          padding: 63px 44px 44px;
+          .sshr__article__bar-placeholder {
+            margin-bottom: 20px;
+            -webkit-transition: width .35s ease-out;
+            transition: width .35s ease-out;
+            background-color: #fbcc11;
+            content: "";
+            display: block;
+            height: 5px;
+            width: 80px;
+          }
+        }
+      }
+      .active:hover .sshr__article__bar-placeholder {
+        width: 100%;
+      }
+      .active:hover .bg-img {
+        transform: scale(1.1);
+      }
+    }
+  }
+}
+.social-media {
+  margin: auto;
+  margin-bottom: 100px;
+  &-header {
+    position: relative;
+    text-transform: uppercase;
+    text-align: center;
+    margin: 0 0 52px;
+    .inner-text {
+      display: inline-block;
+      background-color: #fff;
+      padding: 0 18px;
+      color: #4c4c4e;
+      position: relative;
+      z-index: 2;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 0;
+      border-top: 1px dotted #747476;
+      left: 0;
+      bottom: 50%;
+      margin-bottom: 2px;
+    }
+  }
+  .left {
+    width: 50%;
+    color: #4c4c4e;
+    .social-contact {
+      padding: 28px 26px;
+      background-color: #f5f7f9;
+      margin-top: 40px;
+    }
+  }
+  .right {
+    flex: 1;
+  }
+}
 </style>

src/views/headhunting/components/nav.vue

@@ -34,7 +34,7 @@ const navList = [
   height: 100px;
   color: #fff;
   font-weight: 700;
-  background-color: #00396f;
+  background-color: #008037;
 }
 .china {
   font-family: FFScalaSansWebBold, Helvetica, Arial, sans-serif;
@@ -46,7 +46,7 @@ const navList = [
   -webkit-box-align: center;
   margin-top: 10px;
   a {
-    color: #7cb085;
+    color: #fff;
     font-size: 24px;
     line-height: 24px;
     position: relative;

src/views/headhunting/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <navBar @click="handleClickNav"></navBar>
-    <Carousel></Carousel>
+    <Content></Content>
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'headhuntingIndex' })
 import navBar from './components/nav.vue'
-import Carousel from './components/carousel.vue'
+import Content from './components/content.vue'
 
 const handleClickNav = (path) => {
   console.log(path, 'nav-click')