menduner-uniapp/pagesB/headhunting/index.vue

<template>
  <view class="main">
    <Nav></Nav>
    <view class="main-header">
      <!-- <uni-title type="h1" align="center" title="门墩儿猎头"></uni-title> -->
      <view>我们深知卓越的领导力是企业业绩增长的关键。我们专注于为企业提供精准的人才洞见，助力企业在人才招聘、培养和晋升方面做出明智选择，从而优化高管团队的整体表现，推动企业持续发展。</view>
    </view>
    <view class="main-panel">
        <view class="box" v-for="item in list" :key="item.title">
          <text class="top">{{ item.title }}</text>
          {{ item.desc }}
        </view>
      </view>
    <view class="main-nav">
      <view class="main-nav-item" v-for="item in service" :key="item.id" @tap="handleToDetails('service', item.id)">{{ item.title }}</view>
    </view>
    <view class="main-body">
      <view>
        <view class="title">依托在高管寻聘和领导力咨询方面的深厚专业知识，我们的顾问可进行跨行业、跨部门和跨地区的合作，以便更好地服务我们的客户。 我们帮助组织寻找和培养优秀的领导者，提高团队效力，支持战略或文化转型。</view>
        <uni-title type="h1" title="我们的顾问" align="center"></uni-title>
        <swiper
          class="swiper"
          circular
          :indicator-dots="true"
          :autoplay="true"
          :interval="2000"
          :duration="500"
        >
          <swiper-item v-for="item in consultant" :key="item.id">
            <view class="swiper-item">
              <image
                :src="item.avatar"
                mode="heightFix"
              />
              <text>{{ item.enName }}</text>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view>
        <uni-title type="h1" title="我们的办公地点" align="center"></uni-title>
        <view class="main-body-office">
          <view v-for="item in countryOffice" :key="item.name" class="main-body-office-item">
            <image
              :src="item.url"
              mode="widthFix"
            />
            <view class="text">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <uni-title type="h1" title="联系我们" align="center"></uni-title>
    <view class="main-footer">
      <uni-title type="h3" title="欢迎关注，了解门墩儿的新动态。"></uni-title>
      <view class="subTitle">门墩儿在所有主流社交媒体都有账号。欢迎关注我们，以便了解关于发展趋势和领导力问题的最新见解。</view>
      <view class="main-footer-contact">
        <view class="main-footer-contact-item"><text>猎头顾问</text>：姚嘉庆 Julia Yao</view>
        <view class="main-footer-contact-item"><text>邮箱</text>：Julia.yao@menduner.com</view>
        <view class="main-footer-contact-item"><text>手机</text>：18501626969</view>
        <view class="qr">
          <image
            src="https://minio.citupro.com/dev/menduner/official-account-code4.jpg"
            mode="scaleToFill"
          />
          <view class="subTitle">关注menduner公众号</view>
        </view>
      </view>
    </view>
  </view>
</template>
<!-- 猎头 -->
<script setup>
import Nav from './components/nav'
// import { ref }  from 'vue'
const consultant = [
  { 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: '姚嘉庆女士（Julia Yao）', id: 'julia', avatar: 'https://minio.citupro.com/dev/menduner/consultant/julie.png' }
]
// 数值示例
const list = [
  { title: '1500家+', desc: '服务企业' },
  { title: '70%', desc: '拥有本科及以上学历人群' },
  { title: '12种', desc: '涉及行业' }
]
// 服务
const service = [
  { title: '高级管理精英甄选', id: 'selection-senior-management-elite' },
  { title: '人才发展储备策略', id: 'talent-development-reserve-strategy' },
  { title: '管理者能力提升方案', id: 'manager-capability-enhancement-plan' },
  { title: '卓越成长轨迹', id: 'excellent-growth-trajectory' },
  { title: '高管信誉与资质验证', id: 'senior-management-elite-verification' },
  { title: '多样化的人才网络', id: 'diversified-talent-network' }
]
// 办公地点
const countryOffice = [
  { name: '苏州', desc: '苏州识喜识谊信息科技有限公司', url: 'https://minio.menduner.com/dev/menduner/suzhou.png' },
  { name: '北京', desc: '苏州识喜识谊信息科技有限公司', url: 'https://minio.menduner.com/dev/menduner/beijin.png' },
  { name: '广州', desc: '苏州识喜识谊信息科技有限公司', url: 'https://minio.menduner.com/dev/menduner/guangzhou.png' }
]
const handleToDetails = (type, id) => {
  uni.navigateTo({
    url: `/pagesB/headhunting/pages/details?type=${type}&key=${id}`
  })
}
</script>

<style lang="scss" scoped>
$rootColor: #00695c;
.main {
  
  &-header {
    width: 100%;
    height: 300rpx;
    background: url('https://minio.menduner.com/dev/menduner/banner.png') no-repeat;
    background-position: center;
    background-size: 100% 100%;
    font-weight: 600;
    font-size: 24rpx;
    color: #FFF;
    text-align: center;
    padding: 0 40rpx;
    line-height: 46rpx;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    
  }
  &-panel {
    margin: 20px 0;
    height: 80rpx;
    width: 100%;
    // background: rgba(255, 255, 255, 0.5);
    color: $rootColor;
    // position: absolute;
    // bottom: 0;
    // left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20rpx;
    margin: 20rpx 0;
    .box {
      flex: 1;
      display: flex;
      justify-content: center;
      flex-direction: column;
      font-weight: 600;
      align-items: center;
      .top {
        font-size: 40rpx;
      }
    }
  }
  &-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: 20rpx;
    margin: 20px 0;
    &-item {
      width: 30%;
      font-size: 20rpx;
      color: $rootColor;
      border: 1px solid $rootColor;
      padding: 20rpx 0;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &-body {
    margin: 20px 0;
    .title {
      padding: 40rpx 30rpx;
      text-align: center;
      font-size: 24rpx;
      background: rgba(0,0,0,.1);
      color: $rootColor;
    }
    .swiper {
      height: 600rpx;
      &-item {
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
      }
    }
    &-office {
      display: flex;
      justify-content: space-around;
      &-item {
        width: 30%;
        position: relative;
        image {
          width: 100%;
        }
        .text {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(76, 76, 78, 0.6);
          font-size: 36rpx;
          font-weight: 600;
          color: #FFF;
        }
      }
    }
  }
  &-footer {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    background: #e8f0f7;
    .subTitle {
      font-size: 24rpx;
      margin-bottom: 20rpx;
      line-height: 40rpx;
      color: #666;
    }
    &-contact {
      &-item {
        margin-bottom: 20rpx;
        text {
          display: inline-block;
          width: 140rpx;
          text-align-last: justify;
        }
      }
      
    }
    .qr {
      image {
        width: 240rpx;
        height: 240rpx;
        margin-bottom: 10rpx;
      }
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin-top: 20rpx;
    }
  }
}
</style>