.user-wrapper {
    position: relative;
    
}

/* 路径 */
.sitepath {
    font-size: .14rem;
    line-height: .5rem;
    color: #88848b;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: .28rem;
}
.sitepath .home {
    width: .12rem;
    height: .12rem;
    display: inline-block;
    background-position: -1rem -1rem;
    margin-right: .2rem;
}

/* 列表 */
.userlist .item{
    min-height: 4.0rem;
    margin-bottom: .4rem;
    background: var(--el-userlist-bg);
    transition: all 0.3s ease-out 0s;
    clip-path: polygon(0 0, 100% 0, 110% 120%, 0 100%, 0 63px, 56px 0); /* 折角效果 */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* 列表左边 */
.userlist .img-div{
    width:3rem;
    height:3.5rem;
    align-items:center;
    background: url(../images/userBg.svg) center no-repeat;background-size: cover;
}
.festivalRed .userlist .img-div{
    background: url(../images/userBg_red.svg) center no-repeat;background-size: cover;
}
.userlist .item .img-div .name{
    /*font-size: 26px;*/
    margin-top: .3rem;
    color: var(--el-text-color-primary);
}
.userlist .item .img-div .user-img {
    width:2rem;
    height: 2rem;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.userlist .item .img-div .user-img img {
    width: calc(100% - .26rem);
    height: calc(100% - .26rem);
    clip-path: circle(50%);
    object-fit: cover;
}

/* 列表右边 */
.userlist .item .cont {
    flex:1;
    min-width: 3.50rem;
    padding: .30rem .20rem;
    box-sizing: border-box;
}
.userlist .item .cont .position{
    /*font-size: 28px;*/
    color: var(--el-text-color-primary);
}
.userlist .item .cont .desc {
    margin-top: .2rem;
    /*font-size: 14px;*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.userlist .item .cont .desc > * ,.userlist .item .cont .desc span{
    flex:1 1 auto;
}


@media screen and (max-width: 700px) {
    .userlist .img-div {
        width: 100%;
    }
}