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' { ...@@ -17,7 +17,9 @@ declare module 'vue' {
17 ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default'] 17 ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default']
18 ElImage: typeof import('element-ui/lib/image')['default'] 18 ElImage: typeof import('element-ui/lib/image')['default']
19 ElInput: typeof import('element-ui/lib/input')['default'] 19 ElInput: typeof import('element-ui/lib/input')['default']
20 + ElOption: typeof import('element-ui/lib/option')['default']
20 ElRow: typeof import('element-ui/lib/row')['default'] 21 ElRow: typeof import('element-ui/lib/row')['default']
22 + ElSelect: typeof import('element-ui/lib/select')['default']
21 ElTooltip: typeof import('element-ui/lib/tooltip')['default'] 23 ElTooltip: typeof import('element-ui/lib/tooltip')['default']
22 HagerBox: typeof import('./src/components/common/hagerBox.vue')['default'] 24 HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
23 HagerCarousel: typeof import('./src/components/hagerCarousel.vue')['default'] 25 HagerCarousel: typeof import('./src/components/hagerCarousel.vue')['default']
......
1 /* 1 /*
2 * @Date: 2024-08-26 10:42:15 2 * @Date: 2024-08-26 10:42:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-18 12:14:14 4 + * @LastEditTime: 2024-10-18 14:59:39
5 * @FilePath: /hager/src/route.js 5 * @FilePath: /hager/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -140,4 +140,13 @@ export default [{ ...@@ -140,4 +140,13 @@ export default [{
140 tag: 'news' 140 tag: 'news'
141 }, 141 },
142 children: [] 142 children: []
143 +}, {
144 + path: '/recruit',
145 + name: '招聘信息',
146 + component: () => import('@/views/recruit'),
147 + meta: {
148 + title: '海格电器',
149 + tag: 'recruit'
150 + },
151 + children: []
143 }] 152 }]
......
1 +<!--
2 + * @Date: 2024-10-18 13:45:53
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-18 17:30:23
5 + * @FilePath: /hager/src/views/recruit.vue
6 + * @Description: 招聘信息
7 +-->
8 +<template>
9 + <div class="hager-recruit-page">
10 + <div class="top-img"></div>
11 + <hager-box>
12 + <div class="select-btn-box">
13 + <div @click="onClickBtn(0)" :class="['btn', active_idx === 0 ? 'active' : 'normal']">热招岗位</div>
14 + <div @click="onClickBtn(1)":class="['btn', active_idx === 1 ? 'active' : 'normal']">雇主奖项</div>
15 + <div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">企业文化</div>
16 + </div>
17 + </hager-box>
18 + <div v-if="active_idx === 0">
19 + <hager-box>
20 + <hager-h1 title="热招岗位" sub="Hot Job" style="margin: 0 0 1rem;"></hager-h1>
21 + <div style="margin: 2rem 0;">
22 + <span style="font-size: 0.95rem; font-weight: bold; margin-right: 1rem;">筛选</span>
23 + <el-select v-model="location_value" filterable placeholder="工作地点">
24 + <el-option
25 + v-for="item in location_options"
26 + :key="item.value"
27 + :label="item.label"
28 + :value="item.value">
29 + </el-option>
30 + </el-select>
31 + </div>
32 + <div style="margin-bottom: 3rem;">
33 + <div class="job-box" v-for="(job, index) in job_list" :key="index">
34 + <el-row style="padding: 1.5rem 2rem;">
35 + <el-col :span="12" style="border-right: 1px solid #E1E1E1;">
36 + <span class="job-title">{{ job.title }}</span>
37 + </el-col>
38 + <el-col :span="12">
39 + <div class="job-location-box">
40 + <span class="job-location">地点：{{ job.location }}</span>
41 + <img style="width: 1rem; height: 1rem;" src="https://cdn.ipadbiz.cn/hager/icon/rr@2x.png">
42 + </div>
43 + </el-col>
44 + </el-row>
45 + </div>
46 + </div>
47 + </hager-box>
48 + <hager-box>
49 + <div class="get-more">
50 + <div class="btn">加载更多...</div>
51 + </div>
52 + </hager-box>
53 + <hager-box style="margin: 1rem 0 3rem;">
54 + <div style="font-size: 1.15rem; text-align: center; margin: 1rem 0;">
55 + <p style="margin-bottom: 0.5rem;">全国多地热招同步开启</p>
56 + <p>转发给身边小伙伴，快来投递简历吧!</p>
57 + </div>
58 + <div class="job-img-box email" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z01.png)'}">
59 + <div>简历投递邮箱:hr.communication@hager.com</div>
60 + </div>
61 + <div class="job-img-box job" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z02.png)'}">
62 + <p>经理职位 8000元</p>
63 + <p>高级工程师/主管 6000元</p>
64 + <p>工程师/专员 5000元</p>
65 + </div>
66 + </hager-box>
67 + </div>
68 + <div v-if="active_idx === 1">
69 + <hager-box>
70 + <hager-h1 title="海格集团雇主奖项" sub="Hager Group Employer Awards" style="margin: 0 0 1rem;"></hager-h1>
71 + <el-row :gutter="30" style="margin-bottom: 2rem;">
72 + <el-col :span="8">
73 + <div class="employer-award">
74 + <div class="award-box">
75 + <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z03.png)"></div>
76 + </div>
77 + <div class="award-title">Kununu最受推荐雇主</div>
78 + </div>
79 + </el-col>
80 + <el-col :span="8">
81 + <div class="employer-award">
82 + <div class="award-box">
83 + <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z04.png)"></div>
84 + </div>
85 + <div class="award-title">glassdoor最佳雇主</div>
86 + </div>
87 + </el-col>
88 + <el-col :span="8">
89 + <div class="employer-award">
90 + <div class="award-box">
91 + <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z05.png)"></div>
92 + </div>
93 + <div class="award-title">Capital法国最佳雇主</div>
94 + </div>
95 + </el-col>
96 + </el-row>
97 + <el-row :gutter="30" style="margin-bottom: 2rem;">
98 + <el-col :span="8">
99 + <div class="employer-award">
100 + <div class="award-box">
101 + <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z06.png)"></div>
102 + </div>
103 + <div class="award-title">Stern最佳雇主 电子电气工程类别</div>
104 + </div>
105 + </el-col>
106 + <el-col :span="8">
107 + <div class="employer-award">
108 + <div class="award-box">
109 + <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z07.png)"></div>
110 + </div>
111 + <div class="award-title">Focus最佳雇主 电气技术类别</div>
112 + </div>
113 + </el-col>
114 + <el-col :span="8">
115 + <div class="employer-award">
116 + <div class="award-box">
117 + <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z08.png)"></div>
118 + </div>
119 + <div class="award-title">Happyindex最受实习生喜爱雇主</div>
120 + </div>
121 + </el-col>
122 + </el-row>
123 + <hager-h1 title="Hi!海格大学所获奖项" sub="Hi！Hager University Award " style="margin: 0 0 1rem;"></hager-h1>
124 + <el-row :gutter="30" style="margin-bottom: 2rem;">
125 + <el-col :span="8">
126 + <div class="employer-award">
127 + <div class="award-box">
128 + <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z09.png)"></div>
129 + </div>
130 + <div class="award-title">最佳新型企业大学 金奖</div>
131 + </div>
132 + </el-col>
133 + <el-col :span="8">
134 + <div class="employer-award">
135 + <div class="award-box">
136 + <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z10.png)"></div>
137 + </div>
138 + <div class="award-title">U-Spring 金奖</div>
139 + </div>
140 + </el-col>
141 + <el-col :span="8">
142 + <div class="employer-award">
143 + <div class="award-box">
144 + <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z11.png)"></div>
145 + </div>
146 + <div class="award-title">布兰登霍尔HCM卓越奖 金奖</div>
147 + </div>
148 + </el-col>
149 + </el-row>
150 + </hager-box>
151 + </div>
152 + <div v-if="active_idx === 2">
153 + <hager-box>
154 + <el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
155 + <el-col :span="12">
156 + <div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z12.png)' }"></div>
157 + </el-col>
158 + <el-col :span="12">
159 + <div class="corporate-culture-box">
160 + <div class="title" style="margin-top: 2rem;">
161 + <p class="c">以人为本的家族企业</p>
162 + <p class="e">People-Oriented</p>
163 + </div>
164 + <div class="introduce" style="line-height: 2;">
165 + <p style="margin-bottom: 1rem;">
166 + 海格集团始终坚持以人为本，相信员工是成功的关键。秉承 <span style="color: #00ABE5;">真诚、勇气、正直</span> 的企业价值观，海格集团为员工创造温馨、和谐的工作氛围，员工可以从中享受灵活的工作方式。
167 + </p>
168 + </div>
169 + </div>
170 + </el-col>
171 + </el-row>
172 + <el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
173 + <el-col :span="12">
174 + <div class="corporate-culture-box">
175 + <div class="title" style="margin-top: 2rem;">
176 + <p class="c">构建未来电气世界</p>
177 + <p class="e">Vision</p>
178 + </div>
179 + <div class="introduce" style="line-height: 2;">
180 + <p style="margin-bottom: 1rem;">作为电气安装解决方案和服务供应商，海格集团始终坚持<span>可持续发展</span>，发布<span>Project 2030</span> 集团愿景，致才于构建未来的电气世界，让人们的生活更安全、更清洁、更愉悦。</p>
181 + </div>
182 + </div>
183 + </el-col>
184 + <el-col :span="12">
185 + <div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z13.png)' }"></div>
186 + </el-col>
187 + </el-row>
188 + <el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
189 + <el-col :span="12">
190 + <div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z14.png)' }"></div>
191 + </el-col>
192 + <el-col :span="12">
193 + <div class="corporate-culture-box">
194 + <div class="title" style="margin-top: 2rem;">
195 + <p class="c">人与企业共同成长</p>
196 + <p class="e">Grow Together</p>
197 + </div>
198 + <div class="introduce" style="line-height: 2;">
199 + <p style="margin-bottom: 1rem;">海格集团坚信人与企业共同成长为员工提供终身发展的机会。 <br/>
200 + <span>H!海格大学</span>帮助员工学习职业技能,让员工获得职场成长。</p>
201 + </div>
202 + </div>
203 + </el-col>
204 + </el-row>
205 + </hager-box>
206 + </div>
207 + </div>
208 +</template>
209 +
210 +<script>
211 +import mixin from 'common/mixin';
212 +import hagerBox from '@/components/common/hagerBox';
213 +import hagerH1 from '@/components/common/hagerH1.vue';
214 +
215 +export default {
216 + components: { hagerH1, hagerBox },
217 + mixins: [mixin.init],
218 + data () {
219 + return {
220 + active_idx: 0,
221 + location_options: [{
222 + value: '远程办公',
223 + label: '远程办公'
224 + }, {
225 + value: '广东省-东莞',
226 + label: '广东省-东莞'
227 + }, {
228 + value: '浙江省-杭州',
229 + label: '浙江省-杭州'
230 + }],
231 + location_value: '',
232 + job_list: [
233 + {
234 + title: '销售工程师',
235 + location: '远程办公'
236 + },
237 + {
238 + title: '产品管理主管级工程师',
239 + location: '广东省-东莞'
240 + },
241 + {
242 + title: 'QE/ 质量工程师',
243 + location: '广东省-东莞'
244 + },
245 + {
246 + title: '销售工程师',
247 + location: '浙江省-杭州'
248 + },
249 + ]
250 + }
251 + },
252 + mounted () {
253 +
254 + },
255 + methods: {
256 + onClickBtn (idx) {
257 + this.active_idx = idx;
258 + }
259 + }
260 +}
261 +</script>
262 +
263 +<style lang="less" scoped>
264 + .hager-recruit-page {
265 + .top-img {
266 + height: 25rem;
267 + background-image: url(https://cdn.ipadbiz.cn/hager/banner/banner07.png);
268 + background-size: cover;
269 + background-position: center;
270 + background-repeat: no-repeat;
271 + }
272 +
273 + .select-btn-box {
274 + margin: 2rem 0;
275 + .btn {
276 + width: 8rem;
277 + height: 2rem;
278 + line-height: 2rem;
279 + text-align: center;
280 + display: inline-block;
281 + padding: 0.5rem 0;
282 + margin-right: 1rem;
283 + border-radius: 5px;
284 + &.active {
285 + background-color: @primary-color;
286 + color: #fff;
287 + font-weight: bold;
288 + }
289 + &.normal {
290 + background-color: #F3F3F3;
291 + color: @text-color;
292 + font-weight: none;
293 + }
294 + &:hover {
295 + cursor: pointer;
296 + }
297 + }
298 + }
299 +
300 + .job-box {
301 + background: #FFFFFF;
302 + box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09);
303 + border-radius: 5px;
304 + margin-bottom: 2rem;
305 + transition: transform 0.3s ease-in-out;
306 + &:hover {
307 + cursor: pointer;
308 + transform: scale(1.01);
309 + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
310 + }
311 + .job-title {
312 + color: @secondary-color;
313 + font-weight: bold;
314 + }
315 +
316 + .job-location-box {
317 + display: flex;
318 + align-items: center;
319 + justify-content: flex-end;
320 + .job-location {
321 + margin-right: 1rem;
322 + }
323 + }
324 +
325 + }
326 +
327 + .job-img-box {
328 + background-size: 100% 100%;
329 + background-position: center;
330 + background-repeat: no-repeat;
331 + color: #fff;
332 + font-size: 0.95rem;
333 + font-weight: bold;
334 + text-align: center;
335 + display: flex;
336 + align-items: center;
337 + justify-content: center;
338 + &.email {
339 + padding: 1rem 2rem;
340 + height: 3rem;
341 + margin: 2rem 3rem;
342 + font-size: 1.25rem;
343 + }
344 + &.job {
345 + padding: 1rem 2rem;
346 + height: 9rem;
347 + flex-direction: column;
348 + font-size: 1.25rem;
349 + p {
350 + line-height: 1.75;
351 + }
352 + }
353 + }
354 +
355 + .get-more {
356 + display: flex;
357 + justify-content: center;
358 + .btn {
359 + background-color: #F56400;
360 + color: #fff;
361 + padding: 1rem 2rem;
362 + width: 5rem;
363 + margin-bottom: 2rem;
364 + &:hover {
365 + cursor: pointer;
366 + }
367 + }
368 + }
369 +
370 + .employer-award {
371 + // height: 20rem;
372 + border: 1px solid #D6D6D6;
373 + border-top-right-radius: 5px;
374 + border-top-left-radius: 5px;
375 + .award-box {
376 + // padding: 1rem;
377 + // border-bottom: 0;
378 + .award-img {
379 + width: 100%;
380 + height: 13rem;
381 + background-size: contain;
382 + background-position: center;
383 + background-repeat: no-repeat;
384 + }
385 + }
386 + .award-title {
387 + background-color: #E3F1F7;
388 + color: @secondary-color;
389 + font-weight: bold;
390 + text-align: center;
391 + padding: 1rem;
392 + }
393 + }
394 +
395 + .corporate-culture-img {
396 + width: 100%;
397 + height: 22rem;
398 + background-repeat: no-repeat;
399 + background-size: cover;
400 + background-position: center right;
401 + }
402 + .corporate-culture-box {
403 + background-color: #FFF;
404 + position: relative; /* 父容器设置为相对定位 */
405 + padding: 2rem;
406 + height: 22rem; /* 让 .about-box 撑满父容器 */
407 + box-sizing: border-box;
408 + .title {
409 + font-weight: bold;
410 + .c {
411 + font-size: 2rem;
412 + color: @secondary-color;
413 + }
414 + .e {
415 + font-size: 1.5rem;
416 + color: @primary-color;
417 + }
418 + }
419 + .introduce {
420 + line-height: 1.75;
421 + margin-top: 1rem;
422 + span {
423 + color: @primary-color;
424 + }
425 + }
426 + }
427 + }
428 +</style>