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

自己收藏的
轮播图内有定位样式轮播小点自定义样式。实现轮播。
go 复制代码
<template>
  <view class="container">
    <swiper class="swiper" 
      :autoplay="true" 
      :interval="3000" 
      :duration="500"
      indicator-dots
      circular>
      
      <!-- 第一个轮播项：底图+相对定位图片 -->
      <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>
uniapp轮播 轮播图内有定位样式

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