354 lines
9.1 KiB
Vue
354 lines
9.1 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="exhibition">
|
||
<div v-if="!isLoading">
|
||
<ul v-if="hasData">
|
||
<li v-for="(list,idx) in exhibition" :key="idx" @click="goDetail(list.newsContentLink, list.templateRecordUrl)" :title="list.newsContentTitle">
|
||
<div class="exhibition-img">
|
||
<img :src="url + 'route/file/download/false/' + list.newsContentCoverList" alt="">
|
||
</div>
|
||
<div class="exhibition-info">
|
||
<h1>{{list.newsContentTitle}}</h1>
|
||
<p>作者：{{list.newsContentAuthor}}</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div class="no-data" v-else>
|
||
<img src="@/assets/images/no-data.png" alt="">
|
||
</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>
|
||
<div class="loading" v-if="isLoading">
|
||
<img src="@/assets/images/loading.gif" alt="">
|
||
</div>
|
||
<Footer></Footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Header from '@/common/components/Header'
|
||
import Footer from '@/common/components/Footer'
|
||
import common from '@/common/components/common.js'
|
||
import axios from 'axios'
|
||
export default {
|
||
name: 'Exhibition',
|
||
components: {
|
||
Header,
|
||
Footer
|
||
},
|
||
data () {
|
||
return {
|
||
typeList: [],
|
||
changePage: 1,
|
||
exhibition: [],
|
||
page: {
|
||
page: 1,
|
||
rows: 8,
|
||
totalPage: 1,
|
||
newsDirectoriesId: '',
|
||
newsDirectoriesParentId: 'f1d5d313-f728-4dda-9843-1116d97e17b0'
|
||
},
|
||
url: common.url,
|
||
isLoading: false
|
||
}
|
||
},
|
||
computed: {
|
||
showJumpBtn () {
|
||
return this.page.totalPage > 1
|
||
},
|
||
hasData () {
|
||
return this.exhibition.length > 0
|
||
}
|
||
},
|
||
methods: {
|
||
changeType: function (type) {
|
||
this.page.page = 1
|
||
this.changePage = 1
|
||
if (type) {
|
||
this.page.newsDirectoriesId = type
|
||
} else {
|
||
this.page.newsDirectoriesId = ''
|
||
}
|
||
this.getList()
|
||
},
|
||
getTypeList: function () {
|
||
var self = this
|
||
axios.get(self.url + 'app/newsdirectories/listnewsdirectoriesrelease', {
|
||
params: {
|
||
directoriesParentId: 'f1d5d313-f728-4dda-9843-1116d97e17b0'
|
||
}
|
||
}).then(function (res) {
|
||
self.typeList = res.data
|
||
})
|
||
},
|
||
goDetail: function (link, url) {
|
||
if (link) {
|
||
window.open(link)
|
||
} else {
|
||
window.location.href = this.url + url
|
||
}
|
||
},
|
||
doJumpPage: function () {
|
||
this.page.page = this.changePage
|
||
this.getList()
|
||
},
|
||
paging: function (page) {
|
||
this.page.page = page
|
||
this.getList()
|
||
},
|
||
getList: function () {
|
||
var self = this
|
||
self.isLoading = true
|
||
axios.get(self.url + 'app/newscontent/listpagenewscontentrelease/' + common.area.areaCode, {
|
||
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.isLoading = false
|
||
self.exhibition = res.data.rows
|
||
self.page.page = res.data.page
|
||
self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
|
||
})
|
||
}
|
||
},
|
||
mounted: function () {
|
||
this.getTypeList()
|
||
this.getList()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||
@import "~styles/public.styl"
|
||
.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
|
||
.no-data
|
||
padding 80px 0
|
||
text-align center
|
||
img
|
||
width 200px
|
||
.loading
|
||
position fixed
|
||
top 50%
|
||
left 50%
|
||
transform translate(-50%, -50%)
|
||
background rgba(255,255,255,0.6)
|
||
padding 30px
|
||
border-radius 10px
|
||
box-shadow 0 0 17px #DEDEDE
|
||
.location
|
||
background #e5e5e5
|
||
line-height 30px
|
||
.location-content
|
||
width 1200px
|
||
margin 0 auto
|
||
font-size 14px
|
||
color #565656
|
||
.select
|
||
padding 10px 0 0
|
||
background #f0f0f0
|
||
overflow hidden
|
||
.select-container
|
||
width 1200px
|
||
margin 0 auto
|
||
.select-line
|
||
margin-bottom 10px
|
||
font-size 14px
|
||
span
|
||
color #565656
|
||
button
|
||
width 80px
|
||
height 30px
|
||
padding 0 5px
|
||
box-sizing border-box
|
||
border none
|
||
background none
|
||
outline none
|
||
color #565656
|
||
border-radius 4px
|
||
cursor pointer
|
||
white-space nowrap
|
||
overflow hidden
|
||
text-overflow: ellipsis
|
||
&.active
|
||
color #fff
|
||
background $main-color
|
||
.exhibition
|
||
width 1200px
|
||
min-height 400px
|
||
margin 20px auto
|
||
ul
|
||
&:after
|
||
content ''
|
||
display block
|
||
clear both
|
||
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)
|
||
.exhibition-img
|
||
width 100%
|
||
height 185px
|
||
img
|
||
width 100%
|
||
height 100%
|
||
.exhibition-info
|
||
padding 10px 20px
|
||
h1
|
||
text-align center
|
||
font-size 18px
|
||
color #565656
|
||
white-space nowrap
|
||
overflow hidden
|
||
text-overflow: ellipsis
|
||
margin-bottom 5px
|
||
font-family '宋体'
|
||
p
|
||
font-size 14px
|
||
color #565656
|
||
text-align center
|
||
white-space nowrap
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
font-family '宋体'
|
||
.exhibition-info-bottom
|
||
span
|
||
font-size 14px
|
||
color #a8a8a8
|
||
&.view
|
||
float right
|
||
.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 $main-color
|
||
width 50px
|
||
height 25px
|
||
vertical-align middle
|
||
color #fff
|
||
cursor pointer
|
||
font-size 14px
|
||
</style>
|