<template>
  <view v-if="Object.keys(bannerModule).length" class="banner">
    <view class="banner-content">
      <view class="title">{{ bannerModule.title || "" }}</view>
      <view class="swiper">
        <swiper
          indicator-dots
          autoplay
          indicator-active-color="#fff"
          interval="2500"
          style="height: 224rpx"
        >
          <swiper-item v-for="(item, index) in bannerModule.banners" :key="index" class="item">
            <view class="swiper-item">
              <image
                class="banner-img"
                :src="item.pic"
                mode="scaleToFill"
                @click="toUrl(item.jumpUrl)"
              />
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>
<script>
import { jumpToUrl as toUrl } from "@/mixins/common";
export default {
  props: {
    bannerModule: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    toUrl
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/var.scss";
.banner {
  padding-top: 26rpx;
  background: $gray-1;
  display: flex;
  justify-content: center;
  &-content {
    width: 702rpx;
    padding: 24rpx;
    box-sizing: border-box;
    background: $white;
    border-radius: 24rpx;
    .title {
      display: flex;
      align-items: center;
      color: $black;
      font-weight: $font-weight-bold;
      @include text-size(32);
    }
    .swiper {
      margin-top: $padding-sm;
      width: 654rpx;
      height: 224rpx;
      .item {
        width: 100%;
        height: 100%;
      }
      .swiper-item {
        width: 100%;
        height: 100%;
        .banner-img {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
      }
    }
  }
}
</style>
