页面

src/views/headhunting copy/components/form.vue

@@ -0,0 +1,60 @@
+<template>
+  <div style="width: 100%;">
+    <CtForm ref="formPageRef" :items="items"></CtForm>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'headhunting-form'})
+import { reactive, ref } from 'vue'
+
+const formPageRef = ref()
+let query = reactive({})
+
+const items = ref({
+  options: [
+    {
+      type: 'text',
+      key: 'name',
+      value: '',
+      default: null,
+      label: '姓名 *',
+      outlined: true,
+      rules: [v => !!v || '请输入姓名']
+    },
+    {
+      type: 'phoneNumber',
+      key: 'phone',
+      value: '',
+      clearable: true,
+      label: '联系手机号 *',
+      rules: [v => !!v || '请填写联系手机号']
+    },
+    {
+      type: 'text',
+      key: 'enterpriseName',
+      value: '',
+      default: null,
+      label: '企业名称 *',
+      outlined: true,
+      rules: [v => !!v || '请输入企业名称']
+    },
+  ]
+})
+
+
+const getQuery = async () => {
+  const { valid } = await formPageRef.value.formRef.validate()
+  if (!valid) return false
+  const obj = {}
+  items.value.options.forEach(e => {
+    obj[e.key] = e.value
+  })
+  query = Object.assign(query, obj)
+  return query
+}
+
+defineExpose({
+  getQuery
+})
+</script>

src/views/headhunting copy/index.vue

@@ -0,0 +1,209 @@
+<!-- 门墩儿猎寻服务 -->
+<template>
+  <div class="default-width">
+    <div class="d-flex align-center" style="position: relative;">
+      <div style="width: 150px; height: 80px;">
+        <v-img src="../../assets/logo.png"  aspect-ratio="16/9" width="150" height="80"></v-img>
+      </div>
+      <h2 class="ml-10">高端猎寻服务</h2>
+      <div class="highlight-color contact" @click="showDialog = true">联系我们</div>
+    </div>
+
+    <div class="mt-5" style="width: 100%; height: 600px;">
+      <img src="https://minio.citupro.com/dev/menduner/headhunting.jpg">
+    </div>
+
+    <div class="mt-10">
+      <h1 class="text-center highlight-color">公司简介</h1>
+      <div class="d-flex">
+        <div class="text-center" style="margin-right: 50px;">
+          <v-img width="250" height="300" aspect-ratio="16/9" src="https://minio.citupro.com/dev/menduner/ceo.jpg"></v-img>
+          <div>田森先生（Simon Tian）</div>
+        </div>
+        <div style="flex: 1;">
+          <p style="text-indent: 2em; line-height: 2em;" class="mt-5">门墩儿招聘平台（mendunerhr.com）是一家专注于酒店与泛服务业的职业发展与招聘网络平台。该平台由行业资深人士创立，
+            信息技术和大数据，为酒店业的高端人才提供职业发展服务，并为企业客户提供人才解决方案和战略建议。以下是对门墩儿招聘平台的详细介绍：</p>
+          <div class="mt-3">
+            <div v-for="(k, i) in introduce" :key="i" class="mb-5">
+              <h3 class="mb-3">{{ k.title }}</h3>
+              <ul v-for="(j, index) in k.children" :key="index">
+                <li>{{ j }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 精英猎头用门墩儿猎寻，猎寻优质人选 -->
+    <div class="my-10">
+      <h1 class="text-center highlight-color">精英猎头用门墩儿猎寻，猎寻优质人选</h1>
+      <div class="d-flex mt-3">
+        <v-img src="https://minio.citupro.com/dev/menduner/example.png" contain width="600" height="400"></v-img>
+        <div class="mt-7 ml-10" style="flex: 1">
+          <div v-for="(k, i) in list" :key="i" class="d-flex flex-column align-start mb-7">
+            <h2>{{ k.title }}</h2>
+            <div class="color-999 font-size-15 mt-3">{{ k.desc }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 成功案例 -->
+    <div>
+      <h1 class="text-center highlight-color">门墩儿的成功案例</h1>
+      <div class="mt-5">
+        <div v-for="(k, i) in successCases" :key="i" class="mb-10">
+          <div style="line-height: 2em;">
+            <span class="font-weight-bold">{{ k.title }}</span>
+            {{ k.desc }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 和TA们一起 使用门墩儿猎寻招聘吧 -->
+    <div>
+      <h1 class="text-center highlight-color">和TA们一起 使用门墩儿猎寻招聘吧</h1>
+      <v-img src="https://minio.citupro.com/dev/menduner/ad.jpg" contain width="1184" height="300" class="img-ad"></v-img>
+    </div>
+
+    <div class="mt-10 d-flex align-center justify-space-between" style="border-top: 1px solid #ccc; height: 150px;">
+      <div>
+        <div style="width: 150px; height: 80px;">
+          <v-img src="../../assets/logo.png"  aspect-ratio="16/9" width="150" height="80"></v-img>
+        </div>
+      </div>
+      <div class="d-flex">
+        <div>
+          <v-img :width="100" cover aspect-ratio="16/9" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" style="height: 100px;"></v-img>
+          <div class="mt-2" style="text-align: center;">微信公众号</div>
+        </div>
+        <div class="ml-10">
+          <v-img :width="100" cover aspect-ratio="16/9" src="https://minio.citupro.com/dev/menduner/miniProgram.jpg" style="height: 100px;"></v-img>
+          <div class="mt-2" style="text-align: center;">火苗儿小程序</div>
+        </div>
+      </div>
+    </div>
+
+    <CtDialog
+      :visible="showDialog"
+      :widthType="2"
+      titleClass="text-h6"
+      title="门墩儿猎寻服务咨询"
+      @submit="handleSubmit"
+      @close="showDialog = false"
+    >
+      <formItem ref="formRef"></formItem>
+    </CtDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import formItem from './components/form.vue'
+import Curtain from '@/plugins/curtain'
+import { huntSubmit } from '@/api/headhunting'
+import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
+defineOptions({ name: 'headhunting-index'})
+
+const list = [
+  { title: '高效猎寻人才', desc: '招聘服务：平台只能推荐+猎头顾问精准搜索，高效猎寻' },
+  { title: '拓宽猎企服务', desc: '企业服务：猎企接单+平台接单结合，提供猎头顾问收益' },
+  { title: '高效管理列企', desc: '职位管理、资源管理、数据看板一体的企业管理系统' }
+]
+
+// 公司简介
+const introduce = [
+  {
+    title: '平台背景与定位',
+    children: [
+      '创建背景：门墩儿平台具有丰富酒店从业经验的田森先生（Simon Tian）一手创办。Simon Tian凭借多年的行业经验和人脉，致力于推动酒店行业的发展，为高端人才和企业用户提供优质的社交平台与专业职场发展服务。',
+      '平台定位：门墩儿是首家面向酒店从业者、酒店雇主和业主的职业发展及招聘网络平台。它不仅服务于酒店业的经理或总监级以上人员，也支持青年英才，为他们提供定制职业规划，助力职业发展。'
+    ]
+  },
+  {
+    title: '服务内容',
+    children: [
+      '招聘服务：门墩儿积极携手酒店管理公司及业主等企业客户，通过名誉顾问委员会和导师委员会，提供人才解决方案和战略建议。平台从庞大的人才储备库中筛选最为匹配的人才，满足企业客户的招聘需求。',
+      '信息整合与发布：门墩儿通过其官方渠道（如微信公众号、网站等），将全国酒店的空缺职位、新任命、新酒店、行业观察等不同方向的信息与分散的资源与需求进行集中整合，成为从业者们了解行业动态、找寻发展机会的贴心资讯与服务平台。'
+    ]
+  },
+  {
+    title: '发展历程与成就',
+    children: [
+      '职业发展服务：门墩儿通过定制职业规划和人才筛选，为酒店行业的高端人才提供职业发展服务。平台汇聚了国内酒店业的资深人士，形成了一个高质量的社交网络，帮助从业者拓展人脉、获取行业资讯和职业发展机会。',
+      '取得成就：过去几年中，门墩儿平台已与多家酒店企业合作，助力了数千名酒店人的职业发展。同时，平台还通过线上及线下的全方位服务，全面覆盖酒店业精英人群，助力企业雇主品牌的不断提升。'
+    ]
+  },
+  {
+    title: '未来发展',
+    children: [
+      '门墩儿平台将继续秉承“酒店人服务酒店人”的理念，稳扎稳打，助力中国酒店人的职业发展。同时，平台还将不断拓展服务领域和范围，为酒店及泛服务业提供更加全面、专业的职业发展与招聘服务。在未来，门墩儿有望成为行业内领先的职业发展与招聘平台之一，为行业的持续发展贡献更多的力量。',
+    ]
+  },
+  {
+    title: '产品服务',
+    children: [
+      '通过战略布局与产品迭代，门墩儿逐渐形成多样化模式为核心，科技赋能的Saas产品矩阵。',
+    ]
+  }
+]
+
+// 成功案例
+const successCases = [
+  { title: '案例背景：', desc: '某知名科技公司（以下简称“A公司”）在快速发展的过程中，遇到了技术领军人才短缺的瓶颈。为了突破这一限制，A公司决定寻求专业的猎头服务，以快速定位并吸引行业内的顶尖技术人才。在众多猎头公司中，A公司选择了以其专业、高效和精准著称的“门墩儿猎头服务”。' },
+  { title: '需求分析：', desc: '门墩儿猎头服务的专业顾问团队首先与A公司的HR团队进行了深入的沟通，详细了解了A公司的企业文化、业务模式、技术需求以及对候选人的具体要求。通过全面的需求分析，确定了猎寻目标为具有丰富行业经验、精通前沿技术、并具备良好团队协作能力的技术总监。' },
+  { title: '市场调研：', desc: '基于需求分析的结果，门墩儿猎头服务启动了广泛的市场调研。他们利用自己强大的人才数据库、行业资源网络和先进的搜索技术，在全国范围内甚至全球范围内搜寻符合A公司要求的候选人。' },
+  { title: '候选人筛选与评估：', desc: '候选人筛选与评估：经过细致的筛选和初步评估，门墩儿猎头服务从众多候选人中挑选出了几位最具潜力的候选人。随后，他们安排了专业的面试评估流程，包括技能测试、行为面试、案例分析等环节，以全面评估候选人的综合素质和与A公司的匹配度。' },
+  { title: '推荐与谈判：', desc: '在确认了几位合适的候选人后，门墩儿猎头服务向A公司提交了详细的候选人推荐报告，并安排了候选人与A公司的直接面谈。在面谈过程中，门墩儿猎头服务的顾问团队全程陪同，提供专业的建议和支持，帮助双方更好地了解彼此。最终，A公司成功录用了其中一位技术总监' },
+  { title: '后续跟进：', desc: '在候选人入职后，门墩儿猎头服务并未停止服务。他们继续与A公司和候选人保持联系，关注候选人的工作表现和发展情况，并提供必要的支持和协助。同时，他们也定期与A公司沟通，收集反馈意见，以便不断优化和改进猎头服务。' },
+]
+
+const showDialog = ref(false)
+
+// 提交
+const formRef = ref()
+const handleSubmit = async () => {
+  try {
+    const obj = await formRef.value.getQuery()
+    if (!obj) return
+    const params = JSON.parse(JSON.stringify(obj))
+    await huntSubmit(params)
+    showDialog.value = false
+    Curtain('message', {
+      message: t('headhunting.submitSuccess'),
+      name: 'submit',
+      iconFontSize: 300
+    })
+  } catch (error) {
+    console.error('error', error)
+  }
+}
+
+</script>
+
+<style scoped lang="scss">
+.highlight-color {
+  color: #007eb4;
+}
+// 毛玻璃效果
+.img-ad {  
+  display: block;
+  width: 100%;
+  height: auto;
+  filter: blur(2px);
+}
+.contact {
+  position: absolute;
+  right: 0;
+  top: 22px;
+  font-weight: bold;
+  font-size: 24px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+ul li {
+  list-style: none;
+}
+</style>

src/views/headhunting/components/carousel.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="carousel">
+    <div class="carousel-box">
+      <div class="carousel-desc common-width">
+        <h1>我们的服务</h1>
+        <hr class="carousel-desc-line" />
+        <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>
+          <li v-for="(val, index) in service" :key="index" :style="{'border-left': index !== 0 ? '1px solid #56738f' : 'none'}">{{ val.title }}</li>
+        </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">
+        <div v-for="(val, i) in consultant" :key="i" class="consultant-item">
+          <div class="consultant-item__img" :style="{'background-image': `url('${val.avatar}')`, 'width': '100%', 'height': '100%' }"></div>
+          <div class="consultant-item__name">{{ val.enName }}</div>
+          <p class="consultant-item__country">{{ val.country }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="country-offices common-width mb-10">
+      <h2 class="section-header--country-page">我们的办公地点</h2>
+      <ul>
+        <li v-for="(val, index) in countryOffice" :key="index" class="cursor">
+          <div class="country-offices__office-content">
+            <div class="country-office__office-link">
+              <h3 style="font-size: 40px; margin-bottom: 10px;">{{ val.name }}</h3>
+              <p>{{ val.desc }}</p>
+            </div>
+            <div class="country-offices__office-image" :style="{'background-image': `url('${val.url}')` }"></div>
+            <div class="country-offices__office-overlay"></div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'headhunting-carousel'})
+
+const list = [
+  { title: '70家', desc: '全球分支机构' },
+  { title: '67年', desc: '领导力咨询经验' },
+  { title: '450+位', desc: '经验丰富的顾问' }
+]
+const service = [
+  { title: '高管搜索与招募' },
+  { title: '董事会服务' },
+  { title: '首次执行官继任计划' },
+  { 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' }
+]
+</script>
+
+<style scoped lang="scss">
+.common-width {
+  width: 100%;
+  max-width: 1000px;
+}
+.carousel-box {
+  width: 100%;
+  height: 480px;
+  color: #fff;
+  font-weight: 700;
+  background-image: url('https://minio.citupro.com/dev/menduner/headhunting/ad.jpeg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  font-family: FFScalaSansWebBold, Georgia, Utopia, Charter, sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  .carousel-desc {
+    margin: 0 auto;
+    text-align: center;
+    h1 {
+      padding: 32px 0;
+    }
+    &-line {
+      background-color: #fbcc11;
+      width: 42px;
+      height: 5px;
+      margin: 0 auto;
+      border: 0;
+    }
+    &-text {
+      clear: both;
+      font-size: 26px;
+      padding: 48px 84px 0;
+    }
+  }
+}
+.three-up-promo-cards {
+  display: flex;
+  margin: 0 auto;
+  background-color: #f5f7f9;
+  margin-top: -100px;
+  margin-bottom: 64px;
+  position: relative;
+  z-index: 700;
+  font-weight: 400;
+  .three-up-promo-cards__card {
+    color: #003d79;
+    width: 33.3%;
+    flex: 1 0 auto;
+    padding: 32px 24px;
+    position: relative;
+    text-align: center;
+    font-family: FFScalaWeb, Georgia, Utopia, Charter, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    .impact-messaging__number {
+      display: block;
+      font-size: 6rem;
+      line-height: 6.5rem;
+      font-variant-numeric: oldstyle-nums;
+      font-feature-settings: "onum";
+      -webkit-font-feature-settings: "onum";
+      letter-spacing: -8px;
+    }
+    .impact-messaging__copy {
+      font-size: .9375rem;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+  }
+}
+.service-link {
+  height: 88px;
+  font-family: FFScalaSansWebBold, Helvetica, Arial, sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  color: #fff;
+  font-size: .75rem;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  padding: 20px 0;
+  background-color: #00396f;
+  &-box {
+    margin: auto;
+    ul {
+      display: flex;
+      list-style-type: none;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      li {
+        width: 20%;
+        padding: 15px;
+        text-align: center;
+        vertical-align: middle;
+        cursor: pointer;
+        &:hover {
+          opacity: .7;
+        }
+      }
+    }
+  }
+}
+.site-width__constraint {
+  max-width: 820px;
+  text-align: left;
+  margin: auto;
+  padding: 40px 0;
+}
+.country-offices {
+  padding-block: 50px;
+  margin: auto;
+  .section-header--country-page {
+    font-size: 44px;
+    line-height: 52px;
+    margin-bottom: 44px;
+    text-align: center;
+    text-transform: none;
+    font-weight: 400;
+  }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    height: 286px;
+    justify-content: center;
+    list-style-type: none;
+    padding-left: 0;
+    li {
+      width: calc((100% - 60px) / 3);
+      max-width: 350px;
+      position: relative;
+      margin-right: 20px;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+      &::before {
+        content: '';
+        display: block;
+        padding-top: 83.3%;
+        width: 100%;
+      }
+      .country-offices__office-content {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+      .country-office__office-link {
+        height: 100%;
+        width: 100%;
+        color: #fff;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        z-index: 1;
+        padding: 30px;
+      }
+      .country-offices__office-image {
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: cover;
+        background-color: #404040;
+        transition: transform .3s, -webkit-transform .3s;
+      }
+      .country-offices__office-overlay {
+        background-color: rgba(76,76,78,.6);
+        transition: .3s;
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+      }
+    }
+    .cursor:hover {
+      transform: translateY(-15px);
+    }
+  }
+}
+.consultant-box {
+  width: 100%;
+  height: 200px;
+  .consultant-item {
+    width: calc((100% - 60px) / 3);
+    max-width: 350px;
+    margin-right: 20px;
+    cursor: pointer;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    .consultant-item__img {
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .consultant-item__name {
+      font-family: FFScalaWebBold, Georgia, Utopia, Charter, serif;
+      font-weight: 700;
+      color: #4c4c4e;
+      margin-top: 10px;
+    }
+    .consultant-item__country {
+      font-family: FFScalaWebItalic, Georgia, Utopia, Charter, sans-serif;
+      font-style: italic;
+      font-weight: 400;
+      color: #818183;
+    }
+  }
+}
+</style>

src/views/headhunting/components/nav.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="nav-box d-flex align-center">
+    <div class="d-flex align-center justify-space-between" style="width: 1200px; max-width: 1200px; height: 45px; line-height: 45px; margin: 0 auto;">
+      <div class="d-flex align-center">
+        <div class="cursor-pointer" style="width: 120px; height: 50px">
+          <v-img src="https://minio.citupro.com/dev/menduner/poster.png"  aspect-ratio="16/9" cover width="120" height="50"></v-img>
+        </div>
+        <div class="china">
+          <a href="https://cn.spencerstuart.com/locations/china">中国</a>
+        </div>
+      </div>
+      <div class="d-flex align-center">
+        <div v-for="(k, index) in navList" :key="index" class="list-item cursor-pointer font-size-15" :class="{'mr-5': index !== navList.length - 1}" @click="emit('click', k.path)">
+          {{ k.title }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'headhunting-nav'})
+
+const emit = defineEmits(['click'])
+const navList = [
+  { title: '我们的服务', path: '' },
+  { title: '我们的顾问', path: '' },
+  { title: '候选人', path: '' }
+]
+</script>
+
+<style scoped lang="scss">
+.nav-box {
+  height: 100px;
+  color: #fff;
+  font-weight: 700;
+  background-color: #00396f;
+}
+.china {
+  font-family: FFScalaSansWebBold, Helvetica, Arial, sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  display: flex;
+  vertical-align: middle;
+  align-items: center;
+  -webkit-box-align: center;
+  margin-top: 10px;
+  a {
+    color: #7cb085;
+    font-size: 24px;
+    line-height: 24px;
+    position: relative;
+    top: 3px;
+    text-decoration: none;
+  }
+  &::before {
+    content: '';
+    background-color: #fff;
+    display: inline-block;
+    height: 45px;
+    margin: 0 27px;
+    width: 2px;
+  }
+}
+
+.list-item:hover {
+  opacity: .7;
+}
+</style>

src/views/headhunting/index.vue

@@ -1,209 +1,20 @@
-<!-- 门墩儿猎寻服务 -->
 <template>
-  <div class="default-width">
-    <div class="d-flex align-center" style="position: relative;">
-      <div style="width: 150px; height: 80px;">
-        <v-img src="../../assets/logo.png"  aspect-ratio="16/9" width="150" height="80"></v-img>
-      </div>
-      <h2 class="ml-10">高端猎寻服务</h2>
-      <div class="highlight-color contact" @click="showDialog = true">联系我们</div>
-    </div>
-
-    <div class="mt-5" style="width: 100%; height: 600px;">
-      <img src="https://minio.citupro.com/dev/menduner/headhunting.jpg">
-    </div>
-
-    <div class="mt-10">
-      <h1 class="text-center highlight-color">公司简介</h1>
-      <div class="d-flex">
-        <div class="text-center" style="margin-right: 50px;">
-          <v-img width="250" height="300" aspect-ratio="16/9" src="https://minio.citupro.com/dev/menduner/ceo.jpg"></v-img>
-          <div>田森先生（Simon Tian）</div>
-        </div>
-        <div style="flex: 1;">
-          <p style="text-indent: 2em; line-height: 2em;" class="mt-5">门墩儿招聘平台（mendunerhr.com）是一家专注于酒店与泛服务业的职业发展与招聘网络平台。该平台由行业资深人士创立，
-            信息技术和大数据，为酒店业的高端人才提供职业发展服务，并为企业客户提供人才解决方案和战略建议。以下是对门墩儿招聘平台的详细介绍：</p>
-          <div class="mt-3">
-            <div v-for="(k, i) in introduce" :key="i" class="mb-5">
-              <h3 class="mb-3">{{ k.title }}</h3>
-              <ul v-for="(j, index) in k.children" :key="index">
-                <li>{{ j }}</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 精英猎头用门墩儿猎寻，猎寻优质人选 -->
-    <div class="my-10">
-      <h1 class="text-center highlight-color">精英猎头用门墩儿猎寻，猎寻优质人选</h1>
-      <div class="d-flex mt-3">
-        <v-img src="https://minio.citupro.com/dev/menduner/example.png" contain width="600" height="400"></v-img>
-        <div class="mt-7 ml-10" style="flex: 1">
-          <div v-for="(k, i) in list" :key="i" class="d-flex flex-column align-start mb-7">
-            <h2>{{ k.title }}</h2>
-            <div class="color-999 font-size-15 mt-3">{{ k.desc }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 成功案例 -->
-    <div>
-      <h1 class="text-center highlight-color">门墩儿的成功案例</h1>
-      <div class="mt-5">
-        <div v-for="(k, i) in successCases" :key="i" class="mb-10">
-          <div style="line-height: 2em;">
-            <span class="font-weight-bold">{{ k.title }}</span>
-            {{ k.desc }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 和TA们一起 使用门墩儿猎寻招聘吧 -->
-    <div>
-      <h1 class="text-center highlight-color">和TA们一起 使用门墩儿猎寻招聘吧</h1>
-      <v-img src="https://minio.citupro.com/dev/menduner/ad.jpg" contain width="1184" height="300" class="img-ad"></v-img>
-    </div>
-
-    <div class="mt-10 d-flex align-center justify-space-between" style="border-top: 1px solid #ccc; height: 150px;">
-      <div>
-        <div style="width: 150px; height: 80px;">
-          <v-img src="../../assets/logo.png"  aspect-ratio="16/9" width="150" height="80"></v-img>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div>
-          <v-img :width="100" cover aspect-ratio="16/9" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" style="height: 100px;"></v-img>
-          <div class="mt-2" style="text-align: center;">微信公众号</div>
-        </div>
-        <div class="ml-10">
-          <v-img :width="100" cover aspect-ratio="16/9" src="https://minio.citupro.com/dev/menduner/miniProgram.jpg" style="height: 100px;"></v-img>
-          <div class="mt-2" style="text-align: center;">火苗儿小程序</div>
-        </div>
-      </div>
-    </div>
-
-    <CtDialog
-      :visible="showDialog"
-      :widthType="2"
-      titleClass="text-h6"
-      title="门墩儿猎寻服务咨询"
-      @submit="handleSubmit"
-      @close="showDialog = false"
-    >
-      <formItem ref="formRef"></formItem>
-    </CtDialog>
+  <div>
+    <navBar @click="handleClickNav"></navBar>
+    <Carousel></Carousel>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import formItem from './components/form.vue'
-import Curtain from '@/plugins/curtain'
-import { huntSubmit } from '@/api/headhunting'
-import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
-defineOptions({ name: 'headhunting-index'})
-
-const list = [
-  { title: '高效猎寻人才', desc: '招聘服务：平台只能推荐+猎头顾问精准搜索，高效猎寻' },
-  { title: '拓宽猎企服务', desc: '企业服务：猎企接单+平台接单结合，提供猎头顾问收益' },
-  { title: '高效管理列企', desc: '职位管理、资源管理、数据看板一体的企业管理系统' }
-]
-
-// 公司简介
-const introduce = [
-  {
-    title: '平台背景与定位',
-    children: [
-      '创建背景：门墩儿平台具有丰富酒店从业经验的田森先生（Simon Tian）一手创办。Simon Tian凭借多年的行业经验和人脉，致力于推动酒店行业的发展，为高端人才和企业用户提供优质的社交平台与专业职场发展服务。',
-      '平台定位：门墩儿是首家面向酒店从业者、酒店雇主和业主的职业发展及招聘网络平台。它不仅服务于酒店业的经理或总监级以上人员，也支持青年英才，为他们提供定制职业规划，助力职业发展。'
-    ]
-  },
-  {
-    title: '服务内容',
-    children: [
-      '招聘服务：门墩儿积极携手酒店管理公司及业主等企业客户，通过名誉顾问委员会和导师委员会，提供人才解决方案和战略建议。平台从庞大的人才储备库中筛选最为匹配的人才，满足企业客户的招聘需求。',
-      '信息整合与发布：门墩儿通过其官方渠道（如微信公众号、网站等），将全国酒店的空缺职位、新任命、新酒店、行业观察等不同方向的信息与分散的资源与需求进行集中整合，成为从业者们了解行业动态、找寻发展机会的贴心资讯与服务平台。'
-    ]
-  },
-  {
-    title: '发展历程与成就',
-    children: [
-      '职业发展服务：门墩儿通过定制职业规划和人才筛选，为酒店行业的高端人才提供职业发展服务。平台汇聚了国内酒店业的资深人士，形成了一个高质量的社交网络，帮助从业者拓展人脉、获取行业资讯和职业发展机会。',
-      '取得成就：过去几年中，门墩儿平台已与多家酒店企业合作，助力了数千名酒店人的职业发展。同时，平台还通过线上及线下的全方位服务，全面覆盖酒店业精英人群，助力企业雇主品牌的不断提升。'
-    ]
-  },
-  {
-    title: '未来发展',
-    children: [
-      '门墩儿平台将继续秉承“酒店人服务酒店人”的理念，稳扎稳打，助力中国酒店人的职业发展。同时，平台还将不断拓展服务领域和范围，为酒店及泛服务业提供更加全面、专业的职业发展与招聘服务。在未来，门墩儿有望成为行业内领先的职业发展与招聘平台之一，为行业的持续发展贡献更多的力量。',
-    ]
-  },
-  {
-    title: '产品服务',
-    children: [
-      '通过战略布局与产品迭代，门墩儿逐渐形成多样化模式为核心，科技赋能的Saas产品矩阵。',
-    ]
-  }
-]
+defineOptions({ name: 'headhuntingIndex' })
+import navBar from './components/nav.vue'
+import Carousel from './components/carousel.vue'
 
-// 成功案例
-const successCases = [
-  { title: '案例背景：', desc: '某知名科技公司（以下简称“A公司”）在快速发展的过程中，遇到了技术领军人才短缺的瓶颈。为了突破这一限制，A公司决定寻求专业的猎头服务，以快速定位并吸引行业内的顶尖技术人才。在众多猎头公司中，A公司选择了以其专业、高效和精准著称的“门墩儿猎头服务”。' },
-  { title: '需求分析：', desc: '门墩儿猎头服务的专业顾问团队首先与A公司的HR团队进行了深入的沟通，详细了解了A公司的企业文化、业务模式、技术需求以及对候选人的具体要求。通过全面的需求分析，确定了猎寻目标为具有丰富行业经验、精通前沿技术、并具备良好团队协作能力的技术总监。' },
-  { title: '市场调研：', desc: '基于需求分析的结果，门墩儿猎头服务启动了广泛的市场调研。他们利用自己强大的人才数据库、行业资源网络和先进的搜索技术，在全国范围内甚至全球范围内搜寻符合A公司要求的候选人。' },
-  { title: '候选人筛选与评估：', desc: '候选人筛选与评估：经过细致的筛选和初步评估，门墩儿猎头服务从众多候选人中挑选出了几位最具潜力的候选人。随后，他们安排了专业的面试评估流程，包括技能测试、行为面试、案例分析等环节，以全面评估候选人的综合素质和与A公司的匹配度。' },
-  { title: '推荐与谈判：', desc: '在确认了几位合适的候选人后，门墩儿猎头服务向A公司提交了详细的候选人推荐报告，并安排了候选人与A公司的直接面谈。在面谈过程中，门墩儿猎头服务的顾问团队全程陪同，提供专业的建议和支持，帮助双方更好地了解彼此。最终，A公司成功录用了其中一位技术总监' },
-  { title: '后续跟进：', desc: '在候选人入职后，门墩儿猎头服务并未停止服务。他们继续与A公司和候选人保持联系，关注候选人的工作表现和发展情况，并提供必要的支持和协助。同时，他们也定期与A公司沟通，收集反馈意见，以便不断优化和改进猎头服务。' },
-]
-
-const showDialog = ref(false)
-
-// 提交
-const formRef = ref()
-const handleSubmit = async () => {
-  try {
-    const obj = await formRef.value.getQuery()
-    if (!obj) return
-    const params = JSON.parse(JSON.stringify(obj))
-    await huntSubmit(params)
-    showDialog.value = false
-    Curtain('message', {
-      message: t('headhunting.submitSuccess'),
-      name: 'submit',
-      iconFontSize: 300
-    })
-  } catch (error) {
-    console.error('error', error)
-  }
+const handleClickNav = (path) => {
+  console.log(path, 'nav-click')
 }
-
 </script>
 
 <style scoped lang="scss">
-.highlight-color {
-  color: #007eb4;
-}
-// 毛玻璃效果
-.img-ad {  
-  display: block;
-  width: 100%;
-  height: auto;
-  filter: blur(2px);
-}
-.contact {
-  position: absolute;
-  right: 0;
-  top: 22px;
-  font-weight: bold;
-  font-size: 24px;
-  cursor: pointer;
-  text-decoration: underline;
-}
-ul li {
-  list-style: none;
-}
+
 </style>