<template>
  <view class="themes-banner">
    <swiper
      class="swiper-container"
      :indicator-dots="true"
      :autoplay="true"
      circular="true"
      :interval="5000"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, idx) in shopBanner"
        :key="idx"
        @click="goto"
        :data-url="item.hrefurl"
      >
        <image class="swiper-item__img" :src="item.imgurl"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    shopBanner: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.themes-banner {
  .swiper-container {
    width: 100%;
    height: 800rpx;
    margin-top: 28rpx;
    border-radius: 10rpx;
    overflow: hidden;
    .wx-swiper-dot {
      width: 12rpx;
      height: 8rpx;
      border-radius: 20rpx;
    }
    .wx-swiper-dot::before {
      content: "";
      flex-grow: 1;
      background: #efbd6f;
    }
    .wx-swiper-dot-active::before {
      width: 50rpx;
      background: #efbd6f;
    }
    .swiper-item {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
      &__img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>