<template>
  <div class="notice-case">
    <div class="notice">
      <div class="notice-box">
        <div class="notice-title">
          <div class="title">
            <span>单一来源公示</span>
            <p>SINGLE SOURCE PUBLICITY</p>
          </div>
          <div class="more" @click="checkSourceMore">
            更多 <img src="@/assets/images/more.png" alt="">
          </div>
        </div>
        <div class="notice-list">
          <ul>
            <li v-for="(news, idx) in sourceList" :key="idx" @click="goDetail(news.newsContentLink, news.templateRecordUrl, news.newsContentType, news.newsContentContent)">
              <a href="javascript: void(0);">{{news.newsContentTitle}}</a>
              <span>{{news.newsContentPublishTime}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="notice-box">
        <div class="notice-title">
          <div class="title">
            <span>政策法规</span>
            <p>POLICIES AND REGULATIONS</p>
          </div>
          <div class="more" @click="checkLawMore">
            更多 <img src="@/assets/images/more.png" alt="">
          </div>
        </div>
        <div class="notice-list">
          <ul>
            <li v-for="(news, idx) in policiesList" :key="idx" @click="goDetail(news.newsContentLink, news.templateRecordUrl, news.newsContentType, news.newsContentContent)">
              <a href="javascript: void(0);">{{news.newsContentTitle}}</a>
              <span>{{news.newsContentPublishTime}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import url from '@/assets/public/url'
export default {
    name: 'InfoHonor',
    components: {},
    props: {
      sourceList: Array,
      policiesList: Array
    },
    data () {
        return {
          url: url.url
        }
    },
    methods: {
      goDetail: function (link, url, type, outlink) {
        if (type === '6') {
          window.open(outlink)
        } else {
          window.location.href = this.url + '/' +url
        }
      },
      checkSourceMore: function () {
        this.$router.push({
          path: '/source'
        })
      },
      checkLawMore: function () {
        this.$router.push({
          path: '/law'
        })
      }
    },
    mounted: function () {}
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.notice-case
  width 1200px
  margin 0 auto 20px
  overflow hidden
  .notice
    width 100%
    .notice-box
      float left
      width 49%
      border 1px solid #e3e3e3
      border-bottom 3px solid #e3e3e3
      padding 0 20px
      box-sizing border-box
      &:last-child
        float right
      .notice-title
        overflow hidden
        border-bottom 1px solid #e3e3e3
        .title
          float left
          span
            padding-top 10px
            font-weight normal
            font-size 16px
            color #333
            position relative
            display inline-block
            margin-bottom 5px
            &:after
              content ''
              display block
              width 100%
              height 4px
              background #2a5ca1
              position absolute
              top 0
              left 0
          p
            font-size 12px
            color #c8c8c8
            font-family arial
        .more
          float right
          line-height 45px
          font-size 12px
          color #333
          cursor pointer
          position relative
          padding-right 10px
          img
            position absolute
            right 0
            top 50%
            transform translate(0, -50%)
      .notice-list
        padding 10px 0
        height 330px
        box-sizing border-box
        ul
          li
            height 31px
            padding-left 15px
            background url("~@/assets/images/list-icon.png") no-repeat left center
            line-height 31px
            a
              display inline-block
              max-width 75%
              overflow hidden
              white-space nowrap
              text-overflow ellipsis
              color #333
              font-size 14px
              &:hover
                color #ff4f01
            span
              float right
              color #999
              font-size 14px
</style>
