/* pages/msgPage/msgPage.wxss */
.msg-page {
    box-sizing: border-box;
    min-height: calc(100vh - 150rpx);
}
.top-view {
    position: relative;
}
.top-view.topShow {
    margin-bottom: 20rpx;
}
.top-view .msg-colse-img {
    position: absolute;
    width: 30rpx;
    height: 30rpx;
    right: 20rpx;
    top: 20rpx;
}

.msg-box-view {
    background: #fff;
    box-sizing: border-box;
    border-radius: 20rpx;
    min-height: calc(100vh - 150rpx);
}
.msg-box-view.topShow {
    min-height: calc(100vh - 320rpx);
}

.msg-box-view.not-msg-data {
    text-align: center;
    box-sizing: border-box;
    padding-top: 140rpx;
    min-height: calc(100vh - 230rpx);
}
.msg-box-view.not-msg-data .not-msg-data-img {
    width: 302rpx;
    height: 224rpx;
}

.msg-box-view.not-msg-data .not-data-msg-info {
    font-size: 24rpx;
    color: #b3bfcb;
    margin-top: 20rpx;
}

.msg-li-item {
    height: 140rpx;
    box-sizing: border-box;
    padding-top: 20rpx;
    border-top: 1rpx solid #d9dde5;
}

.msg-li-item-first {
    border-top: 0;
}

.msg-li-item-last {
    border-bottom: 1rpx solid #d9dde5;
}

.msg-li-item .chatheads-view {
    width: 88rpx;
    height: 88rpx;
    margin: 0 20rpx;
    border-radius: 50%;
    margin-top: 7rpx;
    position: relative;
}
.msg-li-item .chatheads-view .other-head-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.msg-li-item .msg-content {
    width: calc(100% - 140rpx);
}
.msg-li-item .msg-content .msg-nickName {
    font-size: 30rpx;
    line-height: 56rpx;
    width: 100%;
}
.msg-li-item .msg-content .msg-last-content,
.msg-li-item .msg-content .msg-last-content-date {
    font-size: 24rpx;
    color: #999;
}

.msg-li-item .msg-content .msg-last-content-date {
    margin-right: 20rpx;
}
.msg-li-item .msg-content .msg-last-content {
    max-width: calc(100% - 270rpx);
}

.msg-li-item .chatheads-view .view-info {
    position: absolute;
    right: -8rpx;
    top: -8rpx;
    background: red;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    box-sizing: border-box;
    min-width: 30rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
}