0
点赞
收藏
分享

微信扫一扫

拼团列表效果

今天你读书了吗 2022-07-14 阅读 65

拼团列表效果_css

image.png

<view class="tl-pin-user">
<view>
<image :src="userImg" class="tl-head-img"></image>
<image :src="userImg" class="tl-head-img"></image>
<image :src="userImg" class="tl-head-img"></image>
<image :src="userImg" class="tl-head-img"></image>
</view>
<view class="tl-font-28-900">
5人团还差 <text class="tl-font-28-red">3</text>人
</view>
<view>
<button class="tl-btn-120 tl-font-36-fff">参团</button>
</view>
</view>

<view class="tl-pin-user">
<view>
<image :src="userImg" class="tl-head-img"></image>
<image :src="userImg" class="tl-head-img"></image>
<image :src="userImg" class="tl-head-img"></image>
<image :src="userImg" class="tl-head-img"></image>
</view>
<view class="tl-font-28-900">
5人团还差 <text class="tl-font-28-red">3</text>人
</view>
<view>
<button class="tl-btn-120 tl-font-36-fff">参团</button>
</view>
</view>

css

.tl-pin-user{
padding: 60rpx 0 0 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.tl-font-28-900{
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #0C0900;
}
.tl-font-36-fff{
font-size: 36rpx;
font-family: PingFang SC;
font-weight: 800;
color: #FFFFFF;
opacity: 1;
}
.tl-btn-120{
height: 66rpx;
line-height: 66rpx;
background: #F86341;
opacity: 1;
border-radius: 16rpx;
}
.tl-font-share{
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #B2B1AE;
}
.tl-img-tip{
width: 22rpx;
height: 22rpx;
display: inline-block;
margin-left: 10rpx;
}
.tl-flex-bt{
display: flex;
justify-content: space-between;
align-items: center;
}

举报

相关推荐

0 条评论