<template>
    <div class="notice">
      <div class="notice-container">
        <div class="notice-title">
          <span>最新公告</span>
          <router-link to="/notice">更多></router-link>
        </div>
        <div class="notice-list">
          <ul>
            <li v-for="news in noticeList">
              <div class="date">
                <h3>{{ news.date }}</h3>
                <p>{{ news.publishDate }}</p>
              </div>
              <router-link :to="{path: '/detail', query: {contentId: news.contentId}}">{{ news.title }}</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="link">
        <router-link to="/login">
          <img src="@/assets/images/notice-img1.png" alt="">
        </router-link>
        <router-link to="/login">
          <img src="@/assets/images/notice-img2.png" alt="">
        </router-link>
<!--        <router-link to="/">-->
<!--          <img src="@/assets/images/notice-img3.png" alt="">-->
<!--        </router-link>-->
      </div>
    </div>
</template>

<script>
export default {
    name: 'Notice',
    components: {},
    props: {
      noticeList: Array
    },
    data () {
        return {

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

<style lang="stylus" rel="stylesheet/stylus" scoped>
.notice
  width 1200px
  margin 30px auto 15px
  overflow hidden
  .notice-container
    float left
    width 815px
    border 1px solid #f1f1f1
    box-sizing border-box
    padding 0 10px
    .notice-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
    .notice-list
      ul
        height 419px
        li
          padding 20px 0
          border-bottom 1px solid #f1f1f1
          overflow hidden
          &:last-child
            border none
          .date
            float left
            width 95px
            border-right 1px solid #f1f1f1
            box-sizing border-box
            text-align center
            color #0d6ec0
            h3
              font-size 22px
              line-height 22px
            p
              font-size 16px
          a
            display inline-block
            max-width 685px
            padding 0 20px
            line-height 43px
            box-sizing border-box
            font-size 18px
            color #000
            float left
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            &:hover
              color #0d6ec0
  .link
    float right
    width 380px
    a
      display block
      width 100%
      height 154px
      margin-bottom 5px
      &:last-child
        margin-bottom 0
      img
        width 100%
        height 100%
</style>
