HomeLease/components/banner-swiper/banner-swiper.vue

<template>
  <view class="banner-section">
    <swiper
      :autoplay="autoplay"
      :duration="duration"
      :indicator-dots="indicatorDots"
      :interval="interval"
      circular
      class="swiper"
      indicator-active-color="#F15A04"
      indicator-color="#D8D8D8"
    >
      <swiper-item
        v-for="(item, index) in bannerList"
        :key="index"
        @click="onBannerClick(item, index)"
      >
        <image :src="item.image"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  name: 'BannerSwiper',
  props: {
    bannerList: {
      type: Array,
      default: () => [],
    },
    indicatorDots: {
      type: Boolean,
      default: true,
    },
    autoplay: {
      type: Boolean,
      default: true,
    },
    interval: {
      type: Number,
      default: 2000,
    },
    duration: {
      type: Number,
      default: 500,
    },
  },
  methods: {
    onSwiperChange(e) {
      this.$emit('change', e.detail.current)
    },
    onBannerClick(item, index) {
      this.$emit('banner-click', { item, index })
    },
  },
}
</script>

<style lang="scss" scoped>
.banner-section {
  display: flex;
  justify-content: center;
  width: 100%;
}

.swiper {
  padding: 30rpx 0;
  height: 400rpx;
  width: 750rpx !important;

  overflow: hidden;

  /* 通用指示器样式 - 覆盖所有可能的类名 */
  :deep([class*='swiper-dot']) {
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
  }

  .swiper-item {
    display: block;
    line-height: 300rpx;
    text-align: center;
  }

  image {
    width: 750rpx !important;
    height: 100% !important;
  }
}
</style>