|
|
|
@ -1,22 +1,26 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<breadcrumb ref="breadcrumb" data="资讯" :query="breadcrumbQuery"></breadcrumb> |
|
|
|
|
<div class="page"> |
|
|
|
|
<h6 class="title">{{title}}</h6> |
|
|
|
|
<div class="metas"> |
|
|
|
|
<span>作者: {{author}}</span> |
|
|
|
|
<el-divider direction="vertical"></el-divider> |
|
|
|
|
<span>{{date.replace(' 00:00:00','')}}</span> |
|
|
|
|
<el-divider direction="vertical"></el-divider> |
|
|
|
|
<span>浏览量:{{viewCount}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<breadcrumb ref="breadcrumb" |
|
|
|
|
data="资讯" |
|
|
|
|
:query="breadcrumbQuery"></breadcrumb> |
|
|
|
|
<div class="page"> |
|
|
|
|
<h6 class="title">{{title}}</h6> |
|
|
|
|
<div class="metas"> |
|
|
|
|
<span>作者: {{author}}</span> |
|
|
|
|
<el-divider direction="vertical"></el-divider> |
|
|
|
|
<span>{{date.replace(' 00:00:00','')}}</span> |
|
|
|
|
<el-divider direction="vertical"></el-divider> |
|
|
|
|
<span>浏览量:{{viewCount}}</span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="cover"> |
|
|
|
|
<img :src="coverUrl" alt=""> |
|
|
|
|
</div> |
|
|
|
|
<div class="content ql-editor" v-html="content"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="cover"> |
|
|
|
|
<img :src="coverUrl" |
|
|
|
|
alt=""> |
|
|
|
|
</div> |
|
|
|
|
<div class="content ql-editor" |
|
|
|
|
v-html="content"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
import { Loading } from 'element-ui'; |
|
|
|
@ -25,75 +29,75 @@ import 'quill/dist/quill.snow.css'; |
|
|
|
|
import 'quill/dist/quill.bubble.css'; |
|
|
|
|
import breadcrumb from '@/components/breadcrumb' |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
columnNames: this.$route.query.columnNames, |
|
|
|
|
breadcrumbQuery: { |
|
|
|
|
parentId: this.$route.query.parentId, |
|
|
|
|
name: this.$route.query.name |
|
|
|
|
}, |
|
|
|
|
id: this.$route.query.id, |
|
|
|
|
coverUrl: '', |
|
|
|
|
author: '', |
|
|
|
|
date: '', |
|
|
|
|
title: '', |
|
|
|
|
content: '', |
|
|
|
|
viewCount: 0, |
|
|
|
|
loadIns: null |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
breadcrumb |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getData() { |
|
|
|
|
this.loadIns = Loading.service() |
|
|
|
|
this.$get(`${this.api.getArticle}?articleId=${this.id}`) |
|
|
|
|
.then(res => { |
|
|
|
|
let data = res.article |
|
|
|
|
this.coverUrl = data.coverUrl |
|
|
|
|
this.author = data.author |
|
|
|
|
this.date = data.date |
|
|
|
|
this.title = data.title |
|
|
|
|
this.content = data.content |
|
|
|
|
this.viewCount = data.viewCount |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
this.$refs.breadcrumb.update(`最新资讯/${this.$route.query.name}/${this.columnNames.split(',').join('/')}/${this.title}`) |
|
|
|
|
this.loadIns.close() |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
this.loadIns.close() |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
columnNames: this.$route.query.columnNames, |
|
|
|
|
breadcrumbQuery: { |
|
|
|
|
parentId: this.$route.query.parentId, |
|
|
|
|
name: this.$route.query.name |
|
|
|
|
}, |
|
|
|
|
id: this.$route.query.id, |
|
|
|
|
coverUrl: '', |
|
|
|
|
author: '', |
|
|
|
|
date: '', |
|
|
|
|
title: '', |
|
|
|
|
content: '', |
|
|
|
|
viewCount: 0, |
|
|
|
|
loadIns: null |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
breadcrumb |
|
|
|
|
}, |
|
|
|
|
mounted () { |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getData () { |
|
|
|
|
this.loadIns = Loading.service() |
|
|
|
|
this.$get(`${this.api.getArticle}?articleId=${this.id}`) |
|
|
|
|
.then(res => { |
|
|
|
|
let data = res.article |
|
|
|
|
this.coverUrl = data.coverUrl |
|
|
|
|
this.author = data.author |
|
|
|
|
this.date = data.date |
|
|
|
|
this.title = data.title |
|
|
|
|
this.content = data.content |
|
|
|
|
this.viewCount = data.viewCount |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
this.$refs.breadcrumb.update(`最新资讯/${this.$route.query.name}/${this.columnNames.split(',').join('/')}/${this.title}`) |
|
|
|
|
this.loadIns.close() |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
this.loadIns.close() |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.wrap { |
|
|
|
|
padding-bottom: 20px; |
|
|
|
|
.title{ |
|
|
|
|
.title { |
|
|
|
|
margin-top: 30px; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 28px; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
color: #0b1d30; |
|
|
|
|
} |
|
|
|
|
.metas{ |
|
|
|
|
.metas { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
padding-bottom: 32px; |
|
|
|
|
margin: 16px 0 32px; |
|
|
|
|
span{ |
|
|
|
|
span { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
color: #999; |
|
|
|
|
font-size: 12px; |
|
|
|
|
img{ |
|
|
|
|
img { |
|
|
|
|
width: 18px; |
|
|
|
|
margin-right: 5px; |
|
|
|
|
} |
|
|
|
@ -102,19 +106,19 @@ export default { |
|
|
|
|
margin: 0 16px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.cover{ |
|
|
|
|
.cover { |
|
|
|
|
margin: 20px 0; |
|
|
|
|
text-align: center; |
|
|
|
|
img{ |
|
|
|
|
img { |
|
|
|
|
width: 800px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.content{ |
|
|
|
|
.content { |
|
|
|
|
padding: 0 150px; |
|
|
|
|
line-height: 1.8; |
|
|
|
|
font-size: 16px; |
|
|
|
|
text-indent: 2em; |
|
|
|
|
/deep/img{ |
|
|
|
|
/deep/img { |
|
|
|
|
display: block; |
|
|
|
|
width: 600px; |
|
|
|
|
margin-left: auto; |
|
|
|
|