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
英文地址，請注明出處：http://en.pswp.cn/web/96405.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！