.comment {
    background-color: #f7f7f7;
}
.navigator {
    width: #{750rpx};
    height: #{100rpx};
    background-color: #ffffff;
    border-bottom: #{1rpx} solid #e2e2e2;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    > view {
        width: #{250rpx};
        height: #{100rpx};
        text-align: center;

        > text {
            display: inline-block;
            height: #{100rpx};
            line-height: #{98rpx};
            font-size: #{28rpx};
            border-bottom-style: solid;
            border-bottom-width: #{2rpx};
            border-bottom-color: transparent;
        }

        .active-nav {
            color: #446dfd;
            border-bottom-color: #446dfd;
        }
    }
}

.replyStatus {
    margin-top: #{124rpx};
    width: #{750rpx};
    height: #{56rpx};
    background-color: #f7f7f7;

    :first-child {
        border-top-left-radius: #{28rpx};
        border-bottom-left-radius: #{28rpx};
    }

    :last-child {
        border-top-right-radius: #{28rpx};
        border-bottom-right-radius: #{28rpx};
    }

    > view {
        width: #{160rpx};
        height: #{56rpx};
        line-height: #{56rpx};
        font-size: #{24rpx};
        text-align: center;
        background-color: #ffffff;
        border: #{1rpx} solid #446dfd;
    }

    .active-reply {
        background-color: #446dfd;
        color: #ffffff;
    }
}

.tip {
    position: fixed;
    top: #{300rpx};
    left: 0;
    right: 0;
    margin: 0 auto;
    color: #666666;
    font-size: #{24rpx};
    width: #{240rpx};
    text-align: center;

    > image {
        height: #{240rpx};
        width: #{240rpx};
        margin-bottom: #{20rpx};
    }
}

.content {
    width: #{750rpx};
    padding: #{24rpx};
    box-sizing: border-box;

    .item {
        background-color: white;
        width: #{750-48rpx};
        box-sizing: border-box;
        padding: #{24rpx};
        margin-bottom: #{24rpx};
        border-radius: #{16rpx};

        .top {
            .image {
                width: #{144rpx};
                height: #{144rpx};
                border-top-left-radius: #{8rpx};
                border-bottom-left-radius: #{8rpx};
            }

            .text {
                width: #{510rpx};
                height: #{144rpx};
                padding: #{20rpx} #{24rpx} #{20rpx} #{20rpx};
                box-sizing: border-box;
                border-top-right-radius: #{8rpx};
                border-bottom-right-radius: #{8rpx};

                .name {
                    width: #{466rpx};
                    height: #{57rpx};
                    line-height: #{28rpx};
                    font-size: #{24rpx};
                    color: #353535;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }

                .from {
                    width: #{466rpx};
                    font-size: #{24rpx};
                    color: #999999;
                    margin-top: #{24rpx};
                }
            }
        }

        .bottom {
            padding-top: #{20rpx};
            box-sizing: border-box;
            height: #{80rpx};

            .performed {
                margin-top: #{6rpx};
                height: #{48rpx};

                .icon {
                    width: #{48rpx};
                    height: #{48rpx};
                }

                .evaluation {
                    width: #{50rpx};
                    color: #353535;
                    font-size: #{22rpx};
                    margin-left: #{16rpx};
                }

                .show {
                    width: #{88rpx};
                    height: #{36rpx};
                    line-height: #{36rpx};
                    border-radius: #{18rpx};
                    background-color: #ff9000;
                    font-size: #{22rpx};
                    color: #ffffff;
                    text-align: center;
                    margin-left: #{16rpx};
                }
            }

            .button {
                height: #{60rpx};

                .show-button, view.reply {
                    display: inline-block;
                    height: #{60rpx};
                    line-height: #{60rpx};
                    padding: 0 #{20rpx};
                    min-width: #{120rpx};
                    border-style: solid;
                    border-width: #{1rpx};
                    border-radius: #{30rpx};
                    font-size: #{28rpx};
                    text-align: center;
                }

                .show-button {
                    border-color: #bbbbbb;
                    color: #353535;
                }

                .reply {
                    border-color: #446dfd;
                    color: #446dfd;
                    margin-left: #{16rpx};
                }
            }
        }
    }
}

.is-top-box-bg {
    background: #e5e5e5 !important;
}

.is-top-center-bg {
    background: #dedede !important;
}