uni-app头像叠加显示

展示

代码

<view class="bmBox"><view class="bmLeft">已报名：<text class="blueColor">10人</text></view><view class="bmRight dflex"><view class="avatarList"><image src="/static/images/logo.png" mode="aspectFill" v-for="(item, index) in 8" :key="index"class="stack-item" :class="{'hide': index >= 5}"></image></view><image src="/subActivity/static/images/more.png" mode="aspectFill" class="moreImg"></image></view>
</view>

.bmBox {border-top: 12rpx solid #F7F7F7;border-bottom: 12rpx solid #F7F7F7;padding: 10rpx 30rpx;display: flex;justify-content: space-between;align-items: center;.bmLeft {color: #333333;font-size: 28rpx;font-weight: 700;flex-shrink: 0;.blueColor {color: #276cf5;}}.bmRight {.avatarList {display: flex;flex-direction: row;align-items: center;justify-content: center;margin-right: -5px;.stack-item {width: 48rpx;height: 48rpx;border: 1px soild #ffffff;border-radius: 50%;margin: 10px;position: relative;z-index: 1;}.stack-item {margin-left: -35rpx;}.hide {display: none;/* 隐藏元素 */}}.moreImg {width: 44rpx;height: 44rpx;}}
}