<template>
    <div class="mid">
      <ul>
        <li @click="goCenter(1)">
          <img src="@/assets/images/link1.png" alt="">
        </li>
        <li @click="goCenter(3)">
          <img src="@/assets/images/link2.png" alt="">
        </li>
        <li @click="goCenter(4)">
          <img src="@/assets/images/link3.png" alt="">
        </li>
        <li @click="goCenter(5)">
          <img src="@/assets/images/link4.png" alt="">
        </li>
      </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 45px
  ul
    &:after
      content ''
      display block
      clear both
    li
      float left
      margin-right 20px
      width 285px
      cursor pointer
      &:last-child
        margin-right 0
      img
        width 100%
</style>
