bjmsjy-portal/src/pages/Index/components/CorrectAbolish.vue

<template>
  <div class="notice-case">
    <div class="notice">
      <div class="notice-box">
        <div class="notice-title">
          <div class="title">
            <span>更正公告</span>
            <p>CORRECTION NOTICE</p>
          </div>
          <div class="more">
            更多 <img src="@/assets/images/more.png" alt="">
          </div>
        </div>
        <div class="notice-list">
          <ul>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="notice-box">
        <div class="notice-title">
          <div class="title">
            <span>废标公告</span>
            <p>ABANDONED BID</p>
          </div>
          <div class="more">
            更多 <img src="@/assets/images/more.png" alt="">
          </div>
        </div>
        <div class="notice-list">
          <ul>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
            <li>
              <router-link to="/detail">湖北省某部职业教育配套条件建设项目</router-link>
              <span>01-01</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'CorrectAbolish',
    components: {},
    data () {
        return {
        }
    },
    methods: {},
    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>