Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3516916d 1 parent a6f851d9

新增招聘信息页面

Inline Side-by-side
Showing 3 changed files with 440 additions and 1 deletions
......@@ -17,7 +17,9 @@ declare module 'vue' {
ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default']
ElImage: typeof import('element-ui/lib/image')['default']
ElInput: typeof import('element-ui/lib/input')['default']
ElOption: typeof import('element-ui/lib/option')['default']
ElRow: typeof import('element-ui/lib/row')['default']
ElSelect: typeof import('element-ui/lib/select')['default']
ElTooltip: typeof import('element-ui/lib/tooltip')['default']
HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
HagerCarousel: typeof import('./src/components/hagerCarousel.vue')['default']
......
/*
* @Date: 2024-08-26 10:42:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 12:14:14
* @LastEditTime: 2024-10-18 14:59:39
* @FilePath: /hager/src/route.js
* @Description: 文件描述
*/
......@@ -140,4 +140,13 @@ export default [{
tag: 'news'
},
children: []
}, {
path: '/recruit',
name: '招聘信息',
component: () => import('@/views/recruit'),
meta: {
title: '海格电器',
tag: 'recruit'
},
children: []
}]
......
<!--
* @Date: 2024-10-18 13:45:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 17:30:23
* @FilePath: /hager/src/views/recruit.vue
* @Description: 招聘信息
-->
<template>
<div class="hager-recruit-page">
<div class="top-img"></div>
<hager-box>
<div class="select-btn-box">
<div @click="onClickBtn(0)" :class="['btn', active_idx === 0 ? 'active' : 'normal']">热招岗位</div>
<div @click="onClickBtn(1)":class="['btn', active_idx === 1 ? 'active' : 'normal']">雇主奖项</div>
<div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">企业文化</div>
</div>
</hager-box>
<div v-if="active_idx === 0">
<hager-box>
<hager-h1 title="热招岗位" sub="Hot Job" style="margin: 0 0 1rem;"></hager-h1>
<div style="margin: 2rem 0;">
<span style="font-size: 0.95rem; font-weight: bold; margin-right: 1rem;">筛选</span>
<el-select v-model="location_value" filterable placeholder="工作地点">
<el-option
v-for="item in location_options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div style="margin-bottom: 3rem;">
<div class="job-box" v-for="(job, index) in job_list" :key="index">
<el-row style="padding: 1.5rem 2rem;">
<el-col :span="12" style="border-right: 1px solid #E1E1E1;">
<span class="job-title">{{ job.title }}</span>
</el-col>
<el-col :span="12">
<div class="job-location-box">
<span class="job-location">地点：{{ job.location }}</span>
<img style="width: 1rem; height: 1rem;" src="https://cdn.ipadbiz.cn/hager/icon/rr@2x.png">
</div>
</el-col>
</el-row>
</div>
</div>
</hager-box>
<hager-box>
<div class="get-more">
<div class="btn">加载更多...</div>
</div>
</hager-box>
<hager-box style="margin: 1rem 0 3rem;">
<div style="font-size: 1.15rem; text-align: center; margin: 1rem 0;">
<p style="margin-bottom: 0.5rem;">全国多地热招同步开启</p>
<p>转发给身边小伙伴，快来投递简历吧!</p>
</div>
<div class="job-img-box email" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z01.png)'}">
<div>简历投递邮箱:hr.communication@hager.com</div>
</div>
<div class="job-img-box job" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z02.png)'}">
<p>经理职位 8000元</p>
<p>高级工程师/主管 6000元</p>
<p>工程师/专员 5000元</p>
</div>
</hager-box>
</div>
<div v-if="active_idx === 1">
<hager-box>
<hager-h1 title="海格集团雇主奖项" sub="Hager Group Employer Awards" style="margin: 0 0 1rem;"></hager-h1>
<el-row :gutter="30" style="margin-bottom: 2rem;">
<el-col :span="8">
<div class="employer-award">
<div class="award-box">
<div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z03.png)"></div>
</div>
<div class="award-title">Kununu最受推荐雇主</div>
</div>
</el-col>
<el-col :span="8">
<div class="employer-award">
<div class="award-box">
<div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z04.png)"></div>
</div>
<div class="award-title">glassdoor最佳雇主</div>
</div>
</el-col>
<el-col :span="8">
<div class="employer-award">
<div class="award-box">
<div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z05.png)"></div>
</div>
<div class="award-title">Capital法国最佳雇主</div>
</div>
</el-col>
</el-row>
<el-row :gutter="30" style="margin-bottom: 2rem;">
<el-col :span="8">
<div class="employer-award">
<div class="award-box">
<div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z06.png)"></div>
</div>
<div class="award-title">Stern最佳雇主 电子电气工程类别</div>
</div>
</el-col>
<el-col :span="8">
<div class="employer-award">
<div class="award-box">
<div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z07.png)"></div>
</div>
<div class="award-title">Focus最佳雇主 电气技术类别</div>
</div>
</el-col>
<el-col :span="8">
<div class="employer-award">
<div class="award-box">
<div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z08.png)"></div>
</div>
<div class="award-title">Happyindex最受实习生喜爱雇主</div>
</div>
</el-col>
</el-row>
<hager-h1 title="Hi!海格大学所获奖项" sub="Hi！Hager University Award " style="margin: 0 0 1rem;"></hager-h1>
<el-row :gutter="30" style="margin-bottom: 2rem;">
<el-col :span="8">
<div class="employer-award">
<div class="award-box">
<div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z09.png)"></div>
</div>
<div class="award-title">最佳新型企业大学 金奖</div>
</div>
</el-col>
<el-col :span="8">
<div class="employer-award">
<div class="award-box">
<div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z10.png)"></div>
</div>
<div class="award-title">U-Spring 金奖</div>
</div>
</el-col>
<el-col :span="8">
<div class="employer-award">
<div class="award-box">
<div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z11.png)"></div>
</div>
<div class="award-title">布兰登霍尔HCM卓越奖 金奖</div>
</div>
</el-col>
</el-row>
</hager-box>
</div>
<div v-if="active_idx === 2">
<hager-box>
<el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
<el-col :span="12">
<div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z12.png)' }"></div>
</el-col>
<el-col :span="12">
<div class="corporate-culture-box">
<div class="title" style="margin-top: 2rem;">
<p class="c">以人为本的家族企业</p>
<p class="e">People-Oriented</p>
</div>
<div class="introduce" style="line-height: 2;">
<p style="margin-bottom: 1rem;">
海格集团始终坚持以人为本，相信员工是成功的关键。秉承 <span style="color: #00ABE5;">真诚、勇气、正直</span> 的企业价值观，海格集团为员工创造温馨、和谐的工作氛围，员工可以从中享受灵活的工作方式。
</p>
</div>
</div>
</el-col>
</el-row>
<el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
<el-col :span="12">
<div class="corporate-culture-box">
<div class="title" style="margin-top: 2rem;">
<p class="c">构建未来电气世界</p>
<p class="e">Vision</p>
</div>
<div class="introduce" style="line-height: 2;">
<p style="margin-bottom: 1rem;">作为电气安装解决方案和服务供应商，海格集团始终坚持<span>可持续发展</span>，发布<span>Project 2030</span> 集团愿景，致才于构建未来的电气世界，让人们的生活更安全、更清洁、更愉悦。</p>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z13.png)' }"></div>
</el-col>
</el-row>
<el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
<el-col :span="12">
<div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z14.png)' }"></div>
</el-col>
<el-col :span="12">
<div class="corporate-culture-box">
<div class="title" style="margin-top: 2rem;">
<p class="c">人与企业共同成长</p>
<p class="e">Grow Together</p>
</div>
<div class="introduce" style="line-height: 2;">
<p style="margin-bottom: 1rem;">海格集团坚信人与企业共同成长为员工提供终身发展的机会。 <br/>
<span>H!海格大学</span>帮助员工学习职业技能,让员工获得职场成长。</p>
</div>
</div>
</el-col>
</el-row>
</hager-box>
</div>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
export default {
components: { hagerH1, hagerBox },
mixins: [mixin.init],
data () {
return {
active_idx: 0,
location_options: [{
value: '远程办公',
label: '远程办公'
}, {
value: '广东省-东莞',
label: '广东省-东莞'
}, {
value: '浙江省-杭州',
label: '浙江省-杭州'
}],
location_value: '',
job_list: [
{
title: '销售工程师',
location: '远程办公'
},
{
title: '产品管理主管级工程师',
location: '广东省-东莞'
},
{
title: 'QE/ 质量工程师',
location: '广东省-东莞'
},
{
title: '销售工程师',
location: '浙江省-杭州'
},
]
}
},
mounted () {
},
methods: {
onClickBtn (idx) {
this.active_idx = idx;
}
}
}
</script>
<style lang="less" scoped>
.hager-recruit-page {
.top-img {
height: 25rem;
background-image: url(https://cdn.ipadbiz.cn/hager/banner/banner07.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.select-btn-box {
margin: 2rem 0;
.btn {
width: 8rem;
height: 2rem;
line-height: 2rem;
text-align: center;
display: inline-block;
padding: 0.5rem 0;
margin-right: 1rem;
border-radius: 5px;
&.active {
background-color: @primary-color;
color: #fff;
font-weight: bold;
}
&.normal {
background-color: #F3F3F3;
color: @text-color;
font-weight: none;
}
&:hover {
cursor: pointer;
}
}
}
.job-box {
background: #FFFFFF;
box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09);
border-radius: 5px;
margin-bottom: 2rem;
transition: transform 0.3s ease-in-out;
&:hover {
cursor: pointer;
transform: scale(1.01);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.job-title {
color: @secondary-color;
font-weight: bold;
}
.job-location-box {
display: flex;
align-items: center;
justify-content: flex-end;
.job-location {
margin-right: 1rem;
}
}
}
.job-img-box {
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
color: #fff;
font-size: 0.95rem;
font-weight: bold;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
&.email {
padding: 1rem 2rem;
height: 3rem;
margin: 2rem 3rem;
font-size: 1.25rem;
}
&.job {
padding: 1rem 2rem;
height: 9rem;
flex-direction: column;
font-size: 1.25rem;
p {
line-height: 1.75;
}
}
}
.get-more {
display: flex;
justify-content: center;
.btn {
background-color: #F56400;
color: #fff;
padding: 1rem 2rem;
width: 5rem;
margin-bottom: 2rem;
&:hover {
cursor: pointer;
}
}
}
.employer-award {
// height: 20rem;
border: 1px solid #D6D6D6;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
.award-box {
// padding: 1rem;
// border-bottom: 0;
.award-img {
width: 100%;
height: 13rem;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.award-title {
background-color: #E3F1F7;
color: @secondary-color;
font-weight: bold;
text-align: center;
padding: 1rem;
}
}
.corporate-culture-img {
width: 100%;
height: 22rem;
background-repeat: no-repeat;
background-size: cover;
background-position: center right;
}
.corporate-culture-box {
background-color: #FFF;
position: relative; /* 父容器设置为相对定位 */
padding: 2rem;
height: 22rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
.title {
font-weight: bold;
.c {
font-size: 2rem;
color: @secondary-color;
}
.e {
font-size: 1.5rem;
color: @primary-color;
}
}
.introduce {
line-height: 1.75;
margin-top: 1rem;
span {
color: @primary-color;
}
}
}
}
</style>