maochaoying 2 years ago
parent
commit
f2d0ba04d6
  1. 255
      src/views/Index/components/Recruit/Detail/index.vue
  2. 90
      src/views/Index/components/Recruit/index.vue

255
src/views/Index/components/Recruit/Detail/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/ProeCoreIDRAWAdobe
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>

90
src/views/Index/components/Recruit/index.vue

@ -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>
Loading…
Cancel
Save