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 423 additions and 158 deletions
<!--
* @Date: 2024-10-18 12:05:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 17:37:53
* @LastEditTime: 2024-10-22 15:02:54
* @FilePath: /hager/src/views/news/index.vue
* @Description: 文件描述
-->
<template>
<div class="hager-news-page">
<hager-box class="top-img" :style="{ height: '25rem', backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }">
<hager-box :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }">
<div v-if="!is_xs" class="banner-text-wrapper top-center">
<div class="text">
<p class="title" style="margin-bottom: 0;">新闻中心</p>
......@@ -20,17 +20,28 @@
</div>
</hager-box>
<hager-box style="margin: 1rem 0;">
<div class="hager-news-list">
<div v-if="!is_xs" class="hager-news-list">
<div class="card" v-for="(item, index) in news_list" :key="index">
<img :src="item.src" alt="学校图片" class="card-image">
<div class="news-item">
<div class="news-item-title">{{ item.title }}</div>
<div :class="news-item-title">{{ item.title }}</div>
<p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
<p class="news-item-content" v-clamp="3">{{ item.content }}</p>
<div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
</div>
</div>
</div>
<div v-else class="hager-news-list xs">
<div class="card" v-for="(item, index) in news_list" :key="index">
<img :src="item.src" alt="学校图片" class="card-image">
<div class="news-item">
<div class="news-item-title xs">{{ item.title }}</div>
<p class="news-item-sub">{{ item.sub }}</p>
<p class="news-item-content">{{ item.content }}</p>
<div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
</div>
</div>
</div>
</hager-box>
<hager-box>
<hager-load-more></hager-load-more>
......@@ -92,6 +103,10 @@ export default {
background-size: cover;
background-position: center;
position: relative;
height: 25rem;
&.xs {
height: 12rem;
}
.top-center {
position: absolute;
transform: translateY(50%); /* 垂直与水平居中 */
......@@ -103,6 +118,10 @@ export default {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
&.xs {
display: block;
margin-top: 0;
}
.card {
flex: 0 0 48.5%; /* 宽度为 1/3 */
margin-bottom: 2.5rem; /* 在元素之间添加间距 */
......@@ -134,6 +153,9 @@ export default {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 用省略号表示被截断的部分 */
&.xs {
white-space: wrap;
}
}
.news-item-sub {
color: @primary-color;
......
<!--
* @Date: 2024-10-18 13:45:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-21 11:36:18
* @LastEditTime: 2024-10-22 16:47:27
* @FilePath: /hager/src/views/recruit.vue
* @Description: 招聘信息
-->
<template>
<div class="hager-recruit-page">
<div class="top-img"></div>
<hager-box>
<div :class="['top-img', is_xs ? 'xs' : '']"></div>
<hager-box v-if="!is_xs">
<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-else class="select-btn-box xs" style="padding: 1rem;">
<el-row :gutter="10">
<el-col :span="8">
<div @click="onClickBtn(0)" :class="['btn xs', active_idx === 0 ? 'active' : 'normal']">热招岗位</div>
</el-col>
<el-col :span="8">
<div @click="onClickBtn(1)" :class="['btn xs', active_idx === 1 ? 'active' : 'normal']">雇主奖项</div>
</el-col>
<el-col :span="8">
<div @click="onClickBtn(2)" :class="['btn xs', active_idx === 2 ? 'active' : 'normal']">企业文化</div>
</el-col>
</el-row>
</div>
<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>
<hager-box v-if="!is_xs">
<el-row>
<el-col :span="8">
<div class="recruit-box-wrapper">
<div class="recruit-box">
<div class="title">
<p class="c">热招岗位</p>
<p class="e">Hot Job</p>
</div>
<div class="introduce" v-clamp="7">在海格工作，意味着通过让人们的生活更安全、更清洁、更愉快来塑造明天的电气世界。海格善于寻找激发创造力的人，了解能源管理一切的人，确切知道如何让智能家居真正智能的人......所有人齐心协力解决未来的挑战。也许你就是他们其中一员！</div>
</div>
<div class="goto-btn">点击查看更多热门岗位</div>
</div>
</el-col>
<el-col :span="16">
<div class="recruit-img"></div>
</el-col>
</el-row>
</hager-box>
<div v-else>
<div class="recruit-img xs"></div>
<div class="recruit-box-wrapper">
<div class="recruit-box">
<div class="title">
<p class="c">热招岗位</p>
<p class="e">Hot Job</p>
</div>
<div class="introduce" v-clamp="7">在海格工作，意味着通过让人们的生活更安全、更清洁、更愉快来塑造明天的电气世界。海格善于寻找激发创造力的人，了解能源管理一切的人，确切知道如何让智能家居真正智能的人......所有人齐心协力解决未来的挑战。也许你就是他们其中一员！</div>
</div>
<div class="goto-btn">点击查看更多热门岗位</div>
</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>
<hager-box class="box-n">
<div>
<swiper ref="mySwiper" class="swiper" :options="swiperOption" @slideChange="onSlideChange">
<swiper-slide v-for="(item, index) in recruit_list" :key="index">
<div class="recruit-wrapper">
<div class="img-box" :style="{ backgroundImage: 'url('+item.cover+')' }"></div>
<div class="text-box">
<div class="title">{{ item.title }}</div>
<div class="sub">{{ item.sub }}</div>
<div class="content" v-clamp="3">{{ item.content }}</div>
</div>
</el-col>
</el-row>
</div>
</swiper-slide>
</swiper>
<div v-if="recruit_list.length > designSlidesPerView || is_xs" class="xs-control">
<div>
<i :class="['el-icon-arrow-left', activeDesignIndex === 0 ? 'disabled' : '']"@click="prevDesignBtn()"></i>
<i :class="['el-icon-arrow-right', reach_design_end ? 'disabled' : '']" @click="nextDesignBtn()"></i>
</div>
</div>
</div>
</hager-box>
<hager-box>
<hager-load-more></hager-load-more>
</hager-box>
<hager-box style="margin: 1rem 0 3rem;">
<div style="font-size: 1.15rem; text-align: center; margin: 1rem 0;">
<hager-box class="job-img-wrapper">
<div :class="['job-text', is_xs ? 'xs' : '']">
<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 :class="['job-img-box', 'email', is_xs ? 'xs' : '']" :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)'}">
<div :class="['job-img-box', 'job', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z02.png)'}">
<p>经理职位 8000元</p>
<p>高级工程师/主管 6000元</p>
<p>工程师/专员 5000元</p>
......@@ -65,142 +100,62 @@
</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 v-for="(item, index) in awards_list" :key="index">
<hager-h1 :title="item.zh" :sub="item.en" style="margin: 0 0 1rem;"></hager-h1>
<el-row :gutter="30" style="margin-bottom: 2rem;" v-for="(row, idx) in item.rows" :key="idx">
<el-col :span="is_xs ? 24 : 8" v-for="(x, i) in row" :key="i">
<div :class="['employer-award', is_xs ? 'xs' : '']">
<div class="award-box">
<div class="award-img" :style="{backgroundImage: 'url('+ x.img +')'}"></div>
</div>
<div class="award-title">{{ x.title }}</div>
</div>
<div class="award-title">布兰登霍尔HCM卓越奖 金奖</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</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>
<hager-box v-if="!is_xs">
<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;">
<el-col :span="12">
<div class="corporate-culture-box">
<div v-if="index % 2 === 0" class="corporate-culture-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
<div v-else class="corporate-culture-box">
<div class="title" style="margin-top: 2rem;">
<p class="c">以人为本的家族企业</p>
<p class="e">People-Oriented</p>
<p class="c">{{ item.zh }}</p>
<p class="e">{{ item.en }}</p>
</div>
<div class="introduce" style="line-height: 2;">
<p style="margin-bottom: 1rem;">
海格集团始终坚持以人为本，相信员工是成功的关键。秉承 <span style="color: #00ABE5;">真诚、勇气、正直</span> 的企业价值观，海格集团为员工创造温馨、和谐的工作氛围，员工可以从中享受灵活的工作方式。
</p>
<p style="margin-bottom: 1rem;" v-html="item.text"></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 v-if="index % 2 === 0" class="corporate-culture-box">
<div class="title" style="margin-top: 2rem;">
<p class="c">构建未来电气世界</p>
<p class="e">Vision</p>
<p class="c">{{ item.zh }}</p>
<p class="e">{{ item.en }}</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>
<p style="margin-bottom: 1rem;" v-html="item.text"></p>
</div>
</div>
<div v-else class="corporate-culture-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
</el-col>
</el-row>
</hager-box>
<div v-if="is_xs" v-for="(item, index) in culture_list" :key="index" style="padding: 1rem;">
<div class="corporate-culture-img xs" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
<div class="corporate-culture-box xs">
<div class="title" style="margin-top: 2rem;">
<p class="c">{{ item.zh }}</p>
<p class="e">{{ item.en }}</p>
</div>
<div class="introduce" style="line-height: 2;">
<p style="margin-bottom: 1rem;" v-html="item.text"></p>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -245,15 +200,150 @@ export default {
title: '销售工程师',
location: '浙江省-杭州'
},
]
],
awards_list: [{
id: '1',
zh: '海格集团雇主奖项',
en: 'Hager Group Employer Awards',
rows: [
[{
title: 'Kununu最受推荐雇主',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z03.png'
}, {
title: 'glassdoor最佳雇主',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z04.png'
}, {
title: 'Capital法国最佳雇主',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z05.png'
}],
[{
title: 'Stern最佳雇主 电子电气工程类别',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z06.png'
}, {
title: 'Focus最佳雇主 电气技术类别',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z07.png'
}, {
title: 'Happyindex最受实习生喜爱雇主',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z08.png'
}]
]
}, {
id: '2',
zh: 'Hi!海格大学所获奖项',
en: 'Hi！Hager University Award',
rows: [
[{
title: '最佳新型企业大学 金奖',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z09.png'
}, {
title: 'U-Spring 金奖',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z10.png'
}, {
title: '布兰登霍尔HCM卓越奖 金奖',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z11.png'
}],
]
}],
culture_list: [{
id: '1',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z12.png',
zh: '以人为本的家族企业',
en: 'People-Oriented',
text: '海格集团始终坚持以人为本，相信员工是成功的关键。秉承 <span style="color: #00ABE5;">真诚、勇气、正直</span> 的企业价值观，海格集团为员工创造温馨、和谐的工作氛围，员工可以从中享受灵活的工作方式。'
}, {
id: '2',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z13.png',
zh: '构建未来电气世界',
en: 'Vision',
text: '作为电气安装解决方案和服务供应商，海格集团始终坚持<span>可持续发展</span>，发布<span>Project 2030</span> 集团愿景，致才于构建未来的电气世界，让人们的生活更安全、更清洁、更愉悦。'
}, {
id: '3',
img: 'https://cdn.ipadbiz.cn/hager/img/recruit/z14.png',
zh: '人与企业共同成长',
en: 'Grow Together',
text: '海格集团坚信人与企业共同成长为员工提供终身发展的机会。 <br/> <span>H!海格大学</span>帮助员工学习职业技能,让员工获得职场成长。'
}],
recruit_list: [{
cover: 'https://cdn.ipadbiz.cn/hager/img/recruit/r02@2x.png',
title: '灵活性',
sub: 'Flexibility',
content: '我们希望你能够根据自己的专长和需求，高质量地完成工作。这意味着员工需要具备很好的灵活性，并为任何特殊的需求寻找解决方案。'
}, {
cover: 'https://cdn.ipadbiz.cn/hager/img/recruit/r03@2x.png',
title: '健康与福祉',
sub: 'Health and Wellbeing',
content: '我们不断制定措施，以满足团队在安全领域的需求，并符合当地规范。海格集团有许多培训和锻炼的机会，让员工与海格共同成长。'
}, {
cover: 'https://cdn.ipadbiz.cn/hager/img/recruit/r04@2x.png',
title: '工作与生活平衡',
sub: 'Work-Life Balance',
content: '工作之余我们拥有美好的生活，在海格集团，我们致力于让员工实现工作与生活之间的平衡。'
}],
swiperOption: {
slidesPerView: 2,
spaceBetween: 20,
preventClicks : true,
slideToClickedSlide: false,
touchRatio: 0,
breakpoints: {
1480: {
slidesPerView: 3,
spaceBetween: 30
},
1024: {
slidesPerView: 3,
spaceBetween: 30
},
768: {
slidesPerView: 3,
spaceBetween: 20
},
640: {
slidesPerView: 2,
spaceBetween: 20
},
320: {
slidesPerView: 1,
spaceBetween: 10
},
160: {
slidesPerView: 1,
spaceBetween: 0
}
}
},
activeDesignIndex: 0,
reach_design_end: false,
designSlidesPerView: 3,
}
},
mounted () {
this.$nextTick(() => {
this.$refs.mySwiper.$swiper?.on('breakpoint', (swiper) => {
// breakpoint时 显示的条数
this.designSlidesPerView = swiper.slidesPerView
});
});
},
methods: {
onClickBtn (idx) {
this.active_idx = idx;
},
prevDesignBtn () {
this.$refs.mySwiper.$swiper.slidePrev();
},
nextDesignBtn () {
this.$refs.mySwiper.$swiper.slideNext();
},
onSlideChange () {
this.activeDesignIndex = this.$refs.mySwiper.$swiper.activeIndex;
const isEnd = this.$refs.mySwiper.$swiper.isEnd;
if (isEnd) {
this.reach_design_end = true;
} else {
this.reach_design_end = false;
}
}
}
}
......@@ -267,10 +357,17 @@ export default {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
&.xs {
height: 12rem;
}
}
.select-btn-box {
margin: 2rem 0;
&.xs {
margin-top: 0;
margin-bottom: 0;
}
.btn {
width: 8rem;
height: 2rem;
......@@ -279,7 +376,9 @@ export default {
display: inline-block;
padding: 0.5rem 0;
margin-right: 1rem;
border-radius: 5px;
&.xs {
width: 100%;
}
&.active {
background-color: @primary-color;
color: #fff;
......@@ -296,6 +395,19 @@ export default {
}
}
.job-img-wrapper {
margin: 1rem 0 3rem;
.job-text {
font-size: 1.15rem;
text-align: center;
margin: 1rem 0;
&.xs {
font-size: 1rem;
margin-top: 0;
}
}
}
.job-box {
background: #FFFFFF;
box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09);
......@@ -339,6 +451,13 @@ export default {
height: 3rem;
margin: 2rem 3rem;
font-size: 1.25rem;
&.xs {
height: 2rem;
font-size: 0.9rem;
padding: 1rem 0;
margin: 1rem 0;
text-shadow: 0px 1px 6px #D25F10;
}
}
&.job {
padding: 1rem 2rem;
......@@ -348,6 +467,12 @@ export default {
p {
line-height: 1.75;
}
&.xs {
height: 4rem;
font-size: 0.9rem;
padding: 1rem 0;
margin-top: 2rem;
}
}
}
......@@ -356,6 +481,9 @@ export default {
border: 1px solid #D6D6D6;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
&.xs {
margin-bottom: 1rem;
}
.award-box {
// padding: 1rem;
// border-bottom: 0;
......@@ -381,7 +509,12 @@ export default {
height: 22rem;
background-repeat: no-repeat;
background-size: cover;
background-position: center right;
background-position: center;
&.xs {
height: 14rem;
border-top-left-radius: 5px;;
border-top-right-radius: 5px;;
}
}
.corporate-culture-box {
background-color: #FFF;
......@@ -389,6 +522,9 @@ export default {
padding: 2rem;
height: 22rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
&.xs {
background-color: #F7F7F7;
}
.title {
font-weight: bold;
.c {
......@@ -408,5 +544,112 @@ export default {
}
}
}
.recruit-img {
width: 100%;
height: 30rem;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/r01@2x.png);
&.xs {
height: 15rem;
margin-top: 1rem;
}
}
.recruit-box-wrapper {
background-color: #F7F7F7;
position: relative; /* 父容器设置为相对定位 */
padding: 2rem;
height: 30rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
&.xs {
height: auto;
padding: 2rem;
background-color: #FFF;
}
.recruit-box {
// top: 30%;
// transform: translateY(30%);
margin-top: 2rem;
&.xs {
transform: none;
}
}
.title {
font-weight: bold;
.c {
font-size: 2rem;
color: @secondary-color;
&.xs {
font-size: 1.5rem;
}
}
.e {
font-size: 1.5rem;
color: @primary-color;
&.xs {
font-size: 1.1rem;
}
}
}
.introduce {
line-height: 1.75;
margin-top: 1rem;
}
.goto-btn {
background-color: #F56400;
color: #fff;
text-align: center;
padding: 1.25rem 0;
font-weight: bold;
margin-top: 1rem;
}
}
.recruit-wrapper {
// border: 1px solid #eee;
.img-box {
width: 100%;
height: 15rem; /* 根据需要设置高度 */
background-size: 100% 100%; /* 强制背景图填满整个容器 */
background-position: center;
background-repeat: no-repeat; /* 防止图片重复 */
}
.text-box {
padding: 1rem;
height: 10rem;
background-color: #F7F7F7;
.title {
color: @secondary-color;
font-weight: bold;
font-size: 1.25rem;
}
.sub {
color: @primary-color;
font-weight: bold;
margin: 0.5rem 0;
}
.content {
line-height: 1.7;
}
}
}
.xs-control {
display: flex;
justify-content: flex-end;
margin-top: 1rem;
i {
font-size: 1.35rem;
color: #EE6D10;
&:hover {
cursor: pointer;
}
&.disabled {
color: #ccc;
}
}
}
}
</style>
......