Tenlion/xzrkz-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

search

Browse Source
This commit is contained in:
dong_bo0602 2020-06-11 14:10:58 +08:00
parent 1d39a5ffe0
commit a6125f95f2
15 changed files with 1030 additions and 824 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/styles/reset.css
View File

@ -1,4 +1,5 @@
@charset "utf-8";a,body,dd,div,dl,dt,em,form,h1,h2,h3,h4,h5,h6,img,input,li,ol,option,p,select,span,strong,table,td,textarea,th,ul,var{margin:0;padding:0}body,html{font:400 100% "微软雅黑",Arail,Tabhoma;text-align:left;color:#535353;-webkit-font-smoothing:antialiased;line-height:normal}ol,ul{list-style:none}img{border:0;vertical-align:top}input,select,textarea{outline:0}textarea{resize:none}table{border-collapse:collapse;border-spacing:0}em,strong,th,var{font-weight:400;font-style:normal}a{text-decoration:none;color:#555}a,input{-webkit-tap-highlight-color:transparent}[v-cloak]{display: none}
@charset "utf-8";a,body,dd,div,dl,dt,em,form,h1,h2,h3,h4,h5,h6,img,input,li,ol,option,p,select,span,strong,table,td,textarea,th,ul,var{margin:0;padding:0}body,html{font:400 100% "zangwen",Arail,Tabhoma;text-align:left;color:#535353;-webkit-font-smoothing:antialiased;line-height:normal}ol,ul{list-style:none}img{border:0;vertical-align:top}input,select,textarea{outline:0}textarea{resize:none}table{border-collapse:collapse;border-spacing:0}em,strong,th,var{font-weight:400;font-style:normal}a{text-decoration:none;color:#555}a,input{-webkit-tap-highlight-color:transparent}[v-cloak]{display: none}
button{font-family: 'zangwen'}
@font-face {
font-family: 'zangwen';
src: url('zang.ttf');

35
src/common/components/Header.vue
View File

@ -12,8 +12,8 @@
<button @click="doLogout">退出登录</button>
</div>
<div class="login-register-btn" v-else>
<router-link to="/login" class="login" target="_blank">登录</router-link>
<router-link to="/register" target="_blank">注册</router-link>
<router-link to="/login" class="login" >登录</router-link>
<router-link to="/register" >注册</router-link>
</div>
</div>
</div>
@ -30,62 +30,62 @@
<div class="nav">
<ul class="nav-container">
<li :class="{active: this.$route.path == '/'}">
<router-link to="/" target="_blank">
<router-link to="/" >
首页
</router-link>
</li>
<li :class="{active: this.$route.path == '/dynamics' || this.$route.path == '/dynamicsDetail/' + this.$route.params.id}">
<router-link to="/dynamics" target="_blank">
<router-link to="/dynamics" >
文化动态
</router-link>
</li>
<li :class="{active: this.$route.path == '/cultureActivity' || this.$route.path == '/cultureActivityDetail/' + this.$route.params.id}">
<router-link to="/cultureActivity" target="_blank">
<router-link to="/cultureActivity" >
文化活动
</router-link>
</li>
<li :class="{active: this.$route.path == '/cultureVenue' || this.$route.path == '/cultureVenueDetail/' + this.$route.params.id}">
<router-link to="/cultureVenue" target="_blank">
<router-link to="/cultureVenue" >
文化场馆
</router-link>
</li>
<li :class="{active: this.$route.path == '/artTrain' || this.$route.path == '/artTrainDetail/' + this.$route.params.id}">
<router-link to="/artTrain" target="_blank">
<router-link to="/artTrain" >
艺术培训
</router-link>
</li>
<!--<li :class="{active: this.$route.path == '/distribution' || this.$route.path == '/distributionDetail/' + this.$route.params.id}">-->
<!--<router-link to="/distribution" target="_blank">-->
<!--<router-link to="/distribution" >-->
<!--预约配送-->
<!--</router-link>-->
<!--</li>-->
<li :class="{active: this.$route.path == '/broadcast' || this.$route.path == '/broadcastDetail/' + this.$route.params.id}">
<router-link to="/broadcast" target="_blank">
<router-link to="/broadcast" >
共享直播
</router-link>
</li>
<li :class="{active: this.$route.path == '/resource' || this.$route.path == '/resourceDetail/' + this.$route.params.id}">
<router-link to="/resource" target="_blank">
<router-link to="/resource" >
民间文学
</router-link>
</li>
<li :class="{active: this.$route.path == '/volunteer' || this.$route.path == '/volunteerDetail/' + this.$route.params.id}">
<router-link to="/volunteer" target="_blank">
<router-link to="/volunteer" >
志愿服务
</router-link>
</li>
<li :class="{active: this.$route.path == '/exhibition' || this.$route.path == '/exhibitionDetail/' + this.$route.params.id}">
<router-link to="/exhibition" target="_blank">
<router-link to="/exhibition" >
展览展示
</router-link>
</li>
<li :class="{active: this.$route.path == '/travel' || this.$route.path == '/travelDetail/' + this.$route.params.id}">
<router-link to="/travel" target="_blank">
<router-link to="/travel" >
文化旅游
</router-link>
</li>
<li :class="{active: this.$route.path == '/intangibleHeritage' || this.$route.path == '/intangibleHeritageDetail/' + this.$route.params.id}">
<router-link to="/intangibleHeritage" target="_blank">
<router-link to="/intangibleHeritage" >
非遗清单
</router-link>
</li>
@ -113,13 +113,14 @@ export default {
},
methods: {
doSearch: function () {
console.log(this.keywords)
this.$router.push({
path: 'searchResult',
const { href } = this.$router.resolve({
path: '/searchResult',
query: {
keywords: this.keywords
}
})
// console.log(href)
window.open(href)
},
checkLogin: function () {
var self = this

222
src/pages/ArtTrain/ArtTrain.vue
View File

@ -6,11 +6,37 @@
您的位置：<router-link to="/">首页</router-link> > 艺术培训
</div>
</div>
<!--<Banner :classList="classList"></Banner>-->
<!--<Recommend :recommend="recommend"></Recommend>-->
<Character :character="character"></Character>
<Health :health="health"></Health>
<Photography :photography="photography"></Photography>
<div class="character" v-for="(list,idx) in classList" :key="idx" v-if="list.isShow">
<div class="character-title">
<h2>{{list.directoriesName}}</h2>
<router-link :to="{path: '/artTrainList/' + list.newsDirectoriesId}">MORE>></router-link>
</div>
<div class="character-content">
<div class="character-left">
<span>{{list.directoriesName}}</span>
<div class="character-intro">
<p>{{list.directoriesDescription}}</p>
</div>
</div>
<div class="character-right">
<ul>
<li v-for="(inner,idx) in list.innerList" :key="idx" @click="goDetail(inner.templateRecordUrl)">
<div class="recommend-img">
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + inner.newsContentCoverList" alt="">
<img src="@/assets/images/play.png" alt="" class="play-btn">
</div>
<div class="recommend-info">
<h3>{{inner.newsContentTitle}}</h3>
<div class="recommend-info-bottom">
<span>讲师：{{inner.newsContentAuthor}}</span>
<!--<i>{{list.view}}</i>-->
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<Footer></Footer>
</div>
</template>
@ -18,22 +44,12 @@
<script>
import Header from '@/common/components/Header'
import Footer from '@/common/components/Footer'
import Banner from './components/Banner'
import Recommend from './components/Recommend'
import Character from './components/Character'
import Health from './components/Health'
import Photography from './components/Photography'
import axios from 'axios'
export default {
name: 'ArtTrain',
components: {
Header,
Footer,
Banner,
Recommend,
Character,
Health,
Photography
Footer
},
data () {
return {
@ -54,92 +70,42 @@ export default {
}
}).then(function (res) {
self.classList = res.data
self.getPageInfo()
for (var i = 0; i < self.classList.length; i++) {
var item = self.classList[i]
self.getNewsList(item)
}
})
},
getPageInfo: function () {
var self = this
var arr = []
for (var i = 0; i < self.classList.length; i++) {
axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
params: {
page: 1,
rows: 8,
newsDirectoriesId: self.classList[i].newsDirectoriesId
}
}).then(function (res) {
// if (res.data.rows.length > 0) {
for (var j = 0; j < res.data.rows.length; j++) {
res.data.rows[j].newsContentCoverList = res.data.rows[j].newsContentCoverList[0].contentCoverId
}
// }
var result = {
data: res.data.rows
}
arr.push(result)
})
}
self.innerContent = arr
console.log(self.innerContent)
},
getCharacter: function () {
getNewsList: function (item) {
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) {
console.log(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'
newsDirectoriesId: item.newsDirectoriesId
}
}).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'
var count = res.data.rows.length
if (count === 0) {
self.$set(item, 'isShow', false)
} else {
self.$set(item, 'isShow', true)
}
}).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
self.$set(item, 'innerList', res.data.rows)
})
}
},
mounted () {
this.getType()
this.getCharacter()
this.getHealth()
this.getPhotography()
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~styles/public.styl"
.location
background #e5e5e5
line-height 30px
@ -148,4 +114,102 @@ export default {
margin 0 auto
font-size 14px
color #565656
.character
margin 20px auto 20px
width 1200px
.character-title
overflow hidden
margin-bottom 20px
h2
font-size 22px
color #565656
font-weight normal
float left
ul
float left
overflow hidden
margin-left 50px
li
width 100px
cursor pointer
font-size 14px
color #565656
float left
line-height 30px
&.active
color $main-color
font-weight bold
font-size 16px
a
float right
font-size 12px
color $main-color
line-height 30px
.character-content
overflow hidden
margin-top 20px
.character-left
float left
width: 225px
height: 430px
padding 20px
box-sizing border-box
overflow hidden
color #fff
background $main-color
span
display inline-block
padding-top 30px
border-top 3px solid #fff
font-size 22px
margin-top 40px
margin-bottom 30px
.character-intro
height 200px
overflow hidden
p
font-size 13px
color #fff
line-height 28px
.character-right
float right
width 956px
ul
overflow hidden
li
float left
width: 224px
border solid 1px #dedede
margin-right 20px
cursor pointer
box-sizing border-box
margin-bottom 10px
&:nth-child(4n)
margin-right 0
.recommend-img
width 100%
height 150px
position relative
img
width 100%
height 150px
.play-btn
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
width 48px
height 48px
.recommend-info
padding 5px 10px
h3
font-size 14px
color #565656
.recommend-info-bottom
font-size 14px
color #a8a8a8
padding-top 10px
i
font-style normal
float right
</style>

39
src/pages/ArtTrain/components/Banner.vue
View File

@ -1,39 +0,0 @@
<template>
<div class="train-banner">
<div class="train-banner-content">
<ul>
<router-link :to="{path: '/artTrainList/' + list.newsDirectoriesId}" tag="li" v-for="list in classList" :key="list.id">{{list.directoriesName}}</router-link>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'Banner',
props: {
classList: Array
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.train-banner
width 100%
min-width 1200px
background url("../../../assets/images/train-banner.png") no-repeat center
background-size 100% 100%
.train-banner-content
width 1200px
margin 0 auto
ul
li
width: 200px
height: 45px
line-height 45px
text-align center
background #01a9f8
font-size 18px
color #fff
cursor pointer
</style>

151
src/pages/ArtTrain/components/Character.vue
View File

@ -1,151 +0,0 @@
<template>
<div class="character">
<div class="character-title">
<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>
<div class="character-intro">
<p>蒙古文化是由蒙古民族创造的一种游牧文化。从13世纪开始蒙古人在成吉思汗的旗帜下再度统一草原部落，建立了疆域横跨欧亚的蒙古帝国，用国家形式重新整合各种社会力量，从而把部落与民族文化全面提高到了达到封建国家水准的“文明的进步状态”。成吉思汗的继承者们入主中原，建立了元朝。在历史的进程中元朝虽然消亡，但是从此形成的蒙古族却成为草原的主体民族，成为文化的承载者。</p>
</div>
</div>
<div class="character-right">
<ul>
<li v-for="(list,idx) in character" :key="idx" @click="goDetail(list.templateRecordUrl)">
<div class="recommend-img">
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
<img src="@/assets/images/play.png" alt="" class="play-btn">
</div>
<div class="recommend-info">
<h3>{{list.newsContentTitle}}</h3>
<div class="recommend-info-bottom">
<span>讲师：{{list.newsContentAuthor}}</span>
<!--<i>{{list.view}}</i>-->
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Character',
props: {
character: Array
},
data () {
return {}
},
methods: {
goDetail: function (url) {
window.location.href = 'http://192.168.0.104/' + url
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.character
margin 20px auto 20px
width 1200px
.character-title
overflow hidden
margin-bottom 20px
h2
font-size 22px
color #565656
font-weight normal
float left
ul
float left
overflow hidden
margin-left 50px
li
width 100px
cursor pointer
font-size 14px
color #565656
float left
line-height 30px
&.active
color #01a9f8
font-weight bold
font-size 16px
a
float right
font-size 12px
color #01a9f8
line-height 30px
.character-content
overflow hidden
margin-top 20px
.character-left
float left
width: 225px
height: 430px
padding 20px
box-sizing border-box
overflow hidden
color #fff
background #01a9f8
span
display inline-block
padding-top 30px
border-top 3px solid #fff
font-size 22px
margin-top 40px
margin-bottom 30px
.character-intro
height 200px
overflow hidden
p
font-size 13px
color #fff
line-height 28px
.character-right
float right
width 956px
ul
overflow hidden
li
float left
width: 224px
border solid 1px #dedede
margin-right 20px
cursor pointer
box-sizing border-box
margin-bottom 10px
&:nth-child(4n)
margin-right 0
.recommend-img
width 100%
height 150px
position relative
img
width 100%
height 150px
.play-btn
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
width 48px
height 48px
.recommend-info
padding 5px 10px
h3
font-size 14px
color #565656
.recommend-info-bottom
font-size 14px
color #a8a8a8
padding-top 10px
i
font-style normal
float right
</style>

153
src/pages/ArtTrain/components/Health.vue
View File

@ -1,153 +0,0 @@
<template>
<div class="character">
<div class="character-title">
<h2>健康养生</h2>
<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>养生指保养、调养、颐养生命。即以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、辟谷等多种方法,以期达到健康、长寿的目的。本、戏曲剧本在内。一般多取其广义的概念。戏剧人物的逼真性、戏剧冲突的尖锐性、戏剧场面的集中性、台词的口语化和动作性构成了戏剧文学的四大审美特征。</p>
</div>
</div>
<div class="character-right">
<ul>
<li v-for="(list,idx) in health" :key="idx" @click="goDetail(list.templateRecordUrl)">
<div class="recommend-img">
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
<img src="@/assets/images/play.png" alt="" class="play-btn">
</div>
<div class="recommend-info">
<h3>{{list.newsContentTitle}}</h3>
<div class="recommend-info-bottom">
<span>讲师：{{list.newsContentAuthor}}</span>
<!--<i>{{list.view}}</i>-->
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Health',
props: {
health: Array
},
data () {
return {
selectedType: '00'
}
},
methods: {
goDetail: function (url) {
window.location.href = 'http://192.168.0.104/' + url
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.character
margin 0 auto 20px
width 1200px
.character-title
overflow hidden
margin-bottom 20px
h2
font-size 22px
color #565656
font-weight normal
float left
ul
float left
overflow hidden
margin-left 50px
li
width 100px
cursor pointer
font-size 14px
color #565656
float left
line-height 30px
&.active
color #01a9f8
font-weight bold
font-size 16px
a
float right
font-size 12px
color #01a9f8
line-height 30px
.character-content
overflow hidden
margin-top 20px
.character-left
float left
width: 225px
height: 430px
padding 20px
box-sizing border-box
overflow hidden
color #fff
background #fb7b76
span
display inline-block
padding-top 30px
border-top 3px solid #fff
font-size 22px
margin-top 40px
margin-bottom 30px
.character-intro
height 200px
overflow hidden
p
font-size 13px
color #fff
line-height 28px
.character-right
float right
width 956px
ul
overflow hidden
li
float left
width: 224px
border solid 1px #dedede
margin-right 20px
cursor pointer
box-sizing border-box
margin-bottom 10px
&:nth-child(4n)
margin-right 0
.recommend-img
width 100%
height 150px
position relative
img
width 100%
height 150px
.play-btn
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
width 48px
height 48px
.recommend-info
padding 5px 10px
h3
font-size 14px
color #565656
.recommend-info-bottom
font-size 14px
color #a8a8a8
padding-top 10px
i
font-style normal
float right
</style>

153
src/pages/ArtTrain/components/Photography.vue
View File

@ -1,153 +0,0 @@
<template>
<div class="character">
<div class="character-title">
<h2>摄影技巧</h2>
<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>影视摄影从运动、色彩、光线，两极镜头等摄影造型元素入手，论述如何认识，运用它们去构造丰富的视觉造型语言。进而进行影视摄影创作。运动，是影视摄影最重要的造型元素，“是银幕造型的第一艺术特点”，也是影视摄影的生命。</p>
</div>
</div>
<div class="character-right">
<ul>
<li v-for="(list,idx) in photography" :key="idx" @click="goDetail(list.templateRecordUrl)">
<div class="recommend-img">
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
<img src="@/assets/images/play.png" alt="" class="play-btn">
</div>
<div class="recommend-info">
<h3>{{list.newsContentTitle}}</h3>
<div class="recommend-info-bottom">
<span>讲师：{{list.newsContentAuthor}}</span>
<!--<i>{{list.view}}</i>-->
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Photography',
props: {
photography: Array
},
data () {
return {
selectedType: '00'
}
},
methods: {
goDetail: function (url) {
window.location.href = 'http://192.168.0.104/' + url
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.character
margin 0 auto 20px
width 1200px
.character-title
overflow hidden
margin-bottom 20px
h2
font-size 22px
color #565656
font-weight normal
float left
ul
float left
overflow hidden
margin-left 50px
li
width 100px
cursor pointer
font-size 14px
color #565656
float left
line-height 30px
&.active
color #01a9f8
font-weight bold
font-size 16px
a
float right
font-size 12px
color #01a9f8
line-height 30px
.character-content
overflow hidden
margin-top 20px
.character-left
float left
width: 225px
height: 430px
padding 20px
box-sizing border-box
overflow hidden
color #fff
background #fcc245
span
display inline-block
padding-top 30px
border-top 3px solid #fff
font-size 22px
margin-top 40px
margin-bottom 30px
.character-intro
height 200px
overflow hidden
p
font-size 13px
color #fff
line-height 28px
.character-right
float right
width 956px
ul
overflow hidden
li
float left
width: 224px
border solid 1px #dedede
margin-right 20px
cursor pointer
box-sizing border-box
margin-bottom 10px
&:nth-child(4n)
margin-right 0
.recommend-img
width 100%
height 150px
position relative
img
width 100%
height 150px
.play-btn
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
width 48px
height 48px
.recommend-info
padding 5px 10px
h3
font-size 14px
color #565656
.recommend-info-bottom
font-size 14px
color #a8a8a8
padding-top 10px
i
font-style normal
float right
</style>

84
src/pages/ArtTrain/components/Recommend.vue
View File

@ -1,84 +0,0 @@
<template>
<div class="recommend">
<h2>推荐课程</h2>
<ul>
<li v-for="(list,idx) in recommend" :key="idx" @click="goDetail(list.templateRecordUrl)">
<div class="recommend-img">
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
<img src="@/assets/images/play.png" alt="" class="play-btn">
</div>
<div class="recommend-info">
<h3>{{list.newsContentTitle}}</h3>
<div class="recommend-info-bottom">
<span>讲师：{{list.newsContentAuthor}}</span>
<!--<i>{{list.view}}</i>-->
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Recommend',
props: {
recommend: Array
},
methods: {
goDetail: function (url) {
console.log(url)
window.location.href = 'http://192.168.0.104/' + url
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.recommend
margin 20px auto
width 1200px
h2
font-size 22px
color #565656
font-weight normal
margin-bottom 20px
ul
overflow hidden
li
float left
width: 224px
border solid 1px #dedede
margin-right 20px
cursor pointer
box-sizing border-box
&:last-child
margin-right 0
.recommend-img
width 100%
height 150px
position relative
img
width 100%
height 150px
.play-btn
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
width 48px
height 48px
.recommend-info
padding 5px 10px
h3
font-size 14px
color #565656
font-weight normal
.recommend-info-bottom
font-size 14px
color #a8a8a8
padding-top 10px
i
font-style normal
float right
</style>

9
src/pages/ArtTrainList/ArtTrainList.vue
View File

@ -146,6 +146,7 @@ export default {
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~styles/public.styl"
.location
background #e5e5e5
line-height 30px
@ -206,7 +207,7 @@ export default {
width 120px
height 30px
border none
background #01a9f8
background $main-color
border-radius 4px
color #fff
font-size 14px
@ -237,7 +238,7 @@ export default {
line-height 30px
cursor pointer
&.active
background #01a9f8
background $main-color
border-radius 4px
color #fff
.pager
@ -270,9 +271,9 @@ export default {
font-size 14px
color #676767
&.active
background #01a9f8
background $main-color
color #fff
border 1px solid #01a9f8
border 1px solid $main-color
&:last-child
margin 0
input

4
src/pages/CultureActivity/CultureActivity.vue
View File

@ -27,7 +27,7 @@
</div>
<div class="service-content">
<ul class="service-container" v-if="hasData">
<router-link :to="{path: '/cultureActivityDetail/' + list.activityLibraryId}" tag="li" class="service-list" v-for="list in activityList" :key="list.id">
<router-link :to="{path: '/cultureActivityDetail/' + list.activityLibraryId}" tag="li" class="service-list" v-for="(list,idx) in activityList" :key="idx">
<div class="service-img-box">
<img :src="'http://192.168.0.111:8080/culturalactivity/route/file/downloadfile/false/' + list.activityImage" alt="" class="service-img">
</div>
@ -253,7 +253,7 @@ export default {
text-align center
color #fff
border-radius: 4px;
background red
background $main-color
border none
outline none
margin 0 auto

36
src/pages/CultureDynamics/CultureDynamics.vue
View File

@ -38,19 +38,6 @@
</div>
</div>
</div>
<div class="dynamics-right">
<div class="dynamics-title">
<span>点击排行榜</span>
</div>
<div class="click-rank">
<ul>
<li v-for="list in rankList" :key="list.id">
<router-link to="/dynamics">{{list.dynamicTitle}}</router-link>
<span>{{list.view}}</span>
</li>
</ul>
</div>
</div>
</div>
<div class="pager" v-if="hasData">
<span @click="paging(1)">首页</span>
@ -282,29 +269,6 @@ export default {
text-align center
img
width 200px
.dynamics-right
float right
width 380px
ul
li
height 50px
line-height 50px
border-bottom 1px solid #dcdcdc
a
display inline-block
max-width 75%
overflow hidden
white-space nowrap
-ms-text-overflow: ellipsis
text-overflow: ellipsis
font-size 14px
color #333
&:hover
color $main-color
span
float right
font-size 14px
color #999
.pager
width 1200px
margin 20px auto

1
src/pages/Index/components/IndexDynamic.vue
View File

@ -90,6 +90,7 @@ export default {
padding-bottom 66.666%
overflow hidden
position relative
margin-bottom 10px
&:after
content ''
display block

960
src/pages/SearchResult/SearchResult.vue
View File

@ -6,57 +6,227 @@
您的位置：<router-link to="/">首页</router-link> > 搜索列表
</div>
</div>
<div class="search">
<ul>
<li>
<img src="@/assets/images/service.jpg" alt="">
<div class="search-text">12123123</div>
</li>
<li>
<img src="@/assets/images/service.jpg" alt="">
<div class="search-text">12123123</div>
</li>
<li>
<img src="@/assets/images/service.jpg" alt="">
<div class="search-text">12123123</div>
</li>
<li>
<img src="@/assets/images/service.jpg" alt="">
<div class="search-text">12123123</div>
</li>
<li>
<img src="@/assets/images/service.jpg" alt="">
<div class="search-text">12123123</div>
</li>
<li>
<img src="@/assets/images/service.jpg" alt="">
<div class="search-text">12123123</div>
</li><li>
<img src="@/assets/images/service.jpg" alt="">
<div class="search-text">12123123</div>
</li>
<li>
<img src="@/assets/images/service.jpg" alt="">
<div class="search-text">12123123</div>
</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>
</ul>
<span>下一页</span>
<span>尾页</span>
<input type="text" value="1">
<i>/58页</i>
<button>跳转</button>
<div class="search-container">
<!--文化动态-->
<div class="dynamic" v-if="dynamicList.length > 0">
<h3 class="search-title">
文化动态
<span>共有{{dynamicTotal}}条数据</span>
</h3>
<ul>
<li v-for="(list,idx) in dynamicList" :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>
<button class="check-more" v-if="dynamicTotal > 4">查看更多</button>
</div>
<!--文化活动-->
<div class="activity" v-if="activityList.length > 0">
<h3 class="search-title">
文化活动
<span>共有{{activityTotal}}条数据</span>
</h3>
<ul class="service-container">
<router-link :to="{path: '/cultureActivityDetail/' + list.activityLibraryId}" tag="li" class="service-list" v-for="(list,idx) in activityList" :key="idx">
<div class="service-img-box">
<img :src="'http://192.168.0.111:8080/culturalactivity/route/file/downloadfile/false/' + list.activityImage" alt="" class="service-img">
</div>
<div class="service-info">
<h3 class="service-name">{{list.activityTitle}}</h3>
<p class="time">{{list.activityStartTime}}至{{list.activityEndTime}}</p>
<p class="activity-location">{{list.activityAddress}}</p>
<button class="sign-btn" v-if="list.activityState == 3">报名中</button>
<button class="sign-btn" v-else-if="list.activityState == 4">报名人数已满</button>
<button class="sign-btn" v-else-if="list.activityState == 5">报名结束</button>
<button class="sign-btn" v-else-if="list.activityState == 6">进行中</button>
<button class="sign-btn" v-else-if="list.activityState == 7">进入查看</button>
<button class="sign-btn" v-else-if="list.activityState == 99">已结束</button>
</div>
</router-link>
</ul>
<button class="check-more">查看更多</button>
</div>
<!--场馆-->
<div class="venue" v-if="venueList.length > 0">
<h3 class="search-title">
文化场馆
<span>共有{{venueTotal}}条数据</span>
</h3>
<ul>
<router-link :to="{path: '/cultureVenueDetail/' + list.venuesInfoId}" tag="li" class="venue-list" v-for="(list,idx) in venueList" :key="idx">
<img :src="'http://192.168.0.109:8082/venuebooking/route/file/downloadfile/false/' + list.venuePanorama" alt="">
<div class="venue-name">
<p>{{list.venueName}}</p>
</div>
</router-link>
</ul>
<button class="check-more" v-if="venueList.length > 4">查看更多</button>
</div>
<!--艺术培训-->
<div class="art" v-if="artList.length > 0">
<h3 class="search-title">
艺术培训
<span>共有{{artTotal}}条数据</span>
</h3>
<ul>
<li v-for="(list,idx) in artList" :key="idx" @click="goDetail(list.templateRecordUrl)">
<div class="recommend-img">
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
<!--<img src="@/assets/images/play.png" alt="" class="play-btn">-->
</div>
<div class="recommend-info">
<h3>{{list.newsContentTitle}}</h3>
<div class="recommend-info-bottom">
<span>讲师：{{list.newsContentAuthor}}</span>
</div>
</div>
</li>
</ul>
<button class="check-more" v-if="artTotal > 4">查看更多</button>
</div>
<!--共享直播-->
<div class="broadcast" v-if="broadcastList.length > 0">
<h3 class="search-title">
共享直播
<span>共有{{broadcastTotal}}条数据</span>
</h3>
<ul>
<router-link :to="{path: '/broadcastDetail/' + list.livePlanId}" tag="li" v-for="list in broadcastList" :key="list.id">
<div class="broadcast-img">
<img :src="'http://192.168.0.104:8084/live/route/file/downloadfile/false/' + list.livePlanPhoto" alt="">
<img src="@/assets/images/play.svg" alt="" class="play-btn">
</div>
<div class="broadcast-info">
<h3>{{list.livePlanName}}</h3>
<p>开始时间：{{list.livePlanStart}}</p>
<button v-if="list.liveStatus == 0">已结束</button>
<button v-else-if="list.liveStatus == 1">尚未开始</button>
<button v-else>进行中</button>
</div>
</router-link>
</ul>
<button class="check-more" v-if="broadcastTotal > 4">查看更多</button>
</div>
<!--民间文学-->
<div class="literature" v-if="literatureList.length > 0">
<h3 class="search-title">
民间文学
<span>共有{{literatureTotal}}条数据</span>
</h3>
<ul>
<router-link :to="{path: '/resourceDetail/' + list.intangibleLibraryDataId}" tag="li" v-for="(list,idx) in literatureList" :key="idx">
<div class="resource-img">
<img :src="'http://192.168.0.104:8081/library/route/file/downloadfile/false/' + list.libraryDataCover" alt="">
</div>
<div class="resource-info">
<h3>{{list.libraryDataTitle}}</h3>
<p>{{list.libraryDataAuthor}}</p>
</div>
</router-link>
</ul>
<button class="check-more" v-if="literatureTotal > 4">查看更多</button>
</div>
<!--志愿活动-->
<div class="volunteer" v-if="volunteerList.length > 0">
<h3 class="search-title">
志愿服务
<span>共有{{volunteerTotal}}条数据</span>
</h3>
<ul>
<router-link :to="{path: '/volunteerDetail/' + list.volunteerServiceId}" tag="li" v-for="list in volunteerList" :key="list.id">
<div class="volunteer-img">
<img :src="'http://192.168.0.111:8888/volunteer/route/file/downloadfile/false/' + list.photo" alt="">
</div>
<div class="volunteer-info">
<h3>{{list.serviceName}}</h3>
<p>计划招募：{{list.count}}人</p>
<p>时间：{{list.startTime}}至{{list.endTime}}</p>
<button>查看详情</button>
</div>
</router-link>
</ul>
<button class="check-more" v-if="volunteerList.length > 4">查看更多</button>
</div>
<!--展览展示-->
<div class="exhibition" v-if="exhibitionList.length > 0">
<h3 class="search-title">
展览展示
<span>共有{{exhibitionTotal}}条数据</span>
</h3>
<ul>
<li v-for="(list,idx) in exhibitionList" :key="idx" @click="goDetail(list.templateRecordUrl)">
<div class="exhibition-img">
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
</div>
<div class="exhibition-info">
<h1>{{list.newsContentTitle}}</h1>
<p>作者：{{list.newsContentAuthor}}</p>
</div>
</li>
</ul>
<button class="check-more" v-if="exhibitionTotal > 4">查看更多</button>
</div>
<!--旅游-->
<div class="travel" v-if="travelList.length > 0">
<h3 class="search-title">
文化旅游
<span>共有{{travelTotal}}条数据</span>
</h3>
<ul>
<li v-for="list in travelList" :key="list.id" @click="goDetail(list.templateRecordUrl)">
<div class="travel-img">
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
<div class="travel-name">
{{list.newsContentTitle}}
</div>
</div>
</li>
</ul>
<button class="check-more" v-if="travelTotal > 4">查看更多</button>
</div>
<!--非遗-->
<div class="heritage" v-if="heritageList.length > 0">
<h3 class="search-title">
非遗清单
<span>共有8条数据</span>
</h3>
<table>
<thead>
<tr>
<th width="8%">序号</th>
<th width="8%">编号</th>
<th width="20%">名称</th>
<th width="17%">公布时间</th>
<th width="10%">类型</th>
<th width="17%">申报地区或单位</th>
<th width="20%">保护单位</th>
</tr>
</thead>
<tbody>
<tr v-for="(list,idx) in heritageList" :key="idx">
<td>{{idx+1}}</td>
<td>{{list.libraryNumber}}</td>
<td><router-link :to="{path: '/intangibleHeritageDetail/' + list.intangibleLibraryId}">{{list.libraryTitle}}</router-link></td>
<td>{{list.libraryOpenDateValue}}</td>
<td>{{list.libraryTypeValue}}</td>
<td>{{list.libraryArea}}</td>
<td>{{list.libraryAuthor}}</td>
</tr>
</tbody>
</table>
<button class="check-more" v-if="heritageTotal > 4">查看更多</button>
</div>
<!--无内容-->
<div class="no-data" v-if="pageHasInfo">
<img src="@/assets/images/no-data.png" alt="">
</div>
</div>
<Footer></Footer>
</div>
@ -65,6 +235,7 @@
<script>
import Header from '@/common/components/Header'
import Footer from '@/common/components/Footer'
import axios from 'axios'
export default {
name: 'SearchResult',
components: {
@ -73,11 +244,193 @@ export default {
},
data () {
return {
keywords: ''
page: {
page: 1,
rows: 4,
keywords: '',
total: 1
},
venueList: [],
venueTotal: 0,
activityList: [],
activityTotal: 0,
volunteerList: [],
volunteerTotal: 0,
dynamicList: [],
dynamicTotal: 0,
artList: [],
artTotal: 0,
literatureList: [],
literatureTotal: 0,
exhibitionList: [],
exhibitionTotal: 0,
travelList: [],
travelTotal: 0,
heritageList: [],
heritageTotal: 0,
broadcastList: [],
broadcastTotal: 0
}
},
methods: {},
mounted: function () {}
computed: {
pageHasInfo: function () {
return (this.dynamicList.length === 0 && this.activityList.length === 0 && this.venueList.length === 0 && this.artList.length === 0 && this.broadcastList.length === 0 && this.literatureList.length === 0 && this.volunteerList.length === 0 && this.exhibitionList.length === 0 && this.travelList.length === 0 && this.heritageList.length === 0)
}
},
methods: {
// 查询场馆
searchVenue: function () {
var self = this
axios.get('http://192.168.0.109:8082/venuebooking/app/venuesinfo/listpagevenuesinforelease', {
params: self.page
}).then(function (res) {
self.venueList = res.data.rows
self.venueTotal = res.data.total
})
},
// 查询活动
searchActivity: function () {
var self = this
axios.get('http://192.168.0.111:8080/culturalactivity/app/activitylibrary/listpageactivitylibraryfornetrelease', {
params: self.page
}).then(function (res) {
self.activityList = res.data.rows
self.activityTotal = res.data.total
})
},
// 查询志愿活动
searchVolunteer: function () {
var self = this
axios.get('http://192.168.0.111:8888/volunteer/app/volunteerservice/listpagevolunteerservicerelease', {
params: self.page
}).then(function (res) {
for (var i = 0; i < res.data.rows.length; i++) {
res.data.rows[i].photo = res.data.rows[i].photo.split(',')[0]
}
self.volunteerList = res.data.rows
self.volunteerTotal = res.data.total
})
},
// 查询文化动态
searchDynamic: function () {
var self = this
axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
params: {
page: 1,
rows: 4,
newsDirectoriesParentId: 'f497904b-7727-4832-891c-604c36ae4167',
keywords: self.page.keywords
}
}).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.dynamicList = res.data.rows
self.dynamicTotal = res.data.total
})
},
// 跳转详情页
goDetail: function (url) {
window.location.href = 'http://192.168.0.104/' + url
},
// 查询艺术培训
searchArt: function () {
var self = this
axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
params: {
page: 1,
rows: 4,
keywords: self.page.keywords,
newsDirectoriesParentId: 'd9d8c7ea-32e0-43ed-ad17-7c99a3c389b9'
}
}).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.artList = res.data.rows
self.artTotal = res.data.total
})
},
// 查询民间文学
searchLiterature: function () {
var self = this
axios.get('http://192.168.0.104:8081/library/app/intangiblelibrarydata/listpageintangiblelibrarydatarelease/f3dc594c-7d08-4629-b69b-ada262b3bf58', {
params: self.page
}).then(function (res) {
self.literatureList = res.data.rows
self.literatureTotal = res.data.total
})
},
// 查询展览展示
searchExhibition: function () {
var self = this
axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
params: {
page: 1,
rows: 4,
keywords: self.page.keywords,
newsDirectoriesId: 'f1d5d313-f728-4dda-9843-1116d97e17b0'
}
}).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.exhibitionList = res.data.rows
self.exhibitionTotal = res.data.total
})
},
// 查询文化旅游
searchTravel: function () {
var self = this
axios.get('http://192.168.0.104:8082/news/app/newscontent/listpagenewscontentrelease', {
params: {
page: 1,
rows: 4,
keywords: self.page.keywords,
newsDirectoriesId: '51ae7beb-f277-47a4-937a-088e6d47656d'
}
}).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.travelList = res.data.rows
self.travelTotal = res.data.total
})
},
// 查询非遗清单
searchHeritage: function () {
var self = this
axios.get('http://192.168.0.104:8081/library/app/intangiblelibrary/listpageintangiblelibraryrelease', {
params: self.page
}).then(function (res) {
self.heritageList = res.data.rows
self.heritageTotal = res.data.total
})
},
// 查询直播
searchBoradcast: function () {
var self = this
axios.get('http://192.168.0.104:8084/live/app/liveplan/listliveplanrelease', {
params: self.page
}).then(function (res) {
self.broadcastList = res.data
self.broadcastTotal = res.data.total
})
}
},
mounted: function () {
this.page.keywords = this.$route.query.keywords
this.searchVenue()
this.searchActivity()
this.searchVolunteer()
this.searchDynamic()
this.searchArt()
this.searchLiterature()
this.searchExhibition()
this.searchTravel()
this.searchHeritage()
this.searchBoradcast()
}
}
</script>
@ -91,9 +444,12 @@ export default {
margin 0 auto
font-size 14px
color #565656
.search-container
width: 1200px
margin 20px auto 0
min-height 500px
.search
width 1200px
margin 20px auto
margin-bottom 20px
ul
overflow hidden
li
@ -120,57 +476,453 @@ export default {
color #fff
font-size 16px
line-height 30px
.pager
width 1200px
margin 20px auto
text-align center
font-size 0
.check-more
display block
width 120px
height 35px
background $main-color
font-size 22px
border-radius 3px
border none
color #fff
margin 0 auto
cursor pointer
.search-title
font-size 24px
color #545454
margin-bottom 10px
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
font-size 18px
float right
font-weight normal
.dynamic
width 1200px
margin 0 auto 20px
ul
display inline-block
overflow hidden
vertical-align middle
margin-bottom 20px
li
width 45px
line-height 25px
float left
margin-right 10px
border 1px solid #d2d2d2
padding 20px 0
overflow hidden
cursor pointer
text-align center
font-size 14px
color #676767
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
font-size 14px
border-bottom solid 1px rgba(63, 63, 63, 0.17)
.dynamics-list-left
float left
width 240px
margin-right 10px
img
width 240px
height 160px
.dynamics-list-right
float left
width 480px
margin-left 20px
h3
font-size 18px
color #565656
white-space nowrap
overflow hidden
text-overflow: ellipsis
margin-bottom 10px
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
margin 10px 0
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
.service-container
overflow hidden
.service-list
float left
width 280px
box-sizing border-box
border 1px solid #a8a8a8
margin-right 26px
cursor pointer
margin-bottom 26px
&:nth-child(4n)
margin-right 0
&:hover
background #eee
.service-img-box
width 100%
height 185px
overflow hidden
.service-img
width 100%
height 185px
transition all .5s
&:hover
transform scale(1.1)
.service-info
padding 10px
.service-name
font-size 18px
font-weight normal
color #000
white-space nowrap
overflow hidden
text-overflow: ellipsis
.time
font-size 14px
color #a8a8a8
line-height 20px
white-space nowrap
overflow hidden
text-overflow: ellipsis
margin-top 10px
.activity-location
font-size 14px
color #a8a8a8
line-height 20px
white-space nowrap
overflow hidden
text-overflow: ellipsis
margin 10px 0
.sign-btn
display block
width 120px
height 30px
line-height 30px
text-align center
color #fff
border-radius: 4px;
background $main-color
border none
outline none
margin 0 auto
font-size 14px
cursor pointer
.venue
ul
overflow hidden
.venue-list
float left
width 280px
height 185px
position relative
margin-right 26px
margin-bottom 26px
cursor pointer
&:nth-child(4n)
margin-right 0
img
width 100%
height 185px
.venue-name
position absolute
bottom 0
left 0
width 100%
height 35px
padding 0 5px
box-sizing border-box
text-align center
background rgba(0,0,0,0.6)
p
font-family 'zangwen'
line-height 35px
color #fff
font-size 14px
white-space nowrap
overflow hidden
text-overflow: ellipsis
.art
ul
overflow hidden
li
float left
width: 280px
border solid 1px #dedede
margin-right 26px
cursor pointer
box-sizing border-box
margin-bottom 10px
&:nth-child(4n)
margin-right 0
.recommend-img
width 100%
height 180px
position relative
img
width 100%
height 180px
.play-btn
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
width 48px
height 48px
.recommend-info
padding 5px 10px
h3
font-size 14px
color #565656
.recommend-info-bottom
font-size 14px
color #a8a8a8
padding-top 10px
i
font-style normal
float right
.broadcast
ul
overflow hidden
li
width 280px
box-sizing border-box
float left
margin-right 20px
margin-bottom 20px
cursor pointer
border solid 1px #dedede
.broadcast-img
width 100%
height 185px
position relative
img
width 100%
height 100%
.play-btn
width 48px
height 48px
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
.broadcast-info
padding 10px 20px
h3
font-size 18px
font-weight normal
color #565656
white-space nowrap
overflow hidden
text-overflow: ellipsis
p
font-size 14px
color #a8a8a8
margin 10px 0
button
width 120px
height 30px
border none
outline none
background #a8a8a8
font-size 16px
color #fff
border-radius 4px
display block
margin 0 auto
.literature
ul
overflow hidden
li
width 280px
float left
margin-right 26px
margin-bottom 15px
border 1px solid #e3e3e3
padding 15px
box-sizing border-box
cursor pointer
&:nth-child(4n)
margin-right 0
.resource-img
width 100%
height 185px
margin-bottom 10px
img
width 100%
height 100%
.resource-info
text-align center
h3
font-weight normal
font-size 20px
color: #333
white-space nowrap
overflow hidden
text-overflow ellipsis
margin-bottom 10px
p
font-size: 16px;
color: #999;
.volunteer
ul
overflow hidden
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 $main-color
border-radius 4px
color #fff
font-size 14px
display block
margin 0 auto
cursor pointer
.exhibition
ul
overflow hidden
li
width 280px
border 1px solid #a8a8a8
box-sizing border-box
float left
margin-right 25px
margin-bottom 25px
cursor pointer
&:nth-child(4n)
margin-right 0
.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
font-weight normal
white-space nowrap
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
color #a8a8a8
&.view
float right
.travel
ul
li
background #fff
margin-bottom 20px
height 465px
cursor pointer
.travel-img
width 100%
height 100%
overflow hidden
position relative
img
width 100%
height 100%
transition all .5s
&:hover
transform scale(1.05)
.travel-name
position absolute
bottom 0
left 0
background rgba(0,0,0,0.5)
width 100%
height 40px
line-height 40px
color #fff
font-size 16px
white-space nowrap
overflow hidden
text-overflow ellipsis
padding 0 10px
box-sizing border-box
.heritage
table
table-layout fixed
width 100%
margin-bottom 20px
th
text-align center
font-size 16px
height 50px
border-bottom 1px solid #b5b5b5
background $main-color
color #fff
td
height 50px
text-align center
border-bottom 1px dashed #b5b5b5
color #535353
font-size 16px
white-space nowrap
overflow hidden
text-overflow ellipsis
padding 0 5px
.no-data
padding 80px 0
text-align center
img
width 200px
</style>

1
src/pages/Travel/Travel.vue
View File

@ -71,7 +71,6 @@ export default {
rows: 8,
totalPage: 1,
newsDirectoriesId: '51ae7beb-f277-47a4-937a-088e6d47656d'
// newsDirectoriesParentId: '51ae7beb-f277-47a4-937a-088e6d47656d'
}
}
},

3
src/pages/Volunteer/Volunteer.vue
View File

@ -96,6 +96,9 @@ export default {
axios.get('http://192.168.0.111:8888/volunteer/app/volunteerservice/listpagevolunteerservicerelease', {
params: self.page
}).then(function (res) {
for (var i = 0; i < res.data.rows.length; i++) {
res.data.rows[i].photo = res.data.rows[i].photo.split(',')[0]
}
self.volunteer = res.data.rows
self.page.page = res.data.page
self.changePage = res.data.page