|
|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<div v-show="loaded" :class="['wrap', {activity: info.listStyleId === 15}]"> |
|
|
|
|
<div class="banner"> |
|
|
|
|
<img width="100%" height="280" :src="info.columnBanner" alt=""> |
|
|
|
|
<p class="text">{{ info.columnName }}</p> |
|
|
|
|
@ -58,9 +58,13 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="contents"> |
|
|
|
|
<el-tree v-if="!isFilter && showNav" 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="columnClick"></el-tree> |
|
|
|
|
<el-tree v-if="!isFilter && showNav" 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 }"> |
|
|
|
|
<span :title="node.label">{{ node.label }}</span> |
|
|
|
|
</span> |
|
|
|
|
</el-tree> |
|
|
|
|
|
|
|
|
|
<div style="width: 1113px"> |
|
|
|
|
<div class="article-wrap"> |
|
|
|
|
<ul class="articles"> |
|
|
|
|
<li v-for="(item, i) in articles" :key="i" @click="toArtice(item)"> |
|
|
|
|
<div class="texts"> |
|
|
|
|
@ -72,10 +76,10 @@ |
|
|
|
|
</template> |
|
|
|
|
<span v-if="item.listStyleId === 10" class="meta">{{ item.updateTime }} {{ item.labelName && ' | ' + item.labelName }}</span> |
|
|
|
|
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> |
|
|
|
|
<div v-if="item.keynoteSpeaker" class="meta m-b-10"><i class="el-icon-user"></i> {{ item.keynoteSpeaker }}</div> |
|
|
|
|
<div v-if="item.activityStartTime" class="meta m-b-10"><i class="el-icon-alarm-clock"></i> {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}</div> |
|
|
|
|
<div v-if="item.offlineLocation" class="meta m-b-10"><i class="el-icon-location-outline"></i> {{ item.offlineLocation }}</div> |
|
|
|
|
<div v-if="item.onlineLocation" class="meta"><i class="el-icon-position"></i> {{ item.onlineLocation }}</div> |
|
|
|
|
<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=""> |
|
|
|
|
@ -88,7 +92,7 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<el-tree class="column" ref="column" :data="infoColumns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnClick"></el-tree> |
|
|
|
|
<el-tree class="column" ref="column" :data="infoColumns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="item => columnClick(item, 0)"></el-tree> |
|
|
|
|
|
|
|
|
|
<p class="l-title">热点内容</p> |
|
|
|
|
<ul class="list"> |
|
|
|
|
@ -114,10 +118,13 @@ |
|
|
|
|
<script> |
|
|
|
|
import Setting from '@/setting' |
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
import Breadcrumb from '@/components/breadcrumb' |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
loaded: false, |
|
|
|
|
id: +this.$route.query.id, |
|
|
|
|
fromColumn: this.$route.query.column, |
|
|
|
|
site: this.$store.state.content.site, |
|
|
|
|
columnId: '', |
|
|
|
|
info: {}, |
|
|
|
|
@ -147,7 +154,8 @@ export default { |
|
|
|
|
columns: [], |
|
|
|
|
all: null, |
|
|
|
|
infoColumns: [], |
|
|
|
|
curColumn: 0, |
|
|
|
|
sameStyle: 1, |
|
|
|
|
allColumnId: [], |
|
|
|
|
showNav: false, |
|
|
|
|
showNavIds: [10, 11, 12, 16], // 显示侧导航的模板id |
|
|
|
|
isFilter: false, |
|
|
|
|
@ -163,6 +171,9 @@ export default { |
|
|
|
|
hots: [] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
Breadcrumb |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
'$route'() { |
|
|
|
|
this.id = this.$route.query.id |
|
|
|
|
@ -189,7 +200,11 @@ export default { |
|
|
|
|
// 获取栏目详情 |
|
|
|
|
getInfo() { |
|
|
|
|
this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!data.columnBanner) data.columnBanner = require('@/assets/images/column-banner.png') |
|
|
|
|
this.info = data |
|
|
|
|
this.loaded = true |
|
|
|
|
this.showNav = this.showNavIds.includes(data.listStyleId) |
|
|
|
|
this.getClassification() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
@ -205,7 +220,6 @@ export default { |
|
|
|
|
this.classifications = data |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
// 获取标签 |
|
|
|
|
getLabel() { |
|
|
|
|
@ -213,15 +227,29 @@ export default { |
|
|
|
|
this.labels = data |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}, |
|
|
|
|
// 递归查询是否每个层级的栏目都是同一列表样式，如果是，则查询全部栏目下的文章，否则查询当前栏目下的 |
|
|
|
|
handleColumn(data, id) { |
|
|
|
|
for (const e of data) { |
|
|
|
|
this.allColumnId.push(e.id) |
|
|
|
|
if (e.listStyleId !== id) { |
|
|
|
|
this.sameStyle = 0 |
|
|
|
|
break |
|
|
|
|
} |
|
|
|
|
this.handleColumn(e.children, id) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 左边栏目 |
|
|
|
|
getLeftColumn() { |
|
|
|
|
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => { |
|
|
|
|
this.getArticle([+this.$route.query.id]) |
|
|
|
|
this.curColumn = 0 |
|
|
|
|
const fromColumn = this.$route.query.column |
|
|
|
|
this.sameStyle = !fromColumn |
|
|
|
|
this.allColumnId = [] |
|
|
|
|
fromColumn || data.length && this.handleColumn(data, data[0].listStyleId) |
|
|
|
|
this.getArticle(this.sameStyle ? this.allColumnId : [+this.$route.query.id]) |
|
|
|
|
this.columns = data |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
const el = this.$refs.leftColumn |
|
|
|
|
el && el.setCurrentKey(this.id) |
|
|
|
|
el && el.setCurrentKey(this.sameStyle ? data[0].id : this.id) |
|
|
|
|
}) |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}, |
|
|
|
|
@ -257,8 +285,10 @@ export default { |
|
|
|
|
this.filter() |
|
|
|
|
}, |
|
|
|
|
// 点击栏目回调 |
|
|
|
|
columnClick(to) { |
|
|
|
|
columnClick(to, left) { |
|
|
|
|
const { typeId } = to |
|
|
|
|
// 如果是左边的栏目，并且是第一级，并且长页/链接，则不作反应 |
|
|
|
|
if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false |
|
|
|
|
// 跳转链接 |
|
|
|
|
if (typeId === 2) { |
|
|
|
|
let href = to.linkAddress |
|
|
|
|
@ -283,9 +313,12 @@ export default { |
|
|
|
|
} else { |
|
|
|
|
location.href = href |
|
|
|
|
} |
|
|
|
|
} else if (typeId !== 4 || (typeId === 4 && !to.children.length)) { |
|
|
|
|
// 常规栏目跳转到column页，长页栏目直接获取path |
|
|
|
|
this.$router.push(`/${typeId === 3 ? to.path : 'column'}?id=${to.id}`).catch(err => {}) |
|
|
|
|
} else if (typeId === 3) { |
|
|
|
|
// 长页栏目直接获取path |
|
|
|
|
this.$router.push(`/${to.path}?id=${to.id}`).catch(err => {}) |
|
|
|
|
} else if (typeId === 1 || (typeId === 4 && !to.children.length)) { |
|
|
|
|
// 常规栏目跳转到column页 |
|
|
|
|
this.$router.push(`/column?id=${to.id}&column=1`).catch(err => {}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 查询文章列表 |
|
|
|
|
@ -302,11 +335,7 @@ export default { |
|
|
|
|
labelName, |
|
|
|
|
...this.form |
|
|
|
|
}).then(({ data }) => { |
|
|
|
|
const list = data.records |
|
|
|
|
list.map(e => { |
|
|
|
|
e.mainBody = e.mainBody.replace(/<img.*?>/g , '') // 去掉正文里的图片 |
|
|
|
|
}) |
|
|
|
|
this.articles = list |
|
|
|
|
this.articles = Util.removeTag(data.records) |
|
|
|
|
this.total = +data.total |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
@ -327,7 +356,6 @@ export default { |
|
|
|
|
} else if (this.columns.length) { |
|
|
|
|
id = [this.columns[0].id] |
|
|
|
|
} |
|
|
|
|
this.curColumn = 0 |
|
|
|
|
this.getArticle(id) |
|
|
|
|
}, |
|
|
|
|
currentChange(val) { |
|
|
|
|
@ -368,11 +396,14 @@ export default { |
|
|
|
|
} |
|
|
|
|
.article { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
width: 1666px; |
|
|
|
|
justify-content: center; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
.left { |
|
|
|
|
width: 1295px; |
|
|
|
|
margin-right: 28px; |
|
|
|
|
} |
|
|
|
|
.article-wrap { |
|
|
|
|
width: 1113px; |
|
|
|
|
} |
|
|
|
|
.switch { |
|
|
|
|
display: inline-flex; |
|
|
|
|
@ -381,15 +412,15 @@ export default { |
|
|
|
|
li { |
|
|
|
|
padding: 0 15px; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
line-height: 32px; |
|
|
|
|
line-height: 36px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #333; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
background: #F7F7F7; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
.active { |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #1fa7ff; |
|
|
|
|
background: linear-gradient(126deg, #1150AC 0%, #17BEFF 100%); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.forms { |
|
|
|
|
@ -446,7 +477,7 @@ export default { |
|
|
|
|
display: flex; |
|
|
|
|
} |
|
|
|
|
/deep/.columns { |
|
|
|
|
width: 174px; |
|
|
|
|
width: 210px; |
|
|
|
|
margin-right: 12px; |
|
|
|
|
overflow: auto; |
|
|
|
|
&:after { |
|
|
|
|
@ -537,20 +568,26 @@ export default { |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
} |
|
|
|
|
.meta { |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #666; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-family: PingFangSC-Medium; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
.icon { |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
.des { |
|
|
|
|
margin-top: 15px; |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
.pic { |
|
|
|
|
width: 417px; |
|
|
|
|
height: 244px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right { |
|
|
|
|
width: 324px; |
|
|
|
|
width: 290px; |
|
|
|
|
} |
|
|
|
|
.column { |
|
|
|
|
width: 100%; |
|
|
|
|
@ -586,4 +623,33 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
