|
@@ -0,0 +1,202 @@
|
|
|
+<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/marriott/logo.png" width="193" height="59"></v-img>
|
|
|
+ </div>
|
|
|
+ <!-- 集团简介 -->
|
|
|
+ <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 class="culture">
|
|
|
+ <div v-for="(k, i) in cultureList" :key="i" class="culture-item">
|
|
|
+ <v-img :src="k" width="350" height="230" contain></v-img>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-15 text-center">
|
|
|
+ <img src="https://minio.citupro.com/dev/menduner/marriott/brand.png" alt="" style="width: 100%; height: 549px;">
|
|
|
+ </div>
|
|
|
+ </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: 'advertisement-marriott'})
|
|
|
+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
|
|
|
+})
|
|
|
+// banner
|
|
|
+const carouselList = [
|
|
|
+ 'https://minio.citupro.com/dev/menduner/marriott/banner-bg.jpg',
|
|
|
+ // 'https://minio.citupro.com/dev/menduner/marriott/culture1.jpg',
|
|
|
+ 'https://minio.citupro.com/dev/menduner/marriott/culture2.jpg'
|
|
|
+]
|
|
|
+
|
|
|
+// 集团简介
|
|
|
+const briefIntroduction = [
|
|
|
+ '万豪国际集团是全球领先的酒店管理公司,旗下拥有超过<strong>30个</strong>热门酒店品牌,近<strong>8,900家</strong>酒店及度假酒店,足迹遍布全球<strong>141个</strong>国家和地区。',
|
|
|
+ '万豪国际集团深耕中国市场<strong>50周年</strong>,致力于在本地提供更多非凡机遇。万豪国际集团在华140多个</strong>城市和目的地运营近<strong>540家</strong>酒店,拥有超过<strong>9万名</strong>员工。',
|
|
|
+ 'As the leader in hospitality worldwide, Marriott International has <strong>9,000+</strong> hotel properties and <strong>30+</strong> top hotel brands. We’re in <strong>140+</strong> countries and territories, and we’re still growing. Unmatched opportunities await you! The next step in your career could lead to your greatest adventure.'
|
|
|
+]
|
|
|
+const cultureList = [
|
|
|
+ 'https://minio.citupro.com/dev/menduner/marriott/culture3.jpg',
|
|
|
+ 'https://minio.citupro.com/dev/menduner/marriott/culture4.jpg',
|
|
|
+ 'https://minio.citupro.com/dev/menduner/marriott/culture5.jpg'
|
|
|
+]
|
|
|
+
|
|
|
+// 招聘职位
|
|
|
+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: 30px;
|
|
|
+ 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: 65px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+.culture {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ &-item {
|
|
|
+ width: 33.3%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.content-width {
|
|
|
+ width: 1048px;
|
|
|
+ margin: 0 auto;
|
|
|
+ max-width: 1048px;
|
|
|
+ min-width: 1048px
|
|
|
+}
|
|
|
+</style>
|