Applet component swiper-how to modify the style of the panel indicator point

In the official document, the indicator point of the swiper is a circle by default, and its color can only be modified. If you want to modify the shape, there are two ideas:

1. Hide the official panel indicator points (official properties can be hidden), and rewrite the components with view (I personally think this is more troublesome, this article will not explain it)

2. Find out the class that controls the pointing point in swiper, and modify its style.

 

How to modify the indicator point style in the second method?

First of all: We need to understand the classes that control the pointing points in several class swipers 

1.wx-swiper-dot indicates the class name of the dot   

2.wx-swiper-dot-active The class name of the current indication point  

With these two class names, changing the color style is relatively simple  

Not much nonsense, go to the code

<template>
  <swiper circular="true" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
      <block v-for="(item, index) in imgList" :key="index">
          <swiper-item>
              <image :src="item" class="slide-image" mode="aspectFill"/>
          </swiper-item>
      </block>
  </swiper> 
</template>
<script>
export default {
  data () {
    return {
      indicatorDots: true, // 是否显示面板指示点
      autoplay: true, // 是否自动切换
      interval: 5000, // 自动切换时间间隔
      duration: 500 // 滑动动画时长
    }
  },
  props: ['imgList']
}
</script>
<style lang="scss" scoped>
.swiper {
  width: 690rpx !important;
  height: 270rpx !important;
  margin: 0 auto;
}
image {
  height: 100%;
  width: 100%;
}

// 指示点样式
.swiper /deep/ .wx-swiper-dot{ 
  height: 12rpx;
  width: 12rpx;
  background: rgba(255, 255, 255, .6)
  }
// 当前指示点样式
.swiper /deep/ .wx-swiper-dot-active{
    width: 36rpx;
    height: 12rpx;
    border-radius: 6rpx;
    background: rgba(255, 255, 255, .8)
}

</style>

.