HTML中轮播图里的圆点不充满,老师好，轮播图中的小点不显示

我设置了padding-botom 为40%还是不显示，请麻烦看一下这是什么问题呢

import { Swiper, SwiperItem } from "@/common/swiper";

export default {

name: "HomeSwiper",

data() {

return {

swiperOption: {

// 显示小点

pagination: "swiper-pagination",

// 循环播放，无缝循环

loop: true,

// 设置自动播放且设置轮播间隔时间duration

autoplay: 3000,

// 滑动播放速度

speed: 1000,

},

banners: [

{

id: "0001",

imgUrl:

"https://imgs.qunarzz.com/vs_ceph_vcimg/8f45c9a4b40091390793e1c4a5ac3e40.jpeg",

},

{

id: "0002",

imgUrl:

"https://imgs.qunarzz.com/vs_ceph_vcimg/816c968e6c5e87018e365c8af6dc27f4.jpeg",

},

{

id: "0003",

imgUrl:

"https://imgs.qunarzz.com/vs_ceph_vcimg/3c0045cd0befdfb35ceef7b80d9212b5.jpeg",

},

],

};

},

};

/* 解决客户端低网速加载轮播图时 轮播图底部文字内容先加载出来占据轮播图位置后跳动一下bug 等于提前占位 */

.wrapper >>> .swiper-pagination-bullet-active {

background: black !important;

}

.wrapper {

overflow: hidden;

width: 100%;

height: 0;

padding-bottom: 40%;

background: pink;

.swiper-item {

width: 100%;

.swiper-img {

width: 100%;

}

}

}

在这里输入代码