0607
This commit is contained in:
dong_bo0602
parent
4d0cbe39b3
commit
9a3f41cf5f
@ -39,28 +39,83 @@ export default {
|
||||
return {
|
||||
classList: [],
|
||||
recommend: [],
|
||||
character: {},
|
||||
health: {},
|
||||
photography: {}
|
||||
character: [],
|
||||
health: [],
|
||||
photography: [],
|
||||
page: {
|
||||
page: 1,
|
||||
rows: 8,
|
||||
totalPage: 1,
|
||||
newsDirectoriesId: '',
|
||||
newsDirectoriesParentId: 'd9d8c7ea-32e0-43ed-ad17-7c99a3c389b9'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getArtData () {
|
||||
getType: function () {
|
||||
var self = this
|
||||
axios.get('/api/artTrain.json').then(function (res) {
|
||||
res = res.data
|
||||
const data = res.data
|
||||
console.log(data)
|
||||
self.classList = data.classList
|
||||
self.recommend = data.recommend
|
||||
self.character = data.character
|
||||
self.health = data.health
|
||||
self.photography = data.photography
|
||||
axios.get('http://192.168.0.104:8082/news/app/newsdirectories/listnewsdirectoriesrelease', {
|
||||
params: {
|
||||
directoriesParentId: 'd9d8c7ea-32e0-43ed-ad17-7c99a3c389b9'
|
||||
}
|
||||
}).then(function (res) {
|
||||
console.log(res)
|
||||
self.classList = res.data
|
||||
})
|
||||
},
|
||||
getCharacter: function () {
|
||||
var self = this
|
||||
axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
|
||||
params: {
|
||||
page: 1,
|
||||
rows: 8,
|
||||
newsDirectoriesId: 'af9229f6-6e32-4594-808d-74955362427d'
|
||||
}
|
||||
}).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.recommend = res.data.rows
|
||||
self.character = res.data.rows
|
||||
})
|
||||
},
|
||||
getHealth: function () {
|
||||
var self = this
|
||||
axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
|
||||
params: {
|
||||
page: 1,
|
||||
rows: 8,
|
||||
newsDirectoriesId: 'ef97b165-ce82-47e4-8e3b-98ead4f6c1cc'
|
||||
}
|
||||
}).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.health = res.data.rows
|
||||
})
|
||||
},
|
||||
getPhotography: function () {
|
||||
var self = this
|
||||
axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
|
||||
params: {
|
||||
page: 1,
|
||||
rows: 8,
|
||||
newsDirectoriesId: '3b6f83b5-bcb4-4545-98d3-64e8cf596157'
|
||||
}
|
||||
}).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.photography = res.data.rows
|
||||
console.log(self.photography)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getArtData()
|
||||
this.getType()
|
||||
this.getCharacter()
|
||||
this.getHealth()
|
||||
this.getPhotography()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="train-banner">
|
||||
<div class="train-banner-content">
|
||||
<ul>
|
||||
<router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" v-for="list in classList" :key="list.id">{{list.name}}</router-link>
|
||||
<router-link :to="{path: '/artTrainList/' + list.newsDirectoriesId}" tag="li" v-for="list in classList" :key="list.id">{{list.directoriesName}}</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,35 +1,31 @@
|
||||
<template>
|
||||
<div class="character">
|
||||
<div class="character-title">
|
||||
<h2>蒙古族特色</h2>
|
||||
<ul>
|
||||
<li class="active">全部</li>
|
||||
<li v-for="list in character.characterType" :key="list.id">{{list.typeName}}</li>
|
||||
</ul>
|
||||
<router-link to="/artTrain">MORE>></router-link>
|
||||
<h2>民族特色</h2>
|
||||
<router-link to="/artTrainList/af9229f6-6e32-4594-808d-74955362427d">MORE>></router-link>
|
||||
</div>
|
||||
<div class="character-content">
|
||||
<div class="character-left">
|
||||
<span>蒙古族特色</span>
|
||||
<span>民族族特色</span>
|
||||
<div class="character-intro">
|
||||
<p>{{character.characterText}}</p>
|
||||
<p>蒙古文化是由蒙古民族创造的一种游牧文化。从13世纪开始蒙古人在成吉思汗的旗帜下再度统一草原部落，建立了疆域横跨欧亚的蒙古帝国，用国家形式重新整合各种社会力量，从而把部落与民族文化全面提高到了达到封建国家水准的“文明的进步状态”。成吉思汗的继承者们入主中原，建立了元朝。在历史的进程中元朝虽然消亡，但是从此形成的蒙古族却成为草原的主体民族，成为文化的承载者。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-right">
|
||||
<ul>
|
||||
<router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" v-for="list in character.characterList" :key="list.id">
|
||||
<li v-for="(list,idx) in character" :key="idx" @click="goDetail(list.templateRecordUrl)">
|
||||
<div class="recommend-img">
|
||||
<img :src="list.classPoster" alt="">
|
||||
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
|
||||
<img src="@/assets/images/play.svg" alt="" class="play-btn">
|
||||
</div>
|
||||
<div class="recommend-info">
|
||||
<h3>{{list.className}}</h3>
|
||||
<h3>{{list.newsContentTitle}}</h3>
|
||||
<div class="recommend-info-bottom">
|
||||
<span>讲师：{{list.teacher}}</span>
|
||||
<i>{{list.view}}</i>
|
||||
<span>讲师：{{list.newsContentAuthor}}</span>
|
||||
<!--<i>{{list.view}}</i>-->
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -40,11 +36,14 @@
|
||||
export default {
|
||||
name: 'Character',
|
||||
props: {
|
||||
character: Object
|
||||
character: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedType: '00'
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
goDetail: function (url) {
|
||||
window.location.href = 'http://192.168.0.104/' + url
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,34 +2,30 @@
|
||||
<div class="character">
|
||||
<div class="character-title">
|
||||
<h2>健康养生</h2>
|
||||
<ul>
|
||||
<li :class="{active: selectedType == '00'}" @click="selectedType = '00'">全部</li>
|
||||
<li v-for="list in health.healthType" :key="list.id" :class="{active: selectedType == list.id}" @click="selectedType = list.id">{{list.typeName}}</li>
|
||||
</ul>
|
||||
<router-link to="/artTrain">MORE>></router-link>
|
||||
<router-link to="/artTrainList/ef97b165-ce82-47e4-8e3b-98ead4f6c1cc">MORE>></router-link>
|
||||
</div>
|
||||
<div class="character-content">
|
||||
<div class="character-left">
|
||||
<span>健康养生</span>
|
||||
<div class="character-intro">
|
||||
<p>{{health.healthText}}</p>
|
||||
<p>养生指保养、调养、颐养生命。即以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、辟谷等多种方法,以期达到健康、长寿的目的。本、戏曲剧本在内。一般多取其广义的概念。戏剧人物的逼真性、戏剧冲突的尖锐性、戏剧场面的集中性、台词的口语化和动作性构成了戏剧文学的四大审美特征。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-right">
|
||||
<ul>
|
||||
<router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" v-for="list in health.healthList" :key="list.id">
|
||||
<li v-for="(list,idx) in health" :key="idx" @click="goDetail(list.templateRecordUrl)">
|
||||
<div class="recommend-img">
|
||||
<img :src="list.classPoster" alt="">
|
||||
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
|
||||
<img src="@/assets/images/play.svg" alt="" class="play-btn">
|
||||
</div>
|
||||
<div class="recommend-info">
|
||||
<h3>{{list.className}}</h3>
|
||||
<h3>{{list.newsContentTitle}}</h3>
|
||||
<div class="recommend-info-bottom">
|
||||
<span>讲师：{{list.teacher}}</span>
|
||||
<i>{{list.view}}</i>
|
||||
<span>讲师：{{list.newsContentAuthor}}</span>
|
||||
<!--<i>{{list.view}}</i>-->
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -40,12 +36,17 @@
|
||||
export default {
|
||||
name: 'Health',
|
||||
props: {
|
||||
health: Object
|
||||
health: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedType: '00'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goDetail: function (url) {
|
||||
window.location.href = 'http://192.168.0.104/' + url
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2,34 +2,30 @@
|
||||
<div class="character">
|
||||
<div class="character-title">
|
||||
<h2>摄影技巧</h2>
|
||||
<ul>
|
||||
<li :class="{active: selectedType == '00'}" @click="selectedType = '00'">全部</li>
|
||||
<li v-for="list in photography.photographyType" :key="list.id" :class="{active: selectedType == list.id}" @click="selectedType = list.id">{{list.typeName}}</li>
|
||||
</ul>
|
||||
<router-link to="/artTrain">MORE>></router-link>
|
||||
<router-link to="/artTrainList/3b6f83b5-bcb4-4545-98d3-64e8cf596157">MORE>></router-link>
|
||||
</div>
|
||||
<div class="character-content">
|
||||
<div class="character-left">
|
||||
<span>摄影技巧</span>
|
||||
<div class="character-intro">
|
||||
<p>{{photography.photographyText}}</p>
|
||||
<p>影视摄影从运动、色彩、光线，两极镜头等摄影造型元素入手，论述如何认识，运用它们去构造丰富的视觉造型语言。进而进行影视摄影创作。运动，是影视摄影最重要的造型元素，“是银幕造型的第一艺术特点”，也是影视摄影的生命。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-right">
|
||||
<ul>
|
||||
<router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" v-for="list in photography.photographyList" :key="list.id">
|
||||
<li v-for="(list,idx) in photography" :key="idx" @click="goDetail(list.templateRecordUrl)">
|
||||
<div class="recommend-img">
|
||||
<img :src="list.classPoster" alt="">
|
||||
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
|
||||
<img src="@/assets/images/play.svg" alt="" class="play-btn">
|
||||
</div>
|
||||
<div class="recommend-info">
|
||||
<h3>{{list.className}}</h3>
|
||||
<h3>{{list.newsContentTitle}}</h3>
|
||||
<div class="recommend-info-bottom">
|
||||
<span>讲师：{{list.teacher}}</span>
|
||||
<i>{{list.view}}</i>
|
||||
<span>讲师：{{list.newsContentAuthor}}</span>
|
||||
<!--<i>{{list.view}}</i>-->
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -40,12 +36,17 @@
|
||||
export default {
|
||||
name: 'Photography',
|
||||
props: {
|
||||
photography: Object
|
||||
photography: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedType: '00'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goDetail: function (url) {
|
||||
window.location.href = 'http://192.168.0.104/' + url
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2,19 +2,19 @@
|
||||
<div class="recommend">
|
||||
<h2>推荐课程</h2>
|
||||
<ul>
|
||||
<router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" v-for="list in recommend" :key="list.id">
|
||||
<li v-for="(list,idx) in recommend" :key="idx" @click="goDetail(list.templateRecordUrl)">
|
||||
<div class="recommend-img">
|
||||
<img :src="list.classPoster" alt="">
|
||||
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
|
||||
<img src="@/assets/images/play.svg" alt="" class="play-btn">
|
||||
</div>
|
||||
<div class="recommend-info">
|
||||
<h3>{{list.className}}</h3>
|
||||
<h3>{{list.newsContentTitle}}</h3>
|
||||
<div class="recommend-info-bottom">
|
||||
<span>讲师：{{list.teacher}}</span>
|
||||
<i>{{list.view}}</i>
|
||||
<span>讲师：{{list.newsContentAuthor}}</span>
|
||||
<!--<i>{{list.view}}</i>-->
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@ -24,6 +24,12 @@ export default {
|
||||
name: 'Recommend',
|
||||
props: {
|
||||
recommend: Array
|
||||
},
|
||||
methods: {
|
||||
goDetail: function (url) {
|
||||
console.log(url)
|
||||
window.location.href = 'http://192.168.0.104/' + url
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
306
src/pages/ArtTrainList/ArtTrainList.vue
Normal file
306
src/pages/ArtTrainList/ArtTrainList.vue
Normal file
@ -0,0 +1,306 @@
|
||||
<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="volunteer">
|
||||
<ul v-if="hasData">
|
||||
<li v-for="(list,idx) in classList" :key="idx" @click="goDetail(list.templateRecordUrl)">
|
||||
<div class="volunteer-img">
|
||||
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
|
||||
</div>
|
||||
<div class="volunteer-info">
|
||||
<h3>{{list.newsContentTitle}}</h3>
|
||||
<p>讲师：{{list.newsContentAuthor}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="no-data" v-else>
|
||||
<img src="@/assets/images/no-data.png" alt="">
|
||||
</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: 'ArtTrainList',
|
||||
components: {
|
||||
Header,
|
||||
Footer
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
changePage: 1,
|
||||
typeList: [],
|
||||
classList: [],
|
||||
page: {
|
||||
page: 1,
|
||||
rows: 8,
|
||||
totalPage: 1,
|
||||
newsDirectoriesId: '',
|
||||
newsDirectoriesParentId: 'd9d8c7ea-32e0-43ed-ad17-7c99a3c389b9'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showJumpBtn () {
|
||||
return this.page.totalPage > 1
|
||||
},
|
||||
hasData () {
|
||||
return this.classList.length > 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goDetail: function (url) {
|
||||
window.location.href = 'http://192.168.0.104/' + url
|
||||
},
|
||||
doJumpPage: function () {
|
||||
this.page.page = this.changePage
|
||||
this.getList()
|
||||
},
|
||||
paging: function (page) {
|
||||
this.page.page = page
|
||||
this.getList()
|
||||
},
|
||||
changeType: function (type) {
|
||||
if (type) {
|
||||
this.page.newsDirectoriesId = type
|
||||
} else {
|
||||
this.page.newsDirectoriesId = ''
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
getType: function () {
|
||||
var self = this
|
||||
axios.get('http://192.168.0.104:8082/news/app/newsdirectories/listnewsdirectoriesrelease', {
|
||||
params: {
|
||||
directoriesParentId: 'd9d8c7ea-32e0-43ed-ad17-7c99a3c389b9'
|
||||
}
|
||||
}).then(function (res) {
|
||||
self.typeList = res.data
|
||||
})
|
||||
},
|
||||
getList: 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.classList = res.data.rows
|
||||
self.page.page = res.data.page
|
||||
self.changePage = res.data.page
|
||||
self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.page.newsDirectoriesId = this.$route.params.type
|
||||
this.getType()
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||||
.location
|
||||
background #e5e5e5
|
||||
line-height 30px
|
||||
.location-content
|
||||
width 1200px
|
||||
margin 0 auto
|
||||
font-size 14px
|
||||
color #565656
|
||||
.volunteer
|
||||
width 1200px
|
||||
margin 20px auto
|
||||
ul
|
||||
overflow hidden
|
||||
min-height 400px
|
||||
li
|
||||
width 280px
|
||||
float left
|
||||
margin-right 20px
|
||||
border 1px solid #a8a8a8
|
||||
box-sizing border-box
|
||||
margin-bottom 20px
|
||||
cursor pointer
|
||||
.volunteer-img
|
||||
width 100%
|
||||
height 185px
|
||||
position relative
|
||||
img
|
||||
width 100%
|
||||
height 100%
|
||||
span
|
||||
display block
|
||||
width 70px
|
||||
height 25px
|
||||
line-height 25px
|
||||
text-align center
|
||||
color #fff
|
||||
font-size 12px
|
||||
background #999
|
||||
border-bottom-left-radius 8px
|
||||
border-bottom-right-radius 8px
|
||||
position absolute
|
||||
top 0
|
||||
left 20px
|
||||
.volunteer-info
|
||||
padding 10px 20px
|
||||
h3
|
||||
font-size 18px
|
||||
color #565656
|
||||
font-weight normal
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
text-overflow: ellipsis
|
||||
p
|
||||
font-size 14px
|
||||
color #a8a8a8
|
||||
line-height 30px
|
||||
button
|
||||
width 120px
|
||||
height 30px
|
||||
border none
|
||||
background #01a9f8
|
||||
border-radius 4px
|
||||
color #fff
|
||||
font-size 14px
|
||||
display block
|
||||
margin 0 auto
|
||||
cursor pointer
|
||||
.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 #01a9f8
|
||||
border-radius 4px
|
||||
color #fff
|
||||
.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 #01a9f8
|
||||
color #fff
|
||||
border 1px solid #01a9f8
|
||||
&: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
|
||||
.no-data
|
||||
padding 120px 0
|
||||
text-align center
|
||||
img
|
||||
width 200px
|
||||
</style>
|
||||
@ -6,46 +6,52 @@
|
||||
您的位置：<router-link to="/">首页</router-link> > 展览展示
|
||||
</div>
|
||||
</div>
|
||||
<div class="select">
|
||||
<div class="select-container">
|
||||
<div class="select-line">
|
||||
<span>展览分类></span>
|
||||
<button :class="{active: selectedType == '00'}" @click="selectedType = '00'">全部</button>
|
||||
<button v-for="btn in typeList" :key="btn.id" :class="{active: selectedType == btn.id}" @click="selectedType = btn.id">展览展示</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="select">-->
|
||||
<!--<div class="select-container">-->
|
||||
<!--<div class="select-line">-->
|
||||
<!--<span>展览分类></span>-->
|
||||
<!--<button :class="{active: selectedType == '00'}" @click="selectedType = '00'">全部</button>-->
|
||||
<!--<button v-for="btn in typeList" :key="btn.id" :class="{active: selectedType == btn.id}" @click="selectedType = btn.id">展览展示</button>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<div class="exhibition">
|
||||
<ul>
|
||||
<router-link :to="{path: '/exhibitionDetail/' + list.id}" tag="li" v-for="list in exhibition" :key="list.id">
|
||||
<li v-for="(list,idx) in exhibition" :key="idx" @click="goDetail(list.templateRecordUrl)">
|
||||
<div class="exhibition-img">
|
||||
<img :src="list.poster" alt="">
|
||||
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
|
||||
</div>
|
||||
<div class="exhibition-info">
|
||||
<h1>{{list.exhibitionName}}</h1>
|
||||
<div class="exhibition-info-bottom">
|
||||
<span class="good">{{list.good}}</span>
|
||||
<span class="view">{{list.view}}</span>
|
||||
</div>
|
||||
<h1>{{list.newsContentTitle}}</h1>
|
||||
<p>作者：{{list.newsContentAuthor}}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pager">
|
||||
<span>首页</span>
|
||||
<span>上一页</span>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>...</li>
|
||||
<li>59</li>
|
||||
<li>60</li>
|
||||
<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>
|
||||
<span>下一页</span>
|
||||
<span>尾页</span>
|
||||
<input type="text" value="1">
|
||||
<i>/58页</i>
|
||||
<button>跳转</button>
|
||||
<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>
|
||||
@ -63,25 +69,53 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedType: '00',
|
||||
typeList: [],
|
||||
exhibition: []
|
||||
changePage: 1,
|
||||
exhibition: [],
|
||||
page: {
|
||||
page: 1,
|
||||
rows: 8,
|
||||
totalPage: 1,
|
||||
newsDirectoriesId: 'f1d5d313-f728-4dda-9843-1116d97e17b0'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showJumpBtn () {
|
||||
return this.page.totalPage > 1
|
||||
},
|
||||
hasData () {
|
||||
return this.exhibition.length > 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getExhibitionData () {
|
||||
goDetail: function (url) {
|
||||
window.location.href = 'http://192.168.0.104/' + url
|
||||
},
|
||||
doJumpPage: function () {
|
||||
this.page.page = this.changePage
|
||||
this.getList()
|
||||
},
|
||||
paging: function (page) {
|
||||
this.page.page = page
|
||||
this.getList()
|
||||
},
|
||||
getList: function () {
|
||||
var self = this
|
||||
axios.get('/api/exhibition.json').then(function (res) {
|
||||
res = res.data
|
||||
const data = res.data
|
||||
console.log(data)
|
||||
self.typeList = data.typeList
|
||||
self.exhibition = data.exhibition
|
||||
axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
|
||||
params: self.page
|
||||
}).then(function (res) {
|
||||
console.log(res.data)
|
||||
for (var i = 0; i < res.data.rows.length; i++) {
|
||||
res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
|
||||
}
|
||||
self.exhibition = res.data.rows
|
||||
self.page.page = res.data.page
|
||||
self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getExhibitionData()
|
||||
mounted: function () {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -157,6 +191,13 @@ export default {
|
||||
overflow hidden
|
||||
text-overflow: ellipsis
|
||||
margin-bottom 5px
|
||||
p
|
||||
font-size 14px
|
||||
color #565656
|
||||
text-align center
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
.exhibition-info-bottom
|
||||
span
|
||||
font-size 14px
|
||||
@ -165,7 +206,7 @@ export default {
|
||||
float right
|
||||
.pager
|
||||
width 1200px
|
||||
margin 0 auto 20px
|
||||
margin 20px auto
|
||||
text-align center
|
||||
font-size 0
|
||||
span
|
||||
@ -177,6 +218,7 @@ export default {
|
||||
font-size 14px
|
||||
margin 0 5px
|
||||
vertical-align middle
|
||||
cursor pointer
|
||||
ul
|
||||
display inline-block
|
||||
overflow hidden
|
||||
@ -191,6 +233,12 @@ export default {
|
||||
text-align center
|
||||
font-size 14px
|
||||
color #676767
|
||||
&.active
|
||||
background #01a9f8
|
||||
color #fff
|
||||
border 1px solid #01a9f8
|
||||
&:last-child
|
||||
margin 0
|
||||
input
|
||||
width 50px
|
||||
height 25px
|
||||
|
||||
@ -26,6 +26,7 @@ import Register from '@/pages/Register/Register'
|
||||
import IntangibleHeritage from '@/pages/IntangibleHeritage/IntangibleHeritage'
|
||||
import IntangibleHeritageDetail from '@/pages/IntangibleHeritageDetail/IntangibleHeritageDetail'
|
||||
import SearchResult from '@/pages/SearchResult/SearchResult'
|
||||
import ArtTrainList from '@/pages/ArtTrainList/ArtTrainList'
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
@ -263,6 +264,15 @@ export default new Router({
|
||||
title: '搜索结果',
|
||||
keepAlive: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/artTrainList/:type',
|
||||
name: 'ArtTrainList',
|
||||
component: ArtTrainList,
|
||||
meta: {
|
||||
title: '艺术培训',
|
||||
keepAlive: false
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user