maochaoying
2 years ago
2 changed files with 343 additions and 2 deletions
-
255src/views/Index/components/Recruit/Detail/index.vue
-
90src/views/Index/components/Recruit/index.vue
@ -0,0 +1,255 @@ |
|||||
|
<template> |
||||
|
<div class="recruit_post_detail_container"> |
||||
|
<div class="main"> |
||||
|
<div class="top_simple_wrap"> |
||||
|
<div class="post_nature"> |
||||
|
<div class="nature"> |
||||
|
<div class="btn">工业设计师-全职</div> |
||||
|
<p class="slary">岗位待遇 15-20K</p> |
||||
|
</div> |
||||
|
<p class="address"> |
||||
|
工作地址：北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂 |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="skills_con"> |
||||
|
<div class="btn_skill">所需技能</div> |
||||
|
<p class="desc"> |
||||
|
犀牛、Photoshop、办公软件、Solidworks/Proe、CoreIDRAW、Adobe |
||||
|
Illustrator |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="main_content"> |
||||
|
<div class="left_content"> |
||||
|
<p class="title">工作内容</p> |
||||
|
<div class="one_piece"> |
||||
|
<img src="" class="ok" alt="" /> |
||||
|
<p class="text">准确解读产品需求，对产品进行分析设计；</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="middle_duty"> |
||||
|
<p class="title">岗位职责</p> |
||||
|
<div class="one_piece"> |
||||
|
<img src="" class="ok" alt="" /> |
||||
|
<p class="text">对工业设计饱有激情，思维活跃</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="img_con"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="bt_wrap"> |
||||
|
<div class="bt_left"> |
||||
|
<div class="one_p"> |
||||
|
<img src="" class="icon1" alt="" /> |
||||
|
<p class="font">hr@iflytop.com</p> |
||||
|
</div> |
||||
|
<div class="one_p"> |
||||
|
<img src="" class="icon2" alt="" /> |
||||
|
<p class="font">www.iflytop.com</p> |
||||
|
</div> |
||||
|
<div class="one_p"> |
||||
|
<img src="" class="icon3" alt="" /> |
||||
|
<p class="font">北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="more_btn">更多岗位</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup></script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.recruit_post_detail_container { |
||||
|
width: 100%; |
||||
|
background: #fff; |
||||
|
border-bottom: solid 6px #283fe7; |
||||
|
padding: 50px 64px 55px 64px; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex-direction: column; |
||||
|
.main { |
||||
|
flex: 1; |
||||
|
.top_simple_wrap { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 81px; |
||||
|
.post_nature { |
||||
|
margin-right: 114px; |
||||
|
.nature { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.btn { |
||||
|
width: 226px; |
||||
|
height: 44px; |
||||
|
background: #283fe7; |
||||
|
border: 2px solid #283fe7; |
||||
|
border-radius: 22px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 18px; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
margin-right: 39px; |
||||
|
} |
||||
|
.slary { |
||||
|
font-size: 18px; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
.address { |
||||
|
font-size: 18px; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
font-weight: 300; |
||||
|
color: #646a73; |
||||
|
margin-top: 19px; |
||||
|
} |
||||
|
} |
||||
|
.skills_con { |
||||
|
.btn_skill { |
||||
|
width: 142px; |
||||
|
height: 44px; |
||||
|
border: 2px solid #283fe7; |
||||
|
border-radius: 22px; |
||||
|
font-size: 18px; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
font-weight: 400; |
||||
|
color: #283fe7; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 19px; |
||||
|
} |
||||
|
.desc { |
||||
|
font-size: 18px; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
font-weight: 300; |
||||
|
color: #646a73; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.main_content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
border-bottom: solid 1px #f5f5f5; |
||||
|
padding-bottom: 37px; |
||||
|
margin-bottom: 56px; |
||||
|
.left_content { |
||||
|
margin-right: 94px; |
||||
|
width: 460px; |
||||
|
min-height: 285px; |
||||
|
.title { |
||||
|
font-size: 22px; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
margin-bottom: 33px; |
||||
|
} |
||||
|
.one_piece { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.ok { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
.text { |
||||
|
margin-left: 16px; |
||||
|
font-size: 16px; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
font-weight: 300; |
||||
|
color: #646a73; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.middle_duty { |
||||
|
flex: 1; |
||||
|
min-height: 285px; |
||||
|
.title { |
||||
|
font-size: 22px; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
margin-bottom: 33px; |
||||
|
} |
||||
|
.one_piece { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.ok { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
.text { |
||||
|
margin-left: 16px; |
||||
|
font-size: 16px; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
font-weight: 300; |
||||
|
color: #646a73; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.img_con { |
||||
|
width: 403px; |
||||
|
height: 285px; |
||||
|
border-radius: 6px; |
||||
|
overflow: hidden; |
||||
|
background: #000; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.bt_wrap { |
||||
|
width: 100%; |
||||
|
height: 30px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.bt_left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
white-space: nowrap; |
||||
|
.one_p { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 12px; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
font-weight: 400; |
||||
|
color: #646a73; |
||||
|
margin-right: 66px; |
||||
|
.icon1 { |
||||
|
width: 24px; |
||||
|
height: 15px; |
||||
|
} |
||||
|
.icon2 { |
||||
|
width: 22px; |
||||
|
height: 22px; |
||||
|
} |
||||
|
.icon3 { |
||||
|
width: 19px; |
||||
|
height: 23px; |
||||
|
} |
||||
|
.font { |
||||
|
margin-left: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.more_btn { |
||||
|
width: 120px; |
||||
|
height: 30px; |
||||
|
border: 1px solid #646a73; |
||||
|
border-radius: 15px; |
||||
|
font-size: 16px; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
font-weight: 400; |
||||
|
color: #646a73; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,18 +1,104 @@ |
|||||
<template> |
<template> |
||||
<div class="wrap"> |
<div class="wrap"> |
||||
<div class="recruit_container"></div> |
|
||||
|
<div class="recruit_container" id="recruit_container"> |
||||
|
<div class="empty" v-if="showEmpty"></div> |
||||
|
<div class="contract_title"> |
||||
|
<p class="line"></p> |
||||
|
<p class="title"> |
||||
|
产品梦工厂不只做产品,<span class="blue_font">也成就工程师的梦想</span> |
||||
|
</p> |
||||
|
<p class="detail">大量的项目实战，成就未来的你，欢迎您的加入</p> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="detail"> |
||||
|
<Detail /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup></script> |
|
||||
|
<script setup> |
||||
|
import { ref, onMounted } from 'vue' |
||||
|
import { handleScreenAuto } from '@/common/utils' |
||||
|
import Detail from './Detail' |
||||
|
onMounted(() => { |
||||
|
handleScreenAuto(showEmpty, '#recruit_container') |
||||
|
window.onresize = handleScreenAuto(showEmpty, '#recruit_container') |
||||
|
}) |
||||
|
const showEmpty = ref(false) |
||||
|
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.wrap { |
.wrap { |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
|
background: $common_bg; |
||||
|
position: relative; |
||||
.recruit_container { |
.recruit_container { |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
|
.empty { |
||||
|
min-height: 90px; |
||||
|
} |
||||
|
.contract_title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
font-family: 'SourceHanSans'; |
||||
|
background-size: 100% 100%; |
||||
|
padding: 71px 0 73px 0; |
||||
|
box-sizing: border-box; |
||||
|
position: relative; |
||||
|
white-space: nowrap; |
||||
|
transform-style: preserve-3d; |
||||
|
.line { |
||||
|
width: 39px; |
||||
|
height: 5px; |
||||
|
background: #283fe7; |
||||
|
border-radius: 3px; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
.img { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%) translateY(-50%) translateZ(-1px); |
||||
|
width: 543px; |
||||
|
height: 61px; |
||||
|
} |
||||
|
.title { |
||||
|
font-size: 30px; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
margin-bottom: 21px; |
||||
|
.blue_font { |
||||
|
color: $theme_color; |
||||
|
} |
||||
|
} |
||||
|
.detail { |
||||
|
font-size: 18px; |
||||
|
font-weight: 300; |
||||
|
color: #646a73; |
||||
|
font-family: 'SourceHanSansLight'; |
||||
|
} |
||||
|
} |
||||
|
.content { |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 76px 84px 76px; |
||||
|
position: relative; |
||||
|
height: 800px; |
||||
|
.detail { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue