1. 实现效果

2. 完成代码

<template><view class="components-home"><view style="margin-top:-50rpx;height: 486rpx; position: relative;margin-bottom: 80rpx;"><image src='https://xxx.com/img/wccQQP.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image></view><swiper class="card-swiper round-dot" previous-margin="1rpx" :indicator-dots="false" :circular="true" :autoplay="true" interval="5000"duration="500" @change="cardSwiper" indicator-color="#ffffff" indicator-active-color="#ffffff" style="margin-top: -320upx;"><swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur == index ? 'cur':''"><view class="swiper-item shadow-shop" style="border-radius: 20rpx 20rpx 22rpx 22rpx;"><image :src="item.url" v-if="item.type=='image'" mode="aspectFill" class=""></image></view></swiper-item></swiper></view>
</template><script>export default {name: 'Components',data() {return {swiperList: [{id: 0,type: 'image',url: 'https://xxx.com/img/qdpz/phone1.png',}, {id: 1,type: 'image',url: 'https://xxx.com/img/qdpz/phone2.png'}, {id: 2,type: 'image',url: 'https://xxx.com/img/qdpz/phone3.png'},{id: 3,type: 'image',url: 'https://xxx.com/img/qdpz/phone4.png'}],cardCur: 0,}},methods: {cardSwiper(e) {this.cardCur = e.detail.current},}}
</script><style>.components-home{background: #eee;}.card-swiper {height: 550upx !important;}.card-swiper swiper-item {width: 260upx !important;left: 245upx;	box-sizing: border-box;padding: 0upx 15upx 50upx 15upx;overflow: initial;/* margin: 100rpx 0; */}.card-swiper swiper-item .swiper-item {width: 100%;display: block;height: 100%;border-radius: 10upx;transform: scale(0.7);transition: all 0.2s ease-in 0s;overflow: hidden;}.card-swiper swiper-item.cur .swiper-item {transform: none;transition: all 0.2s ease-in 0s;}
</style>