单元格轮播
html
<swiper class="swiper1" :circular="true" :autoplay="true" interval="3000" previous-margin="195rpx" next-margin="195rpx">
<swiper-item v-for="(item,index) in 5" :key="index">
<view class="swiper-item">
<image src="../../static/newimg/7.png" mode="" class="logo"></image>
<view class="btn df-aic-jusb">
<view class="left">
<image src="../../static/newimg/8.png" mode=""></image>
<text class="fsz-30 fw-b color-yello">1000</text>
<text class="fsz-16 fw-b color-yello">USDT</text>
</view>
<view class="right fsz-30 color-000 t-c">首卡铸造</view>
</view>
</view>
</swiper-item>
</swiper>
css
.swiper1{
height: 850rpx;
margin: 50rpx auto 100rpx;
.swiper-item{
width: 342rpx;
height: 524rpx;
background: #1C1C1C;
border-radius: 20rpx;
padding-top: 15rpx;
}
.logo{
display: block;
width: 310rpx;
height: 418rpx;
border-radius: 20rpx;
margin: auto;
border: 1rpx solid #F7DA4A;
}
.btn{
margin:20rpx auto 0;
padding: 0 14rpx;
.left{
display: flex;
align-items: baseline;
uni-image{
width: 20rpx;
height: 20rpx;
margin-right: 8rpx;
}
}
.right{
width: 130rpx;
height: 50rpx;
background: #F7DA4A;
border-radius: 10rpx;
font-size: 26rpx;
color: #050500;
}
}
}