<template>
    <div class="mid">
      <ul>
        <li @click="goCenter(1)">
          <div class="link-img link-img1"></div>
          <h3>网上报名</h3>
        </li>
        <li @click="goCenter(3)">
          <div class="link-img link-img2"></div>
          <h3>打印准考证</h3>
        </li>
        <li @click="goCenter(4)">
          <div class="link-img link-img3"></div>
          <h3>成绩查询</h3>
        </li>
        <li @click="goCenter(5)">
          <div class="link-img link-img4"></div>
          <h3>证书查询</h3>
        </li>
<!--        <li>-->
<!--          <div class="link-img link-img5"></div>-->
<!--          <h3>证书领取</h3>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="link-img link-img6"></div>-->
<!--          <h3>补证&变更</h3>-->
<!--        </li>-->
<!--        <router-link to="/question" tag="li">-->
<!--          <div class="link-img link-img7"></div>-->
<!--          <h3>常见问题</h3>-->
<!--        </router-link>-->
      </ul>
    </div>
</template>

<script>
export default {
    name: 'MidLink',
    components: {},
    data () {
        return {
          token: window.sessionStorage.getItem('token'),
        }
    },
    methods: {
      goCenter: function (tab) {
        if (this.token) {
          this.$router.push({path: '/center', query:{tab: tab}})
        } else {
          this.$router.push('/login')
        }
      }
    },
    mounted: function () {

    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.mid
  width 1200px
  margin 0 auto
  ul
    &:after
      content ''
      display block
      clear both
    li
      float left
      margin-right 8px
      //width 290px
      width 294px
      height 210px
      border 1px solid #f1f1f1
      box-sizing border-box
      text-align center
      cursor pointer
      margin-bottom 15px
      //&:first-child
      //  width 600px
      //&:nth-child(3), &:last-child
      //  margin-right 0
      &:nth-child(4)
        margin-right 0
        //margin-right 20px
      .link-img
        margin 0 auto
        background url("~@/assets/images/icon_aggregate.png") no-repeat
        &.link-img1
          width 100px
          height 106px
          background-position 0 -112px
          margin-top 27px
          margin-bottom 18px
        &.link-img2
          width 91px
          height 70px
          background-position -131px 0
          margin-top 43px
          margin-bottom 38px
        &.link-img3
          width 80px
          height 84px
          background-position -252px 0
          margin-top 37px
          margin-bottom 29px
        &.link-img4
          width 79px
          height 78px
          background-position -362px 0
          margin-top 42px
          margin-bottom 28px
        &.link-img5
          width 84px
          height 83px
          background-position -458px 0
          margin-top 45px
          margin-bottom 21px
        &.link-img6
          width 81px
          height 87px
          background-position -567px 0
          margin-top 42px
          margin-bottom 30px
        &.link-img7
          width 90px
          height 80px
          background-position -678px 0
          margin-top 44px
          margin-bottom 25px
      &:hover
        background linear-gradient(to right, #27b5e9 , #32c9ef)
        .link-img1
          background-position 0 0
        .link-img2
          background-position -131px -75px
        .link-img3
          background-position -252px -86px
        .link-img4
          background-position -362px -87px
        .link-img5
          background-position -458px -82px
        .link-img6
          background-position -567px -80px
        .link-img7
          background-position -678px -85px
        h3
          color #fff
      h3
        font-size 30px
        font-weight 500
        color #1c91f4
</style>
