parent
18ff1c99a7
commit
a80a307666
19 changed files with 467 additions and 106 deletions
@ -0,0 +1,208 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<div class="content" style="width: 1400px;"> |
||||||
|
<Breadcrumb ref="breadcrumb" :data="'装置概况/' + form.title"/> |
||||||
|
<div class="article"> |
||||||
|
<div class="left"> |
||||||
|
<h2>{{ form.title }}</h2> |
||||||
|
<div class="meta">日期：{{ form.activityStartTime + ' ~ ' + form.activityEndTime }}</div> |
||||||
|
<div class="meta">地址：{{ form.offlineLocation }}</div> |
||||||
|
<div class="meta">线上：{{ form.onlineLocation }}</div> |
||||||
|
<div class="meta">主讲人：{{ form.keynoteSpeaker }}</div> |
||||||
|
|
||||||
|
<h6>内容介绍</h6> |
||||||
|
<div v-html="form.mainBody"></div> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" ></el-tree> |
||||||
|
|
||||||
|
<p class="l-title">热点内容</p> |
||||||
|
<ul class="list"> |
||||||
|
<li> |
||||||
|
<p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p> |
||||||
|
<span class="date">2022-08-09</span> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p> |
||||||
|
<span class="date">2022-08-09</span> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p> |
||||||
|
<span class="date">2022-08-09</span> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
|
||||||
|
<p class="l-title">最新资讯</p> |
||||||
|
<ul class="list"> |
||||||
|
<li v-for="(item, i) in news" :key="i"> |
||||||
|
<p class="text">{{ item.title }}</p> |
||||||
|
<span class="date">{{ item.createTime }}</span> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Setting from '@/setting' |
||||||
|
import Util from '@/libs/util' |
||||||
|
import Breadcrumb from '@/components/breadcrumb' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
id: this.$route.query.id, |
||||||
|
columnId: '', |
||||||
|
form: {}, |
||||||
|
columnBanner: '', |
||||||
|
columns: [], |
||||||
|
defaultProps: { |
||||||
|
value: 'id', |
||||||
|
label: 'columnName' |
||||||
|
}, |
||||||
|
news: [], |
||||||
|
files: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
components: { |
||||||
|
Breadcrumb |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
'$route'() { |
||||||
|
this.id = this.$route.query.id |
||||||
|
this.getInfo() |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getColumn() |
||||||
|
this.getArticle() |
||||||
|
this.getFile() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取文章详情 |
||||||
|
getInfo() { |
||||||
|
this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => { |
||||||
|
this.form = data |
||||||
|
this.columnId = data.columnId |
||||||
|
this.$refs.breadcrumb.update('装置概况/' + data.title) |
||||||
|
data.bannerImg || this.getBanner(this.columns) |
||||||
|
if (this.columnBanner) this.form.bannerImg = this.columnBanner |
||||||
|
}).catch(err => {}) |
||||||
|
}, |
||||||
|
// 获取banner 规则：当前文章有上传的，用上传的，没有上传的栏目有图片，读取上级栏目的（上级没有读上上级，以此类推）都没有的读取默认的 |
||||||
|
getBanner(data) { |
||||||
|
this.columnBanner = '' |
||||||
|
for (const e of data) { |
||||||
|
if (e.columnBanner) this.columnBanner = e.columnBanner |
||||||
|
if (e.id == this.columnId) { |
||||||
|
break |
||||||
|
} else { |
||||||
|
this.getBanner(e.children) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 获取附件 |
||||||
|
getFile() { |
||||||
|
this.$post(`${this.api.theAttachmentUnderTheQueryColumn}?contentId=${this.id}`).then(({ data }) => { |
||||||
|
this.files = data |
||||||
|
}).catch(err => {}) |
||||||
|
}, |
||||||
|
// 资讯 |
||||||
|
getColumn() { |
||||||
|
this.$post(this.api.listWithTree, { |
||||||
|
siteId: this.$route.query.siteId || this.$store.state.content.site, |
||||||
|
columnName: '', |
||||||
|
templateId: '', |
||||||
|
typeId : '', |
||||||
|
isSort: 0 |
||||||
|
}).then(({ data }) => { |
||||||
|
this.columns = data |
||||||
|
this.getInfo() |
||||||
|
}).catch(err => {}) |
||||||
|
}, |
||||||
|
// 最新资讯 |
||||||
|
getArticle() { |
||||||
|
this.$post(this.api.newlyPublishedArticles, { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 5, |
||||||
|
siteId: this.$route.query.siteId || this.$store.state.content.site |
||||||
|
}).then(({ data }) => { |
||||||
|
this.news = data.records |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
// 下载附件 |
||||||
|
download(e) { |
||||||
|
Util.downloadFile(e.fileName, e.filePath) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "./editor.css"; |
||||||
|
.banner { |
||||||
|
height: 280px; |
||||||
|
padding: 123px 0 0 243px; |
||||||
|
font-size: 48px; |
||||||
|
color: #fff; |
||||||
|
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat; |
||||||
|
} |
||||||
|
.article { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
.left { |
||||||
|
width: 920px; |
||||||
|
} |
||||||
|
h2 { |
||||||
|
margin-bottom: 20px; |
||||||
|
font-size: 36px; |
||||||
|
color: #1C1C1C; |
||||||
|
} |
||||||
|
.meta { |
||||||
|
margin: 10px 0; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 600; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
h6 { |
||||||
|
margin: 30px 0 10px; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.right { |
||||||
|
width: 324px; |
||||||
|
} |
||||||
|
.column { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 25px; |
||||||
|
} |
||||||
|
/deep/.el-tree-node__content { |
||||||
|
height: 60px; |
||||||
|
background-color: #E5EDF8; |
||||||
|
border-bottom: 2px solid #fff; |
||||||
|
} |
||||||
|
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { |
||||||
|
color: #fff; |
||||||
|
background-color: #0f5698; |
||||||
|
} |
||||||
|
.list { |
||||||
|
margin-bottom: 20px; |
||||||
|
li { |
||||||
|
padding: 16px 0; |
||||||
|
border-bottom: 1px solid #D8D8D8; |
||||||
|
} |
||||||
|
.text { |
||||||
|
margin-bottom: 5px; |
||||||
|
font-size: 14px; |
||||||
|
cursor: pointer; |
||||||
|
&:hover { |
||||||
|
color: $main-color; |
||||||
|
} |
||||||
|
} |
||||||
|
.date { |
||||||
|
font-size: 12px; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Binary file not shown.
Loading…
Reference in new issue