<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>
