1.template部分
<view class="header-content">
    <view class="swiper-content">
      <swiper class="swiper-box" :autoplay="true" interval="3000" :circular="true" @change="swiperChangeAction">
        <swiper-item class="swiper-item-content" v-for="item in bannerList" :key="item.id">
          <image class="item-image" :src="item.coverImage" mode="scaleToFill" @click="lookArticleDetailClick(item)" />
          <view class="item-text-content">
            <text class="item-text">{{item.articleTitle}}</text>
          </view>
        </swiper-item>
      </swiper>
      <view
          slot="indicator"
          class="indicator"
        >
          <view
              class="indicator__dot"
              v-for="(item, index) in bannerList"
              :key="index"
              :class="[index === current && 'indicator__dot--active']"
          ></view>
        </view>
    </view>
 </view>
2.scss部分
.header-content{
  height: 360rpx;
  position: relative;
  .swiper-content {
    width: 100%;
    height: 340rpx;
    position: absolute;
    top: 0;
    .swiper-box {
      height: 100%;
      margin-left: 30rpx;
      margin-right: 30rpx;
      border-radius: 30rpx;
      box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.18);
      .swiper-item-content {
        display: flex;
        position: relative;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border-radius: 30rpx;
        .item-image {
          width: 100%;
          height: 340rpx;
        }
        .item-text-content {
          display: flex;
          position: absolute;
          left: 0;
          bottom: 0;
          align-items: center;
          width: 100%;
          height: 100rpx;
          background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1),black);
          opacity: 0.8;
          .item-text {
            margin-top: 40rpx;
            color: white;
            height: 60rpx;
            width: 60%;
            line-height: 60rpx;
            font-size: $small-font-size;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
      }
    }
    .indicator {
          position: absolute;
          bottom: -5rpx;
          right: 0;
          margin-right: 30rpx;
          width: 30%;
          height: 60rpx;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          &__dot {
              height: 10px;
              width: 10px;
              border-radius: 100px;
              background-color: rgba(255, 255, 255, 0.35);
              margin: 0 5px;
              transition: background-color 0.3s;
              &--active {
                  background-color: #ffffff;
              }
          }
        }
  }
}