为啥swiper滑块里面的指示点没有显示出来

<template>
<view>
<view class="layout">
父页面
<view class="box1" hover-class="box2">
子页面
</view>
</view>
<view>纵向滚动条------------------------</view>
<scroll-view class="scroll_view" scroll-y="true" show-scrollbar="false">
<view class="scroll_item">22221</view>
<view class="scroll_item">22221</view>
<view class="scroll_item">22221</view>
<view class="scroll_item">22221</view>
<view class="scroll_item">22221</view>
<view class="scroll_item">22221</view>
<view class="scroll_item">22221</view>
</scroll-view>
<view>横向滚动条----------------------</view>
<scroll-view class="scroll_view_x" scroll-x>
<view class="scroll_item_x">233333333</view>
<view class="scroll_item_x">233333333</view>
<view class="scroll_item_x">233333333</view>
<view class="scroll_item_x">233333333</view>
<view class="scroll_item_x">233333333</view>
<view class="scroll_item_x">233333333</view>
<view class="scroll_item_x">233333333</view>
</scroll-view>
<view>滑块组件-----------------------------</view>
<swiper class="swiper" indicator-dots="true">
<swiper-item class="swiper_item">aaaaa</swiper-item>
<swiper-item class="swiper_item">bbbbbb</swiper-item>
<swiper-item class="swiper_item">cccccc</swiper-item>
<swiper-item class="swiper_item">ddddd</swiper-item>
</swiper>
</view>

</template>

<script setup>

</script>

<style lang="scss">
// view
.layout {
width: 750rpx;
background-color: wheat;

    .box1,  
    .box2 {  
        width: 750rpx;  
        height: 200rpx;  
    }  

    .box2 {  
        background-color: green;  
    }  
}  
// scroll-view  
.scroll_view {  
    width: 750rpx;  
    height: 400rpx;  

    .scroll_item {  
        width: 100%;  
        height: 100rpx;  

    }  
}  
// 横向滚动条  
.scroll_view_x{  
    width: 100%;  
    height: 100rpx;  
    white-space: nowrap;  
    .scroll_item_x{  
        width: 200rpx;  
        height:100rpx;  
        background-color: gainsboro;  
        display: inline-block;  
        margin: 20rpx;  
    }  
}  
// 滑块视图容器  
.swiper{  
    width: 750vw;  
    height: 300rpx;  
    .swiper_item{  
        width: 100%;  
        height: 100%;  
        background-color: yellow;  
        font-size: 40rpx;  
    }  
    .swiper_item:nth-child(2n){  
        background-color: wheat;  
    }  
}  

</style>