自定义swiper轮播底部指示点样式，三元判断样式变化，怎么绑定样式赋值？

    <view class="content">  
        <view class='content'>  
            <swiper :autoplay="autoplay" :interval="interval" :duration="duration" :current="swiperCurrent" @change="swiperChange">  
                <block v-for="(item,index) in imageList" :key="index">  
                    <swiper-item>  
                        <image :src="item.src" class="slide-image" />  
                    </swiper-item>  
                </block>  
            </swiper>  

            <view class="dots">  
                <block v-for="(item,index) in imageList" :key="index">  
                    <view class="dot" :class="index == 'swiperCurrent' ?' active' : ''"> </view>  
                </block>  
            </view>  
        </view>  
    </view>

    export default {  
        data() {  
            return {  
                imageList: [{  
                        src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3798322020,886898981&fm=26&gp=0.jpg',  
                    },  
                    {  
                        src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3798322020,886898981&fm=26&gp=0.jpg',  
                    },  
                    {  
                        src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3798322020,886898981&fm=26&gp=0.jpg',  
                    }  
                ],  
                autoplay: true,  
                interval: 5000,  
                duration: 1000,  
                swiperCurrent: 0,  
            }  
        },  
        methods: {  
            swiperChange: function(e) {  
                console.log(e);  
                this.swiperCurrent = e.detail.current  
            }  
        }  
    }

    swiper {  
        width: 100%;  
        height: 340rpx;  
    }  

    swiper image {  
        display: block;  
        width: 100%;  
        height: 100%;  
    }  

    .dots {  
        /* position: absolute; */  
        left: 0;  
        right: 0;  
        bottom: 20rpx;  
        display: flex;  
        justify-content: center;  
    }  

    .dot {  
        margin: 0 8rpx;  
        width: 14rpx;  
        height: 14rpx;  
        background: #007AFF;  
        border-radius: 8rpx;  
        transition: all .6s;  
    }  

    .dot.active {  
        width: 24rpx;  
        background: #4CD964;  
    }

想要的结果！