984 lines
29 KiB
Vue
984 lines
29 KiB
Vue
<template>
|
||
<div>
|
||
<Header></Header>
|
||
<div class="location">
|
||
<div class="location-content">
|
||
您的位置：<router-link to="/">首页</router-link> > 搜索列表
|
||
</div>
|
||
</div>
|
||
<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.newsContentLink, list.templateRecordUrl)">
|
||
<div class="dynamics-list-left">
|
||
<img :src="url + 'route/file/download/false/' + list.newsContentCoverList" alt="">
|
||
</div>
|
||
<div class="dynamics-list-right">
|
||
<h3>{{list.newsContentTitle}}</h3>
|
||
<p class="news-summary">{{list.newsContentSummary}}</p>
|
||
<p>作者：{{list.newsContentAuthor}}<span>{{list.newsContentPublishTime}}</span></p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<button to="/searchList" class="check-more" v-if="dynamicTotal > 1" @click="goList(1)">查看更多</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="url + 'route/file/download/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" @click="goList(2)" v-if="activityTotal > 4">查看更多</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="url + 'route/file/download/false/' + list.venuePanorama" alt="">
|
||
<div class="venue-name">
|
||
<p>{{list.venueName}}</p>
|
||
</div>
|
||
</router-link>
|
||
</ul>
|
||
<button class="check-more" v-if="venueTotal > 4" @click="goList(3)">查看更多</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.newsContentLink, list.templateRecordUrl)">
|
||
<div class="recommend-img">
|
||
<img :src="url + 'route/file/download/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" @click="goList(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="url + 'live/route/file/download/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" @click="goList(5)">查看更多</button>
|
||
</div>
|
||
<!--数图资源-->
|
||
<div class="literature" v-if="literatureList.length > 0">
|
||
<h3 class="search-title">
|
||
数图资源
|
||
<span>共有{{literatureTotal}}条数据</span>
|
||
</h3>
|
||
<ul>
|
||
<li v-for="(list,idx) in literatureList" :key="idx" @click="goDetail(list.newsContentLink, list.templateRecordUrl)">
|
||
<div class="resource-img">
|
||
<img :src="url + 'route/file/download/false/' + list.newsContentCoverList" alt="">
|
||
</div>
|
||
<div class="resource-info">
|
||
<h3>{{list.newsContentTitle}}</h3>
|
||
<p>作者：{{list.newsContentAuthor}}</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<button class="check-more" v-if="literatureTotal > 4" @click="goList(6)">查看更多</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="url + 'route/file/download/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" @click="goList(7)">查看更多</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.newsContentLink, list.templateRecordUrl)">
|
||
<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>
|
||
<button class="check-more" v-if="exhibitionTotal > 4" @click="goList(8)">查看更多</button>
|
||
</div>
|
||
<!--旅游-->
|
||
<div class="travel" v-if="travelList.length > 0">
|
||
<h3 class="search-title">
|
||
文化旅游
|
||
<span>共有{{travelTotal}}条数据</span>
|
||
</h3>
|
||
<ul>
|
||
<li v-for="(list,idx) in travelList" :key="idx" @click="goDetail(list.newsContentLink, list.templateRecordUrl)">
|
||
<div class="travel-img">
|
||
<img :src="url + 'route/file/download/false/' + list.newsContentCoverList" alt="">
|
||
<div class="travel-name">
|
||
{{list.newsContentTitle}}
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<button class="check-more" v-if="travelTotal > 4" @click="goList(9)">查看更多</button>
|
||
</div>
|
||
<!--非遗-->
|
||
<div class="heritage" v-if="heritageList.length > 0">
|
||
<h3 class="search-title">
|
||
非遗清单
|
||
<span>共有{{heritageTotal}}条数据</span>
|
||
</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th width="8%">序号</th>
|
||
<th width="8%">编号</th>
|
||
<th width="20%">名称</th>
|
||
<th width="10%">公布时间</th>
|
||
<th width="10%">类型</th>
|
||
<th width="15%">申报地区或单位</th>
|
||
<th width="20%">保护单位</th>
|
||
<th width="9%">操作</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>
|
||
<td><router-link :to="{path: '/intangibleHeritageDetail/' + list.intangibleLibraryId}" class="go-detail">查看详情</router-link></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<button class="check-more" v-if="heritageTotal > 4" @click="goList(10)">查看更多</button>
|
||
</div>
|
||
<!--无内容-->
|
||
<div class="no-data" v-if="pageHasInfo">
|
||
<img src="@/assets/images/no-data.png" alt="">
|
||
</div>
|
||
</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: 'SearchResult',
|
||
components: {
|
||
Header,
|
||
Footer
|
||
},
|
||
data () {
|
||
return {
|
||
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,
|
||
url: common.url
|
||
}
|
||
},
|
||
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(self.url + 'app/venuesinfo/listpagevenuesinforelease/' + common.area.areaCode, {
|
||
params: self.page
|
||
}).then(function (res) {
|
||
self.venueList = res.data.rows
|
||
self.venueTotal = res.data.total
|
||
})
|
||
},
|
||
// 查询活动
|
||
searchActivity: function () {
|
||
var self = this
|
||
axios.get(self.url + 'app/activitylibrary/listpageactivitylibraryfornetrelease/' + common.area.areaCode, {
|
||
params: self.page
|
||
}).then(function (res) {
|
||
self.activityList = res.data.rows
|
||
self.activityTotal = res.data.total
|
||
})
|
||
},
|
||
// 查询志愿活动
|
||
searchVolunteer: function () {
|
||
var self = this
|
||
axios.get(self.url + 'app/volunteerservice/listpagevolunteerservicerelease/' + common.area.areaCode, {
|
||
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(self.url + 'app/newscontent/listpagenewscontentrelease/' + common.area.areaCode, {
|
||
params: {
|
||
page: 1,
|
||
rows: 4,
|
||
newsDirectoriesParentId: 'f497904b-7727-4832-891c-604c36ae4167',
|
||
keywords: self.page.keywords,
|
||
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.dynamicList = res.data.rows
|
||
self.dynamicTotal = res.data.total
|
||
})
|
||
},
|
||
// 跳转详情页
|
||
goDetail: function (link, url) {
|
||
if (link) {
|
||
window.location.href = link
|
||
} else {
|
||
window.location.href = this.url + url
|
||
}
|
||
},
|
||
// 查询艺术培训
|
||
searchArt: function () {
|
||
var self = this
|
||
axios.get(self.url + 'app/newscontent/listpagenewscontentrelease/' + common.area.areaCode, {
|
||
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(self.url + 'app/newscontent/listpagenewscontentrelease/' + common.area.areaCode, {
|
||
params: {
|
||
page: 1,
|
||
rows: 4,
|
||
totalPage: 1,
|
||
newsDirectoriesId: '',
|
||
newsDirectoriesParentId: '98c74389-2088-499b-a046-8611bdc57ea4',
|
||
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.literatureList = res.data.rows
|
||
self.literatureTotal = res.data.total
|
||
})
|
||
},
|
||
// 查询展览展示
|
||
searchExhibition: function () {
|
||
var self = this
|
||
axios.get(self.url + 'app/newscontent/listpagenewscontentrelease/' + common.area.areaCode, {
|
||
params: {
|
||
page: 1,
|
||
rows: 8,
|
||
totalPage: 1,
|
||
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(self.url + 'app/newscontent/listpagenewscontentrelease/' + common.area.areaCode, {
|
||
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(self.url + 'app/intangiblelibrary/listpageintangiblelibraryrelease/' + common.area.areaCode, {
|
||
params: self.page
|
||
}).then(function (res) {
|
||
self.heritageList = res.data.rows
|
||
self.heritageTotal = res.data.total
|
||
})
|
||
},
|
||
// 查询直播
|
||
searchBoradcast: function () {
|
||
var self = this
|
||
axios.get(self.url + 'app/liveplan/listpageliveplanrelease', {
|
||
params: self.page
|
||
}).then(function (res) {
|
||
self.broadcastList = res.data.rows
|
||
self.broadcastTotal = res.data.total
|
||
})
|
||
},
|
||
// 跳转列表页
|
||
goList: function (type) {
|
||
var self = this
|
||
this.$router.push({
|
||
path: '/searchList',
|
||
query: {
|
||
type: type,
|
||
keywords: self.page.keywords
|
||
}
|
||
})
|
||
}
|
||
},
|
||
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>
|
||
|
||
<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
|
||
.search-container
|
||
width: 1200px
|
||
margin 20px auto 0
|
||
min-height 500px
|
||
.check-more
|
||
outline none
|
||
font-family '宋体'
|
||
display block
|
||
width 120px
|
||
height 35px
|
||
text-align center
|
||
background $main-color
|
||
font-size 18px
|
||
border-radius 3px
|
||
border none
|
||
color #fff
|
||
margin 0 auto
|
||
cursor pointer
|
||
.search-title
|
||
font-family '宋体'
|
||
font-size 24px
|
||
color #545454
|
||
margin-bottom 10px
|
||
span
|
||
font-size 18px
|
||
float right
|
||
font-weight normal
|
||
.dynamic
|
||
width 1200px
|
||
margin 0 auto 20px
|
||
ul
|
||
margin-bottom 20px
|
||
li
|
||
padding 20px 0
|
||
overflow hidden
|
||
cursor pointer
|
||
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-family '宋体'
|
||
font-size 18px
|
||
color #565656
|
||
white-space nowrap
|
||
overflow hidden
|
||
text-overflow: ellipsis
|
||
margin-bottom 10px
|
||
p
|
||
font-family '宋体'
|
||
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
|
||
&:after
|
||
content ''
|
||
display block
|
||
clear both
|
||
.service-list
|
||
float left
|
||
width 280px
|
||
box-sizing border-box
|
||
box-shadow:0px 0px 10px 0px rgba(176,176,176,0.3);
|
||
margin-right 26px
|
||
cursor pointer
|
||
margin-bottom 26px
|
||
&:nth-child(4n)
|
||
margin-right 0
|
||
&:hover
|
||
box-shadow:0px 0px 20px 0px rgba(176,176,176,0.9);
|
||
.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
|
||
&:after
|
||
content ''
|
||
display block
|
||
clear both
|
||
.venue-list
|
||
float left
|
||
width 280px
|
||
height 185px
|
||
position relative
|
||
margin-right 26px
|
||
margin-bottom 26px
|
||
cursor pointer
|
||
box-shadow:0px 0px 10px 0px rgba(176,176,176,0.3);
|
||
&:nth-child(4n)
|
||
margin-right 0
|
||
&:hover
|
||
box-shadow:0px 0px 20px 0px rgba(176,176,176,0.9);
|
||
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
|
||
&:after
|
||
content ''
|
||
display block
|
||
clear both
|
||
li
|
||
float left
|
||
width: 280px
|
||
box-shadow:0px 0px 10px 0px rgba(176,176,176,0.3);
|
||
margin-right 26px
|
||
cursor pointer
|
||
box-sizing border-box
|
||
margin-bottom 10px
|
||
&:hover
|
||
box-shadow:0px 0px 20px 0px rgba(176,176,176,0.9);
|
||
&: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-family '宋体'
|
||
font-size 14px
|
||
color #565656
|
||
.recommend-info-bottom
|
||
font-family '宋体'
|
||
font-size 14px
|
||
color #a8a8a8
|
||
padding-top 10px
|
||
i
|
||
font-style normal
|
||
float right
|
||
.broadcast
|
||
ul
|
||
&:after
|
||
content ''
|
||
display block
|
||
clear both
|
||
li
|
||
width 280px
|
||
box-sizing border-box
|
||
float left
|
||
margin-right 26px
|
||
margin-bottom 20px
|
||
cursor pointer
|
||
box-shadow:0px 0px 10px 0px rgba(176,176,176,0.3);
|
||
&:hover
|
||
box-shadow:0px 0px 20px 0px rgba(176,176,176,0.9);
|
||
&:last-child
|
||
margin-right 0
|
||
.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
|
||
&:after
|
||
content ''
|
||
display block
|
||
clear both
|
||
li
|
||
width 280px
|
||
float left
|
||
margin-right 26px
|
||
margin-bottom 15px
|
||
box-shadow:0px 0px 10px 0px rgba(176,176,176,0.3);
|
||
padding 15px
|
||
box-sizing border-box
|
||
cursor pointer
|
||
&:hover
|
||
box-shadow:0px 0px 20px 0px rgba(176,176,176,0.9);
|
||
&: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
|
||
&:after
|
||
content ''
|
||
display block
|
||
clear both
|
||
li
|
||
width 280px
|
||
float left
|
||
margin-right 20px
|
||
box-shadow:0px 0px 10px 0px rgba(176,176,176,0.3);
|
||
box-sizing border-box
|
||
margin-bottom 20px
|
||
cursor pointer
|
||
&:hover
|
||
box-shadow:0px 0px 20px 0px rgba(176,176,176,0.9);
|
||
.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
|
||
&: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
|
||
&:hover
|
||
box-shadow:0px 0px 20px 0px rgba(176,176,176,0.9);
|
||
&: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
|
||
font-family '宋体'
|
||
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
|
||
.news-summary
|
||
overflow hidden
|
||
display -webkit-box
|
||
-webkit-line-clamp 3
|
||
-webkit-box-orient vertical
|
||
word-break break-all
|
||
height 75px
|
||
</style>
|