uni-app头像叠加显示

耶啵奶膘2025-09-09 22:03

展示

代码

html 复制代码

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

css 复制代码

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