纯css实现任务头像叠加

More more2025-10-26 7:06

需要实现下图这种这种样式，业务逻辑为： 5以下的人员根据数量展示头像，最多展示5个头像，纯css实现：

javascript 复制代码

//html
<view class="avatar-list-container">
                <view
                  class="avatar-item"
                  v-for="(avatar, index) in displayedAvatars"
                  :key="index"
                >
                  <image :src="avatar.src" class="avatar-image"></image>
                </view>
                <view
                  class="add-button"
                  @click="addUser"
                  v-if="baseInfo.employeeNum > 0"
                >
                  <image
                    src="https://sjfgdjkgfjdk.com/ae74f72b-a91e-42aa-9d95-ea2d4c61a030-20251016100147.png" // 举例展示的+ 号图片地址
                    class="add-icon"
                  ></image>
                </view>
              </view>

javascript 复制代码

// data定义
maxDisplayCount: 5,
 avatarsData: [],//头像存放的地址

javascript 复制代码

// 函数方法

// -----根据人数处理最多展示5分头像icon
displayedAvatars () {
      return this.avatarsData.slice(0, this.maxDisplayCount)
   }


// ------获取数据，根据人数包装展示数据
async queryComprehensiveInfo () {
      try {
        const res = await getComprehensiveInfo()

        if (res.data.code == 0) {
          this.baseInfo = res.data.data
          const listArrNum = res.data.data.employeeNum
          if (listArrNum > 0) {
            const defaultAvatar =
              'https://apzxcvbghnjm/13c6c06f-bed5-40ee-90db-35edd051499a-20251016100116.png' // 展示的头像地址,地址为举例
			// 根据展示的头像处理组装数据
            this.avatarsData = Array.from({ length: listArrNum }, () => ({
              src: defaultAvatar
            }))
            
          } else {
            this.avatarsData = []
          }
        }
      } catch (e) {
        console.log(e)
        uni.hideLoading()
      }
    }

javascript 复制代码

// 样式 css
.avatar-list-container {
    display: flex;
    align-items: center;
    position: absolute;
    right: -20px;
  }

  .avatar-item {
    margin-right: -70rpx;
    /* 实现头像重叠效果，负边距 */
    position: relative;
    z-index: 1;
    /* 确保后面的头像在前面 */

    &:last-child {
      margin-right: 0;
      /* 最后一个头像不重叠 */
    }
  }

  .avatar-image {
    width: 120rpx;
    height: 120rpx;
  }
.add-button {
    width: 130rpx;
    height: 130rpx;
    z-index: 5;
  }

按照以上就实现了~