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.
398 lines
9.5 KiB
398 lines
9.5 KiB
<template> |
|
<div v-show="loaded" class="wrap"> |
|
<div v-if="form.articleTemplate !== 23" class="banner" :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}"> |
|
{{ form.columnName }} |
|
</div> |
|
<div class="content"> |
|
<Breadcrumb ref="breadcrumb" :data.sync="routes"/> |
|
<div class="article"> |
|
<div class="left"> |
|
<h2>{{ form.title }}</h2> |
|
<div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} {{$t('column.views')}} | {{ form.releaseTime }}</div> |
|
<div class="meta">{{ form.edit && $t('column.edit') + '：' + form.edit }} {{ form.audit && ' | ' + $t('column.auditor') + '：' + form.audit }} {{ form.label && ' | ' + $t('column.label') + '：' + form.label }}</div> |
|
<p class="brief">{{ form.summary }}</p> |
|
<div class="des" v-html="form.mainBody"></div> |
|
<div v-if="form.fileList && form.fileList.length" class="annex"> |
|
<h6>{{$t('column.attachmentDownload')}}</h6> |
|
<ul class="files"> |
|
<li v-for="(file, i) in form.fileList" :key="i"> |
|
<span class="name">{{ file.fileName }}</span> |
|
<span class="download" @click="download(file)">{{$t('column.download')}}</span> |
|
</li> |
|
</ul> |
|
</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" @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)"> |
|
<p class="text">{{ item.title }}</p> |
|
<span class="date">{{ item.releaseTime }}</span> |
|
</li> |
|
</ul> |
|
|
|
<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)"> |
|
<p class="text">{{ item.title }}</p> |
|
<span class="date">{{ item.releaseTime }}</span> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Setting from '@/setting' |
|
import Util from '@/libs/util' |
|
import Breadcrumb from '@/components/breadcrumb' |
|
import mixins from '@/mixins/article' |
|
export default { |
|
mixins: [mixins], |
|
data() { |
|
return { |
|
id: this.$route.query.articleId, |
|
loaded: false, |
|
routes: [], |
|
columnId: '', |
|
form: {}, |
|
columnBanner: '', |
|
columns: [], |
|
defaultProps: { |
|
value: 'id', |
|
label: 'columnName' |
|
}, |
|
news: [], |
|
hots: [] |
|
} |
|
}, |
|
components: { |
|
Breadcrumb |
|
}, |
|
watch: { |
|
'$route'() { |
|
this.id = this.$route.query.articleId |
|
this.getInfo() |
|
} |
|
}, |
|
mounted() { |
|
this.getColumn() |
|
this.getArticle() |
|
}, |
|
methods: { |
|
// 获取文章详情 |
|
getInfo() { |
|
this.id && this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => { |
|
// 设置面包屑 |
|
const { columnName, path, id } = this.$route.query |
|
this.routes = [ |
|
{ |
|
name: columnName || data.columnName, |
|
path: path ? '/' + path : '', |
|
query: { |
|
id: id || data.columnId |
|
} |
|
}, |
|
{ |
|
name: data.title |
|
} |
|
] |
|
// 文章被禁用了就直接返回 |
|
if (data.isDisable) { |
|
this.$router.back() |
|
} else { |
|
const temId = data.articleTemplate |
|
let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&path=${path || ''}` |
|
if (temId === 25 || temId === 26) { // 会议活动/期刊详情 |
|
this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path) |
|
} else { |
|
data.releaseTime = data.releaseTime.split(' ')[0] |
|
this.form = data |
|
this.columnId = data.columnId |
|
// 如果没上传banner |
|
if (!data.bannerImg) { |
|
this.getBanner(this.columns) |
|
this.form.bannerImg = this.columnBanner || require('@/assets/images/article-banner.png') |
|
} |
|
this.loaded = true |
|
} |
|
} |
|
}).catch(err => {}) |
|
|
|
// 浏览量+1 |
|
this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => {}).catch(err => {}) |
|
}, |
|
// 获取banner 规则：当前文章有上传的，用上传的，没有上传的话，如果栏目有图片，读取栏目的（上级没有读上上级，以此类推）都没有的读取默认的 |
|
getBanner(data) { |
|
for (const e of data) { |
|
if (e.columnBanner) this.columnBanner = e.columnBanner |
|
if (e.id == this.columnId) { |
|
break |
|
} else { |
|
this.getBanner(e.children) |
|
} |
|
} |
|
}, |
|
// 资讯 |
|
getColumn() { |
|
this.$post(this.api.listWithTreeMenuVisible, { |
|
siteId: this.site, |
|
columnName: '', |
|
templateId: '', |
|
typeId : '', |
|
isSort: 1 |
|
}).then(({ data }) => { |
|
this.columns = data |
|
this.getInfo() |
|
}).catch(err => {}) |
|
|
|
this.$post(`${this.api.hotContent}?siteId=${this.site}`).then(({ data }) => { |
|
this.hots = Util.removeTag(data) |
|
}).catch(err => {}) |
|
}, |
|
// 最新资讯 |
|
getArticle() { |
|
this.$post(this.api.newlyPublishedArticles, { |
|
pageNum: 1, |
|
pageSize: 5, |
|
siteId: this.site |
|
}).then(({ data }) => { |
|
this.news = Util.removeTag(data.records) |
|
}).catch(res => {}) |
|
}, |
|
// 下载附件 |
|
download(e) { |
|
Util.downloadFile(e.fileName, e.filePath) |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "./editor.css"; |
|
.content { |
|
width: 1200px; |
|
/deep/ .el-breadcrumb { |
|
font-size: .98rem; |
|
} |
|
} |
|
.banner { |
|
height: 21.6rem; |
|
padding: 14.68rem 0 0 22.1875rem; |
|
font-size: 2.16rem; |
|
font-weight: 600; |
|
color: #fff; |
|
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat; |
|
} |
|
.article { |
|
display: flex; |
|
justify-content: space-between; |
|
.left { |
|
width: 70%; |
|
} |
|
h2 { |
|
font-size: 1.9rem; |
|
color: #1C1C1C; |
|
} |
|
.meta { |
|
margin: 1rem 0; |
|
font-size: .88rem; |
|
color: #9B9B9B; |
|
} |
|
.brief { |
|
padding-bottom: 1.5rem; |
|
margin-bottom: 1rem; |
|
font-size: 1.2rem; |
|
line-height: 1.33; |
|
color: #606060; |
|
border-bottom: 1px solid #D8D8D8; |
|
} |
|
/deep/.des { |
|
img { |
|
max-width: 100%; |
|
} |
|
} |
|
.annex { |
|
margin-top: 30px; |
|
h6 { |
|
padding-left: 8px; |
|
margin-bottom: 20px; |
|
font-size: 16px; |
|
font-family: PingFangSC-Medium, PingFang SC; |
|
font-weight: 500; |
|
line-height: 1; |
|
color: #333; |
|
border-left: 4px solid #1583FF; |
|
} |
|
li { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 10px; |
|
} |
|
.name { |
|
margin-right: 8px; |
|
font-size: 14px; |
|
} |
|
.download { |
|
color: #1583FF; |
|
cursor: pointer; |
|
} |
|
} |
|
.right { |
|
width: 20%; |
|
/deep/ .el-tree-node__label{ |
|
font-size: .78rem; |
|
} |
|
} |
|
.column { |
|
width: 100%; |
|
margin-bottom: 1.56rem; |
|
} |
|
/deep/.el-tree-node__content { |
|
height: 2.75rem; |
|
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; |
|
} |
|
} |
|
} |
|
@media (max-width: 1420px) { |
|
.content { |
|
width: 98%; |
|
} |
|
} |
|
@media (max-width: 1200px ) { |
|
.article { |
|
flex-direction: column; |
|
.left, .right{ |
|
width: 95%; |
|
margin: 0 auto; |
|
.el-tree{ |
|
position: fixed; |
|
right: 10px; |
|
top: 160px; |
|
z-index: 9;; |
|
width: 180px; |
|
} |
|
} |
|
} |
|
} |
|
@media (min-width: 280px) and (max-width: 1200px) { |
|
|
|
.article { |
|
/deep/.des { |
|
img { |
|
max-width: 100%; |
|
height: 15rem; |
|
} |
|
} |
|
} |
|
.banner { |
|
font-size: 1.5rem; |
|
} |
|
.article{ |
|
flex-direction: column; |
|
.left{ |
|
width: 100%; |
|
h2 { |
|
font-size: 1.5rem; |
|
} |
|
} |
|
.right{ |
|
width: 100%; |
|
.el-tree{ |
|
display: none; |
|
} |
|
} |
|
} |
|
.article { |
|
.des { |
|
img{ |
|
height: 15rem !important; |
|
} |
|
} |
|
} |
|
} |
|
@media (max-width: 320px) { |
|
.wrap { |
|
.banner { |
|
padding: 8rem 0 0 10rem; |
|
height: 13rem; |
|
} |
|
} |
|
} |
|
|
|
@media (min-width: 320px) and (max-width: 375px) { |
|
.wrap { |
|
.banner { |
|
padding: 8rem 0 0 10rem; |
|
height: 15rem; |
|
} |
|
} |
|
} |
|
@media (min-width: 375px) and (max-width: 480px) { |
|
.wrap { |
|
.banner { |
|
padding: 8rem 0 0 10rem; |
|
height: 17rem; |
|
} |
|
} |
|
} |
|
@media (min-width: 480px) and (max-width: 640px) { |
|
.wrap { |
|
.banner { |
|
padding: 12rem 0 0 10rem; |
|
height: 20rem; |
|
} |
|
} |
|
} |
|
@media (min-width: 640px) and (max-width: 768px) { |
|
.wrap { |
|
.banner { |
|
padding: 14rem 0 0 10rem; |
|
height: 22rem; |
|
} |
|
} |
|
} |
|
@media (min-width: 768px) and (max-width: 980px) { |
|
.wrap { |
|
.banner { |
|
padding: 16rem 0 0 10rem; |
|
height: 26rem; |
|
} |
|
} |
|
} |
|
@media (min-width: 980px) and (max-width: 1200px) { |
|
.wrap { |
|
.banner { |
|
padding: 18rem 0 0 10rem; |
|
height: 30rem; |
|
} |
|
} |
|
} |
|
</style> |