<template>
  <div class="linkbox">
    <span>友情链接</span>
    <div class="imgbox">
      <a v-for="(item, index) in linkList" :key="index" :href="item.links">
        <img class="item" :src="item.path" :alt="item.name">
      </a>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('links')
export default {
  components: {},
  data () {
    return {}
  },
  methods: {
    ...mapActions(['getlink']),
    times () {
      const a = this.linkList[0]
      this.linkList.splice(0, 1)
      this.linkList.push(a)
    }
  },
  async mounted () {
    await this.getlink()
    setInterval(this.times, 5000)
  },
  computed: {
    ...mapState(['linkList'])
  }
}
</script>

<style lang="less" scoped>
.linkbox {
  display: flex;
  padding-top: 50px;
  span {
    line-height: 2em;
    width: 8%;
  }
  .imgbox {
    width: 100%;
    height: 4vh;
    display: flex;
    overflow: hidden;
    .item {
      display: block;
      height: 100%;
      margin: 0 10px;
    }
  }
}
</style>
