How to check Mini Program's internal style?

problem description

Mini Program"s broadcast point style has changed. How to view the internally defined style?

the environmental background of the problems and what methods you have tried

when I quoted Mini Program"s internal swiper, I wanted to customize the style of the broadcast point. I found a way on the Internet to modify the default style in Wechat. However, I looked at the element and did not find the relevant element, nor did I find the class name defined internally by Mini Program, for example: .wx-swiper-dots.wx-swiper-dots-horizontal

related codes

/ / Please paste the code text below (do not replace the code with pictures)

swiper .wx-swiper-dots.wx-swiper-dots-horizontal{
  margin-bottom: 2rpx;
}
swiper .wx-swiper-dot{
  width:40rpx;
  display: inline-flex;
  height: 10rpx;
  margin-left: 20rpx;
  justify-content:space-between;
}
swiper .wx-swiper-dot::before{
  content: "";
  flex-grow: 1; 
  background: rgba(255,255,255,0.8);
  border-radius: 8rpx
}
swiper .wx-swiper-dot-active::before{
  background:rgba(244,0,0,0.8);   
}

what result do you expect? What is the error message actually seen?

now I want to know how .wx-swiper-dots.wx-swiper-dots-horizontal is viewed, or where I can find the introduction

.
Mar.28,2021

focus on the attribute indicator-active-color='-sharpf4d020'

  <swiper :autoplay="true" class="swiper-box" :circular='true' :indicator-dots='true' indicator-active-color='-sharpf4d020'>
      <div class="swiper-item">
        <swiper-item>
          <image src="https://xiaofei-1252186245.cos.ap-chengdu.myqcloud.com/my-project/event-b1.png" class="slide-image" />
        </swiper-item>
      </div>
      <div class="swiperitem">
        <swiper-item>
          <image src="https://xiaofei-1252186245.cos.ap-chengdu.myqcloud.com/my-project/event-b2.png" class="slide-image" />
        </swiper-item>
      </div>
    </swiper>
Menu