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> |
|||
<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> |
|||
</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> |
|||
.wrap { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: $common_bg; |
|||
position: relative; |
|||
.recruit_container { |
|||
width: 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> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue