uniapp轮播 轮播图内有定位样式

自己收藏的
轮播图内有定位样式 轮播小点自定义样式。实现轮播。

<template><view class="container"><swiper class="swiper" :autoplay="true" :interval="3000" :duration="500"indicator-dotscircular><!-- 第一个轮播项：底图+相对定位图片 --><swiper-item><view class="slide-container"><!-- 底图 --><image class="base-image" src="https://kdwl-cw.oss-cn-beijing.aliyuncs.com/static/img/report_car.png" mode="aspectFill"></image><!-- 相对定位的图片 --><image class="overlay-image" src="https://kdwl-cw.oss-cn-beijing.aliyuncs.com/static/img/icon_1.png" mode="aspectFit"></image></view></swiper-item><!-- 第二个轮播项：底图+相对定位文字 --><swiper-item><view class="slide-container"><!-- 底图 --><image class="base-image" src="https://kdwl-cw.oss-cn-beijing.aliyuncs.com/static/img/report_car.png" mode="aspectFill"></image><!-- 相对定位的文字 --><view class="text-overlay"><text class="title">轮播图标题</text><text class="subtitle">这里是轮播图的描述文字内容</text></view></view></swiper-item></swiper></view>
</template><script>
export default {data() {return {}}
}
</script><style>
.container {width: 100%;height: 100%;
}.swiper {width: 100%;height: 640rpx;
}
/* 默认指示点的样式 */.swiper .wx-swiper-dot {width: 8rpx;height: 6rpx;background: #D8D8D8;border-radius: 3rpx;}/* 选中指示点的样式 */.swiper .wx-swiper-dot.wx-swiper-dot-active {width: 21rpx;height: 6rpx;background: #4172F0;border-radius: 3rpx;}.slide-container {width: 100%;height: 100%;position: relative;
}.base-image {width: 100%;height: 100%;
}.overlay-image {position: absolute;width: 200rpx;height: 200rpx;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.text-overlay {position: absolute;bottom: 40rpx;left: 30rpx;color: #fff;text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
}.title {font-size: 36rpx;font-weight: bold;display: block;margin-bottom: 10rpx;
}.subtitle {font-size: 24rpx;display: block;
}
</style>