![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0c895d45d035afedba82afed70b70ff6.png#pic_center)
.swiper-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.swiper-item-box {
width: 90%;
height: 430rpx;
border-radius: 10rpx;
border: 1px solid #eee;
padding: 2rpx;
box-sizing: border-box;
}
.swiper-item-img {
width: 100%;
height: 224rpx;
}
.act-img {
border-radius: 10rpx 10rpx 0 0;
width: 100%;
height: 100%;
}
.acti-footer {
padding: 0 20rpx;
box-sizing: border-box;
}
.tag {
width: 64rpx;
height: 36rpx;
text-align: center;
line-height: 36rpx;
border-radius: 8rpx;
margin-right: 12rpx;
font-size: 24rpx;
padding: 0 6rpx;
box-sizing: border-box;
color: #108FFF;
border: 1px solid #108FFF;
}
.acti-footer-btn {
width: 180rpx !important;
text-align: center;
height: 64rpx;
line-height: 64rpx;
color: #ffffff;
font-size: 28rpx;
padding: 0;
background: linear-gradient(to right, #7799FF, #2D59DF);
border-radius: 50rpx;
}
.acti-footer-title {
margin: 20rpx 0;
font-weight: bold;
display: -webkit-box;
font-size: 28rpx;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
Page({
data: {
list: [{
url: 'https://res.liketon.cn/upfiles/20210308/0/20210308174415546.jpg'
},
{
url: 'https://res.liketon.cn/upfiles/20210308/0/20210308174059500.jpg'
},
{
url: 'https://res.liketon.cn/upfiles/20210308/0/20210308172722123.jpg'
}
],
vertical: false,
interval: 3000,
duration: 1000
},
})
<swiper autoplay interval='{{interval}}' duration="{{duration}}"
style="height:450rpx;padding:0 20rpx;box-sizing: border-box;" display-multiple-items='2' circular>
<block wx:for="{{list}}" wx:key="*this">
<swiper-item class="swiper-item">
<view class="swiper-item-box">
<view class="swiper-item-img">
<image src="{{item.url}}" class="act-img" mode="aspectFill"></image>
</view>
<view class="acti-footer">
<view class="acti-footer-title">
<text class="tag">报名</text>花花花花花花艺线上体验课
花花花艺线上体验课
花花花艺线上体验课
艺线上体验课
</view>
<button class="acti-footer-btn">报名></button>
</view>
</view>
</swiper-item>
</block>
</swiper>