92 lines
1.7 KiB
Vue
92 lines
1.7 KiB
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 {
|
|
padding: 30rpx 100rpx;
|
|
}
|
|
|
|
.swiper {
|
|
height: 300rpx;
|
|
width: 550rpx;
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
|
|
|
/* 通用指示器样式 - 覆盖所有可能的类名 */
|
|
: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;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|