|
|
|
@ -1,7 +1,9 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<div class="single-banner single-banner-overview"> |
|
|
|
|
<img class="banner-img" :src="modules[0].form.pic" alt=""> |
|
|
|
|
<img class="banner-img" |
|
|
|
|
:src="modules[0].form.pic" |
|
|
|
|
alt=""> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<h6 class="banner-title">{{ modules[0].form.title }}</h6> |
|
|
|
|
</div> |
|
|
|
@ -10,58 +12,89 @@ |
|
|
|
|
<div class="article"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<h6 class="talent-title">{{ modules[1].form.title }}</h6> |
|
|
|
|
<div class="talent-text" v-html="modules[1].form.des"></div> |
|
|
|
|
<div class="talent-text" |
|
|
|
|
v-html="modules[1].form.des"></div> |
|
|
|
|
<ul class="recruit"> |
|
|
|
|
<li> |
|
|
|
|
<img class="pic" :src="modules[2].form.pic" alt=""> |
|
|
|
|
<img class="pic" |
|
|
|
|
:src="modules[2].form.pic" |
|
|
|
|
alt=""> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<div class="flex j-between a-center"> |
|
|
|
|
<h6 class="c-title">{{ modules[3].form.title }}</h6> |
|
|
|
|
<div v-if="isLink(modules[3].form.link.linkName)" class="more" @click="openLink(modules[3].form)">查看更多 ></div> |
|
|
|
|
<div v-if="isLink(modules[3].form.link.linkName)" |
|
|
|
|
class="more" |
|
|
|
|
@click="openLink(modules[3].form)">查看更多 ></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="des" v-html="modules[3].form.des"></div> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="modules[3].form.des"></div> |
|
|
|
|
<p class="hot">热门岗位</p> |
|
|
|
|
<div class="labels"> |
|
|
|
|
<p v-for="(item, i) in modules[4].list" :key="i" class="label">{{ item.title }}</p> |
|
|
|
|
<template v-for="(item, i) in modules[4].list"> |
|
|
|
|
<p v-if="item.isEnable" |
|
|
|
|
:key="i" |
|
|
|
|
class="label">{{ item.title }}</p> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img class="pic" :src="modules[5].form.pic" alt=""> |
|
|
|
|
<img class="pic" |
|
|
|
|
:src="modules[5].form.pic" |
|
|
|
|
alt=""> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<div class="flex j-between a-center"> |
|
|
|
|
<h6 class="c-title">{{ modules[6].form.title }}</h6> |
|
|
|
|
<div v-if="isLink(modules[6].form.link.linkName)" class="more" @click="openLink(modules[6].form)">查看更多 ></div> |
|
|
|
|
<div v-if="isLink(modules[6].form.link.linkName)" |
|
|
|
|
class="more" |
|
|
|
|
@click="openLink(modules[6].form)">查看更多 ></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="des" v-html="modules[6].form.des"></div> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="modules[6].form.des"></div> |
|
|
|
|
<p class="hot">热门岗位</p> |
|
|
|
|
<div class="labels"> |
|
|
|
|
<p v-for="(item, i) in modules[7].list" :key="i" class="label">{{ item.title }}</p> |
|
|
|
|
<template v-for="(item, i) in modules[7].list"> |
|
|
|
|
<p v-if="item.isEnable" |
|
|
|
|
:key="i" |
|
|
|
|
class="label">{{ item.title }}</p> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<ul class="notice"> |
|
|
|
|
<li |
|
|
|
|
:class="{ 'cursor-pointer': isLink(modules[8].form.link.linkName) }" |
|
|
|
|
<li :class="{ 'cursor-pointer': isLink(modules[8].form.link.linkName) }" |
|
|
|
|
@click="openLink(modules[8].form)"> |
|
|
|
|
<img class="pic" :src="modules[8].form.pic" alt=""> |
|
|
|
|
<img class="pic" |
|
|
|
|
:src="modules[8].form.pic" |
|
|
|
|
alt=""> |
|
|
|
|
<p class="text">{{ modules[8].form.title }}</p> |
|
|
|
|
</li> |
|
|
|
|
<li |
|
|
|
|
:class="{ 'cursor-pointer': isLink(modules[9].form.link.linkName) }" |
|
|
|
|
<li :class="{ 'cursor-pointer': isLink(modules[9].form.link.linkName) }" |
|
|
|
|
@click="openLink(modules[8].form)"> |
|
|
|
|
<img class="pic" :src="modules[9].form.pic" alt=""> |
|
|
|
|
<img class="pic" |
|
|
|
|
:src="modules[9].form.pic" |
|
|
|
|
alt=""> |
|
|
|
|
<p class="text">{{ modules[9].form.title }}</p> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnTo"></el-tree> |
|
|
|
|
<el-tree class="column" |
|
|
|
|
ref="column" |
|
|
|
|
:data="columns" |
|
|
|
|
highlight-current |
|
|
|
|
:expand-on-click-node="false" |
|
|
|
|
:props="defaultProps" |
|
|
|
|
node-key="id" |
|
|
|
|
@node-click="columnTo"></el-tree> |
|
|
|
|
|
|
|
|
|
<p class="l-title">{{$t('column.hot')}}</p> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)"> |
|
|
|
|
<li v-for="(item, i) in hots" |
|
|
|
|
:key="i" |
|
|
|
|
:title="item.title" |
|
|
|
|
@click="toArtice(item)"> |
|
|
|
|
<p class="text">{{ item.title }}</p> |
|
|
|
|
<span class="date">{{ item.releaseTime }}</span> |
|
|
|
|
</li> |
|
|
|
@ -69,7 +102,10 @@ |
|
|
|
|
|
|
|
|
|
<p class="l-title">{{$t('column.latestNews')}}</p> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)"> |
|
|
|
|
<li v-for="(item, i) in news" |
|
|
|
|
:key="i" |
|
|
|
|
:title="item.title" |
|
|
|
|
@click="toArtice(item)"> |
|
|
|
|
<p class="text">{{ item.title }}</p> |
|
|
|
|
<span class="date">{{ item.releaseTime }}</span> |
|
|
|
|
</li> |
|
|
|
@ -88,7 +124,7 @@ import Util from '@/libs/util' |
|
|
|
|
import WOW from 'wow.js' |
|
|
|
|
export default { |
|
|
|
|
mixins: [mixins, articleMixins], |
|
|
|
|
data() { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
columnId: '', |
|
|
|
|
form: {}, |
|
|
|
@ -101,13 +137,13 @@ export default { |
|
|
|
|
hots: [] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
mounted () { |
|
|
|
|
this.getColumn() |
|
|
|
|
this.getArticle() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 获取文章详情 |
|
|
|
|
getInfo() { |
|
|
|
|
getInfo () { |
|
|
|
|
// 预览/详情 |
|
|
|
|
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => { |
|
|
|
|
if (data.length) { |
|
|
|
@ -118,34 +154,34 @@ export default { |
|
|
|
|
this.modules = json |
|
|
|
|
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json) |
|
|
|
|
} |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
// 资讯 |
|
|
|
|
getColumn() { |
|
|
|
|
getColumn () { |
|
|
|
|
this.$post(this.api.listWithTreeMenuVisible, { |
|
|
|
|
siteId: this.$route.query.siteId || this.$store.state.content.site, |
|
|
|
|
columnName: '', |
|
|
|
|
templateId: '', |
|
|
|
|
typeId : '', |
|
|
|
|
typeId: '', |
|
|
|
|
isSort: 1 |
|
|
|
|
}).then(({ data }) => { |
|
|
|
|
this.columns = data |
|
|
|
|
this.getInfo() |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
|
|
|
|
|
this.$post(`${this.api.hotContent}?siteId=${this.$route.query.siteId || this.$store.state.content.site}`).then(({ data }) => { |
|
|
|
|
this.hots = Util.removeTag(data) |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
// 最新资讯 |
|
|
|
|
getArticle() { |
|
|
|
|
getArticle () { |
|
|
|
|
this.$post(this.api.newlyPublishedArticles, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 5, |
|
|
|
|
siteId: this.$route.query.siteId || this.$store.state.content.site |
|
|
|
|
}).then(({ data }) => { |
|
|
|
|
this.news = Util.removeTag(data.records) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
@ -153,9 +189,9 @@ export default { |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@import url(../../plugins/wow/animate.css); |
|
|
|
|
@import "../../styles/page/page.scss"; |
|
|
|
|
@import '../../styles/page/page.scss'; |
|
|
|
|
.wrap { |
|
|
|
|
background-color: #F9FAFA; |
|
|
|
|
background-color: #f9fafa; |
|
|
|
|
} |
|
|
|
|
.content { |
|
|
|
|
width: 1400px; |
|
|
|
@ -169,7 +205,7 @@ export default { |
|
|
|
|
padding-bottom: 10px; |
|
|
|
|
font-size: 1.2rem; |
|
|
|
|
color: #666; |
|
|
|
|
border-bottom: 1px solid #EAEEF2; |
|
|
|
|
border-bottom: 1px solid #eaeef2; |
|
|
|
|
} |
|
|
|
|
.talent-text { |
|
|
|
|
margin: 20px 0; |
|
|
|
@ -198,8 +234,8 @@ export default { |
|
|
|
|
columns: #333; |
|
|
|
|
} |
|
|
|
|
.more { |
|
|
|
|
font-size: .8rem; |
|
|
|
|
color: #0648A8; |
|
|
|
|
font-size: 0.8rem; |
|
|
|
|
color: #0648a8; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
.des { |
|
|
|
@ -247,7 +283,7 @@ export default { |
|
|
|
|
line-height: 66px; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #fff; |
|
|
|
|
background: rgba(32,57,81,0.68); |
|
|
|
|
background: rgba(32, 57, 81, 0.68); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right { |
|
|
|
@ -259,7 +295,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
/deep/.el-tree-node__content { |
|
|
|
|
height: 44px; |
|
|
|
|
background-color: #E5EDF8; |
|
|
|
|
background-color: #e5edf8; |
|
|
|
|
border-bottom: 2px solid #fff; |
|
|
|
|
} |
|
|
|
|
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { |
|
|
|
@ -270,7 +306,7 @@ export default { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
li { |
|
|
|
|
padding: 16px 0; |
|
|
|
|
border-bottom: 1px solid #D8D8D8; |
|
|
|
|
border-bottom: 1px solid #d8d8d8; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
margin-bottom: 5px; |
|
|
|
@ -292,7 +328,8 @@ export default { |
|
|
|
|
} |
|
|
|
|
.article { |
|
|
|
|
flex-direction: column; |
|
|
|
|
.left, .right { |
|
|
|
|
.left, |
|
|
|
|
.right { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.left { |
|
|
|
@ -331,10 +368,9 @@ export default { |
|
|
|
|
flex-direction: column; |
|
|
|
|
.pic { |
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.texts { |
|
|
|
|
margin-top: .8rem; |
|
|
|
|
margin-top: 0.8rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -345,7 +381,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right{ |
|
|
|
|
.right { |
|
|
|
|
width: 100%; |
|
|
|
|
.el-tree { |
|
|
|
|
display: none; |
|
|
|
|