reader/component/comment/comment.wxss

.comment_container {
    position: absolute;
    z-index: 99;
    bottom: 0;
    width: 100%;
    height: 850rpx;
    background: #ffffff;
    padding-bottom: 200rpx;
    box-sizing: border-box;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
}

.comment_container .comment_number {
    position: relative;
    width: 100%;
    height: 68rpx;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
    color: #4a4a4a;
    font-size: 30rpx;
}

.comment_container .comment_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 20rpx;
    padding-right: 68rpx;
    box-sizing: border-box;
    margin-bottom: 14rpx;
}

.comment_container .comment_item .comment_box {
    width: 100%;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding-bottom: 24rpx;
    padding-left: 48rpx;
    border-bottom: 1rpx solid rgba(151, 151, 151, 0.34);
}

.comment_container .comment_item .comment_box .avatar_box {
    width: 111rpx;
    height: 100%;
    display: block;
    margin-right: 15rpx;
}

.comment_container .comment_item .comment_box .avatar_box image {
    width: 96rpx;
    height: 96rpx;
    background: chocolate;
    border-radius: 50%;
}

.comment_container .comment_item .comment_box .comment_info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.comment_container .comment_item .comment_box .comment_info .nickname {
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.6);
}

.comment_container .comment_item .comment_box .comment_info .comment_text {
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 23rpx;
}

.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper {
    background: rgba(0, 0, 0, 0.03);
    width: 100%;
    padding-left: 12rpx;
    padding-top: 10rpx;
    box-sizing: border-box;
}

.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .comment_reply_item {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.8);
}

.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .comment_reply_item .reply_nickname {
    color: rgba(1, 67, 124, 0.8);
}

.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .more_btn {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 37rpx;
    font-size: 26rpx;
    color: #698FAF;
    padding-right: 20rpx;
    box-sizing: border-box;
    padding-bottom: 20rpx;
}

.comment_container .comment_item .comment_box .comment_info .time_info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;
}

.comment_container .comment_item .comment_box .comment_info .time_info .time {
    color: rgba(0, 0, 0, 0.8);
    font-size: 28rpx;
}

.comment_container .comment_item .comment_box .comment_info .time_info .info {
    width: 200rpx;
    height: 100%;
    display: flex;
    position: relative;
}

.comment_container .comment_item .comment_box .comment_info .time_info .info .like {
    width: 80rpx;
    height: 35rpx;
    display: flex;
    align-items: center;
    position: absolute;
    top: -14rpx;
    left: 0;
}

.comment_container .comment_item .comment_box .comment_info .time_info .info .like image {
    width: 30rpx;
    height: 27rpx;
    margin-right: 12rpx;
}

.comment_container .comment_item .comment_box .comment_info .time_info .info .like text {
    font-size: 22.4rpx;
    color: rgba(0, 0, 0, 0.8);
}

.comment_container .comment_item .comment_box .comment_info .time_info .info .comment {
    width: 80rpx;
    height: 35rpx;
    display: flex;
    align-items: center;
    position: absolute;
    top: -14rpx;
    left: 120rpx;
}

.comment_container .comment_item .comment_box .comment_info .time_info .info .comment image {
    width: 28.8rpx;
    height: 25rpx;
    margin-right: 16rpx;
}

.comment_container .comment_item .comment_box .comment_info .time_info .info .comment text {
    font-size: 22.4rpx;
    color: rgba(0, 0, 0, 0.8);
}

.comment_input {
    width: 100%;
    height: 205rpx;
    background: #eee;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    padding-left: 24rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.comment_input .send_input {
    width: 575rpx;
    height: 94rpx;
    background: #fff;
    border-radius: 10rpx;
    padding-left: 50rpx;
}

.comment_input .send_input ::placeholder {
    text-indent: 10rpx;
    color: #000;
}

.comment_input .send_btn {
    width: 120rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    color: #42a8ff;
    font-size: 34rpx;
}