头像图像折叠，并有颜色边框，大于四个显示发布按钮

最终效果图实现，前面参与人数头像交叠，第四个不显示头像，并且有边框

 css部分，关键代码

.index_scroll_img1{
					width: 120rpx;
					height: 120rpx;
					display: block;
					margin-right: 10rpx;
					border-radius: 16rpx;
				}
				
				.index_scroll_item{
					width: 380rpx;
					display: flex;
					padding: 15rpx 10rpx;
					background-image: linear-gradient(to bottom,#fff, #FFFDF2);
					border-radius: 20rpx;
					
					.index_scroll_right{
						width: 386rpx;
						display: grid;
						align-content: space-between;
						
						.userList_img{
							width: 42rpx;
							height: 42rpx;
							border-radius: 50rpx; 
							position: relative;
							border: 2rpx solid #FFE01C; 
							
							&.bg-f0{
								background-color: #F0F0F0;
							}
							&.bg-FFE01C{
								background-color: #FFE01C;
							}
							&.-ma-l-10{
								margin-left: -10rpx;
							}
							
							.absolute_top{
								color: #FFE01C;
								position: absolute;
								top: -16rpx;
								left: 0;
								right: 0;
								margin: 0 auto;
								width: 16rpx;
								height: 16rpx;
							}
							
							.userList_imgItem{
								width: 100%;
								height: 100%;
								border-radius: 50rpx;
								display: block; 
								
								&.imggap-box-more{
									position: relative;
									&::after{
										left: 0;
										top:0;
										position:absolute;
										width: 42rpx;
										height: 42rpx;
										border-radius: 50rpx;
										content: '···';
										color: #fff;
										position: absolute;
										background: rgba($color:#000, $alpha: .4);
										display: flex;
										justify-content: center;
										align-items: center;
									}
								}
							} 
						}
						
						.userList_img2{
							width: 40rpx;
							height: 40rpx;
							border-radius: 50rpx; 
							 
							&.bg-FFE01C{
								background-color: #FFE01C;
							} 
						}

<view class="flex f-center f-between">
										<!-- <user-head-img :list="item.user_headimages" :width_height="48" :typeIndex="2"></user-head-img> -->
										<view class="flex f-center">
											<view class="userList_img bg-f0" :style="'z-index: '+ (4-userIndex) +';'" :class="userIndex>0?'-ma-l-10':''" v-for="(user, userIndex) in item.users" v-if="userIndex<4">
												<image :src="user.headimage" class="userList_imgItem" :class="userIndex==3?'imggap-box-more':''"></image> 
												<!-- <image src="https://static.yougico.com/Applets/皇冠SVGA.png" class="absolute_top" v-if="userIndex==0"></image> -->
											</view> 
											<view class="userList_img2 bg-FFE01C flex f-center f-jcenter" :style="item.users.length>0?'z-index: 1;margin-left: -10rpx;':''" v-if="item.join_num<4">
												<view class="iconfont iconfabu fon-24 c-f"></view>
											</view>
										</view>
										
										<view class="fon-22 c-111">{{ item.join_num }}/{{ item.max_num }}</view>
									</view>