/* mb */
@media screen and (max-width: 870px){
    .personcontent{
        width: 100%;
        justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
        padding: 0 0.3rem;
        flex-direction: column-reverse;
    }
    .personcontent .left{
        width: 100%;
        height: auto;
        border: 1px solid #dcbb75;
        background-color: #fff;
        padding: 0.3rem;
        margin: 0.1rem 0;
        border-radius: 0.1rem;
    }
    .personcontent .left .title{
        display: none;
        width: 100%;
        height: 0.45rem;
        justify-content: flex-start;
        color: #999;
        font-size: 0.16rem;
    }
    .personcontent .left .item{
        width: 6.3rem;
        height: 0.9rem;
        justify-content: flex-start;
        color: #333;
        font-size: 0.28rem;
        cursor: pointer;
        border-radius: 0.06rem;
        padding-left: 0.22rem;
    }
    .personcontent .left .item .itemicon{
        width: 0.4rem;
        height: 0.4rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: 0.2rem;
    }
    .personcontent .left .active{
       background-color: #c3c3c3;
    }
    .personcontent .right{
        width: 7rem;
        height: auto;
        border: 1px solid #dcbb75;
        background-color: #fff;
        padding: 0 0.25rem;
        margin: 0.3rem 0;
        border-radius: 0.1rem;
    }
    .personcontent .right .header{
        display: none;
        width: 100%;
        height: 0.5rem;
        justify-content: space-between;
    }
    .personcontent .right .header .title{
        width: auto;
        font-size: 0.16rem;
        color: #333;
        font-weight: bold;
    }
    .personcontent .right .header .btn{
        width: 0.9rem;
        height: 0.32rem;
        font-size: 0.14rem;
        color: #fff;
        cursor: pointer;
        background-color: #c52417;
        border-radius: 0.04rem;
    }
    .personcontent .right .underline{
        display: none;
        width: 100%;
        height: 1px;
        border-top: 1px solid #dcbb75;
    }
    .personcontent .right .body{
        padding: 0.5rem;
    }
    .personcontent .right .body .userheadcontaienr{
        width: 100%;
        height: auto;
        flex-shrink: 0;
        align-items: flex-start;
        align-content: flex-start;
        justify-content: flex-start;
    }
    .personcontent .right .body .userheadcontaienr .userhead{
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 1.2rem;
        background-position: center;
        background-size: cover;
    }
    .personcontent .right .body .usermsgcontainer{
        width: 100%;
        height: auto;
        font-size: 0.28rem;
        color: #333;
        font-weight: bold;
    }
    .small{
        font-size: 0.2rem;
        height: 0.4rem;
    }
    .personcontent .right .body .usermsgcontainer .fullitem{
        width: 100%;
        height: 0.6rem;
        justify-content: flex-start;
        
    }
    .personcontent .right .body .usermsgcontainer .halfitem{
        width: 100%;
        height: 0.6rem;
        justify-content: flex-start;
    }
    .personcontent .right .body .usermsgcontainer .halfitem .title{
        width: 40%;
        justify-content: flex-start;
    }
    .personcontent .right .body .usermsgcontainer .halfitem .content{
        width: 60%;
        justify-content: flex-start;
    }
}
/* pc */
@media screen and (min-width: 870px){
    .personcontent{
        width: 9rem;
        justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
    }
    .personcontent .left{
        width: 1.9rem;
        height: auto;
        border: 1px solid #dcbb75;
        background-color: #fff;
        padding: 0 0.35rem;
    }
    .personcontent .left .title{
        width: 100%;
        height: 0.45rem;
        justify-content: flex-start;
        color: #999;
        font-size: 0.16rem;
    }
    .personcontent .left .item{
        width: 100%;
        height: 0.35rem;
        justify-content: flex-start;
        color: #333;
        font-size: 0.13rem;
        cursor: pointer;
    }
    .personcontent .left .item .itemicon{
        width: 0.13rem;
        height: 0.13rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: 0.05rem;
    }
    .personcontent .left .active{
        color: #c52417;
    }
    .personcontent .right{
        width: 7rem;
        height: auto;
        border: 1px solid #dcbb75;
        background-color: #fff;
        padding: 0 0.25rem;
    }
    .personcontent .right .header{
        width: 100%;
        height: 0.5rem;
        justify-content: space-between;
    }
    .personcontent .right .header .title{
        width: auto;
        font-size: 0.16rem;
        color: #333;
        font-weight: bold;
    }
    .personcontent .right .header .btn{
        width: 0.9rem;
        height: 0.32rem;
        font-size: 0.14rem;
        color: #fff;
        cursor: pointer;
        background-color: #c52417;
        border-radius: 0.04rem;
    }
    .personcontent .right .underline{
        width: 100%;
        height: 1px;
        border-top: 1px solid #dcbb75;
    }
    .personcontent .right .body{
        padding: 0.25rem 0;
        flex-wrap: nowrap;
    }
    .personcontent .right .body .userheadcontaienr{
        width: 0.95rem;
        height: 100%;
        flex-shrink: 0;
        align-items: flex-start;
        align-content: flex-start;
    }
    .personcontent .right .body .userheadcontaienr .userhead{
        width: 0.95rem;
        height: 0.95rem;
        border-radius: 0.95rem;
        background-position: center;
        background-size: cover;
    }
    .personcontent .right .body .usermsgcontainer{
        width: 100%;
        height: auto;
        font-size: 0.12rem;
        color: #333;
        font-weight: bold;
        padding-left: 0.3rem;
    }
    .personcontent .right .body .usermsgcontainer .fullitem{
        width: 100%;
        height: 0.3rem;
        justify-content: flex-start;
        
    }
    .personcontent .right .body .usermsgcontainer .halfitem{
        width: 50%;
        height: 0.3rem;
        justify-content: flex-start;
    }
    .personcontent .right .body .usermsgcontainer .halfitem .title{
        width: 40%;
        justify-content: flex-start;
    }
    .personcontent .right .body .usermsgcontainer .halfitem .content{
        width: 60%;
        justify-content: flex-start;
    }
    
}