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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/96405.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/96405.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！