You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
8.7 KiB
343 lines
8.7 KiB
<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">
|
|
{{ `${postInfo?.postName} - ${postInfo?.nature}` }}
|
|
</div>
|
|
<p class="slary">岗位待遇 {{ postInfo?.salary }}</p>
|
|
</div>
|
|
<p class="address">工作地址：{{ postInfo?.address }}</p>
|
|
</div>
|
|
<div class="skills_con">
|
|
<div class="btn_skill">所需技能</div>
|
|
<p class="desc">
|
|
{{ postInfo?.skills }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="
|
|
postInfo?.hasMargin
|
|
? postInfo?.hasPadding
|
|
? 'main_content has_margin has_padding'
|
|
: 'main_content has_margin'
|
|
: 'main_content'
|
|
"
|
|
>
|
|
<div class="left_content">
|
|
<p class="title">工作内容</p>
|
|
<div
|
|
class="one_piece"
|
|
v-for="(item, index) in postInfo?.jobContent"
|
|
:key="index"
|
|
>
|
|
<img v-lazy="Ok" class="ok" alt="" />
|
|
<p class="text">{{ item }};</p>
|
|
</div>
|
|
</div>
|
|
<div class="middle_duty">
|
|
<p class="title">岗位职责</p>
|
|
<div
|
|
class="one_piece"
|
|
v-for="(item, index) in postInfo?.duty"
|
|
:key="index"
|
|
>
|
|
<img v-lazy="Ok" class="ok" alt="" />
|
|
<p class="text">{{ item }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="img_con"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bt_wrap">
|
|
<div class="bt_left">
|
|
<div class="one_p">
|
|
<img v-lazy="Email" class="icon1" alt="" />
|
|
<p class="font">hr@iflytop.com</p>
|
|
</div>
|
|
<div class="one_p">
|
|
<img v-lazy="Earth" class="icon2" alt="" />
|
|
<p class="font">www.iflytop.com</p>
|
|
</div>
|
|
<div class="one_p">
|
|
<img v-lazy="Address" class="icon3" alt="" />
|
|
<p class="font">北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="more_btn"
|
|
@click="cancleDetail"
|
|
v-on:mouseover="mouseover"
|
|
v-on:mouseleave="mouseleave"
|
|
>
|
|
<span class="return_btn">返回列表</span>
|
|
<img v-lazy="arrowShow ? Arrow1 : Arrow" class="icon" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Arrow1 from '@/assets/img/recruit/jiantou1.png'
|
|
import Arrow from '@/assets/img/recruit/jiantou2.png'
|
|
import Email from '@/assets/img/recruit/youjian.png'
|
|
import Earth from '@/assets/img/recruit/wangzhi.png'
|
|
import Address from '@/assets/img/recruit/zuobiao.png'
|
|
import Ok from '@/assets/img/recruit/duigou.png'
|
|
import { postDetail } from '@/mock/post'
|
|
import { ref } from 'vue'
|
|
const postInfo = postDetail[props.postId]
|
|
const props = defineProps({
|
|
handleDetail: Function,
|
|
postId: String,
|
|
})
|
|
const arrowShow = ref(false)
|
|
const mouseover = () => {
|
|
arrowShow.value = true
|
|
}
|
|
const mouseleave = () => {
|
|
arrowShow.value = false
|
|
}
|
|
const cancleDetail = () => {
|
|
props.handleDetail(false)
|
|
}
|
|
</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;
|
|
transition-property: all;
|
|
transition-duration: 0.7s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
.btn:hover {
|
|
background: #fff;
|
|
color: $theme_color;
|
|
}
|
|
.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;
|
|
transition-property: all;
|
|
transition-duration: 0.7s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
.btn_skill:hover {
|
|
color: #fff;
|
|
background: #283fe7;
|
|
}
|
|
.desc {
|
|
font-size: 18px;
|
|
font-family: 'SourceHanSans';
|
|
font-weight: 300;
|
|
color: #646a73;
|
|
}
|
|
}
|
|
}
|
|
.main_content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
border-bottom: solid 1px #f5f5f5;
|
|
// padding-bottom: 37px;
|
|
// margin-bottom: 56px;
|
|
box-sizing: border-box;
|
|
.left_content {
|
|
margin-right: 94px;
|
|
width: 460px;
|
|
height: 100%;
|
|
.title {
|
|
font-size: 22px;
|
|
font-family: 'SourceHanSans';
|
|
font-weight: bold;
|
|
color: #000000;
|
|
margin-bottom: 33px;
|
|
}
|
|
.one_piece {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 21px;
|
|
.ok {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.text {
|
|
margin-left: 16px;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
font-family: 'SourceHanSans';
|
|
font-weight: 300;
|
|
color: #646a73;
|
|
}
|
|
}
|
|
}
|
|
.middle_duty {
|
|
flex: 1;
|
|
min-height: 285px;
|
|
padding-right: 40px;
|
|
.title {
|
|
font-size: 22px;
|
|
font-family: 'SourceHanSans';
|
|
font-weight: bold;
|
|
color: #000000;
|
|
margin-bottom: 33px;
|
|
}
|
|
.one_piece {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 21px;
|
|
.ok {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.text {
|
|
margin-left: 16px;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
font-family: 'SourceHanSans';
|
|
font-weight: 300;
|
|
color: #646a73;
|
|
}
|
|
}
|
|
}
|
|
.img_con {
|
|
width: 403px;
|
|
height: 285px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
background: url(../../../../../assets/img/recruit/bangonglou.png)
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.has_margin {
|
|
margin-bottom: 56px;
|
|
}
|
|
.has_padding {
|
|
padding-bottom: 37px;
|
|
}
|
|
}
|
|
.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;
|
|
cursor: pointer;
|
|
transition-property: all;
|
|
transition-duration: 0.7s;
|
|
animation-fill-mode: forwards;
|
|
.icon {
|
|
width: 5px;
|
|
height: 10px;
|
|
margin-left: 13px;
|
|
}
|
|
}
|
|
.more_btn:hover {
|
|
background: $theme_color;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|