<template>
  <div class="banner-box" v-if="bannerList.length">
    <swiper
      class="swiper"
      circular="true"
      autoplay="true"
      indicator-dots="true"
      skip-hidden-item-layout="true">
      <swiper-item
        v-for="(item, key) in bannerList"
        :key="key">
          <img class="item" :src='baseUrl + item.imgUrl' @click="toLink(item.url)" >
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/http'
export default {
  props: ['bannerList'],
  data () {
    return {
      baseUrl: baseUrl
    }
  },
  methods: {
    toLink (url) {
      if (url) {
        wx.navigateTo({
          url: '/pages/webview/main?url=' + url
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.banner-box{
  margin: 0 @spacing @spacing;
  border-radius: 4px;
  overflow: hidden;
  .swiper{
    height: 120px;
    @{deep} img{
      height: 100%;
    }
    @{deep} .wx-swiper-dot {
      width: 5px;
      height: 5px;
      border: solid 1px #fff;
      box-sizing: border-box;
      background: none;
      &.wx-swiper-dot-active{
        border: solid 1px @themeColor;
        background: @themeColor;
      }
    }
  }
}
</style>
