328 lines
8.7 KiB
Vue
328 lines
8.7 KiB
Vue
<template>
|
||
<div>
|
||
<Header></Header>
|
||
<div class="location">
|
||
<div class="location-content">
|
||
您的位置：<router-link to="/">首页</router-link> > 文化动态
|
||
</div>
|
||
</div>
|
||
<div class="type">
|
||
<div class="type-container">
|
||
<span>类型：</span>
|
||
<ul>
|
||
<li :class="{active: page.newsDirectoriesId == ''}" @click="changeType(null)">全部</li>
|
||
<li v-for="(btn,idx) in typeList" :key="idx" :class="{active: page.newsDirectoriesId == btn.newsDirectoriesId}" @click="changeType(btn.newsDirectoriesId)">{{btn.directoriesName}}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="dynamics">
|
||
<div class="dynamics-left">
|
||
<!--<div class="dynamics-title">-->
|
||
<!--<span>文化动态</span>-->
|
||
<!--</div>-->
|
||
<div class="dynamics-list">
|
||
<ul v-if="hasData">
|
||
<li v-for="(list,idx) in requestList" :key="idx" @click="goDetail(list.templateRecordUrl)">
|
||
<div class="dynamics-list-left">
|
||
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
|
||
</div>
|
||
<div class="dynamics-list-right">
|
||
<h3>{{list.newsContentTitle}}</h3>
|
||
<span>{{list.newsContentPublishTime}}</span>
|
||
<!--<button>MORE></button>-->
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div class="no-data" v-else>
|
||
<img src="@/assets/images/no-data.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pager" v-if="hasData">
|
||
<span @click="paging(1)">首页</span>
|
||
<span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
|
||
<ul v-if="page.totalPage > 0 && page.totalPage <= 5">
|
||
<li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
|
||
{{cpage}}
|
||
</li>
|
||
</ul>
|
||
<ul v-if="page.totalPage > 5">
|
||
<li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
|
||
{{cpage}}
|
||
</li>
|
||
<li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
|
||
{{page.totalPage - 5 + cpage}}
|
||
</li>
|
||
<li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
|
||
{{page.page - (3 - cpage)}}
|
||
</li>
|
||
</ul>
|
||
<span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
|
||
<span @click="paging(page.totalPage)">尾页</span>
|
||
<input type="text" v-model="changePage" v-if="showJumpBtn">
|
||
<i v-if="showJumpBtn">/{{page.totalPage}}页</i>
|
||
<button v-if="showJumpBtn" @click="doJumpPage">跳转</button>
|
||
</div>
|
||
<Footer></Footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Header from '@/common/components/Header'
|
||
import Footer from '@/common/components/Footer'
|
||
import axios from 'axios'
|
||
export default {
|
||
name: 'CultureDynamics',
|
||
components: {
|
||
Header,
|
||
Footer
|
||
},
|
||
data () {
|
||
return {
|
||
changePage: 1,
|
||
typeList: [],
|
||
dynamicList: [],
|
||
rankList: [],
|
||
requestList: [],
|
||
page: {
|
||
page: 1,
|
||
rows: 8,
|
||
totalPage: 1,
|
||
newsDirectoriesId: '',
|
||
newsDirectoriesParentId: 'f497904b-7727-4832-891c-604c36ae4167'
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
showJumpBtn () {
|
||
return this.page.totalPage > 1
|
||
},
|
||
hasData () {
|
||
return this.requestList.length > 0
|
||
}
|
||
},
|
||
methods: {
|
||
doJumpPage: function () {
|
||
this.page.page = this.changePage
|
||
this.getNews()
|
||
},
|
||
getDynamicData () {
|
||
var self = this
|
||
axios.get('/api/dynamic.json').then(function (res) {
|
||
res = res.data
|
||
const data = res.data
|
||
self.rankList = data.clickRank
|
||
})
|
||
},
|
||
getNews: function () {
|
||
var self = this
|
||
axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
|
||
params: self.page
|
||
}).then(function (res) {
|
||
for (var i = 0; i < res.data.rows.length; i++) {
|
||
res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
|
||
}
|
||
self.requestList = res.data.rows
|
||
self.page.page = res.data.page
|
||
self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
|
||
})
|
||
},
|
||
paging: function (page) {
|
||
this.page.page = page
|
||
this.getNews()
|
||
},
|
||
goDetail: function (url) {
|
||
window.location.href = 'http://192.168.0.104/' + url
|
||
},
|
||
getTypeList: function () {
|
||
var self = this
|
||
axios.get('http://192.168.0.104:8082/news/app/newsdirectories/listnewsdirectoriesrelease', {
|
||
params: {
|
||
directoriesParentId: 'f497904b-7727-4832-891c-604c36ae4167'
|
||
}
|
||
}).then(function (res) {
|
||
console.log(res)
|
||
self.typeList = res.data
|
||
})
|
||
},
|
||
changeType: function (type) {
|
||
if (type) {
|
||
this.page.newsDirectoriesId = type
|
||
} else {
|
||
this.page.newsDirectoriesId = ''
|
||
}
|
||
this.getNews()
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getDynamicData()
|
||
this.getNews()
|
||
this.getTypeList()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||
@import "~styles/public.styl"
|
||
.location
|
||
background #e5e5e5
|
||
line-height 30px
|
||
.location-content
|
||
width 1200px
|
||
margin 0 auto
|
||
font-size 14px
|
||
color #565656
|
||
.type
|
||
padding 15px 0
|
||
background #f0f0f0
|
||
.type-container
|
||
width 1200px
|
||
margin 0 auto
|
||
overflow hidden
|
||
font-size 14px
|
||
color #565656
|
||
span
|
||
float left
|
||
line-height 30px
|
||
ul
|
||
overflow hidden
|
||
float left
|
||
margin-left 20px
|
||
li
|
||
float left
|
||
width 80px
|
||
height: 30px
|
||
text-align center
|
||
line-height 30px
|
||
cursor pointer
|
||
&.active
|
||
background $main-color
|
||
border-radius 4px
|
||
color #fff
|
||
.dynamics
|
||
width 1200px
|
||
margin 20px auto
|
||
overflow hidden
|
||
.dynamics-list
|
||
min-height 500px
|
||
ul
|
||
li
|
||
width: 280px;
|
||
box-shadow: 0px 0px 10px 0px rgba(176,176,176,0.3);
|
||
box-sizing: border-box;
|
||
float: left;
|
||
margin-right: 25px;
|
||
margin-bottom: 25px;
|
||
cursor: pointer;
|
||
&:nth-child(4n)
|
||
margin-right 0
|
||
&:hover
|
||
box-shadow 0px 0px 20px 0px rgba(176,176,176,0.9)
|
||
.dynamics-list-left
|
||
width 100%
|
||
height 185px
|
||
img
|
||
width 100%
|
||
height 100%
|
||
.dynamics-list-right
|
||
padding 10px 20px
|
||
text-align center
|
||
h3
|
||
font-size 18px
|
||
color #565656
|
||
white-space nowrap
|
||
overflow hidden
|
||
text-overflow: ellipsis
|
||
p
|
||
font-size 14px
|
||
color #565656
|
||
line-height 25px
|
||
&.desc
|
||
height 50px
|
||
overflow hidden
|
||
span
|
||
display block
|
||
font-size 14px
|
||
color #a8a8a8
|
||
line-height 25px
|
||
button
|
||
width 70px
|
||
height: 25px
|
||
text-align center
|
||
line-height 25px
|
||
border none
|
||
outline none
|
||
background $main-color
|
||
color #fff
|
||
font-size 12px
|
||
border-radius 4px
|
||
&:after
|
||
content ''
|
||
display block
|
||
clear both
|
||
.no-data
|
||
padding 80px 0
|
||
text-align center
|
||
img
|
||
width 200px
|
||
.pager
|
||
width 1200px
|
||
margin 20px auto
|
||
text-align center
|
||
font-size 0
|
||
span
|
||
display inline-block
|
||
padding 0 15px
|
||
line-height 25px
|
||
color #676767
|
||
border 1px solid #d2d2d2
|
||
font-size 14px
|
||
margin 0 5px
|
||
vertical-align middle
|
||
cursor pointer
|
||
ul
|
||
display inline-block
|
||
overflow hidden
|
||
vertical-align middle
|
||
li
|
||
width 45px
|
||
line-height 25px
|
||
float left
|
||
margin-right 10px
|
||
border 1px solid #d2d2d2
|
||
cursor pointer
|
||
text-align center
|
||
font-size 14px
|
||
color #676767
|
||
&.active
|
||
background $main-color
|
||
color #fff
|
||
border 1px solid $main-color
|
||
&:last-child
|
||
margin 0
|
||
input
|
||
width 50px
|
||
height 25px
|
||
border 1px solid #d2d2d2
|
||
text-align center
|
||
vertical-align middle
|
||
i
|
||
font-style normal
|
||
color #676767
|
||
font-size 14px
|
||
line-height 25px
|
||
display inline-block
|
||
vertical-align middle
|
||
margin 0 5px
|
||
button
|
||
border none
|
||
outline none
|
||
background #4792C2
|
||
width 50px
|
||
height 25px
|
||
vertical-align middle
|
||
color #fff
|
||
font-size 14px
|
||
</style>
|