<template>
    <div class="policy-ticket">
      <div class="policy">
        <div class="area-title">
          <span>考试政策</span>
          <router-link to="/policy">更多></router-link>
        </div>
        <div class="area-img">
          <img src="@/assets/images/area1.png" alt="">
        </div>
        <div class="area-list">
          <ul>
            <li v-for="news in policyList">
              <router-link :to="{path: '/detail', query: {contentId: news.contentId}}">{{news.title}}</router-link>
              <span>{{news.publishDate}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="policy ticket">
        <div class="area-title">
          <span>准考证发布</span>
          <router-link :to="{path: '/public', query: {pageTitle: '准考证发布', id: '929c283e-53be-4aa2-a8d2-785d28485e8d'}}">更多></router-link>
        </div>
        <div class="area-img">
          <img src="@/assets/images/area2.png" alt="">
        </div>
        <div class="area-list">
          <ul>
            <li v-for="news in ticketList">
              <router-link :to="{path: '/detail', query: {contentId: news.contentId}}">{{news.title}}</router-link>
              <span>{{news.publishDate}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="policy results">
        <div class="area-title">
          <span>成绩发布</span>
          <router-link :to="{path: '/public', query: {pageTitle: '成绩发布', id: 'f7252c11-6bf6-494e-89fa-44baa6b685a6'}}">更多></router-link>
        </div>
        <div class="area-img">
          <img src="@/assets/images/area1.png" alt="">
        </div>
        <div class="area-list">
          <ul>
            <li v-for="news in resultList">
              <router-link :to="{path: '/detail', query: {contentId: news.contentId}}">{{news.title}}</router-link>
              <span>{{news.publishDate}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="policy ticket">
        <div class="area-title">
          <span>证书发布</span>
          <router-link :to="{path: '/public', query: {pageTitle: '证书发布', id: '0a424e44-9d7a-4a48-9942-7b5ccfe4a3aa'}}">更多></router-link>
        </div>
        <div class="area-img">
          <img src="@/assets/images/area2.png" alt="">
        </div>
        <div class="area-list">
          <ul>
            <li v-for="news in certificateList">
              <router-link :to="{path: '/detail', query: {contentId: news.contentId}}">{{news.title}}</router-link>
              <span>{{news.publishDate}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
export default {
    name: 'Policy',
    components: {},
    props: {
      policyList: Array,
      ticketList: Array,
      resultList: Array,
      certificateList: Array,
    },
    data () {
        return {

        }
    },
    methods: {},
    mounted: function () {}
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.policy-ticket
  width 1200px
  margin 0 auto
  overflow hidden
  .policy
    width 49.5%
    float left
    padding 0 10px
    border 1px solid #f1f1f1
    box-sizing border-box
    margin-bottom 15px
    .area-title
      border-bottom 1px solid #f1f1f1
      height 50px
      span
        display inline-block
        line-height 50px
        font-size 24px
        color #0d6ec0
        font-weight bold
        padding 0 10px
        position relative
        &:after
          content ''
          width 100%
          height 2px
          background #e2a30c
          position absolute
          bottom 0
          left 0
      a
        float right
        font-size 18px
        line-height 50px
        color #0d6ec0
    .area-img
      margin-top 10px
      img
        width 100%
        height 170px
    .area-list
      ul
        height 250px
        li
          height 50px
          a
            font-size 18px
            color #333
            display inline-block
            max-width 75%
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            line-height 50px
            &:hover
              color #0d6ec0
          span
            float right
            line-height 50px
            font-size 18px
            color #999
  .ticket
    float right
</style>
