main {
    background: rgb(248, 249, 252);
}

.container {
    width: 5.625rem;
    margin: 0 auto;
    padding-top: 0.078125rem;
    padding-bottom: 0.46875rem;
    display: flex;
}

.container .left {
    background: #fff;
    width: 1.171875rem;
    height: 3.125rem;
    border-radius: 0.0234375rem;
    flex-shrink: 0;
    margin-right: 0.0625rem;
}

.container .left .userinfo {
    height: 0.859375rem;
    border-bottom: 1px solid rgba(236, 237, 241, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container .left .userinfo img {
    width: 0.2734375rem;
    height: 0.2734375rem;
    border-radius: 0.015625rem;
    display: block;
    margin-bottom: 0.0625rem;
}

.container .left .userinfo .name {
    font-size: 0.078125rem;
    font-weight: 500;
    line-height: 0.109375rem;
    color: rgba(51, 51, 51, 1);
}

.container .left .userinfo .phone {
    font-size: 0.0625rem;
    font-weight: 400;
    line-height: 0.0859375rem;
    color: rgba(102, 102, 102, 1);
    margin-top: 0.015625rem;
}

.container .left .menu {
    padding-top: 0.125rem;
    padding-left: 0.125rem;
}

.container .left .menu li {
    font-size: 0.0703125rem;
    font-weight: 400;
    line-height: 0.0859375rem;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 0.125rem;
    cursor: pointer;
    position: relative;
}

.container .left .menu li.active a {
    color: rgba(5, 100, 229, 1);
}

.container .left .menu li.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.03125rem;
    width: 0.2734375rem;
    height: 2px;
    border-radius: 1px;
    background: rgba(5, 100, 229, 1);
}

.container .left .menu li.at::after {
    content: '';
    position: absolute;
    position: absolute;
    left: -0.0703125rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.03125rem;
    height: 0.03125rem;
    border-radius: 50%;
    background: red;
}

.container .left .menu li a {
    color: rgba(51, 51, 51, 1);
}

.container .right {
    width: 100%;
}

.container .flexs {
    display: flex;
    justify-content: space-between;
}

.container .order-card {
    height: 0.7265625rem;
    border-radius: 0.0234375rem;
    background: rgba(255, 255, 255, 1);
    padding: 0.09375rem;
    width: 2.1484375rem;
}

.container .right .titles {
    font-size: 0.078125rem;
    font-weight: 500;
    line-height: 0.109375rem;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 0.09375rem;
}

.container .order-card ul {
    display: flex;
    justify-content: space-around;
}

.container .order-card ul img {
    width: 0.1640625rem;
    height: 0.1640625rem;
    display: block;
    margin: 0 auto 0.0234375rem;
}

.container .order-card ul p {
    font-size: 0.0625rem;
    font-weight: 400;
    line-height: 0.0859375rem;
    color: rgba(51, 51, 51, 1);
    text-align: center;
}

.container .classifieds-box {
    background: #fff;
    border-radius: 0.0234375rem;
    margin-top: 0.0625rem;
    padding: 0.09375rem;
}

.cate {
    display: flex;
    padding-bottom: 0.15625rem;
}

.cate li {
    margin-right: 0.2734375rem;
    font-size: 0.0703125rem;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    cursor: pointer;
    position: relative;
}

.cate li:last-of-type {
    margin-right: 0;
}

.cate li.active {
    color: rgba(5, 100, 229, 1);
}

.cate li.active::after {
    content: '';
    position: absolute;
    width: 0.1328125rem;
    height: 3px;
    border-radius: 1.5px;
    bottom: -0.0625rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(5, 100, 229, 1);
}

.list .item {
    margin-bottom: 0.1171875rem;
    padding: 0.125rem;
    border-radius: 0.0390625rem;
    background: url('../static/bg_icon.png') no-repeat center, rgba(255, 255, 255, 1);
    background-size: 1.6171875rem 1.6171875rem;
    box-shadow: 0px 2px 0.0390625rem rgba(153, 153, 153, 0.3);
    position: relative;
    display: flex;
}

.list .item .hot {
    position: absolute;
    width: 0.34375rem;
    display: block;
    right: 0;
    top: 0.10546875rem;
}

.list .item .avatar {
    width: 0.234375rem;
    height: 0.234375rem;
    border-radius: 0.234375rem;
    margin-right: 0.0625rem;
    display: block;
    flex-shrink: 0;
}

.list .item .nickname {
    font-size: 0.0859375rem;
    font-weight: 500;
    line-height: 0.140625rem;
    color: rgba(88, 111, 143, 1);
    margin-bottom: 0.0625rem;
}

.list .item .content {
    font-size: 0.078125rem;
    font-weight: 400;
    line-height: 0.1171875rem;
    color: rgba(102, 102, 102, 1);
}

.list .item .topic {
    margin-top: 0.0546875rem;
    font-size: 0.0703125rem;
    font-weight: 400;
    line-height: 0.09765625rem;
    color: rgba(224, 0, 0, 1);
}

.list .item .topic span {
    margin-right: 0.09375rem;
}

.list .item .img-box {
    display: flex;
    flex-wrap: wrap;
}

.list .item .img-box img {
    display: block;
    margin-top: 0.05859375rem;
    margin-right: 0.05859375rem;
    width: 0.390625rem;
    height: 0.390625rem;
    border-radius: 0.0234375rem;
    object-fit: cover;
}

.list .item .img-box video {
    display: block;
    width: 1.9296875rem;
}

.list .item .time {
    display: flex;
    justify-content: flex-end;
}

.list .item .time a {
    width: 0.4375rem;
    height: 0.1640625rem;
    opacity: 1;
    border-radius: 0.0234375rem;
    background: rgba(5, 100, 229, 1);
    font-size: 0.0625rem;
    font-weight: 500;
    line-height: 0.1640625rem;
    text-align: center;
    cursor: pointer;
    color: #fff;
}

.list .item .fun-box {
    display: flex;
    align-items: center;
    margin-top: 0.1171875rem;
}

.list .item .fun-box>div {
    display: flex;
    align-items: center;
    font-size: 0.078125rem;
    line-height: 0.109375rem;
    color: rgba(138, 150, 169, 1);
    cursor: pointer;
    margin-right: 0.1953125rem;
}

.list .item .fun-box>div:first-of-type {
    margin-right: 0.625rem;
}

.list .item .fun-box>div img {
    width: 0.0859375rem;
    height: 0.0859375rem;
    margin-right: 0.03125rem;
}

.list .item .comment-box {
    margin-top: 0.12890625rem;
}

.list .item .comment-user {
    display: flex;
}

.list .item .comment-user .uavatar {
    width: 0.234375rem;
    height: 0.234375rem;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
    margin-right: 0.0546875rem;
}

.list .item .comment-user .input-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.list .item .comment-user .input-box input {
    width: 100%;
    height: 0.234375rem;
    font-size: 0.0859375rem;
    font-weight: 400;
    border-radius: 0.0234375rem;
    border: 1px solid rgba(216, 216, 216, 1);
    padding: 0 0.0625rem;
}

.list .item .comment-user .input-box .left {
    display: flex;
    margin-top: 0.0546875rem;
    align-items: center;
}

.list .item .comment-user .input-box .isany {
    display: flex;
    align-items: center;
    font-size: 0.078125rem;
    color: rgba(102, 102, 102, 1);
    cursor: pointer;
}

.list .item .comment-user .input-box .isany img {
    width: 0.0859375rem;
    height: 0.0859375rem;
    display: block;
    margin-right: 0.03125rem;
}

.list .item .comment-user .input-box .send {
    width: 0.3125rem;
    height: 0.140625rem;
    border-radius: 0.0234375rem;
    background: rgba(5, 100, 229, 1);
    font-size: 0.078125rem;
    font-weight: 400;
    line-height: 0.140625rem;
    margin-left: 0.09375rem;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    cursor: pointer;
}

.list .item .comment-list {
    border-radius: 0.0234375rem;
    border: 1px solid rgba(216, 216, 216, 1);
    margin-top: 0.15625rem;
}

.list .item .comment-list .ctotal {
    padding-left: 0.1171875rem;
    border-bottom: 1px solid rgba(216, 216, 216, 1);
    font-size: 0.0859375rem;
    font-weight: 400;
    line-height: 0.3046875rem;
    color: rgba(153, 153, 153, 1);
}

.list .item .citem {
    padding: 0.15625rem 0.1171875rem;
    display: flex;
}

.list .item .citem .cavatar {
    width: 0.15625rem;
    height: 0.15625rem;
    margin-right: 0.05078125rem;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.list .item .citem .right {
    width: 100%;
}

.list .item .citem .uname {
    font-size: 0.0859375rem;
    font-weight: 500;
    margin-bottom: 0.0234375rem;
    line-height: 30.0.03125rem;
    color: rgba(88, 111, 143, 1);
}

.list .item .citem .cmsg {
    font-size: 0.078125rem;
    font-weight: 400;
    line-height: 0.1171875rem;
    color: rgba(102, 102, 102, 1);
}

.list .item .citem .comment-btn {
    display: flex;
    align-items: center;
    margin-top: 0.0234375rem;
    justify-content: flex-end;
    font-size: 0.078125rem;
    font-weight: 400;
    color: rgba(138, 150, 169, 1);
}

.list .item .citem .comment-btn .btn {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.list .item .citem .comment-btn .btn2 {
    margin-right: 0.09375rem;
}

.list .item .citem .comment-btn .btn img {
    width: 0.0859375rem;
    height: 0.0859375rem;
    margin-right: 0.03125rem;
    display: block;
}

.list .item .citem .hfinput-box {
    border-radius: 0.0234375rem;
    border: 1px solid rgba(216, 216, 216, 1);
    padding: 0.07421875rem 0.125rem 0.125rem 0.09375rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0.078125rem;
}

.list .item .citem .hfinput-box input {
    font-size: 0.078125rem;
    font-weight: 400;
    width: 100%;
}

.list .item .citem .hfinput-box .left {
    display: flex;
    margin-top: 0.0546875rem;
    align-items: center;
}

.list .item .citem .hfinput-box .isany {
    display: flex;
    align-items: center;
    font-size: 0.078125rem;
    color: rgba(102, 102, 102, 1);
    cursor: pointer;
}

.list .item .citem .hfinput-box .isany img {
    width: 0.0859375rem;
    height: 0.0859375rem;
    display: block;
    margin-right: 0.03125rem;
}

.list .item .citem .hfinput-box .send {
    width: 0.3125rem;
    height: 0.140625rem;
    border-radius: 0.0234375rem;
    background: rgba(5, 100, 229, 1);
    font-size: 0.078125rem;
    margin-left: 0.09375rem;
    font-weight: 400;
    line-height: 0.140625rem;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    cursor: pointer;
}

.masking {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.3);
}

.score-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background: url('../static/score_bg.png') no-repeat center;
    background-size: 100% 100%;
    width: 1.8203125rem;
    height: 1.9201171875rem;
    padding-top: 0.41015625rem;
    display: none;
}

.score-box .p1 {
    font-size: 0.1875rem;
    font-weight: 500;
    line-height: 0.26171875rem;
    color: rgba(255, 255, 255, 1);
    text-align: center;
}

.score-box .p2 {
    font-size: 0.0703125rem;
    font-weight: 400;
    line-height: 0.09765625rem;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    width: 0.859375rem;
    margin: 0.12890625rem auto 0;
}

.score-box .btns {
    width: 1.02734375rem;
    height: 0.3203125rem;
    margin: 0.3203125rem auto 0;
    cursor: pointer;
}