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

<template>
  <div class="notice-case">
    <div class="notice">
      <div class="notice-box">
        <div class="notice-title">
          <div class="title">
            <span>行业资讯</span>
            <p>INDUSTRY INFORMATION</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>
          </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">
            更多 <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>
          </ul>
        </div>
      </div>
    </div>
    <div class="case">
      <div class="case-title">
        <div class="title">
          <span>资质荣誉</span>
          <p>THE HONOR</p>
        </div>
        <div class="more">
          更多 <img src="@/assets/images/more.png" alt="">
        </div>
      </div>
      <div class="case-content">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide>
            <img src="@/assets/images/honor.jpg" alt="">
          </swiper-slide>
          <swiper-slide>
            <img src="@/assets/images/honor1.jpg" alt="">
          </swiper-slide>
          <swiper-slide>
            <img src="@/assets/images/honor.jpg" alt="">
          </swiper-slide>
          <swiper-slide>
            <img src="@/assets/images/honor1.jpg" alt="">
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'InfoHonor',
    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 830px
    float left
    .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 268px
        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
  .case
    float right
    width 350px
    border 1px solid #e3e3e3
    border-bottom 3px solid #e3e3e3
    padding 0 20px
    box-sizing border-box
    .case-title
      border-bottom 1px solid #e3e3e3
      overflow hidden
      .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%)
    .case-content
      width 100%
      height 268px
      box-sizing border-box
      padding 30px 0 10px
      img
        width 308px
        height 200px
      p
        line-height 45px
        font-size 14px
        color #333
        text-align center
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
</style>