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.
1337 lines
43 KiB
1337 lines
43 KiB
<template> |
|
<div v-show="loaded" |
|
:class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]"> |
|
<div class="banner"> |
|
<img width="100%" |
|
height="280" |
|
:src="info.columnBanner" |
|
alt="" /> |
|
<div class="texts"> |
|
<p class="text">{{ info.columnName }}</p> |
|
<p class="sub">{{ info.subtitle }}</p> |
|
</div> |
|
</div> |
|
<div class="column-wrap"> |
|
<div class="article"> |
|
<div class="left"> |
|
<!-- 文章：侧边栏+搜索+新闻列表 --> |
|
<div v-if="info.listStyleId === 10" |
|
class="forms"> |
|
<div class="item"> |
|
<span class="label">{{ $t('column.classification') }}：</span> |
|
<el-select v-model="form.classificationId" |
|
@change="filter"> |
|
<el-option :label="$t('column.all')" |
|
:value="null"></el-option> |
|
<el-option v-for="item in classifications" |
|
:key="item.id" |
|
:label="item.classificationName" |
|
:value="item.id"> |
|
</el-option> |
|
</el-select> |
|
</div> |
|
<div class="item"> |
|
<span class="label">{{ $t('column.label') }}：</span> |
|
<el-select ref="search" |
|
v-model="lableId" |
|
multiple |
|
@change="filter"> |
|
<el-option v-for="item in labels" |
|
:key="item.id" |
|
:label="item.labelName" |
|
:value="item.id"> </el-option> |
|
</el-select> |
|
</div> |
|
<div class="search"> |
|
<input type="text" |
|
:placeholder="$t('column.titlePlaceholder')" |
|
v-model="form.title" /> |
|
|
|
<!-- <i class="icon"> |
|
<img src="@/assets/images/search-white.png" alt="" /> |
|
</i> --> |
|
</div> |
|
</div> |
|
<!-- 侧导航+新闻列表(含文章概述) --> |
|
<div v-if="info.listStyleId === 12" |
|
class="forms"> |
|
<div class="item"> |
|
<span class="label">{{ $t('column.classification') }}：</span> |
|
<el-select v-model="form.classificationId" |
|
@change="filter"> |
|
<el-option :label="$t('column.all')" |
|
:value="null"></el-option> |
|
<el-option v-for="item in classifications" |
|
:key="item.id" |
|
:label="item.classificationName" |
|
:value="item.id"> |
|
</el-option> |
|
</el-select> |
|
</div> |
|
<div class="item"> |
|
<span class="label">{{ $t('column.label') }}：</span> |
|
<el-select ref="search" |
|
v-model="lableId" |
|
multiple |
|
@change="filter"> |
|
<el-option v-for="item in labels" |
|
:key="item.id" |
|
:label="item.labelName" |
|
:value="item.id"> </el-option> |
|
</el-select> |
|
</div> |
|
<div class="search"> |
|
<input type="text" |
|
:placeholder="$t('column.titlePlaceholder')" |
|
v-model="form.title" /> |
|
<!-- <i class="icon"> |
|
<img src="@/assets/images/search-white.png" alt="" /> |
|
</i> --> |
|
</div> |
|
</div> |
|
<!-- 会议活动：筛选+会议活动列表 --> |
|
<div v-if="info.listStyleId === 15" |
|
class="forms"> |
|
<ul class="switch"> |
|
<li v-for="(item, i) in convokeTypes" |
|
:key="i" |
|
:class="{ active: item.id === form.convokeType }" |
|
@click="switchChange(item)"> |
|
{{ item.name }} |
|
</li> |
|
</ul> |
|
<div class="item"> |
|
<span class="label">{{ $t('column.classification') }}：</span> |
|
<el-select v-model="form.classificationId" |
|
@change="filter"> |
|
<el-option :label="$t('column.all')" |
|
:value="null"></el-option> |
|
<el-option v-for="item in classifications" |
|
:key="item.id" |
|
:label="item.classificationName" |
|
:value="item.id"> |
|
</el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
|
|
<div class="contents"> |
|
<el-tree v-if="columns.length && columns.find(e => e.children.length) && !isFilter && showNav && info.listStyleId !== 15" |
|
class="columns" |
|
ref="leftColumn" |
|
:data="columns" |
|
highlight-current |
|
:expand-on-click-node="false" |
|
default-expand-all |
|
:props="defaultProps" |
|
node-key="id" |
|
icon-class="el-icon-arrow-down" |
|
@node-click="(item) => columnClick(item, 1)"> |
|
<span class="custom-tree-node" |
|
slot-scope="{ node, data }" |
|
style="padding-left: 10px;"> |
|
<span :title="node.label">{{ node.label }}</span> |
|
</span> |
|
</el-tree> |
|
|
|
<template v-if="articles.length"> |
|
<template v-if="info.listStyleId === 12"> |
|
<div class="article-wrap"> |
|
<ul class="articles"> |
|
<li v-for="(item, i) in articles" |
|
:key="i" |
|
:class="{'news-notice': info.listStyleId === 55}" |
|
class="readDetail" |
|
@click="toArtice(item)"> |
|
<template v-if="info.listStyleId === 55"> |
|
<div class="releaseTime"> |
|
<p class="d">{{ item.date }}</p> |
|
<p class="m">{{ item.month }}</p> |
|
</div> |
|
<div class="news-title">{{ item.title }}</div> |
|
</template> |
|
<template v-else> |
|
<img class="pic" |
|
:src="item.titleImg" |
|
alt="" |
|
onerror="javascript:this.src='./images/1.png';" /> |
|
<div class="texts"> |
|
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName" |
|
class="type"> |
|
{{ item.classificationName }} |
|
</p> |
|
<h6 class="titleDes">{{ item.title }}</h6> |
|
<template v-if="item.listStyleId === 11 || item.listStyleId == 12"> |
|
<span class="meta">{{ item.releaseTime }}</span> |
|
<div class="des" |
|
v-html="item.mainBody"></div> |
|
</template> |
|
<span v-if="item.listStyleId === 10 " |
|
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + |
|
item.labelName }}</span> |
|
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> |
|
<div v-if="item.keynoteSpeaker" |
|
class="meta m-b-10"> |
|
<img class="icon" |
|
src="@/assets/images/mine.png" |
|
alt="" /> {{ item.keynoteSpeaker }} |
|
</div> |
|
<div v-if="item.activityStartTime" |
|
class="meta m-b-10"> |
|
<img class="icon" |
|
src="@/assets/images/time.png" |
|
alt="" /> |
|
{{ item.activityStartTime + ' ~ ' + item.activityEndTime }} |
|
</div> |
|
<div v-if="item.offlineLocation" |
|
class="meta m-b-10"> |
|
<img class="icon" |
|
src="@/assets/images/location.png" |
|
alt="" /> {{ item.offlineLocation }} |
|
</div> |
|
<div v-if="item.onlineLocation" |
|
class="meta"> |
|
<img class="icon" |
|
src="@/assets/images/online.png" |
|
alt="" /> {{ item.onlineLocation }} |
|
</div> |
|
</template> |
|
<el-button type="primary" |
|
class="readDetailBtn">{{ $t('column.readDetail') }}</el-button> |
|
</div> |
|
|
|
</template> |
|
</li> |
|
</ul> |
|
<div v-if="articles.length" |
|
class="pagination"> |
|
<el-pagination background |
|
@current-change="currentChange" |
|
:current-page="page" |
|
layout="total, prev, pager, next" |
|
:total="total"></el-pagination> |
|
</div> |
|
</div> |
|
</template> |
|
<template v-else-if="info.listStyleId === 11 || info.listStyleId === 15 || info.listStyleId === 10"> |
|
<div class="article-wrap"> |
|
<ul class="articles"> |
|
<li v-for="(item, i) in articles" |
|
:key="i" |
|
:class="{'news-notice': info.listStyleId === 55}" |
|
@click="toArtice(item)"> |
|
<template v-if="info.listStyleId === 55"> |
|
<div class="releaseTime"> |
|
<p class="d">{{ item.date }}</p> |
|
<p class="m">{{ item.month }}</p> |
|
</div> |
|
<div class="news-title">{{ item.title }}</div> |
|
</template> |
|
<template v-else> |
|
<div class="texts leftBox"> |
|
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15|| item.listStyleId === 11) && item.classificationName" |
|
class="type"> |
|
{{ item.classificationName }} |
|
</p> |
|
<h6 class="titleDes">{{ item.title }}</h6> |
|
<template v-if="item.listStyleId === 11 || item.listStyleId == 12"> |
|
<span class="meta">{{ item.releaseTime }} |
|
<template v-if="item.labelName != ''"> |
|
| {{ item.labelName }} |
|
</template> |
|
</span> |
|
</template> |
|
<span v-if="item.listStyleId === 10 " |
|
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + |
|
item.labelName }}</span> |
|
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> |
|
<div v-if="item.keynoteSpeaker" |
|
class="meta m-b-10"> |
|
<img class="icon" |
|
src="@/assets/images/mine.png" |
|
alt="" /> {{ item.keynoteSpeaker }} |
|
</div> |
|
<div v-if="item.activityStartTime" |
|
class="meta m-b-10"> |
|
<img class="icon" |
|
src="@/assets/images/time.png" |
|
alt="" /> |
|
{{ item.activityStartTime + ' ~ ' + item.activityEndTime }} |
|
</div> |
|
<div v-if="item.offlineLocation" |
|
class="meta m-b-10"> |
|
<img class="icon" |
|
src="@/assets/images/location.png" |
|
alt="" /> {{ item.offlineLocation }} |
|
</div> |
|
<div v-if="item.onlineLocation" |
|
class="meta"> |
|
<img class="icon" |
|
src="@/assets/images/online.png" |
|
alt="" /> {{ item.onlineLocation }} |
|
</div> |
|
</template> |
|
</div> |
|
<img class="pic" |
|
:src="item.titleImg" |
|
alt="" |
|
onerror="javascript:this.src='./images/1.png';" /> |
|
</template> |
|
</li> |
|
</ul> |
|
<div v-if="articles.length" |
|
class="pagination"> |
|
<el-pagination background |
|
@current-change="currentChange" |
|
:current-page="page" |
|
layout="total, prev, pager, next" |
|
:total="total"></el-pagination> |
|
</div> |
|
</div> |
|
</template> |
|
<template v-else> |
|
<div class="article-wrap"> |
|
<ul class="articles"> |
|
<li v-for="(item, i) in articles" |
|
:key="i" |
|
:class="{'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68}" |
|
class="overDetail" |
|
@click="toArtice(item)"> |
|
<template v-if="info.listStyleId === 55"> |
|
<div class="releaseTime"> |
|
<p class="d">{{ item.date }}</p> |
|
<p class="m">{{ item.month }}</p> |
|
</div> |
|
<div class="news-title">{{ item.title }}</div> |
|
</template> |
|
<template v-else> |
|
<img class="pic" |
|
:src="item.titleImg" |
|
alt="" |
|
onerror="javascript:this.src='./images/1.png';" /> |
|
<div class="texts"> |
|
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName" |
|
class="type"> |
|
{{ item.classificationName }} |
|
</p> |
|
<h6 class="titleDes">{{ item.title }}</h6> |
|
<template v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68"> |
|
<span class="meta">{{ item.releaseTime }}</span> |
|
<div class="des" |
|
v-html="item.mainBody"></div> |
|
</template> |
|
<span v-if="item.listStyleId === 10 " |
|
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + |
|
item.labelName }}</span> |
|
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> |
|
<div v-if="item.keynoteSpeaker" |
|
class="meta m-b-10"> |
|
<img class="icon" |
|
src="@/assets/images/mine.png" |
|
alt="" /> {{ item.keynoteSpeaker }} |
|
</div> |
|
<div v-if="item.activityStartTime" |
|
class="meta m-b-10"> |
|
<img class="icon" |
|
src="@/assets/images/time.png" |
|
alt="" /> |
|
{{ item.activityStartTime + ' ~ ' + item.activityEndTime }} |
|
</div> |
|
<div v-if="item.offlineLocation" |
|
class="meta m-b-10"> |
|
<img class="icon" |
|
src="@/assets/images/location.png" |
|
alt="" /> {{ item.offlineLocation }} |
|
</div> |
|
<div v-if="item.onlineLocation" |
|
class="meta"> |
|
<img class="icon" |
|
src="@/assets/images/online.png" |
|
alt="" /> {{ item.onlineLocation }} |
|
</div> |
|
</template> |
|
<el-button v-if="item.listStyleId === 15 || item.listStyleId == 68" |
|
type="primary" |
|
class="readDetailBtn">{{ $t('column.readDetail') }}</el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
</li> |
|
</ul> |
|
<div v-if="articles.length" |
|
class="pagination"> |
|
<el-pagination background |
|
@current-change="currentChange" |
|
:current-page="page" |
|
layout="total, prev, pager, next" |
|
:total="total"></el-pagination> |
|
</div> |
|
</div> |
|
</template> |
|
</template> |
|
<div v-else |
|
class="none"> |
|
<img src="@/assets/images/none.png" |
|
alt=""> |
|
<p class="text">暂无更多信息，敬请期待。</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="right"> |
|
<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 { |
|
loaded: false, |
|
fromColumn: this.$route.query.column, |
|
columnId: '', |
|
info: {}, |
|
columnBanner: '', |
|
searchTimer: null, |
|
lableId: [], |
|
convokeTypes: [], |
|
form: { |
|
classificationId: null, |
|
title: '', |
|
convokeType: null |
|
}, |
|
classifications: [], |
|
labels: [], |
|
columns: [], |
|
infoColumns: [], |
|
sameStyle: 1, |
|
allColumnId: [], |
|
showNav: false, |
|
showNavIds: [10, 11, 12, 16, 55, 68], // 显示侧导航的模板id |
|
isFilter: false, |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
articles: [], |
|
defaultProps: { |
|
value: 'id', |
|
label: 'columnName' |
|
}, |
|
news: [], |
|
hots: [], |
|
deepestId: '', |
|
getAllId: null |
|
}; |
|
}, |
|
components: { |
|
Breadcrumb |
|
}, |
|
watch: { |
|
$route () { |
|
this.id = this.$route.query.id; |
|
this.info = {} |
|
this.init(); |
|
}, |
|
'form.title': function (val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(() => { |
|
this.filter(); |
|
}, 500); |
|
} |
|
}, |
|
mounted () { |
|
this.convokeTypes = [ |
|
{ |
|
id: null, |
|
name: this.$t('column.all') |
|
}, |
|
{ |
|
id: 1, |
|
name: this.$t('column.comingSoon') |
|
}, |
|
{ |
|
id: 2, |
|
name: this.$t('column.alreadyHeld') |
|
} |
|
]; |
|
this.init(); |
|
}, |
|
methods: { |
|
init () { |
|
this.getInfo(); |
|
this.getColumn(); |
|
this.getNews(); |
|
this.getLabel(); |
|
}, |
|
// 获取栏目详情 |
|
getInfo () { |
|
this.id && |
|
this.$post(`${this.api.findColumn}?id=${this.id}`) |
|
.then(({ data }) => { |
|
this.columnClick(data); |
|
if (data.typeId !== 3) this.loaded = true; // 非长页，才展示页面 |
|
this.info = data; |
|
this.showNav = this.showNavIds.includes(data.listStyleId); |
|
this.handlePublication(); |
|
this.getLeftColumn(); |
|
this.getClassification(); |
|
}) |
|
.catch((res) => { }); |
|
}, |
|
// 判断是否是出版物模板，如果是则跳转 |
|
handlePublication () { |
|
if (this.info.templateId === 11) { // 出版社直接跳转到单个的出版社页面（/publication/single），否则就查询子级是否是出版社模板（templateId = 11），是的话就跳转到/publication/index，必须是每个子级都是出版社才跳转，后者是前者的集合（专利、专著、论文） |
|
this.$router.push(`/publication/single?siteId=${this.site}&id=${this.id}&type=${this.info.listStyleId}`) |
|
} else { |
|
this.$post(`${this.api.getsSublevelColumnsUnderALevel}?id=${this.id}&siteId=${this.site}`).then(({ data }) => { |
|
data.length && data.every(e => e.templateId == 11) && this.$router.push(`/publication?siteId=${this.site}&id=${this.id}`) // 如果子级每个栏目都是出版物类型 |
|
}).catch(err => { }) |
|
} |
|
}, |
|
// 获取banner 规则：当前栏目有上传的，用当前的，没有上传的话，读取上级的（上级没有读上上级，以此类推）都没有的读取默认的 |
|
getBanner (data) { |
|
for (const e of data) { |
|
if (e.columnBanner) this.columnBanner = e.columnBanner; |
|
if (e.id == this.info.id) { |
|
break; |
|
} else if (e.children.length) { |
|
this.getBanner(e.children); |
|
} |
|
} |
|
}, |
|
// 获取所属分类 |
|
getClassification () { |
|
// 会议分类 |
|
if (this.info.templateId === 7) { |
|
this.$post(`${this.api.queryClassif}?siteId=${this.site}&templateId=${7}`) |
|
.then(({ data }) => { |
|
this.classifications = data; |
|
}) |
|
.catch((err) => { }); |
|
} else { |
|
// 其他类型的分类 |
|
this.$post(`${this.api.getTheFullArticleByColumn}?id=${this.id}`) |
|
.then(({ data }) => { |
|
this.classifications = data; |
|
}) |
|
.catch((err) => { }); |
|
} |
|
}, |
|
// 获取标签 |
|
getLabel () { |
|
this.$post(`${this.api.queryLabel}?siteId=${this.site}`) |
|
.then(({ data }) => { |
|
this.labels = data; |
|
// 修改placeholder |
|
this.$nextTick(() => { |
|
setTimeout(() => { |
|
const el = this.$refs.search; |
|
if (el) el.$el.querySelector('.el-input__inner').placeholder = this.$t('column.selectPlaceholder'); |
|
}, 500); |
|
}); |
|
}) |
|
.catch((err) => { }); |
|
}, |
|
// 递归查询是否每个层级的栏目都是同一列表样式，如果是，则查询全部栏目下的文章，否则查询当前栏目下的 |
|
handleColumn (data, parent) { |
|
for (const e of data) { |
|
if (this.info.typeId === 4) { |
|
// 子级优先 |
|
if (e.children.length) { |
|
this.handleColumn(e.children); |
|
} else if (!this.deepestId) { |
|
this.deepestId = e.id; |
|
} |
|
} else { |
|
// 常规栏目 |
|
if (e.id == this.id) { |
|
this.allColumnId.push(e.id); |
|
e.children.length && this.handleColumn(e.children, 1); |
|
} else if (parent) { |
|
if (e.listStyleId !== this.info.listStyleId) { |
|
// 如果有不同的栏目样式 |
|
this.sameStyle = 0; |
|
break; |
|
} else { |
|
this.allColumnId.push(e.id); // 收集所有该栏目下相同栏目样式的id |
|
e.children.length && this.handleColumn(e.children, parent); |
|
} |
|
} else { |
|
e.children.length && this.handleColumn(e.children, parent); |
|
} |
|
} |
|
} |
|
}, |
|
// 左边栏目 |
|
getLeftColumn () { |
|
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`) |
|
.then(({ data }) => { |
|
const fromColumn = this.$route.query.column; // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章 |
|
const { typeId } = this.info; |
|
this.sameStyle = 1; |
|
this.allColumnId = []; |
|
this.deepestId = ''; |
|
data.length && this.handleColumn(data); |
|
let id = this.sameStyle && typeId === 1 ? this.allColumnId : [+this.$route.query.id]; |
|
if (typeId === 4 && !fromColumn) { |
|
id = [this.deepestId]; |
|
} |
|
this.getAllId = id |
|
this.getArticle(id); |
|
this.columns = data; |
|
// 如果没上传banner |
|
if (!this.info.columnBanner) { |
|
this.getBanner(data); |
|
this.info.columnBanner = this.columnBanner || require('@/assets/images/column-banner.png'); |
|
} |
|
this.$nextTick(() => { |
|
const el = this.$refs.leftColumn; |
|
el && el.setCurrentKey(this.id); |
|
}); |
|
}) |
|
.catch((err) => { }); |
|
}, |
|
// 右边资讯 |
|
getColumn () { |
|
this.$post(this.api.listWithTreeMenuVisible, { |
|
siteId: this.site, |
|
columnName: '', |
|
templateId: '', |
|
typeId: '', |
|
isSort: 1 |
|
}) |
|
.then(({ data }) => { |
|
this.infoColumns = data; |
|
}) |
|
.catch((err) => { }); |
|
|
|
this.$post(`${this.api.hotContent}?siteId=${this.site}`) |
|
.then(({ data }) => { |
|
this.hots = Util.removeTag(data); |
|
}) |
|
.catch((err) => { }); |
|
}, |
|
// 最新资讯 |
|
getNews () { |
|
this.$post(this.api.newlyPublishedArticles, { |
|
pageNum: 1, |
|
pageSize: 5, |
|
siteId: this.site |
|
}) |
|
.then(({ data }) => { |
|
this.news = Util.removeTag(data.records); |
|
}) |
|
.catch((res) => { }); |
|
}, |
|
// 会议时间筛选回调 |
|
switchChange (item) { |
|
this.form.convokeType = item.id; |
|
this.filter(); |
|
}, |
|
// 点击栏目回调 |
|
columnClick (to, left) { |
|
const { typeId } = to; |
|
// 如果是左边的栏目，并且是第一级，并且长页/链接，则不作反应 |
|
if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false; |
|
// 出版物则跳转到出版物列表 |
|
if (to.templateId === 8) { |
|
this.$router.replace(`/publish?id=${this.id}&siteId=${this.site}`); |
|
return; |
|
} |
|
// 跳转链接 |
|
if (typeId === 2) { |
|
let href = to.linkAddress; |
|
const cType = to.connectionType; |
|
if (cType !== 2) { |
|
// 非站外链接 |
|
const ids = href.split('-'); // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页 |
|
// 站点id：站内链接取当前站点，其他站点链接取siteSelection |
|
const site = cType === 1 ? this.$route.query.siteId || this.site : to.siteSelection; |
|
if (ids[1]) { |
|
// 文章 |
|
href = '/article?articleId=' + ids[1]; |
|
} else { |
|
// 栏目 |
|
const columnIds = ids[0].split(','); |
|
href = '/column?id=' + columnIds[columnIds.length - 1]; |
|
} |
|
href = this.$router.resolve(href + '&siteId=' + site).href; |
|
} |
|
// 是否新窗口打开 |
|
if (to.isOpen) { |
|
var userAgent = navigator.userAgent; |
|
var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent); |
|
if (isSafari) { |
|
window.location.href = href |
|
} else { |
|
window.open(href) |
|
} |
|
} else { |
|
location.href = href; |
|
} |
|
} else if (typeId === 3) { |
|
// 长页栏目直接获取path |
|
this.$router.push(`/${to.path}?id=${to.id}&siteId=${this.site}`).catch((err) => { }); |
|
} else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) { |
|
// 常规栏目，或者没有子级的子级优先栏目，跳转到column页 |
|
this.$router.push(`/column?id=${to.id + (to.level !== 1 || !this.sameStyle ? '&column=1' : '')}&siteId=${this.site}`).catch((err) => { }); |
|
} else if (left && typeId === 4 && to.children.length) { |
|
// 子级优先栏目，并且有子级 |
|
const el = this.$refs.leftColumn; |
|
if (el) { |
|
const exp = el.store.nodesMap[to.id].expanded; |
|
el.store.nodesMap[to.id].expanded = !exp; // 展开收缩子级 |
|
el.setCurrentKey(this.id); |
|
} |
|
} |
|
}, |
|
// 查询文章列表 |
|
getArticle (columnIds) { |
|
const labelName = []; |
|
// 获取标签名称 |
|
this.labels.map((e) => { |
|
if (this.lableId.includes(e.id)) labelName.push(e.labelName); |
|
}); |
|
this.$post(this.api.newlyPublishedArticles, { |
|
siteId: this.site, |
|
columnIds, |
|
pageNum: this.page, |
|
pageSize: this.info.pageSize || 10, |
|
labelName, |
|
...this.form |
|
}) |
|
.then(({ data }) => { |
|
const articles = Util.removeTag(data.records); |
|
articles.forEach(e => { |
|
// 把发布日期分割成年月和日，新闻中心-通知公告要展示 |
|
if (e.releaseTime) { |
|
const date = e.releaseTime.split('-') |
|
e.date = date[2] |
|
e.month = date[0] + '/' + date[1] |
|
} |
|
}) |
|
this.articles = articles |
|
this.total = +data.total; |
|
// 如果栏目那勾选了“只有一篇文章时，以详情方式展示”，并且只有一篇文章，则跳转到详情页 |
|
// this.total == 1 && this.info.showWithDetails && this.$router.push(`/article?articleId=${this.articles[0].id}&id=${this.articles[0].columnId}`) |
|
}) |
|
.catch((res) => { }); |
|
}, |
|
// 递归获取栏目所有id |
|
getIds (data, ids) { |
|
data.map((e) => { |
|
ids.push(e.id); |
|
e.children && this.getIds(e.children, ids); |
|
}); |
|
}, |
|
// 筛选 |
|
filter () { |
|
this.page = 1; |
|
this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length); // 是否在筛选 |
|
let id = []; |
|
if (this.isFilter) { |
|
this.getIds(this.columns, id); |
|
} else if (this.columns.length) { |
|
id = this.getAllId |
|
} |
|
this.getArticle(id); |
|
}, |
|
currentChange (val) { |
|
this.page = val; |
|
this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length); |
|
let id = []; |
|
if (this.isFilter) { |
|
this.getIds(this.columns, id); |
|
} else if (this.columns.length) { |
|
id = [this.$refs.leftColumn.getCurrentKey()]; |
|
} |
|
this.getArticle(id); |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.banner { |
|
position: relative; |
|
height: 24rem; |
|
color: #fff; |
|
img { |
|
height: 24rem; |
|
} |
|
.texts { |
|
position: absolute; |
|
top: 180px; |
|
left: 213px; |
|
} |
|
|
|
.text { |
|
font-size: 2.16rem; |
|
font-weight: 600; |
|
@include ellipsis; |
|
} |
|
|
|
.sub { |
|
margin-top: 0.5rem; |
|
font-size: 1.6rem; |
|
} |
|
} |
|
.el-tree-node__content { |
|
padding-left: 10px !important; |
|
} |
|
.l-title { |
|
font-weight: 600; |
|
} |
|
|
|
.column-wrap { |
|
padding: 2rem 0; |
|
background: url(../../assets/images/column-bg.png) 0 0 / auto no-repeat, |
|
url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat; |
|
background-color: #f9fafa; |
|
} |
|
|
|
.article { |
|
display: flex; |
|
justify-content: center; |
|
margin: 0 auto; |
|
|
|
.left { |
|
width: 66%; |
|
margin-right: 1.4rem; |
|
} |
|
|
|
.article-wrap { |
|
width: 100%; |
|
} |
|
|
|
.switch { |
|
display: inline-flex; |
|
align-items: center; |
|
margin-right: 2.5rem; |
|
|
|
li { |
|
padding: 0 0.75rem; |
|
margin-right: 0.5rem; |
|
line-height: 1.8rem; |
|
font-size: 1rem; |
|
color: #333; |
|
background: #f7f7f7; |
|
cursor: pointer; |
|
} |
|
|
|
.active { |
|
color: #fff; |
|
background: linear-gradient(126deg, #1150ac 0%, #17beff 100%); |
|
} |
|
} |
|
|
|
.forms { |
|
display: flex; |
|
align-items: center; |
|
padding: 1.5rem; |
|
margin-bottom: 1rem; |
|
background-color: #fff; |
|
|
|
.item { |
|
display: inline-flex; |
|
align-items: center; |
|
margin-right: 1.5rem; |
|
} |
|
|
|
.label { |
|
font-size: 0.912rem; |
|
color: #333; |
|
white-space: nowrap; |
|
} |
|
|
|
/deep/.el-input__inner { |
|
width: 100%; |
|
height: 2.4rem; |
|
line-height: 2.4rem; |
|
border: 0; |
|
background: #f7f7f7; |
|
} |
|
|
|
.search { |
|
display: inline-flex; |
|
width: 34%; |
|
margin-top: 0.1rem; |
|
|
|
input { |
|
width: 100%; |
|
height: 2.4rem; |
|
padding: 0 0.75rem; |
|
font-size: 1rem; |
|
color: #333; |
|
background: #f7f7f7; |
|
border: 0; |
|
border-radius: 6px; |
|
|
|
&:focus { |
|
outline: none; |
|
} |
|
} |
|
} |
|
|
|
.icon { |
|
display: inline-flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 3.1rem; |
|
height: 2.4rem; |
|
background: #1583ff; |
|
border-radius: 0px 6px 6px 0px; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.contents { |
|
display: flex; |
|
} |
|
|
|
/deep/.columns { |
|
width: 22%; |
|
margin-right: 0.6rem; |
|
overflow: auto; |
|
span { |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
&:after { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
width: 2px; |
|
height: 100%; |
|
background-color: #e1e6f2; |
|
} |
|
|
|
.el-tree-node__content { |
|
position: relative; |
|
height: 2.4rem; |
|
padding-left: 2rem; |
|
margin-bottom: 1px; |
|
font-size: 1.04rem; |
|
color: #666; |
|
background-color: #fff; |
|
border-top: 1px solid #f8f9f9; |
|
cursor: pointer; |
|
|
|
&:hover { |
|
color: #0c84eb; |
|
} |
|
} |
|
|
|
.el-tree-node__label { |
|
font-size: 1.28rem; |
|
color: #666; |
|
line-height: 22px; |
|
} |
|
|
|
.el-tree-node__expand-icon.expanded { |
|
transform: rotate(180deg); |
|
} |
|
|
|
.el-tree-node__expand-icon { |
|
position: absolute; |
|
right: 10px; |
|
} |
|
|
|
.is-current > .el-tree-node__content { |
|
background-color: #e5edf8; |
|
border-top: 0; |
|
|
|
&:after { |
|
content: ''; |
|
z-index: 2; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
width: 2px; |
|
height: 100%; |
|
background-color: #083a93; |
|
} |
|
|
|
.el-tree-node__label, |
|
.custom-tree-node { |
|
font-weight: 600; |
|
color: #1150ac; |
|
} |
|
} |
|
} |
|
|
|
.articles { |
|
.readDetail { |
|
padding: 10px 20px; |
|
justify-content: flex-start; |
|
align-items: center; |
|
.texts { |
|
padding-left: 1.5rem; |
|
.titleDes { |
|
margin-bottom: 10px; |
|
font-size: 1.2rem; |
|
margin-top: 0; |
|
} |
|
.des { |
|
margin-top: 10px; |
|
} |
|
} |
|
.titleDes { |
|
margin-top: 0.8rem; |
|
-webkit-line-clamp: 1; |
|
} |
|
.readDetailBtn { |
|
margin-top: 10px; |
|
} |
|
.texts { |
|
flex-grow: 1; |
|
} |
|
} |
|
.overDetail { |
|
.texts { |
|
width: 70%; |
|
} |
|
} |
|
li { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 20px; |
|
background-color: #fff; |
|
cursor: pointer; |
|
} |
|
|
|
.texts { |
|
width: 60%; |
|
padding-left: 30px; |
|
} |
|
|
|
.type { |
|
margin-bottom: 15px; |
|
font-size: 1.024rem; |
|
color: #333; |
|
} |
|
|
|
h6 { |
|
margin-bottom: 10px; |
|
font-size: 1.368rem; |
|
color: #000; |
|
@include mul-ellipsis(2); |
|
} |
|
|
|
.meta { |
|
display: flex; |
|
align-items: center; |
|
font-size: 0.88rem; |
|
line-height: 1; |
|
font-family: PingFangSC-Medium; |
|
color: #333; |
|
} |
|
|
|
.icon { |
|
margin-right: 10px; |
|
} |
|
|
|
.des { |
|
margin-top: 10px; |
|
@include mul-ellipsis(2); |
|
} |
|
|
|
.pic { |
|
width: 30%; |
|
height: auto; |
|
} |
|
} |
|
.news-notice { |
|
.releaseTime { |
|
width: 88px; |
|
height: 88px; |
|
padding: 10px 0 16px; |
|
margin-right: 24px; |
|
color: #fff; |
|
text-align: center; |
|
background: #0b5086; |
|
} |
|
.d { |
|
font-size: 2rem; |
|
font-family: DINCondensed-Bold, DINCondensed; |
|
font-weight: bold; |
|
line-height: 43px; |
|
} |
|
.m { |
|
font-size: 0.9rem; |
|
line-height: 20px; |
|
} |
|
.news-title { |
|
width: calc(100% - 110px); |
|
font-size: 1.1rem; |
|
color: #333; |
|
line-height: 1.6; |
|
@include mul-ellipsis(2); |
|
} |
|
} |
|
.org { |
|
padding: 15px; |
|
} |
|
.right { |
|
width: 14%; |
|
min-width: 15rem; |
|
overflow: hidden; |
|
} |
|
|
|
.list { |
|
margin-bottom: 1rem; |
|
|
|
li { |
|
padding: 0.8rem 0; |
|
border-bottom: 1px solid #d8d8d8; |
|
} |
|
|
|
.text { |
|
margin-bottom: 5px; |
|
font-size: 0.98rem; |
|
cursor: pointer; |
|
@include ellipsis; |
|
|
|
&:hover { |
|
color: $main-color; |
|
} |
|
} |
|
|
|
.date { |
|
font-size: 0.78rem; |
|
color: #999; |
|
} |
|
} |
|
} |
|
|
|
.activity { |
|
.column-wrap { |
|
padding: 0; |
|
background: none; |
|
} |
|
|
|
.article-wrap { |
|
width: 100%; |
|
} |
|
|
|
.article { |
|
justify-content: center; |
|
|
|
.left { |
|
width: 1136px; |
|
margin-right: 36px; |
|
} |
|
|
|
.forms { |
|
padding: 30px 0; |
|
} |
|
|
|
.articles li { |
|
flex-direction: row-reverse; |
|
justify-content: flex-end; |
|
padding-bottom: 38px; |
|
margin-bottom: 38px; |
|
border-bottom: 1px solid #ddd; |
|
} |
|
|
|
.right { |
|
padding-top: 30px; |
|
} |
|
} |
|
} |
|
.party { |
|
/deep/.columns { |
|
.el-tree-node__content { |
|
&:hover { |
|
color: $partyTheme; |
|
} |
|
} |
|
.is-current > .el-tree-node__content { |
|
background-color: $lightPartyTheme; |
|
&:after { |
|
background-color: $partyTheme; |
|
} |
|
|
|
.el-tree-node__label, |
|
.custom-tree-node { |
|
color: $partyTheme; |
|
} |
|
} |
|
} |
|
.article { |
|
.readDetailBtn { |
|
width: 100px; |
|
padding: 10px 20px; |
|
margin-top: 10px; |
|
background-color: $partyTheme; |
|
border-color: $partyTheme; |
|
} |
|
} |
|
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active { |
|
background-color: $partyTheme !important; |
|
} |
|
} |
|
.none { |
|
display: inline-flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
flex: 1; |
|
text-align: center; |
|
.text { |
|
margin-top: 20px; |
|
font-size: 0.9rem; |
|
color: #333; |
|
} |
|
} |
|
@media (max-width: 1200px) { |
|
.banner { |
|
height: 15rem !important; |
|
img { |
|
height: 15rem !important; |
|
} |
|
.texts { |
|
top: 6rem; |
|
left: 3rem; |
|
} |
|
} |
|
.article { |
|
flex-direction: column; |
|
|
|
.columns { |
|
width: 40%; |
|
} |
|
.left { |
|
width: 100%; |
|
|
|
.forms { |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
|
|
.item, |
|
.search { |
|
margin: 20px 0 0 0; |
|
} |
|
|
|
.item:first-child { |
|
margin: 0; |
|
} |
|
|
|
div { |
|
width: 100%; |
|
} |
|
} |
|
} |
|
|
|
.article-wrap { |
|
width: 90%; |
|
margin: 0 auto; |
|
} |
|
|
|
.articles { |
|
li { |
|
flex-direction: column; |
|
align-items: flex-start; |
|
padding: 1rem; |
|
margin-top: 1rem; |
|
.pic { |
|
width: 100%; |
|
margin: 10px 0; |
|
} |
|
} |
|
.readDetail { |
|
.texts { |
|
padding-left: 0; |
|
} |
|
} |
|
} |
|
|
|
.right { |
|
width: 95%; |
|
margin: 20px auto; |
|
} |
|
} |
|
} |
|
|
|
@media (max-width: 640px) { |
|
.banner { |
|
height: 12rem !important; |
|
img { |
|
height: 12rem !important; |
|
} |
|
.texts { |
|
left: 2rem; |
|
bottom: 2rem; |
|
.text { |
|
font-size: 1.5rem; |
|
} |
|
} |
|
} |
|
.article { |
|
.contents { |
|
flex-direction: column; |
|
padding: 0 15px; |
|
} |
|
.columns, |
|
.article-wrap { |
|
width: 100%; |
|
margin-right: 0; |
|
} |
|
.articles { |
|
li { |
|
.leftBox { |
|
padding-left: 0; |
|
.titleDes { |
|
line-height: 1.368rem; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.forms { |
|
.switch { |
|
width: 100%; |
|
flex-direction: column; |
|
margin-right: 0; |
|
li { |
|
width: 90%; |
|
margin: 0 auto; |
|
margin-top: 10px; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|