|
|
|
@ -1,49 +1,41 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div v-show="loaded" |
|
|
|
<div v-show="loaded" class="wrap"> |
|
|
|
class="wrap"> |
|
|
|
|
|
|
|
<!-- 人物详情不展示banner --> |
|
|
|
<!-- 人物详情不展示banner --> |
|
|
|
<div v-if="form.articleTemplate !== 23 && !isPeople" |
|
|
|
<div v-if="form.articleTemplate !== 23 && !isPeople" class="banner" |
|
|
|
class="banner" |
|
|
|
:style="{ backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : '' }"> |
|
|
|
:style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}"> |
|
|
|
|
|
|
|
{{ form.columnName }} |
|
|
|
{{ form.columnName }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<div class="content"> |
|
|
|
<Breadcrumb ref="breadcrumb" |
|
|
|
<Breadcrumb ref="breadcrumb" :data.sync="routes" /> |
|
|
|
:data.sync="routes" /> |
|
|
|
|
|
|
|
<div class="article"> |
|
|
|
<div class="article"> |
|
|
|
<div class="left"> |
|
|
|
<div class="left"> |
|
|
|
<template v-if="!isPeople"> |
|
|
|
<template v-if="!isPeople"> |
|
|
|
<h2>{{ form.title }}</h2> |
|
|
|
<h2>{{ form.title }}</h2> |
|
|
|
<div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ form.releaseTime }}</div> |
|
|
|
<div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ |
|
|
|
<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> |
|
|
|
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> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<p v-if="form.summary" |
|
|
|
<p v-if="form.summary" class="brief">{{ form.summary }}</p> |
|
|
|
class="brief">{{ form.summary }}</p> |
|
|
|
<div class="des" id="mainBody" v-html="form.mainBody"></div> |
|
|
|
<div class="des" |
|
|
|
<div v-if="form.fileList && form.fileList.length" class="annex"> |
|
|
|
id="mainBody" |
|
|
|
<h6>{{ $t('column.attachmentDownload') }}</h6> |
|
|
|
v-html="form.mainBody"></div> |
|
|
|
|
|
|
|
<div v-if="form.fileList && form.fileList.length" |
|
|
|
|
|
|
|
class="annex"> |
|
|
|
|
|
|
|
<h6>{{$t('column.attachmentDownload')}}</h6> |
|
|
|
|
|
|
|
<ul class="files"> |
|
|
|
<ul class="files"> |
|
|
|
<li v-for="(file, i) in form.fileList" |
|
|
|
<li v-for="(file, i) in form.fileList" :key="i"> |
|
|
|
:key="i"> |
|
|
|
|
|
|
|
<span class="name">{{ file.fileName }}</span> |
|
|
|
<span class="name">{{ file.fileName }}</span> |
|
|
|
<span class="download" |
|
|
|
<span class="download" @click="download(file)">{{ $t('column.download') }}</span> |
|
|
|
@click="download(file)">{{$t('column.download')}}</span> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<RightColumns ref="right" |
|
|
|
<RightColumns ref="right" :party="isParty" /> |
|
|
|
:party="isParty" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import Setting from '@/setting' |
|
|
|
|
|
|
|
import Util from '@/libs/util' |
|
|
|
import Util from '@/libs/util' |
|
|
|
import Breadcrumb from '@/components/breadcrumb' |
|
|
|
import Breadcrumb from '@/components/breadcrumb' |
|
|
|
import RightColumns from '@/components/rightColumns' |
|
|
|
import RightColumns from '@/components/rightColumns' |
|
|
|
@ -189,135 +181,161 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import './editor.css'; |
|
|
|
@import './editor.css'; |
|
|
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
.content { |
|
|
|
width: 1200px; |
|
|
|
width: 1200px; |
|
|
|
/deep/ .el-breadcrumb { |
|
|
|
|
|
|
|
font-size: 0.98rem; |
|
|
|
/deep/ .el-breadcrumb { |
|
|
|
} |
|
|
|
font-size: 0.98rem; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.banner { |
|
|
|
.banner { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
height: 21.6rem; |
|
|
|
height: 21.6rem; |
|
|
|
padding-left: 10%; |
|
|
|
padding-left: 10%; |
|
|
|
font-size: 2rem; |
|
|
|
font-size: 2rem; |
|
|
|
font-weight: 600; |
|
|
|
font-weight: 600; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
background: url(../../assets/images/intro-bg.png) center center no-repeat; |
|
|
|
background: url(../../assets/images/intro-bg.png) center center no-repeat; |
|
|
|
object-fit: cover; |
|
|
|
object-fit: cover; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.article { |
|
|
|
.article { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
.left { |
|
|
|
|
|
|
|
width: 70%; |
|
|
|
.left { |
|
|
|
|
|
|
|
width: 70%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
h2 { |
|
|
|
|
|
|
|
font-size: 1.9rem; |
|
|
|
|
|
|
|
color: #1c1c1c; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
|
|
|
|
margin: 1rem 0; |
|
|
|
|
|
|
|
font-size: 0.88rem; |
|
|
|
|
|
|
|
color: #9b9b9b; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.brief { |
|
|
|
|
|
|
|
padding-bottom: 1.5rem; |
|
|
|
|
|
|
|
margin: 1rem 0; |
|
|
|
|
|
|
|
font-size: 1.2rem; |
|
|
|
|
|
|
|
line-height: 1.6; |
|
|
|
|
|
|
|
color: #606060; |
|
|
|
|
|
|
|
border-bottom: 1px solid #d8d8d8; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/deep/.des { |
|
|
|
|
|
|
|
// width: 100%; |
|
|
|
|
|
|
|
// overflow: auto; |
|
|
|
|
|
|
|
a { |
|
|
|
|
|
|
|
color: rgb(0, 0, 238); |
|
|
|
|
|
|
|
word-wrap: break-word; |
|
|
|
} |
|
|
|
} |
|
|
|
h2 { |
|
|
|
|
|
|
|
font-size: 1.9rem; |
|
|
|
img { |
|
|
|
color: #1c1c1c; |
|
|
|
max-width: 100%; |
|
|
|
|
|
|
|
object-fit: cover; |
|
|
|
} |
|
|
|
} |
|
|
|
.meta { |
|
|
|
|
|
|
|
margin: 1rem 0; |
|
|
|
ul { |
|
|
|
font-size: 0.88rem; |
|
|
|
padding-left: 40px; |
|
|
|
color: #9b9b9b; |
|
|
|
list-style: disc; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
|
|
|
list-style: inherit; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.brief { |
|
|
|
|
|
|
|
padding-bottom: 1.5rem; |
|
|
|
ol { |
|
|
|
margin: 1rem 0; |
|
|
|
padding-left: 40px; |
|
|
|
font-size: 1.2rem; |
|
|
|
list-style: decimal; |
|
|
|
line-height: 1.6; |
|
|
|
|
|
|
|
color: #606060; |
|
|
|
li { |
|
|
|
border-bottom: 1px solid #d8d8d8; |
|
|
|
list-style: inherit; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/deep/.des { |
|
|
|
} |
|
|
|
// width: 100%; |
|
|
|
|
|
|
|
// overflow: auto; |
|
|
|
.annex { |
|
|
|
a { |
|
|
|
margin-top: 30px; |
|
|
|
color: rgb(0, 0, 238); |
|
|
|
|
|
|
|
word-wrap: break-word; |
|
|
|
h6 { |
|
|
|
} |
|
|
|
padding-left: 8px; |
|
|
|
img { |
|
|
|
margin-bottom: 20px; |
|
|
|
max-width: 100%; |
|
|
|
font-size: 16px; |
|
|
|
object-fit: cover; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
} |
|
|
|
font-weight: 500; |
|
|
|
ul { |
|
|
|
line-height: 1; |
|
|
|
padding-left: 40px; |
|
|
|
color: #333; |
|
|
|
list-style: disc; |
|
|
|
border-left: 4px solid #1583ff; |
|
|
|
li { |
|
|
|
|
|
|
|
list-style: inherit; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
ol { |
|
|
|
|
|
|
|
padding-left: 40px; |
|
|
|
|
|
|
|
list-style: decimal; |
|
|
|
|
|
|
|
li { |
|
|
|
|
|
|
|
list-style: inherit; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.annex { |
|
|
|
|
|
|
|
margin-top: 30px; |
|
|
|
li { |
|
|
|
h6 { |
|
|
|
display: flex; |
|
|
|
padding-left: 8px; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 20px; |
|
|
|
margin-bottom: 10px; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
|
|
|
|
font-weight: 500; |
|
|
|
.name { |
|
|
|
line-height: 1; |
|
|
|
margin-right: 8px; |
|
|
|
color: #333; |
|
|
|
font-size: 14px; |
|
|
|
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; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.download { |
|
|
|
|
|
|
|
color: #1583ff; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1420px) { |
|
|
|
@media (max-width: 1420px) { |
|
|
|
.content { |
|
|
|
.content { |
|
|
|
width: 98%; |
|
|
|
width: 98%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
|
@media (max-width: 1200px) { |
|
|
|
.article { |
|
|
|
.article { |
|
|
|
/deep/.des { |
|
|
|
/deep/.des { |
|
|
|
img { |
|
|
|
img { |
|
|
|
max-width: 100%; |
|
|
|
max-width: 100%; |
|
|
|
max-height: 15rem; |
|
|
|
max-height: 15rem; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.banner { |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.banner { |
|
|
|
|
|
|
|
font-size: 1.5rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.article { |
|
|
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
h2 { |
|
|
|
font-size: 1.5rem; |
|
|
|
font-size: 1.5rem; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.article { |
|
|
|
} |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.left { |
|
|
|
.article { |
|
|
|
width: 100%; |
|
|
|
.des { |
|
|
|
h2 { |
|
|
|
img { |
|
|
|
font-size: 1.5rem; |
|
|
|
height: 15rem !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.article { |
|
|
|
|
|
|
|
.des { |
|
|
|
|
|
|
|
img { |
|
|
|
|
|
|
|
height: 15rem !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
