![在这里插入图片描述](https://img-blog.csdnimg.cn/6cd568ce932b4ea7ae52f10365979680.png

html

<view class="addSwiperdiv"><image src="@/static/66.png" mode="aspectFill" class="titleimg"></image><view class="addcontent"><u-swiper :list="list1" imgMode='aspectFill' circularheight='308rpx' @change="e => current = e.current"@click="clickSwiper('/pagesA/pages/youxuan/youxuan')"></u-swiper><view class="indicator" slot="indicator"><view class="indicator__dot" v-for="(item, index) in list1" :key="index":class="[index == current && 'indicator__dot--active']"></view></view></view></view>

css

.addSwiperdiv {width: 336rpx;height: 446rpx;border-radius: 16rpx;background: linear-gradient(135deg, #C82920 0%, #CB1F1F 100%);position: relative;.titleimg {width: 242rpx;height: 34rpx;position: absolute;top: 28rpx;left: 48rpx;right: 48rpx;}.addcontent {position: absolute;top: 84rpx;left: 14rpx;right: 14rpx;bottom: 54rpx;width: 308rpx;height: 308rpx;background: #FFF9F9;border-radius: 16rpx;}}.indicator {// @include flex(row);display: flex;align-items: center;justify-content: center;margin-top: 24rpx;&__dot {height: 6px;width: 6px;border-radius: 100px;background-color: rgba(255, 255, 255, 0.35);margin: 0 5px;transition: background-color 0.3s;&--active {background-color: #ffffff;}}
}