Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
997549de 1 parent 02527fc2

招聘信息和新闻中心自适应调整

Inline Side-by-side
Showing 2 changed files with 412 additions and 147 deletions
1 <!-- 1 <!--
2 * @Date: 2024-10-18 12:05:44 2 * @Date: 2024-10-18 12:05:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-18 17:37:53 4 + * @LastEditTime: 2024-10-22 15:02:54
5 * @FilePath: /hager/src/views/news/index.vue 5 * @FilePath: /hager/src/views/news/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-news-page"> 9 <div class="hager-news-page">
10 - <hager-box class="top-img" :style="{ height: '25rem', backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }"> 10 + <hager-box :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }">
11 <div v-if="!is_xs" class="banner-text-wrapper top-center"> 11 <div v-if="!is_xs" class="banner-text-wrapper top-center">
12 <div class="text"> 12 <div class="text">
13 <p class="title" style="margin-bottom: 0;">新闻中心</p> 13 <p class="title" style="margin-bottom: 0;">新闻中心</p>
...@@ -20,17 +20,28 @@ ...@@ -20,17 +20,28 @@
20 </div> 20 </div>
21 </hager-box> 21 </hager-box>
22 <hager-box style="margin: 1rem 0;"> 22 <hager-box style="margin: 1rem 0;">
23 - <div class="hager-news-list"> 23 + <div v-if="!is_xs" class="hager-news-list">
24 <div class="card" v-for="(item, index) in news_list" :key="index"> 24 <div class="card" v-for="(item, index) in news_list" :key="index">
25 <img :src="item.src" alt="学校图片" class="card-image"> 25 <img :src="item.src" alt="学校图片" class="card-image">
26 <div class="news-item"> 26 <div class="news-item">
27 - <div class="news-item-title">{{ item.title }}</div> 27 + <div :class="news-item-title">{{ item.title }}</div>
28 <p class="news-item-sub" v-clamp="2">{{ item.sub }}</p> 28 <p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
29 <p class="news-item-content" v-clamp="3">{{ item.content }}</p> 29 <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
30 <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div> 30 <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
31 </div> 31 </div>
32 </div> 32 </div>
33 </div> 33 </div>
34 + <div v-else class="hager-news-list xs">
35 + <div class="card" v-for="(item, index) in news_list" :key="index">
36 + <img :src="item.src" alt="学校图片" class="card-image">
37 + <div class="news-item">
38 + <div class="news-item-title xs">{{ item.title }}</div>
39 + <p class="news-item-sub">{{ item.sub }}</p>
40 + <p class="news-item-content">{{ item.content }}</p>
41 + <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
42 + </div>
43 + </div>
44 + </div>
34 </hager-box> 45 </hager-box>
35 <hager-box> 46 <hager-box>
36 <hager-load-more></hager-load-more> 47 <hager-load-more></hager-load-more>
...@@ -92,6 +103,10 @@ export default { ...@@ -92,6 +103,10 @@ export default {
92 background-size: cover; 103 background-size: cover;
93 background-position: center; 104 background-position: center;
94 position: relative; 105 position: relative;
106 + height: 25rem;
107 + &.xs {
108 + height: 12rem;
109 + }
95 .top-center { 110 .top-center {
96 position: absolute; 111 position: absolute;
97 transform: translateY(50%); /* 垂直与水平居中 */ 112 transform: translateY(50%); /* 垂直与水平居中 */
...@@ -103,6 +118,10 @@ export default { ...@@ -103,6 +118,10 @@ export default {
103 display: flex; 118 display: flex;
104 flex-wrap: wrap; 119 flex-wrap: wrap;
105 justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */ 120 justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
121 + &.xs {
122 + display: block;
123 + margin-top: 0;
124 + }
106 .card { 125 .card {
107 flex: 0 0 48.5%; /* 宽度为 1/3 */ 126 flex: 0 0 48.5%; /* 宽度为 1/3 */
108 margin-bottom: 2.5rem; /* 在元素之间添加间距 */ 127 margin-bottom: 2.5rem; /* 在元素之间添加间距 */
...@@ -134,6 +153,9 @@ export default { ...@@ -134,6 +153,9 @@ export default {
134 white-space: nowrap; /* 不换行 */ 153 white-space: nowrap; /* 不换行 */
135 overflow: hidden; /* 隐藏超出部分 */ 154 overflow: hidden; /* 隐藏超出部分 */
136 text-overflow: ellipsis; /* 用省略号表示被截断的部分 */ 155 text-overflow: ellipsis; /* 用省略号表示被截断的部分 */
156 + &.xs {
157 + white-space: wrap;
158 + }
137 } 159 }
138 .news-item-sub { 160 .news-item-sub {
139 color: @primary-color; 161 color: @primary-color;
......
1 <!-- 1 <!--
2 * @Date: 2024-10-18 13:45:53 2 * @Date: 2024-10-18 13:45:53
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-21 11:36:18 4 + * @LastEditTime: 2024-10-22 16:47:27
5 * @FilePath: /hager/src/views/recruit.vue 5 * @FilePath: /hager/src/views/recruit.vue
6 * @Description: 招聘信息 6 * @Description: 招聘信息
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-recruit-page"> 9 <div class="hager-recruit-page">
10 - <div class="top-img"></div> 10 + <div :class="['top-img', is_xs ? 'xs' : '']"></div>
11 - <hager-box> 11 + <hager-box v-if="!is_xs">
12 <div class="select-btn-box"> 12 <div class="select-btn-box">
13 <div @click="onClickBtn(0)" :class="['btn', active_idx === 0 ? 'active' : 'normal']">热招岗位</div> 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> 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> 15 <div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">企业文化</div>
16 </div> 16 </div>
17 </hager-box> 17 </hager-box>
18 - <div v-if="active_idx === 0"> 18 + <div v-else class="select-btn-box xs" style="padding: 1rem;">
19 - <hager-box> 19 + <el-row :gutter="10">
20 - <hager-h1 title="热招岗位" sub="Hot Job" style="margin: 0 0 1rem;"></hager-h1> 20 + <el-col :span="8">
21 - <div style="margin: 2rem 0;"> 21 + <div @click="onClickBtn(0)" :class="['btn xs', active_idx === 0 ? 'active' : 'normal']">热招岗位</div>
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> 22 </el-col>
38 - <el-col :span="12"> 23 + <el-col :span="8">
39 - <div class="job-location-box"> 24 + <div @click="onClickBtn(1)" :class="['btn xs', active_idx === 1 ? 'active' : 'normal']">雇主奖项</div>
40 - <span class="job-location">地点：{{ job.location }}</span> 25 + </el-col>
41 - <img style="width: 1rem; height: 1rem;" src="https://cdn.ipadbiz.cn/hager/icon/rr@2x.png"> 26 + <el-col :span="8">
42 - </div> 27 + <div @click="onClickBtn(2)" :class="['btn xs', active_idx === 2 ? 'active' : 'normal']">企业文化</div>
43 </el-col> 28 </el-col>
44 </el-row> 29 </el-row>
45 </div> 30 </div>
46 - </div> 31 + <div v-if="active_idx === 0">
47 - </hager-box> 32 + <hager-box v-if="!is_xs">
48 - <hager-box> 33 + <el-row>
49 - <hager-load-more></hager-load-more>
50 - </hager-box>
51 - <hager-box style="margin: 1rem 0 3rem;">
52 - <div style="font-size: 1.15rem; text-align: center; margin: 1rem 0;">
53 - <p style="margin-bottom: 0.5rem;">全国多地热招同步开启</p>
54 - <p>转发给身边小伙伴，快来投递简历吧!</p>
55 - </div>
56 - <div class="job-img-box email" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z01.png)'}">
57 - <div>简历投递邮箱:hr.communication@hager.com</div>
58 - </div>
59 - <div class="job-img-box job" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z02.png)'}">
60 - <p>经理职位 8000元</p>
61 - <p>高级工程师/主管 6000元</p>
62 - <p>工程师/专员 5000元</p>
63 - </div>
64 - </hager-box>
65 - </div>
66 - <div v-if="active_idx === 1">
67 - <hager-box>
68 - <hager-h1 title="海格集团雇主奖项" sub="Hager Group Employer Awards" style="margin: 0 0 1rem;"></hager-h1>
69 - <el-row :gutter="30" style="margin-bottom: 2rem;">
70 <el-col :span="8"> 34 <el-col :span="8">
71 - <div class="employer-award"> 35 + <div class="recruit-box-wrapper">
72 - <div class="award-box"> 36 + <div class="recruit-box">
73 - <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z03.png)"></div> 37 + <div class="title">
38 + <p class="c">热招岗位</p>
39 + <p class="e">Hot Job</p>
74 </div> 40 </div>
75 - <div class="award-title">Kununu最受推荐雇主</div> 41 + <div class="introduce" v-clamp="7">在海格工作，意味着通过让人们的生活更安全、更清洁、更愉快来塑造明天的电气世界。海格善于寻找激发创造力的人，了解能源管理一切的人，确切知道如何让智能家居真正智能的人......所有人齐心协力解决未来的挑战。也许你就是他们其中一员！</div>
76 - </div>
77 - </el-col>
78 - <el-col :span="8">
79 - <div class="employer-award">
80 - <div class="award-box">
81 - <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z04.png)"></div>
82 </div> 42 </div>
83 - <div class="award-title">glassdoor最佳雇主</div> 43 + <div class="goto-btn">点击查看更多热门岗位</div>
84 </div> 44 </div>
85 </el-col> 45 </el-col>
86 - <el-col :span="8"> 46 + <el-col :span="16">
87 - <div class="employer-award"> 47 + <div class="recruit-img"></div>
88 - <div class="award-box">
89 - <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z05.png)"></div>
90 - </div>
91 - <div class="award-title">Capital法国最佳雇主</div>
92 - </div>
93 </el-col> 48 </el-col>
94 </el-row> 49 </el-row>
95 - <el-row :gutter="30" style="margin-bottom: 2rem;"> 50 + </hager-box>
96 - <el-col :span="8"> 51 + <div v-else>
97 - <div class="employer-award"> 52 + <div class="recruit-img xs"></div>
98 - <div class="award-box"> 53 + <div class="recruit-box-wrapper">
99 - <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z06.png)"></div> 54 + <div class="recruit-box">
55 + <div class="title">
56 + <p class="c">热招岗位</p>
57 + <p class="e">Hot Job</p>
100 </div> 58 </div>
101 - <div class="award-title">Stern最佳雇主 电子电气工程类别</div> 59 + <div class="introduce" v-clamp="7">在海格工作，意味着通过让人们的生活更安全、更清洁、更愉快来塑造明天的电气世界。海格善于寻找激发创造力的人，了解能源管理一切的人，确切知道如何让智能家居真正智能的人......所有人齐心协力解决未来的挑战。也许你就是他们其中一员！</div>
102 </div> 60 </div>
103 - </el-col> 61 + <div class="goto-btn">点击查看更多热门岗位</div>
104 - <el-col :span="8">
105 - <div class="employer-award">
106 - <div class="award-box">
107 - <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z07.png)"></div>
108 </div> 62 </div>
109 - <div class="award-title">Focus最佳雇主 电气技术类别</div>
110 </div> 63 </div>
111 - </el-col> 64 + <hager-box class="box-n">
112 - <el-col :span="8"> 65 + <div>
113 - <div class="employer-award"> 66 + <swiper ref="mySwiper" class="swiper" :options="swiperOption" @slideChange="onSlideChange">
114 - <div class="award-box"> 67 + <swiper-slide v-for="(item, index) in recruit_list" :key="index">
115 - <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z08.png)"></div> 68 + <div class="recruit-wrapper">
69 + <div class="img-box" :style="{ backgroundImage: 'url('+item.cover+')' }"></div>
70 + <div class="text-box">
71 + <div class="title">{{ item.title }}</div>
72 + <div class="sub">{{ item.sub }}</div>
73 + <div class="content" v-clamp="3">{{ item.content }}</div>
116 </div> 74 </div>
117 - <div class="award-title">Happyindex最受实习生喜爱雇主</div>
118 </div> 75 </div>
119 - </el-col> 76 + </swiper-slide>
120 - </el-row> 77 + </swiper>
121 - <hager-h1 title="Hi!海格大学所获奖项" sub="Hi！Hager University Award " style="margin: 0 0 1rem;"></hager-h1> 78 + <div v-if="recruit_list.length > designSlidesPerView || is_xs" class="xs-control">
122 - <el-row :gutter="30" style="margin-bottom: 2rem;"> 79 + <div>
123 - <el-col :span="8"> 80 + <i :class="['el-icon-arrow-left', activeDesignIndex === 0 ? 'disabled' : '']"@click="prevDesignBtn()"></i>
124 - <div class="employer-award"> 81 + <i :class="['el-icon-arrow-right', reach_design_end ? 'disabled' : '']" @click="nextDesignBtn()"></i>
125 - <div class="award-box">
126 - <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z09.png)"></div>
127 </div> 82 </div>
128 - <div class="award-title">最佳新型企业大学 金奖</div>
129 </div> 83 </div>
130 - </el-col>
131 - <el-col :span="8">
132 - <div class="employer-award">
133 - <div class="award-box">
134 - <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z10.png)"></div>
135 </div> 84 </div>
136 - <div class="award-title">U-Spring 金奖</div> 85 + </hager-box>
86 + <hager-box class="job-img-wrapper">
87 + <div :class="['job-text', is_xs ? 'xs' : '']">
88 + <p style="margin-bottom: 0.5rem;">全国多地热招同步开启</p>
89 + <p>转发给身边小伙伴，快来投递简历吧!</p>
137 </div> 90 </div>
138 - </el-col> 91 + <div :class="['job-img-box', 'email', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z01.png)'}">
139 - <el-col :span="8"> 92 + <div>简历投递邮箱:hr.communication@hager.com</div>
140 - <div class="employer-award"> 93 + </div>
94 + <div :class="['job-img-box', 'job', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z02.png)'}">
95 + <p>经理职位 8000元</p>
96 + <p>高级工程师/主管 6000元</p>
97 + <p>工程师/专员 5000元</p>
98 + </div>
99 + </hager-box>
100 + </div>
101 + <div v-if="active_idx === 1">
102 + <hager-box>
103 + <div v-for="(item, index) in awards_list" :key="index">
104 + <hager-h1 :title="item.zh" :sub="item.en" style="margin: 0 0 1rem;"></hager-h1>
105 + <el-row :gutter="30" style="margin-bottom: 2rem;" v-for="(row, idx) in item.rows" :key="idx">
106 + <el-col :span="is_xs ? 24 : 8" v-for="(x, i) in row" :key="i">
107 + <div :class="['employer-award', is_xs ? 'xs' : '']">
141 <div class="award-box"> 108 <div class="award-box">
142 - <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z11.png)"></div> 109 + <div class="award-img" :style="{backgroundImage: 'url('+ x.img +')'}"></div>
143 </div> 110 </div>
144 - <div class="award-title">布兰登霍尔HCM卓越奖 金奖</div> 111 + <div class="award-title">{{ x.title }}</div>
145 </div> 112 </div>
146 </el-col> 113 </el-col>
147 </el-row> 114 </el-row>
115 + </div>
148 </hager-box> 116 </hager-box>
149 </div> 117 </div>
150 <div v-if="active_idx === 2"> 118 <div v-if="active_idx === 2">
151 - <hager-box> 119 + <hager-box v-if="!is_xs">
152 - <el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;"> 120 + <el-row v-for="(item, index) in culture_list" :key="index" style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
153 - <el-col :span="12">
154 - <div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z12.png)' }"></div>
155 - </el-col>
156 <el-col :span="12"> 121 <el-col :span="12">
157 - <div class="corporate-culture-box"> 122 + <div v-if="index % 2 === 0" class="corporate-culture-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
123 + <div v-else class="corporate-culture-box">
158 <div class="title" style="margin-top: 2rem;"> 124 <div class="title" style="margin-top: 2rem;">
159 - <p class="c">以人为本的家族企业</p> 125 + <p class="c">{{ item.zh }}</p>
160 - <p class="e">People-Oriented</p> 126 + <p class="e">{{ item.en }}</p>
161 </div> 127 </div>
162 <div class="introduce" style="line-height: 2;"> 128 <div class="introduce" style="line-height: 2;">
163 - <p style="margin-bottom: 1rem;"> 129 + <p style="margin-bottom: 1rem;" v-html="item.text"></p>
164 - 海格集团始终坚持以人为本，相信员工是成功的关键。秉承 <span style="color: #00ABE5;">真诚、勇气、正直</span> 的企业价值观，海格集团为员工创造温馨、和谐的工作氛围，员工可以从中享受灵活的工作方式。
165 - </p>
166 </div> 130 </div>
167 </div> 131 </div>
168 </el-col> 132 </el-col>
169 - </el-row>
170 - <el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
171 <el-col :span="12"> 133 <el-col :span="12">
172 - <div class="corporate-culture-box"> 134 + <div v-if="index % 2 === 0" class="corporate-culture-box">
173 <div class="title" style="margin-top: 2rem;"> 135 <div class="title" style="margin-top: 2rem;">
174 - <p class="c">构建未来电气世界</p> 136 + <p class="c">{{ item.zh }}</p>
175 - <p class="e">Vision</p> 137 + <p class="e">{{ item.en }}</p>
176 </div> 138 </div>
177 <div class="introduce" style="line-height: 2;"> 139 <div class="introduce" style="line-height: 2;">
178 - <p style="margin-bottom: 1rem;">作为电气安装解决方案和服务供应商，海格集团始终坚持<span>可持续发展</span>，发布<span>Project 2030</span> 集团愿景，致才于构建未来的电气世界，让人们的生活更安全、更清洁、更愉悦。</p> 140 + <p style="margin-bottom: 1rem;" v-html="item.text"></p>
179 </div> 141 </div>
180 </div> 142 </div>
181 - </el-col> 143 + <div v-else class="corporate-culture-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
182 - <el-col :span="12">
183 - <div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z13.png)' }"></div>
184 </el-col> 144 </el-col>
185 </el-row> 145 </el-row>
186 - <el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;"> 146 + </hager-box>
187 - <el-col :span="12"> 147 + <div v-if="is_xs" v-for="(item, index) in culture_list" :key="index" style="padding: 1rem;">
188 - <div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z14.png)' }"></div> 148 + <div class="corporate-culture-img xs" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
189 - </el-col> 149 + <div class="corporate-culture-box xs">
190 - <el-col :span="12">
191 - <div class="corporate-culture-box">
192 <div class="title" style="margin-top: 2rem;"> 150 <div class="title" style="margin-top: 2rem;">
193 - <p class="c">人与企业共同成长</p> 151 + <p class="c">{{ item.zh }}</p>
194 - <p class="e">Grow Together</p> 152 + <p class="e">{{ item.en }}</p>
195 </div> 153 </div>
196 <div class="introduce" style="line-height: 2;"> 154 <div class="introduce" style="line-height: 2;">
197 - <p style="margin-bottom: 1rem;">海格集团坚信人与企业共同成长为员工提供终身发展的机会。 <br/> 155 + <p style="margin-bottom: 1rem;" v-html="item.text"></p>
198 - <span>H!海格大学</span>帮助员工学习职业技能,让员工获得职场成长。</p> 156 + </div>
199 </div> 157 </div>
200 </div> 158 </div>
201 - </el-col>
202 - </el-row>
203 - </hager-box>
204 </div> 159 </div>
205 </div> 160 </div>
206 </template> 161 </template>
...@@ -245,15 +200,150 @@ export default { ...@@ -245,15 +200,150 @@ export default {
245 title: '销售工程师', 200 title: '销售工程师',
246 location: '浙江省-杭州' 201 location: '浙江省-杭州'
247 }, 202 },
203 + ],
204 + awards_list: [{
205 + id: '1',
206 + zh: '海格集团雇主奖项',
207 + en: 'Hager Group Employer Awards',
208 + rows: [
209 + [{
210 + title: 'Kununu最受推荐雇主',
211 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z03.png'
212 + }, {
213 + title: 'glassdoor最佳雇主',
214 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z04.png'
215 + }, {
216 + title: 'Capital法国最佳雇主',
217 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z05.png'
218 + }],
219 + [{
220 + title: 'Stern最佳雇主 电子电气工程类别',
221 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z06.png'
222 + }, {
223 + title: 'Focus最佳雇主 电气技术类别',
224 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z07.png'
225 + }, {
226 + title: 'Happyindex最受实习生喜爱雇主',
227 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z08.png'
228 + }]
229 + ]
230 + }, {
231 + id: '2',
232 + zh: 'Hi!海格大学所获奖项',
233 + en: 'Hi！Hager University Award',
234 + rows: [
235 + [{
236 + title: '最佳新型企业大学 金奖',
237 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z09.png'
238 + }, {
239 + title: 'U-Spring 金奖',
240 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z10.png'
241 + }, {
242 + title: '布兰登霍尔HCM卓越奖 金奖',
243 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z11.png'
244 + }],
248 ] 245 ]
246 + }],
247 + culture_list: [{
248 + id: '1',
249 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z12.png',
250 + zh: '以人为本的家族企业',
251 + en: 'People-Oriented',
252 + text: '海格集团始终坚持以人为本，相信员工是成功的关键。秉承 <span style="color: #00ABE5;">真诚、勇气、正直</span> 的企业价值观，海格集团为员工创造温馨、和谐的工作氛围，员工可以从中享受灵活的工作方式。'
253 + }, {
254 + id: '2',
255 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z13.png',
256 + zh: '构建未来电气世界',
257 + en: 'Vision',
258 + text: '作为电气安装解决方案和服务供应商，海格集团始终坚持<span>可持续发展</span>，发布<span>Project 2030</span> 集团愿景，致才于构建未来的电气世界，让人们的生活更安全、更清洁、更愉悦。'
259 + }, {
260 + id: '3',
261 + img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z14.png',
262 + zh: '人与企业共同成长',
263 + en: 'Grow Together',
264 + text: '海格集团坚信人与企业共同成长为员工提供终身发展的机会。 <br/> <span>H!海格大学</span>帮助员工学习职业技能,让员工获得职场成长。'
265 + }],
266 + recruit_list: [{
267 + cover: 'https://cdn.ipadbiz.cn/hager/img/recruit/r02@2x.png',
268 + title: '灵活性',
269 + sub: 'Flexibility',
270 + content: '我们希望你能够根据自己的专长和需求，高质量地完成工作。这意味着员工需要具备很好的灵活性，并为任何特殊的需求寻找解决方案。'
271 + }, {
272 + cover: 'https://cdn.ipadbiz.cn/hager/img/recruit/r03@2x.png',
273 + title: '健康与福祉',
274 + sub: 'Health and Wellbeing',
275 + content: '我们不断制定措施，以满足团队在安全领域的需求，并符合当地规范。海格集团有许多培训和锻炼的机会，让员工与海格共同成长。'
276 + }, {
277 + cover: 'https://cdn.ipadbiz.cn/hager/img/recruit/r04@2x.png',
278 + title: '工作与生活平衡',
279 + sub: 'Work-Life Balance',
280 + content: '工作之余我们拥有美好的生活，在海格集团，我们致力于让员工实现工作与生活之间的平衡。'
281 + }],
282 + swiperOption: {
283 + slidesPerView: 2,
284 + spaceBetween: 20,
285 + preventClicks : true,
286 + slideToClickedSlide: false,
287 + touchRatio: 0,
288 + breakpoints: {
289 + 1480: {
290 + slidesPerView: 3,
291 + spaceBetween: 30
292 + },
293 + 1024: {
294 + slidesPerView: 3,
295 + spaceBetween: 30
296 + },
297 + 768: {
298 + slidesPerView: 3,
299 + spaceBetween: 20
300 + },
301 + 640: {
302 + slidesPerView: 2,
303 + spaceBetween: 20
304 + },
305 + 320: {
306 + slidesPerView: 1,
307 + spaceBetween: 10
308 + },
309 + 160: {
310 + slidesPerView: 1,
311 + spaceBetween: 0
312 + }
313 + }
314 + },
315 + activeDesignIndex: 0,
316 + reach_design_end: false,
317 + designSlidesPerView: 3,
249 } 318 }
250 }, 319 },
251 mounted () { 320 mounted () {
252 - 321 + this.$nextTick(() => {
322 + this.$refs.mySwiper.$swiper?.on('breakpoint', (swiper) => {
323 + // breakpoint时 显示的条数
324 + this.designSlidesPerView = swiper.slidesPerView
325 + });
326 + });
253 }, 327 },
254 methods: { 328 methods: {
255 onClickBtn (idx) { 329 onClickBtn (idx) {
256 this.active_idx = idx; 330 this.active_idx = idx;
331 + },
332 + prevDesignBtn () {
333 + this.$refs.mySwiper.$swiper.slidePrev();
334 + },
335 + nextDesignBtn () {
336 + this.$refs.mySwiper.$swiper.slideNext();
337 + },
338 + onSlideChange () {
339 + this.activeDesignIndex = this.$refs.mySwiper.$swiper.activeIndex;
340 + const isEnd = this.$refs.mySwiper.$swiper.isEnd;
341 +
342 + if (isEnd) {
343 + this.reach_design_end = true;
344 + } else {
345 + this.reach_design_end = false;
346 + }
257 } 347 }
258 } 348 }
259 } 349 }
...@@ -267,10 +357,17 @@ export default { ...@@ -267,10 +357,17 @@ export default {
267 background-size: cover; 357 background-size: cover;
268 background-position: center; 358 background-position: center;
269 background-repeat: no-repeat; 359 background-repeat: no-repeat;
360 + &.xs {
361 + height: 12rem;
362 + }
270 } 363 }
271 364
272 .select-btn-box { 365 .select-btn-box {
273 margin: 2rem 0; 366 margin: 2rem 0;
367 + &.xs {
368 + margin-top: 0;
369 + margin-bottom: 0;
370 + }
274 .btn { 371 .btn {
275 width: 8rem; 372 width: 8rem;
276 height: 2rem; 373 height: 2rem;
...@@ -279,7 +376,9 @@ export default { ...@@ -279,7 +376,9 @@ export default {
279 display: inline-block; 376 display: inline-block;
280 padding: 0.5rem 0; 377 padding: 0.5rem 0;
281 margin-right: 1rem; 378 margin-right: 1rem;
282 - border-radius: 5px; 379 + &.xs {
380 + width: 100%;
381 + }
283 &.active { 382 &.active {
284 background-color: @primary-color; 383 background-color: @primary-color;
285 color: #fff; 384 color: #fff;
...@@ -296,6 +395,19 @@ export default { ...@@ -296,6 +395,19 @@ export default {
296 } 395 }
297 } 396 }
298 397
398 + .job-img-wrapper {
399 + margin: 1rem 0 3rem;
400 + .job-text {
401 + font-size: 1.15rem;
402 + text-align: center;
403 + margin: 1rem 0;
404 + &.xs {
405 + font-size: 1rem;
406 + margin-top: 0;
407 + }
408 + }
409 + }
410 +
299 .job-box { 411 .job-box {
300 background: #FFFFFF; 412 background: #FFFFFF;
301 box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); 413 box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09);
...@@ -339,6 +451,13 @@ export default { ...@@ -339,6 +451,13 @@ export default {
339 height: 3rem; 451 height: 3rem;
340 margin: 2rem 3rem; 452 margin: 2rem 3rem;
341 font-size: 1.25rem; 453 font-size: 1.25rem;
454 + &.xs {
455 + height: 2rem;
456 + font-size: 0.9rem;
457 + padding: 1rem 0;
458 + margin: 1rem 0;
459 + text-shadow: 0px 1px 6px #D25F10;
460 + }
342 } 461 }
343 &.job { 462 &.job {
344 padding: 1rem 2rem; 463 padding: 1rem 2rem;
...@@ -348,6 +467,12 @@ export default { ...@@ -348,6 +467,12 @@ export default {
348 p { 467 p {
349 line-height: 1.75; 468 line-height: 1.75;
350 } 469 }
470 + &.xs {
471 + height: 4rem;
472 + font-size: 0.9rem;
473 + padding: 1rem 0;
474 + margin-top: 2rem;
475 + }
351 } 476 }
352 } 477 }
353 478
...@@ -356,6 +481,9 @@ export default { ...@@ -356,6 +481,9 @@ export default {
356 border: 1px solid #D6D6D6; 481 border: 1px solid #D6D6D6;
357 border-top-right-radius: 5px; 482 border-top-right-radius: 5px;
358 border-top-left-radius: 5px; 483 border-top-left-radius: 5px;
484 + &.xs {
485 + margin-bottom: 1rem;
486 + }
359 .award-box { 487 .award-box {
360 // padding: 1rem; 488 // padding: 1rem;
361 // border-bottom: 0; 489 // border-bottom: 0;
...@@ -381,7 +509,12 @@ export default { ...@@ -381,7 +509,12 @@ export default {
381 height: 22rem; 509 height: 22rem;
382 background-repeat: no-repeat; 510 background-repeat: no-repeat;
383 background-size: cover; 511 background-size: cover;
384 - background-position: center right; 512 + background-position: center;
513 + &.xs {
514 + height: 14rem;
515 + border-top-left-radius: 5px;;
516 + border-top-right-radius: 5px;;
517 + }
385 } 518 }
386 .corporate-culture-box { 519 .corporate-culture-box {
387 background-color: #FFF; 520 background-color: #FFF;
...@@ -389,6 +522,9 @@ export default { ...@@ -389,6 +522,9 @@ export default {
389 padding: 2rem; 522 padding: 2rem;
390 height: 22rem; /* 让 .about-box 撑满父容器 */ 523 height: 22rem; /* 让 .about-box 撑满父容器 */
391 box-sizing: border-box; 524 box-sizing: border-box;
525 + &.xs {
526 + background-color: #F7F7F7;
527 + }
392 .title { 528 .title {
393 font-weight: bold; 529 font-weight: bold;
394 .c { 530 .c {
...@@ -408,5 +544,112 @@ export default { ...@@ -408,5 +544,112 @@ export default {
408 } 544 }
409 } 545 }
410 } 546 }
547 +
548 + .recruit-img {
549 + width: 100%;
550 + height: 30rem;
551 + background-repeat: no-repeat;
552 + background-size: cover;
553 + background-position: center;
554 + background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/r01@2x.png);
555 + &.xs {
556 + height: 15rem;
557 + margin-top: 1rem;
558 + }
559 + }
560 + .recruit-box-wrapper {
561 + background-color: #F7F7F7;
562 + position: relative; /* 父容器设置为相对定位 */
563 + padding: 2rem;
564 + height: 30rem; /* 让 .about-box 撑满父容器 */
565 + box-sizing: border-box;
566 + &.xs {
567 + height: auto;
568 + padding: 2rem;
569 + background-color: #FFF;
570 + }
571 + .recruit-box {
572 + // top: 30%;
573 + // transform: translateY(30%);
574 + margin-top: 2rem;
575 + &.xs {
576 + transform: none;
577 + }
578 + }
579 + .title {
580 + font-weight: bold;
581 + .c {
582 + font-size: 2rem;
583 + color: @secondary-color;
584 + &.xs {
585 + font-size: 1.5rem;
586 + }
587 + }
588 + .e {
589 + font-size: 1.5rem;
590 + color: @primary-color;
591 + &.xs {
592 + font-size: 1.1rem;
593 + }
594 + }
595 + }
596 + .introduce {
597 + line-height: 1.75;
598 + margin-top: 1rem;
599 + }
600 + .goto-btn {
601 + background-color: #F56400;
602 + color: #fff;
603 + text-align: center;
604 + padding: 1.25rem 0;
605 + font-weight: bold;
606 + margin-top: 1rem;
607 + }
608 + }
609 +
610 + .recruit-wrapper {
611 + // border: 1px solid #eee;
612 + .img-box {
613 + width: 100%;
614 + height: 15rem; /* 根据需要设置高度 */
615 + background-size: 100% 100%; /* 强制背景图填满整个容器 */
616 + background-position: center;
617 + background-repeat: no-repeat; /* 防止图片重复 */
618 + }
619 + .text-box {
620 + padding: 1rem;
621 + height: 10rem;
622 + background-color: #F7F7F7;
623 + .title {
624 + color: @secondary-color;
625 + font-weight: bold;
626 + font-size: 1.25rem;
627 + }
628 + .sub {
629 + color: @primary-color;
630 + font-weight: bold;
631 + margin: 0.5rem 0;
632 + }
633 + .content {
634 + line-height: 1.7;
635 + }
636 + }
637 + }
638 +
639 + .xs-control {
640 + display: flex;
641 + justify-content: flex-end;
642 + margin-top: 1rem;
643 + i {
644 + font-size: 1.35rem;
645 + color: #EE6D10;
646 + &:hover {
647 + cursor: pointer;
648 + }
649 + &.disabled {
650 + color: #ccc;
651 + }
652 + }
653 + }
411 } 654 }
412 </style> 655 </style>
......