<template>
  <div class="info">
    <div class="info-container">
      <h3>信息发布<em>/Information release</em></h3>
      <div class="info-row">
        <div class="info-box">
          <img src="@/assets/images/info1.png" alt="">
          <ul>
            <router-link v-for="(item,idx) in ticketList" :key="idx" tag="li" :to="{path: '/detail', query: {contentId: item.contentId}}" :title="item.title">
              <a href="javascript: void(0);">{{ item.title }}</a>
              <span>{{ item.publishDate }}</span>
            </router-link>
          </ul>
        </div>
        <div class="info-box">
          <img src="@/assets/images/info2.png" alt="">
          <ul>
            <router-link v-for="(item,idx) in resultList" :key="idx" tag="li" :to="{path: '/detail', query: {contentId: item.contentId}}" :title="item.title">
              <a href="javascript: void(0);">{{ item.title }}</a>
              <span>{{ item.publishDate }}</span>
            </router-link>
          </ul>
        </div>
        <div class="info-box">
          <img src="@/assets/images/info3.png" alt="">
          <ul>
            <router-link v-for="(item,idx) in certificateList" :key="idx" tag="li" :to="{path: '/detail', query: {contentId: item.contentId}}" :title="item.title">
              <a href="javascript: void(0);">{{ item.title }}</a>
              <span>{{ item.publishDate }}</span>
            </router-link>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Info",
  props: {
    ticketList: Array,
    resultList: Array,
    certificateList: Array,
  },
  components: {},
  data() {
    return {}
  },
  methods: {},
  mounted() {
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.info
  padding 50px 0 60px
  background url("~@/assets/images/info-bg.png") no-repeat center
  background-size 100% 100%
  margin-bottom 45px
  .info-container
    width 1200px
    margin 0 auto
    h3
      color #fff
      font-size 24px
      font-weight normal
      margin-bottom 45px
      em
        font-size 16px
        color #fff
        margin-left 10px
    .info-row
      overflow hidden
      .info-box
        float left
        width 395px
        margin-right 7px
        padding 15px
        box-sizing border-box
        background #fff
        &:last-child
          margin-right 0
        img
          width 100%
        ul
          height 254px
          background #fff
          li
            height 50px
            line-height 50px
            border-bottom 1px dashed #dcdcdc
            color #333
            font-size 14px
            cursor pointer
            &:hover
              color #005aa5
              a
                color #005aa5
            &:last-child
              border-bottom none
            a
              display inline-block
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
              max-width 70%
            span
              float right
</style>
