:host {
  --swiper-container-width: 100%;
  --swiper-container-height: 100%;
  // 滑动图片尺寸
  --swiper-image-width: 100%;
  --swiper-image-height: 577rpx;
  // 指示点
  --swiper-dot-width: 8rpx;
  --swiper-dot-height: 8rpx;
  --swiper-dot-bottom: 32rpx;
  --swiper-dot-active-color: var(--text-color-active);
  // 指示点-数字
  --swiper-dot-number-right: 24rpx;
  --swiper-dot-number-bottom: var(--swiper-dot-bottom);
  --swiper-dot-number-color: rgba(255, 255, 255, 0.4);
  --swiper-dot-number-bg: rgba(0, 0, 0, 0.4);
  // 指示点-椭圆
  --swiper-dot-oval-width: 8rpx;
  --swiper-dot-oval-height: 8rpx;
  --swiper-dot-oval-active-width: 16rpx;
  --swiper-dot-oval-active-height: 8rpx;
  --swiper-dot-oval-border-radius: 10rpx;
}

.swiper-container {
  position: relative;
  width: var(--swiper-container-width);
  height: var(--swiper-container-height);

  .swiper-wrapper,
  .swiper-item-image .van-image {
    width: var(--swiper-image-width);
    height: var(--swiper-image-height);
  }

  .swiper-wrapper .wx-swiper-dot {
    margin-bottom: var(--swiper-dot-bottom);
  }

  .wx-swiper-dot-active {
    background-color: var(--swiper-dot-active-color);
  }
}

.swiper-indicator {
  // 实心
  &--solid {
    .wx-swiper-dot {
      width: var(--swiper-dot-width);
      height: var(--swiper-dot-height);
    }
  }

  // 椭圆
  &--oval {
    .wx-swiper-dot {
      width: var(--swiper-dot-width);
      height: var(--swiper-dot-height);
    }

    .wx-swiper-dot-active {
      width: var(--swiper-dot-oval-active-width);
      height: var(--swiper-dot-oval-active-height);
      background-color: var(--swiper-dot-active-color);
      border-radius: var(--swiper-dot-oval-border-radius);
      opacity: 1;
    }
  }

  // 数字
  &--number {
    .wx-swiper-dots {
      display: none !important;
    }

    .swiper-dots {
      position: absolute;
      right: var(--swiper-dot-number-right);
      bottom: var(--swiper-dot-number-bottom);
      min-width: 82rpx;
      height: 40rpx;
      font-size: 26rpx;
      font-weight: 400;
      line-height: 40rpx;
      color: var(--swiper-dot-number-color);
      text-align: center;
      background: var(--swiper-dot-number-bg);
      border-radius: 23rpx;
    }
  }
}