menduner-uniapp/pagesB/headhunting/pages/service.vue

<template>
  <view>
    <Nav></Nav>
    <view class="banner">
      <text>Menduner aids corporate development through the strategy of precision talent selection.</text>
    </view>
    
    <view class="box">
      <uni-title type="h1" title="我们的服务" align="center"></uni-title>
      <view class="subTitle">
        我们深知卓越的领导力是企业业绩增长的关键。我们专注于为企业提供精准的人才洞见，助力企业在人才招聘、培养和晋升方面做出明智选择，从而优化高管团队的整体表现，推动企业持续发展。
      </view>
      <view class="box-main">
        <view v-for="item in service" :key="item.id" class="content" @click="handleToDetails('service', item.id)">
          <uni-title type="h4" :title="item.title"></uni-title>
          <view class="subTitle">{{ item.desc }}</view>
        </view>
      </view>
    </view>
    <view class="box">
      <view v-for="item in list" :key="item.title">
        <uni-title type="h1" :title="item.title" align="center"></uni-title>
        <view class="subTitle mb-3"> {{ item.desc }} </view>
        <view class="subTitle mb-3"> {{ item.subDesc }} </view>
        <view class="tapBox">
          <text v-for="_item in item.items" :key="_item.id" class="tap" @tap="handleToDetails('industry', _item.id)">{{ _item.title }} </text>
        </view>
      </view>
      
    </view>
  </view>
</template>

<script setup>
import Nav from '../components/nav'
// 我们的服务
const service = [
  { title: '高级管理精英甄选 >>', desc: '我们有能力挖掘具备卓越领导力、深远战略眼光及高效执行能力的行业翘楚。', active: false, id: 'selection-senior-management-elite' },
  { title: '人才发展储备策略 >>', desc: '我们能协助企业构建系统化的人才培养与储备体系，确保组织持续拥有适应未来发展的高素质人才梯队。', id: 'talent-development-reserve-strategy' },
  { title: '管理者能力提升方案 >>', desc: '我们将根据管理者的能力制定个性化提升方案，聚焦领导力、决策力与团队管理能力等综合提升，以实战培训与持续发展计划为核心。', id: 'manager-capability-enhancement-plan' },
  { title: '卓越成长轨迹 >>', desc: '酒店职业经理人在持续学习、勇于挑战与不断自我超越中所展现出的非凡成长历程与成就路径。', active: false, id: 'excellent-growth-trajectory' },
  { title: '高管信誉与资质验证 >>', desc: '是确保企业高层管理者具备专业能力、诚信品质与合法资质的综合评估过程。', active: false, id: 'senior-management-elite-verification' },
  { title: '多样化的人才网络 >>', desc: '我们是人力资源一体化平台，涵盖不同背景、技能与经验的人才资源库，促进企业创新与多元化发展。', active: false, id: 'diversified-talent-network' }
]
const list = [
  {
    title: '我们服务的行业 - 酒店业',
    desc: '我们致力于为酒店行业领域提供深度与广度兼具的服务，全面覆盖了酒店集团总部、业主公司、连锁酒店及公寓，以及单体酒店等多个关键层面。这不仅体现了对酒店行业多元化生态的深刻理解，更彰显了我们对于满足不同客户需求、推动行业发展的坚定承诺。',
    subDesc: '我们全方位服务于酒店行业的多个细分领域，致力于为客户提供专业、高效且个性化的服务。我们坚信通过努力与付出将能够为酒店行业的繁荣发展贡献一份力量。',
    items: [
      { title: '酒店集团总部', id: 'hotel-group-headquarters' },
      { title: '业主公司', id: 'owner-company' },
      { title: '连锁酒店及公寓', id: 'chain-hotels-and-apartments' },
      { title: '单体酒店', id: 'single-hotel' }
    ]
  },
  {
    title: '我们服务的行业 - 泛服务业',
    desc: '在泛服务业的广阔天地里，我们正以前所未有的热情与智慧，推动着一系列关键领域的革新与进步。这些领域，包括新餐饮、邮轮产业、高端民宿、旅游及地产、体育与休闲业、会展业、医院与博物馆等，共同织就了一幅多元化高品质的服务业生态画卷。',
    subDesc: '泛服务业的各个领域正以蓬勃的姿态，推动着经济的繁荣和社会的进步。未来，随着科技的不断进步和消费者需求的日益多样化，泛服务业将继续迎来新的发展机遇和挑战，我们期待着在这一广阔的舞台上，共同书写更加辉煌的篇章。',
    items: [
      { title: '新餐饮', id: 'new-catering' },
      { title: '高端民宿', id: 'high-end-cottage' },
      { title: '高端康养', id: 'high-end-consumption' },
      { title: '会展业', id: 'exhibition-industry' },
      { title: '游轮产业', id: 'cruise-industry' },
      { title: '旅游及地产', id: 'tourism-and-real-estate' },
      { title: '体育与休闲业', id: 'sports-and-leisure-industry' },
      { title: '医院与博物馆', id: 'hospital-and-museum' }
    ]
  }
]
const handleToDetails = (type, id) => {
  uni.navigateTo({
    url: `/pagesB/headhunting/pages/details?type=${type}&key=${id}`
  })
}
</script>

<style lang="scss" scoped>

$rootColor: #00695c;
.mb-3 {
  margin-bottom: 30rpx;
}
.banner {
  width: 100%;
  height: 400rpx;
  line-height: 40rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  box-sizing: border-box;
  color: #fff;
  background-image: url(https://minio.citupro.com/dev/menduner/headhunting/service-bg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  font-family: FFScalaSansWebBold, Georgia, Utopia, Charter, sans-serif;
  font-style: normal;
}
.box {
  padding: 20rpx;
  &-main {
    padding: 20rpx;
    
    .content {
      background: #f5f5f5;
      padding: 0 20rpx 20rpx 20rpx;
      margin-bottom: 20rpx;
    }
  }
}
.subTitle {
  padding: 0 20rpx;
  font-size: 24rpx;
  margin-bottom: 20rpx;
  line-height: 40rpx;
  color: #666;
}
.tapBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-bottom: 30rpx;
}
.tap {
  color: $rootColor;
  font-size: 28rpx;
  padding: 10rpx;
  display: inline-block;
}
</style>