<template>
  <view class="pd-b-px-55">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>bannar1</van-swipe-item>
      <van-swipe-item>bannar2</van-swipe-item>
      <van-swipe-item>bannar3</van-swipe-item>
      <van-swipe-item>bannar4</van-swipe-item>
    </van-swipe>
  </view>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
$--swiperColor: #39a9ed, #ed39a8, #6939ed, #39ed99;
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  @for $i from 1 through length($--swiperColor) {
    &:nth-of-type(#{$i}n) {
      background-color: nth($--swiperColor, $i);
    }
  }
}
</style>
