menduner/src/views/recruit/personal/home/components/advertisement/dynamic/intercontinental.vue

<template>
  <div class="default-width" style="position: relative;">
    <!-- 轮播图、logo -->
    <!-- <div style="position: relative;">
      <v-carousel show-arrows="hover" cycle>
        <v-carousel-item v-for="(k, i) in carouselList" :key="i" :lazy-src="k" :src="k" cover></v-carousel-item>
      </v-carousel>
      <v-img class="logo-png" src="https://minio.citupro.com/dev/menduner/preferredGroup/IHG-logo.png" width="152" height="72"></v-img>
    </div> -->
    <v-img src="https://minio.menduner.com/dev/menduner/IHG.gif" lazy-src="https://minio.menduner.com/dev/menduner/IHG.gif" width="1184" height="500">
      <template v-slot:placeholder>
        <v-row align="center" class="fill-height ma-0" justify="center">
          <v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
        </v-row>
      </template>
    </v-img>
    <!-- 集团简介 -->
    <div class="brief-introduction">
      <h2>集团简介</h2>
      <div class="desc">
        <p v-for="(k, i) in briefIntroduction" :key="i" class="mb-5" v-html="k"></p>
      </div>
      <div>
        <v-img src="https://minio.citupro.com/dev/menduner/p1.png"></v-img>
      </div>
    </div>
    <!-- 品牌介绍 -->
    <div class="brand-introduction">
      <h2>品牌介绍</h2>
      <ul>
        <li v-for="k in brandIntroduction" :key="k.title">
          <v-img :src="k.img" width="100%" height="192"></v-img>
          <h3>{{ k.title }}</h3>
          <span>{{ k.desc }}</span>
        </li>
      </ul>
    </div>
    <!-- 招聘职位 -->
    <div class="recruit-position">
      <h2>招聘职位</h2>
      <div>
        <div class="position-item d-flex align-center" v-for="k in recruitPosition" :key="k.job.id">
          <div class="job-name">
            {{ k.job.name }}
            <br>
            {{ k.enterprise.name }}
          </div>
          <div class="job-place">
            <div class="job-title">地点</div>
            <p class="font-size-14">{{ k.job.areaName || '未填写' }}</p>
          </div>
          <div class="job-class">
            <div class="job-title">工作经验</div>
            <p class="font-size-14">{{ k.job.expName }}</p>
          </div>
          <div class="job-class">
            <div class="job-title">职位更新</div>
            <p class="font-size-14">{{ timesTampChange(k.job.updateTime) }}</p>
          </div>
          <div class="font-size-14 cursor-pointer view-detail" @click="handlePosition(k)">点击查看详情
            <v-icon>mdi-pan-right</v-icon>
          </div>
        </div>
        <CtPagination
        :total="total"
        :page="queryParams.pageNo"
        :limit="queryParams.pageSize"
        @handleChange="handleChangePage"
      ></CtPagination>
      </div>
    </div>
    <v-btn icon="mdi-chevron-up" size="large" color="primary" class="up-btn" @click="handleToTop"></v-btn>
  </div>
</template>

<script setup>
defineOptions({ name: 'advertisementPageIntercontinental'})
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { getJobAdvertisedSearch } from '@/api/position'
import { dealDictObjData } from '@/utils/position'
import { timesTampChange } from '@/utils/date'

const router = useRouter()
const { id } = router.currentRoute.value.params

const total = ref(0)
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  enterpriseId: id
})
// 轮播图
// const carouselList = ref([
//   'https://minio.citupro.com/dev/menduner/carousel/8.jpg',
//   'https://minio.citupro.com/dev/menduner/carousel/3.jpg',
//   'https://minio.citupro.com/dev/menduner/carousel/9.jpg',
//   'https://minio.citupro.com/dev/menduner/carousel/2.jpg',
//   'https://minio.citupro.com/dev/menduner/carousel/1.jpg'
// ])
// 集团简介
const briefIntroduction = [
  '洲际酒店集团（InterContinental Hotels Group, 简称IHG）无疑是全球酒店业中的领军企业之一，其广泛的品牌组合、庞大的酒店网络和忠诚客户计划都彰显了其在行业内的强大实力和影响力。',
  '洲际酒店集团的品牌组合涵盖了从奢华到经济型的多个细分市场，满足了不同旅行者的多样化需求。从顶级的六善酒店、度假村及水疗，到经典的洲际®酒店及度假村，再到商务和休闲旅客偏爱的皇冠假日酒店®及度假村和假日酒店®及度假村，每个品牌都以其独特的魅力和卓越的服务赢得了全球旅客的青睐。此外，集团还不断创新，推出了如洲至奢选、金普顿®酒店及餐厅、英迪格酒店®等更具个性化的品牌，进一步丰富了其品牌组合。',
  '洲际酒店集团在全球逾100个国家和地区拥有超过<strong>6,000家酒店</strong>，这一庞大的网络确保了无论旅客身处何地，都能享受到集团提供的优质住宿体验。近<strong>890,000间客房</strong>的规模更是彰显了集团在酒店业中的领先地位。同时，约<strong>1,900家</strong>在建酒店预示着集团将持续扩大其全球影响力，为更多地区的旅客带来高品质的住宿选择。',
  'IHG®优悦会作为洲际酒店集团的酒店忠诚客户计划，目前在全球拥有超过1亿会员。这一庞大的会员群体不仅为集团带来了稳定的客源，还通过积分兑换、会员专享优惠等方式提升了旅客的忠诚度和满意度。优悦会还提供了多种会员等级和丰富的会员权益，鼓励旅客更多地选择洲际酒店集团的酒店，并享受更加个性化的服务和体验。',
  '洲际酒店集团通过特许经营、出租、管理或拥有等多种方式运营其酒店网络，这种灵活性使得集团能够根据不同地区的市场需求和条件制定合适的经营策略，实现高效管理和优化资源配置。同时，集团还注重品牌标准的统一和服务质量的提升，确保每一家酒店都能为旅客提供高品质的住宿体验。',
  '综上所述，洲际酒店集团凭借其全面的品牌组合、广泛的全球网络、吸引人的忠诚客户计划以及灵活的管理与运营模式，在全球酒店业中保持了领先地位并持续拓展其市场份额。未来，随着全球旅游业的不断发展和旅客需求的不断变化，洲际酒店集团有望继续引领行业潮流并创造更多辉煌成就。'
]
// 品牌介绍
const brandIntroduction = ref([
  {
    title: '六善™酒店、度假村及水疗',
    desc: '从遥远罕至的岛屿湖沼，到都市秘境和山间隐所，六善品牌打造人类社区与自然生态系统和谐相生的度假胜地，帮助宾客重新融入广阔天地之中，回归本我之地。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/1_brand.png'
  },
  {
    title: '丽晶®酒店及度假村',
    desc: '每一处酒店和度假村都彰显品牌独特的典雅魅力，既是静谧避世之所，又是意趣灵感之源。即使是经验丰富的旅行者，也能沉醉于其中。心之所向，皆为丽晶。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/2_brand.png'
  },
  {
    title: '洲际®酒店及度假村',
    desc: '我们致力奉上知行天下的洲际人生，使我们的宾客可以乐享洲际的环球智慧与迷人的当地风情。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/3_brand.png'
  },
  {
    title: 'Vignette™Collection 洲至奢选',
    desc: '全新奢选酒店系列，每家酒店风格迥异，却又有着共同的信仰，为宾客缔造纯正、地道、贴心的旅行体验。以卓越的人本理念，重新定义奢华待客之道。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/4_brand.png'
  },
  {
    title: '金普顿®酒店及餐厅',
    desc: '金普顿®酒店及餐厅通过提供贴心的礼遇和设施、大胆而俏皮的设计风格，以及真挚个性化的宾客服务，为宾客带来与众不同的入住体验。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/5_brand.png'
  },
  {
    title: '英迪格酒店®',
    desc: '我们激发宾客灵感，沉浸邻间，探索世界。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/6_brand.png'
  },
  {
    title: 'voco™',
    desc: 'voco™ 酒店为您打造温馨周到、愜意放松、独具魅力的体验。每家酒店都有各自的风格和特色，宾客可在此尽享充满社交活力的住宿时光。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/7_brand.png'
  },
  {
    title: '华邑®酒店及度假村',
    desc: '华邑®提供给宾客沉浸式的中国文化体验，将东方美学与文化传承生活化，热忱发扬以"食”与"聚“为核心的中华待客之道的艺术。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/8_brand.png'
  },
  {
    title: '皇冠假日酒店®及度假村',
    desc: '皇冠假日酒店® 一直致力满足新时代的有志之士兼顾工作与生活的需求。商务旅行不止于工作 -更多的是实现工作与生活的融合。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/9_brand.png'
  },
  {
    title: '逸衡酒店®',
    desc: '逸衡酒店®精心打造了健康平衡的旅行生活方式，我们有现代的健身设施，健康营养的餐食体验以及舒适自然的休憩空间，更有深谙健康之道的员工随时为你提供贴心服务，助力元气生活。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/10_brand.png'
  },
  {
    title: '智选假日酒店®',
    desc: '提供宾客”恰如所需”的高品质服务一一安心早餐、高速网络、畅爽淋浴和舒适睡眠，以及焕新宾客体验的新一代设计，让宾客能够精力充沛、准备充分地去完成旅行使命。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/11_brand.png'
  },
  {
    title: '假日酒店®',
    desc: '作为倍受宾客信赖及挚爱的酒店品牌之一，假日酒店始终提供令人安心自在的入住体验，令宾客的每次相聚都变成珍贵回忆。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/12_brand.png'
  },
  {
    title: 'Avid™酒店',
    desc: '酒店致力于提供宾客真正关心的基本住宿需求，专注于打造与众不同的基本要素。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/13_brand.png'
  },
  {
    title: 'Atwell Suites™',
    desc: '我们的全套房酒店处处为宾客提供丰富选择，满足宾客的各种住宿需求。酒店拥有设计体贴的公共场所、别致倾心的酒吧以及格调高雅的套房，我们恭候宾客下榻，探索新的旅行目的地。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/14_brand.png'
  },
  {
    title: 'Staybridge Suites®',
    desc: '酒店处处洋溢着温馨和舒适，让离家远行的宾客在旅途中也能有宾至如归的感觉。确保酒店处处洋溢着温馨和舒适，让离家远行的宾客也能感到宾至如归。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/15_brand.png'
  },
  {
    title: 'Holiday Inn Club Vacations®',
    desc: '度假酒店位于热门景区，满足各年龄段宾客的住宿需求，提供宽敞的住宿环境和便捷的设施，为您和您的家人创造一段难忘的回忆。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/16_brand.png'
  },
  {
    title: 'Candlewood Suites®',
    desc: '酒店提供更为轻松愜意的长期住宿服务，让宾客时刻享受家的感觉，满足长期入住的各种需求。',
    img: 'https://minio.citupro.com/dev/menduner/brandIntruduction/17_brand.png'
  }
])

// 招聘职位
const recruitPosition = ref([])
const getRecruitPositionList = async () => {
  const { list, total: number } = await getJobAdvertisedSearch(queryParams.value)
  if (!list.length) {
    total.value = 0
    recruitPosition.value = []
    return
  }
  recruitPosition.value = list.map(e => {
    e.job = { ...e.job, ...dealDictObjData({}, e.job) }
    return e
  })
  total.value = number
}
getRecruitPositionList()

const handleChangePage = (e) => {
  queryParams.value.pageNo = e
  getRecruitPositionList()
}

// 职位详情
const handlePosition = (val) => {
  window.open(`/recruit/personal/position/details/${val.job.id}`)
}

const handleToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}
</script>

<style scoped lang="scss">
.logo-png {
  position: absolute;
  top: 10px;
  left: 5%;
}
h2 {
  font-size: 32px;
  color: #666;
  line-height: 44px;
  text-align: center;
  margin-bottom: 26px;
  font-weight: 600;
}
.brief-introduction {
  margin: 100px 0;
  .desc {
    color: #666;
    margin-bottom: 40px;
  }
}
.brand-introduction {
  ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    li {
      width: calc((100% - 96px) / 3);
      min-width: calc((100% - 96px) / 3);
      max-width: calc((100% - 96px) / 3);
      margin: 0 48px 24px 0;
      list-style: none;
      &:nth-child(3n) {
        margin-right: 0;
      }
      h3 {
        height: 30px;
        font-size: 22px;
        color: #333;
        line-height: 30px;
        margin: 24px 0 12px 10px;
      }
      span {
        display: block;
        width: 342px;
        font-size: 14px;
        color: #666;
        line-height: 26px;
        margin: 0 auto;
      }
    }
  }
}
.recruit-position {
  margin-top: 100px;
  .position-item {
    background-color: #f9f9f9;
    margin-bottom: 15px;
    padding: 20px 0 20px 32px;
    .job-name {
      width: 20.5%;
      overflow: hidden;
      margin-right: 5%;
      // color: #333;
      font-size: 15px;
      font-weight: 600;
    }
    .job-place {
      width: 17%;
      margin-right: 5%;
    }
    .job-class {
      width: 15%;
      margin-right: 5%;
    }
    .job-title {
      font-size: 13px;
      color: #8c8c8c;
      line-height: 26px;
    }
  }
}
.view-detail:hover {
  text-decoration: underline;
}
.up-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>