|
|
|
@ -5,20 +5,23 @@ |
|
|
|
<div class="center-wrap"> |
|
|
|
<div class="center-wrap"> |
|
|
|
<div class="nav"> |
|
|
|
<div class="nav"> |
|
|
|
<p class="column-name">{{ $route.query.name }}</p> |
|
|
|
<p class="column-name">{{ $route.query.name }}</p> |
|
|
|
<el-menu |
|
|
|
<el-menu v-if="menuList.length" |
|
|
|
v-if="menuList.length" |
|
|
|
|
|
|
|
unique-opened |
|
|
|
unique-opened |
|
|
|
:default-active="defaultIndex" |
|
|
|
:default-active="defaultIndex" |
|
|
|
@select="initData"> |
|
|
|
@select="initData"> |
|
|
|
<menuTree v-if="menuRefresh" :menuList="menuList"></menuTree> |
|
|
|
<menuTree v-if="menuRefresh" |
|
|
|
|
|
|
|
:menuList="menuList"></menuTree> |
|
|
|
</el-menu> |
|
|
|
</el-menu> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="list-wrap"> |
|
|
|
<div class="list-wrap"> |
|
|
|
<div class="list"> |
|
|
|
<div class="list"> |
|
|
|
<template v-if="listData.length"> |
|
|
|
<template v-if="listData.length"> |
|
|
|
<ul> |
|
|
|
<ul> |
|
|
|
<li v-for="(item,index) in listData" :key="index" @click="toArticle(item.id)"> |
|
|
|
<li v-for="(item,index) in listData" |
|
|
|
<img :src="item.coverUrl" alt=""> |
|
|
|
:key="index" |
|
|
|
|
|
|
|
@click="toArticle(item.id)"> |
|
|
|
|
|
|
|
<img :src="item.coverUrl" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
<div class="text"> |
|
|
|
<div class="text"> |
|
|
|
<div class="title">{{item.title}}</div> |
|
|
|
<div class="title">{{item.title}}</div> |
|
|
|
<div class="metas"> |
|
|
|
<div class="metas"> |
|
|
|
@ -28,20 +31,27 @@ |
|
|
|
<i class="spe">|</i> |
|
|
|
<i class="spe">|</i> |
|
|
|
<span>浏览量：{{item.viewCount}}</span> |
|
|
|
<span>浏览量：{{item.viewCount}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="desc" :class="{ie: core.isIE() || core.isEdge(),firefox: core.isFirefox() || core.isEdge()}" v-html="item.content"></div> |
|
|
|
<div class="desc" |
|
|
|
|
|
|
|
:class="{ie: core.isIE() || core.isEdge(),firefox: core.isFirefox() || core.isEdge()}" |
|
|
|
|
|
|
|
v-html="item.content"></div> |
|
|
|
<a class="detail">查看详情 ></a> |
|
|
|
<a class="detail">查看详情 ></a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
<div class="pagination"> |
|
|
|
<div class="pagination"> |
|
|
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="page"> |
|
|
|
<el-pagination background |
|
|
|
|
|
|
|
layout="total, prev, pager, next" |
|
|
|
|
|
|
|
:total="totals" |
|
|
|
|
|
|
|
@current-change="handleCurrentChange" |
|
|
|
|
|
|
|
:current-page="page"> |
|
|
|
</el-pagination> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
<div class="empty"> |
|
|
|
<div class="empty"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<img src="@/assets/img/none.png" alt=""> |
|
|
|
<img src="@/assets/img/none.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
<p>暂无资讯</p> |
|
|
|
<p>暂无资讯</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -59,13 +69,12 @@ import menuTree from '@/components/menuTree' |
|
|
|
import { mapActions } from "vuex"; |
|
|
|
import { mapActions } from "vuex"; |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: 'information', |
|
|
|
name: 'information', |
|
|
|
data() { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
return { |
|
|
|
keyword: '', |
|
|
|
|
|
|
|
historyId: this.$store.state.info.columnId, |
|
|
|
historyId: this.$store.state.info.columnId, |
|
|
|
defaultIndex: '', |
|
|
|
defaultIndex: '', |
|
|
|
menuList: [], |
|
|
|
menuList: [], |
|
|
|
page: 1, |
|
|
|
page: +this.$route.query.page || 1, |
|
|
|
pageSize: 10, |
|
|
|
pageSize: 10, |
|
|
|
totals: 0, |
|
|
|
totals: 0, |
|
|
|
listData: [], |
|
|
|
listData: [], |
|
|
|
@ -80,24 +89,18 @@ export default { |
|
|
|
menuTree |
|
|
|
menuTree |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
watch: { |
|
|
|
keyword: function(val) { |
|
|
|
$route () { |
|
|
|
clearTimeout(this.searchTimer) |
|
|
|
|
|
|
|
this.searchTimer = setTimeout(() => { |
|
|
|
|
|
|
|
this.getData() |
|
|
|
|
|
|
|
},500) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
$route() { |
|
|
|
|
|
|
|
this.getData() |
|
|
|
this.getData() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted () { |
|
|
|
this.getData() |
|
|
|
this.getData() |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
...mapActions("info", [ |
|
|
|
...mapActions("info", [ |
|
|
|
"setColumnId" |
|
|
|
"setColumnId" |
|
|
|
]), |
|
|
|
]), |
|
|
|
async getData() { |
|
|
|
async getData () { |
|
|
|
this.deepId = '' |
|
|
|
this.deepId = '' |
|
|
|
const { parentId } = this.$route.query |
|
|
|
const { parentId } = this.$route.query |
|
|
|
this.setColumnId('') |
|
|
|
this.setColumnId('') |
|
|
|
@ -148,7 +151,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 获取最深的层级的id |
|
|
|
// 获取最深的层级的id |
|
|
|
getDeepId(data) { |
|
|
|
getDeepId (data) { |
|
|
|
data.map(e => { |
|
|
|
data.map(e => { |
|
|
|
if (e.children.length) { |
|
|
|
if (e.children.length) { |
|
|
|
this.getDeepId(e.children) |
|
|
|
this.getDeepId(e.children) |
|
|
|
@ -158,15 +161,15 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
initData(index,indexPath){ |
|
|
|
initData (index, indexPath) { |
|
|
|
this.page = 1 |
|
|
|
this.page = 1 |
|
|
|
this.getContent(index,indexPath) |
|
|
|
this.getContent(index, indexPath) |
|
|
|
}, |
|
|
|
}, |
|
|
|
getContent(index,indexPath){ |
|
|
|
getContent (index, indexPath) { |
|
|
|
if(indexPath) this.loadIns = Loading.service() |
|
|
|
if (indexPath) this.loadIns = Loading.service() |
|
|
|
this.columnId = index |
|
|
|
this.columnId = index |
|
|
|
this.$get(`${this.api.queryArticleByCondition}/${this.page}/${this.pageSize}`, { |
|
|
|
this.$get(`${this.api.queryArticleByCondition}/${this.page}/${this.pageSize}`, { |
|
|
|
name: this.keyword, |
|
|
|
name: '', |
|
|
|
columnId: index, |
|
|
|
columnId: index, |
|
|
|
port: 0, |
|
|
|
port: 0, |
|
|
|
school: this.$route.query.parentId ? '' : 0 |
|
|
|
school: this.$route.query.parentId ? '' : 0 |
|
|
|
@ -174,24 +177,23 @@ export default { |
|
|
|
this.listData = res.articleList |
|
|
|
this.listData = res.articleList |
|
|
|
this.totals = res.total |
|
|
|
this.totals = res.total |
|
|
|
this.listData.map(n => { |
|
|
|
this.listData.map(n => { |
|
|
|
n.content = n.content.replace(/<img.*?(?:>|\/>)/gi,'') |
|
|
|
n.content = n.content.replace(/<img.*?(?:>|\/>)/gi, '') |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.loadIns.close() |
|
|
|
this.loadIns.close() |
|
|
|
}).catch(res => { |
|
|
|
}).catch(res => { |
|
|
|
this.loadIns.close() |
|
|
|
this.loadIns.close() |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
handleCurrentChange(val) { |
|
|
|
handleCurrentChange (val) { |
|
|
|
this.page = val; |
|
|
|
this.page = val; |
|
|
|
this.getContent(this.columnId); |
|
|
|
this.getContent(this.columnId); |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 获取该文章所属的所有栏目名称 |
|
|
|
// 获取该文章所属的所有栏目名称 |
|
|
|
getColumnName(data, names = []) { |
|
|
|
getColumnName (data, names = []) { |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
const e = data[i] |
|
|
|
const e = data[i] |
|
|
|
names.push(e.name) |
|
|
|
names.push(e.name) |
|
|
|
if (e.id == this.columnId) { |
|
|
|
if (e.id == this.columnId) { |
|
|
|
console.log("🚀 ~ file: index.vue ~ line 188 ~ getColumnName ~ this.defaultIndex", this.defaultIndex) |
|
|
|
|
|
|
|
this.columnNames = JSON.parse(JSON.stringify(names)) |
|
|
|
this.columnNames = JSON.parse(JSON.stringify(names)) |
|
|
|
break |
|
|
|
break |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
@ -200,12 +202,11 @@ export default { |
|
|
|
names = [] |
|
|
|
names = [] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
toArticle(id) { |
|
|
|
toArticle (id) { |
|
|
|
const columnId = this.columnId |
|
|
|
const columnId = this.columnId |
|
|
|
this.setColumnId(columnId) |
|
|
|
this.setColumnId(columnId) |
|
|
|
this.getColumnName(this.menuList, []) |
|
|
|
this.getColumnName(this.menuList, []) |
|
|
|
console.log("🚀 ~ file: index.vue ~ line 199 ~ toArticle ~ menuList", this.columnNames) |
|
|
|
this.$router.push(`/${this.$route.path === '/info/list' ? 'info' : 'preInfo'}/details?parentId=${this.$route.query.parentId}&name=${this.$route.query.name}&id=${id}&columnNames=${this.columnNames}&page=${this.page}`) |
|
|
|
this.$router.push(`/${this.$route.path === '/info/list' ? 'info' : 'preInfo'}/details?parentId=${this.$route.query.parentId}&name=${this.$route.query.name}&id=${id}&columnNames=${this.columnNames}`) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
@ -216,21 +217,20 @@ export default { |
|
|
|
.banner { |
|
|
|
.banner { |
|
|
|
height: 350px; |
|
|
|
height: 350px; |
|
|
|
padding: 100px 0 0 180px; |
|
|
|
padding: 100px 0 0 180px; |
|
|
|
background: url(../../../assets/img/info-bg6.png) (0 0)/auto no-repeat, |
|
|
|
background: url(../../../assets/img/info-bg6.png) (0 0) / auto no-repeat, |
|
|
|
url(../../../assets/img/info-bg7.png) (25% 110px)/400px auto no-repeat, |
|
|
|
url(../../../assets/img/info-bg7.png) (25% 110px)/400px auto no-repeat, |
|
|
|
url(../../../assets/img/info-bg4.png) (top right)/auto no-repeat, |
|
|
|
url(../../../assets/img/info-bg4.png) (top right) / auto no-repeat, |
|
|
|
url(../../../assets/img/info-bg5.png) (80% 20px)/auto no-repeat, |
|
|
|
url(../../../assets/img/info-bg5.png) (80% 20px) / auto no-repeat, url(../../../assets/img/info-bg3.png) 0 0/100% 100% no-repeat; |
|
|
|
url(../../../assets/img/info-bg3.png) 0 0/100% 100% no-repeat; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.main{ |
|
|
|
.main { |
|
|
|
min-height: calc(100vh - 524px); |
|
|
|
min-height: calc(100vh - 524px); |
|
|
|
background: url(../../../assets/img/info-bg1.png) (0px 179px)/(190px 171px) no-repeat, |
|
|
|
background: url(../../../assets/img/info-bg1.png) (0px 179px)/ (190px 171px) no-repeat, |
|
|
|
url(../../../assets/img/info-bg2.png) (bottom right)/(407px 273px) no-repeat; |
|
|
|
url(../../../assets/img/info-bg2.png) (bottom right)/ (407px 273px) no-repeat; |
|
|
|
.center-wrap { |
|
|
|
.center-wrap { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
justify-content: center; |
|
|
|
align-items:flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
} |
|
|
|
.column-name { |
|
|
|
.column-name { |
|
|
|
padding: 14px 0; |
|
|
|
padding: 14px 0; |
|
|
|
@ -241,7 +241,7 @@ export default { |
|
|
|
background-color: #007eff; |
|
|
|
background-color: #007eff; |
|
|
|
border-radius: 8px; |
|
|
|
border-radius: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
.nav{ |
|
|
|
.nav { |
|
|
|
width: 156px; |
|
|
|
width: 156px; |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
.el-menu { |
|
|
|
.el-menu { |
|
|
|
@ -284,11 +284,11 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.list-wrap{ |
|
|
|
.list-wrap { |
|
|
|
width: calc(100% - 180px); |
|
|
|
width: calc(100% - 180px); |
|
|
|
margin-left: 24px; |
|
|
|
margin-left: 24px; |
|
|
|
.list{ |
|
|
|
.list { |
|
|
|
li{ |
|
|
|
li { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
margin-bottom: 12px; |
|
|
|
margin-bottom: 12px; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
@ -297,52 +297,52 @@ export default { |
|
|
|
border-radius: 6px; |
|
|
|
border-radius: 6px; |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
|
|
img{ |
|
|
|
img { |
|
|
|
width: 260px; |
|
|
|
width: 260px; |
|
|
|
height: 195px; |
|
|
|
height: 195px; |
|
|
|
border: 0; |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.text{ |
|
|
|
.text { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
width: calc(100% - 260px); |
|
|
|
width: calc(100% - 260px); |
|
|
|
padding: 20px 24px; |
|
|
|
padding: 20px 24px; |
|
|
|
.title{ |
|
|
|
.title { |
|
|
|
font-size: 20px; |
|
|
|
font-size: 20px; |
|
|
|
color: #0B1D30; |
|
|
|
color: #0b1d30; |
|
|
|
font-weight: 500; |
|
|
|
font-weight: 500; |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow:ellipsis; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
} |
|
|
|
.metas{ |
|
|
|
.metas { |
|
|
|
display: inline-flex; |
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
margin: 10px 0; |
|
|
|
margin: 10px 0; |
|
|
|
font-size: 12px; |
|
|
|
font-size: 12px; |
|
|
|
color: rgba(0,0,0,.45); |
|
|
|
color: rgba(0, 0, 0, 0.45); |
|
|
|
.spe { |
|
|
|
.spe { |
|
|
|
margin: 0 10px; |
|
|
|
margin: 0 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.desc{ |
|
|
|
.desc { |
|
|
|
font-size: 14px; |
|
|
|
font-size: 14px; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
line-height: 24px; |
|
|
|
line-height: 24px; |
|
|
|
display: -webkit-box; |
|
|
|
display: -webkit-box; |
|
|
|
display:-moz-box; |
|
|
|
display: -moz-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-moz-box-orient: vertical; |
|
|
|
-moz-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
-moz-line-clamp: 2; |
|
|
|
-moz-line-clamp: 2; |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
text-overflow: ellipsis; |
|
|
|
&.ie{ |
|
|
|
&.ie { |
|
|
|
height: 80px; |
|
|
|
height: 80px; |
|
|
|
text-overflow: ellipsis; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
} |
|
|
|
&.firefox{ |
|
|
|
&.firefox { |
|
|
|
height: 76px; |
|
|
|
height: 76px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
