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;
}