2025-02-28 微信小程序轮播图指示点 修改样式 颜色 大小 位置

<swiper class="swiper square-dot" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                                :duration="duration">
                                <swiper-item>
                                    <view class="swiper-item uni-bg-red">A</view>
                                </swiper-item>
                                <swiper-item>
                                    <view class="swiper-item uni-bg-green">B</view>
                                </swiper-item>
                                <swiper-item>
                                    <view class="swiper-item uni-bg-blue">C</view>
                                </swiper-item>
                            </swiper>

    swiper[class*="-dot"] .wx-swiper-dots,
        swiper[class*="-dot"] .a-swiper-dots,
        swiper[class*="-dot"] .uni-swiper-dots {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
            position: relative;
            top: 180px;
            left: 40px;
        }
        
        swiper.square-dot .wx-swiper-dot,
        swiper.square-dot .a-swiper-dot,
        swiper.square-dot .uni-swiper-dot {
            background-color: #ffffff;
            opacity: 0.4;
            width: 10upx;
            height: 10upx;
            border-radius: 20upx;
            margin: 0 8upx !important;
        }
        
        swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active,
        swiper.square-dot .a-swiper-dot.a-swiper-dot-active,
        swiper.square-dot .uni-swiper-dot.uni-swiper-dot-active {
            opacity: 1;
            width: 30upx;
        }