.multiple-avatars{
    box-sizing: border-box;
    // border: 1px solid pink;
    position: relative;
    width: .32rem;
    height: .32rem;
    overflow: hidden;
    .status-undo{
        position: absolute;
        top: 0;
        z-index: 6;
        background-color: rgba(255,255,255,.7);
        width: .32rem;
        height: .32rem;
    }
    [class^='avatars-']{
        border-radius: 50%;
        text-align:center;
        font-size: .14rem;
    }
    .avatars-1{      
        &.rank-0{ 
            height: .32rem;
            width:.32rem;
            line-height:.32rem;
        }
    }
    .avatars-2{
        position: absolute;
        height: .2rem;
        width:.2rem;
        line-height: .2rem;
        &.rank-0{ 
            top: 0;
            left: 0;
            z-index: 4;
            border: 1px solid #fff;
        }
        &.rank-1{ 
            bottom: 0;
            right: 0;
        }
    }
    .avatars-3{
        position: absolute;
        height: .18rem;
        width: .18rem;
        line-height: .18rem;
        &.rank-0{ 
            top: 0rem;
            left: .06rem;
            z-index: 4;
            border: 1px solid #fff;
        }
        &.rank-1{ 
            bottom: 0rem;
            right: 0rem;
            z-index: 3;
            border: 1px solid #fff;
        }
        &.rank-2{ 
            bottom: .01rem;
            left: 0;
        }
    }
    .avatars-4{
        position: absolute;
        height: .18rem;
        width: .18rem;
        line-height: .18rem;
        &.rank-0{ 
            top: 0rem;
            left: -.01rem;
            z-index: 4;
            border: 1px solid #fff;
        }
        &.rank-1{ 
            top: 0rem;
            right: 0rem;
            z-index: 3;
            border: 1px solid #fff;
        }
        &.rank-2{ 
            bottom: 0rem;
            right: 0rem;
            z-index: 2;
            border: 1px solid #fff;
        }
        &.rank-3{ 
            bottom: .01rem;
            left: 0;
        }
    }
    .avatars-5{
        position: absolute;
        height: .16rem;
        width: .16rem;
        line-height: .16rem;
        &.rank-0{ 
            top: -.01rem;
            left: .08rem;
            z-index: 4;
            border: 1px solid #fff;
        }
        &.rank-1{ 
            top: .05rem;
            right: -.01rem;
            z-index: 3;
            border: 1px solid #fff;
        }
        &.rank-2{ 
            bottom: -.01rem;
            right: 0rem;
            z-index: 2;
            border: 1px solid #fff;
        }
        &.rank-3{ 
            bottom: -.01rem;
            left: 0rem;
            z-index: 1;
            border: 1px solid #fff;
        }
        &.rank-4{ 
            top: .06rem;
            left: 0;
        }
    }
}