<template>
  <!-- 首页 -->
  <div class="content">
    <!-- 顶部轮播图 -->
    <b-carousel
      id="carousel-1"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
    >
      <b-carousel-slide
        v-for="item in bannerList"
        :key="item.id"
        :img-src="item.url"
        @click.native="goPage(item)"
        >
      </b-carousel-slide>
    </b-carousel>
  </div>
</template>

<script>

export default {
  name: 'index',
  data() {
    return {
      solutionList: [],
    }
  },
  async asyncData({app}) {
    const {data: bannerList} = await app.$axios.get('/index/bannerList')

    return {
      bannerList, // 轮播图
    }
  },
  mounted() {
  },
  methods: {
    goPage(item) {
      if (item.link) {
        window.open(item.link)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .carousel:hover {
    cursor: pointer;
  }
  .container {
    overflow: hidden;
  }
  .fonts {
    font-size: 1rem;
  }
}

// 特殊样式小屏幕处理
@media screen and (max-width:400px) {

}
</style>
