.swiper-pagination{
    --swiper-pagination-bullet-border-radius:10px;
    --swiper-pagination-color: rgb(var(--color-button-background));
    --swiper-pagination-bullet-width: 4px;
}
.swiper-pagination .swiper-pagination-bullet{
    height: 4px;
    transition: all 0.3s linear;
    --swiper-pagination-bullet-inactive-color: rgb(var(--color-button-background));
    --swiper-pagination-bullet-inactive-opacity: 0.2;
}
.swiper-pagination .swiper-pagination-bullet::after{
    width:0px;
    height: 100%;
    display: block;
    content: '';
    border-radius: 50%;
    background-color: rgb(var(--color-button-background));
}
.swiper-pagination .swiper-pagination-bullet-active::after{
    animation: expandWidth var(--pagination-scound) linear forwards;
}
@keyframes expandWidth {
    0% {
        width: 0; /* 初始宽度为20px */
    }
    100% {
        width: 100%; /* 最终宽度为60px */
    }
}
.swiper-pagination .swiper-pagination-bullet-active{
    --swiper-pagination-bullet-width:60px;
}
@media(max-width:768px){
    .swiper-pagination .swiper-pagination-bullet-active{
        --swiper-pagination-bullet-width:40px;
    }
}