|
|
|
@ -1,34 +1,38 @@ |
|
|
|
<template> |
|
|
|
<div class="wrap"> |
|
|
|
<div class="empty" v-if="showEmpty"></div> |
|
|
|
<div class="recruit_container" id="recruit_container"> |
|
|
|
<div class="contract_title" id="post_page_title_ani"> |
|
|
|
<p class="line"></p> |
|
|
|
<p class="title"> |
|
|
|
产品梦工厂不只做产品,<span class="blue_font">也成就工程师的梦想</span> |
|
|
|
</p> |
|
|
|
<p class="detail">大量的项目实战，成就未来的你，欢迎您的加入</p> |
|
|
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<div |
|
|
|
:class="item.isMerge ? 'merge' : ''" |
|
|
|
v-for="(item, index) in postList" |
|
|
|
:key="item.id" |
|
|
|
> |
|
|
|
<Card |
|
|
|
:merge="item.isMerge" |
|
|
|
:handleDetail="handleDetail" |
|
|
|
:i="index + 1 + ''" |
|
|
|
:postInfo="item" |
|
|
|
/> |
|
|
|
<div class="flex_center"> |
|
|
|
<div class="recruit_container" id="recruit_container"> |
|
|
|
<div class="contract_title" id="post_page_title_ani"> |
|
|
|
<p class="line"></p> |
|
|
|
<p class="title"> |
|
|
|
产品梦工厂不只做产品,<span class="blue_font" |
|
|
|
>也成就工程师的梦想</span |
|
|
|
> |
|
|
|
</p> |
|
|
|
<p class="detail">大量的项目实战，成就未来的你，欢迎您的加入</p> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="detail animate__animated animate__zoomInDown" |
|
|
|
v-if="showDetail" |
|
|
|
v-on:mouseleave="mouseleave" |
|
|
|
id="post_detail_ani" |
|
|
|
> |
|
|
|
<Detail :postId="postId" :handleDetail="handleDetail" /> |
|
|
|
<div class="content"> |
|
|
|
<div |
|
|
|
:class="item.isMerge ? 'merge' : ''" |
|
|
|
v-for="(item, index) in postList" |
|
|
|
:key="item.id" |
|
|
|
> |
|
|
|
<Card |
|
|
|
:merge="item.isMerge" |
|
|
|
:handleDetail="handleDetail" |
|
|
|
:i="index + 1 + ''" |
|
|
|
:postInfo="item" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="detail animate__animated animate__zoomInDown" |
|
|
|
v-if="showDetail" |
|
|
|
v-on:mouseleave="mouseleave" |
|
|
|
id="post_detail_ani" |
|
|
|
> |
|
|
|
<Detail :postId="postId" :handleDetail="handleDetail" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -66,78 +70,85 @@ const showEmpty = ref(true) |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
flex-direction: column; |
|
|
|
.empty { |
|
|
|
min-height: 90px; |
|
|
|
} |
|
|
|
.recruit_container { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.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; |
|
|
|
.flex_center { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
flex: 1; |
|
|
|
.recruit_container { |
|
|
|
// width: 100%; |
|
|
|
// height: 100%; |
|
|
|
.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'; |
|
|
|
} |
|
|
|
} |
|
|
|
.detail { |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 300; |
|
|
|
color: #646a73; |
|
|
|
font-family: 'SourceHanSansLight'; |
|
|
|
} |
|
|
|
} |
|
|
|
.content { |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
padding-bottom: 80px; |
|
|
|
// padding: 0 76px 80px 76px; |
|
|
|
position: relative; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 311px 311px 415px 311px 311px; |
|
|
|
column-gap: 57px; |
|
|
|
row-gap: 27px; |
|
|
|
grid-template-areas: '. . a . .' '. . a . .'; |
|
|
|
.merge { |
|
|
|
grid-area: a; |
|
|
|
} |
|
|
|
.detail { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
.content { |
|
|
|
width: 100%; |
|
|
|
min-height: calc(100% + 1px); |
|
|
|
transform: translateY(-1px); |
|
|
|
box-sizing: border-box; |
|
|
|
padding-bottom: 80px; |
|
|
|
padding: 0 76px 50px 76px; |
|
|
|
box-sizing: border-box; |
|
|
|
position: relative; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 311px 311px 415px 311px 311px; |
|
|
|
column-gap: 57px; |
|
|
|
row-gap: 27px; |
|
|
|
grid-template-areas: '. . a . .' '. . a . .'; |
|
|
|
.merge { |
|
|
|
grid-area: a; |
|
|
|
} |
|
|
|
.detail { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
width: 100%; |
|
|
|
min-height: calc(100% + 1px); |
|
|
|
transform: translateY(-1px); |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
maochaoying
2 years ago