文章声明：转载来源：https://blog.csdn.net/weixin_39089928/article/details/103237995

<!-- comment -->
            <div class="comment" id="comment">
                <h1 class="comm">
                    Comment Area
                </h1>
                <div class="line"></div>
                <!-- 如果是荣鹏 -->
                <if condition="($Think.session.vid == 1)  ">
                    <form action="" method="post" class="bottomForm" id="comment_form_admin" autocomplete="nope"
                        onsubmit="return false">
                        <div class="input-wrap input-admin">
                            <input type="text" placeholder="Please post your replay" name="comment" class="commentIn">
                            <div class="submit subAdmin">
                                submit
                            </div>
                            <div class="enquiry_make">
                                <p></p>
                            </div>
                        </div>
                    </form>
                    <else />
                    <form action="" method="post" class="bottomForm" id="comment_form" autocomplete="nope"
                        onsubmit="return false">
                        <div class="input-wrap">
                            <input type="text" placeholder="Please post your comment" name="comment" class="commentIn">
 
                            <div class="submit">
                                comment
                            </div>
                            <div class="enquiry_make">
                                <p></p>
                            </div>
                        </div>
                    </form>
                </if>
 
                <!-- 评论列表 -->
                <div class="comment-list ajaxcomment">
 
                    <foreach name='commentList' item='vo' key='k'>
                        <div class="faq-box">
                            <div class="left">
                                <div class="iconfont"></div>
                                <div class="suxian su1"></div>
                                <div class="iconfont"></div>
                            </div>
                            <div class="faq-item faq-w">
                                <div class="user">{$vo.email}
                                    <span class="time">Release time: {$vo.create_time|date='Y-m-d
                                        H:i:s',###}</span>
                                    <!-- 只用荣鹏可以回复客户评论 -->
                                    <if condition="($Think.session.vid == 1)  ">
                                        <div class="replay">
                                            <i class="iconfont"></i>Reply
                                            <span class="commentID">{$vo.id}</span>
                                        </div>
                                    </if>
                                </div>
 
                                <p>{$vo.comment}
                                </p>
                            </div>
                            <!-- 管理员回复不为空时候显示 -->
                            <div class="faq-item faq-a">
                                <notempty name="vo['admincomment']">
                                    <div class="left">
                                        <div class="iconfont"></div>
                                        <div class="suxian su2"></div>
                                        <div class="iconfont"></div>
                                    </div>
                                    <div class="right">
                                        <div class="user">Rongpeng
                                            <span class="time">Release time:{$vo.create_time|date='Y-m-d
                                                H:i:s',###}</span>
                                        </div>
                                        <p> {$vo.admincomment}
                                        </p>
                                    </div>
                                </notempty>
                            </div>
                        </div>
                    </foreach>
                </div>
                <notempty name="commentList">
                    <div class="allComment">
                        View entire discussion
                    </div>
                </notempty>
 
            </div>

// 发表评论
        $("#comment_form .submit").click(function () {
            var btn = $(this);
            var html = btn.html();
            $(this).attr({
                'disabled': 'disabled'
            });
            var comment = $('#comment_form input[name="comment"]').val().replace(/^\s+|\s+$/g, "");
 
            if (!comment) {
                $(".enquiry_make").css("display", "block");
                $(".enquiry_make").css("font-size", "20px");
                $('.enquiry_make').find("p").html('The comment cannot be empty!');
                $(".enquiry_make").fadeIn(400, function () {}).delay(2000).fadeOut();
                $('#registration_form input[name="row[comment]"]').focus();
                btn.html(html);
                btn.removeAttr("disabled");
                return false;
            }
            var form = new FormData(document.getElementById("comment_form"));
            // 传博客的id
            var b_id = $(".blogID").val();
            form.append("b_id", b_id);
 
            $.ajax({
                url: "/single/ajaxComment",
                type: "post",
                data: form,
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.status == 1) {
                        $('.enquiry_make').find("p").html(res.data);
                        $(".enquiry_make").fadeIn(400, function () {}).delay(3000).fadeOut();
                        $("#downSpec").fadeOut();
                        $('.sec1-box .list').removeClass('enterPwd');
                    } else {
                        $('.enquiry_make').find("p").html(
                            "Sorry, you can not comment, please login first!");
                        $(".enquiry_make").fadeIn(400, function () {}).delay(2000).fadeOut();
                    }
 
                    btn.html(html);
                    btn.removeAttr("disabled");
                    $('#comment_form')[0].reset();
                },
                error: function (e) {
                    $('.enquiry_make').find("p").html(
                        '<span>Server error, please try again later!</span>');
                    $(".enquiry_make").fadeIn(400, function () {}).delay(2000).fadeOut();
                    btn.html(html);
                    btn.removeAttr("disabled");
                }
            });
        })
 
// 回复评论（一开始隐藏提交按钮）
        $(".input-admin").css("display", "none");
        // 定义全部变量评论ID
        var comment_id;
        $(".replay").click(function () {
            $(".input-admin").css("display", "block");
            // 点击回复后启用提交按钮
            $(".subAdmin").removeAttr("disabled");
            // 聚焦input输入框
            $(".commentIn").focus();
            // 获取当前回复的评论的ID
            var a = $(this).find(".commentID").html();
            comment_id = a;
 
        });
// 查看全部评论
        $(".allComment").click(function () {
            var b_id = $(".blogID").val();
            $.ajax({
                type: "post",
                url: "/single/ajaxthisComment",
                data: {
                    'id': b_id,
                },
                success: function (data) {
                    console.log(data.data);
                    var str = "";
                    for (var i = 0; i < data.data.length; i++) {
                        var c_time = parseInt(data.data[i].create_time);
                        var j = timestampToTime(c_time);
                        str +=
                            '<div class="faq-box">' +
                            '<div class="left">' +
                            '<div class="iconfont"></div>' +
                            '<div class="suxian su1"></div>' +
                            '<div class="iconfont"></div>' +
                            '</div>' +
                            '<div class="faq-item faq-w">' +
                            '<div class="user">' + data.data[i].email +
                            ' <span class="time">Release time:' + j + '</span>' +
 
                            '<if condition="($Think.session.vid == 1)  ">' +
                            '<div class="replay">' +
                            '<i class="iconfont"></i>Reply' +
                            '<span class="commentID">' + data.data[i].id + '</span>' +
                            ' </div>' +
                            '</if>' +
                            '</div>' +
                            '<p>' + data.data[i].comment +
                            '</p></div>' +
                            '<div class="faq-item faq-a">' +
                            '<if condition="(' + $data.data[i].admincomment +
                            ' neq  null)  ">' +
                            '<div class="left">' +
                            '<div class="iconfont"></div>' +
                            '<div class="suxian su2"></div>' +
                            '<div class="iconfont"></div>' +
                            '</div>' +
                            '<div class="right">' +
                            '<div class="user">Rongpeng' +
                            '<span class="time">Release time:' + j + '</span>' +
                            '</div>' +
                            '<p> ' + data.data[i].admincomment +
                            '</p></div></if></div></div>'
                    }
 
                    if (data.data.length < 6) {
                        $('.allComment').css('display', 'none');
                    }
                    $('.ajaxcomment').append(str);
                    clactime(); //再次计算竖线高度
                },
                error: function (e) {
                    $('.ajaxcomment').append('Server error please try again');
                    // console.log(e)
                }
            })
        });
 
        // 计算竖线高度函数
        function clactime() {
            if ($(window).width() > 100) {
                var len = $(".faq-box").length;
                for (var i = 0; i < len; i++) {
                    var kh = $(".faq-box").eq(i).find(".faq-w").height() + $(".faq-box").eq(i).find(".faq-a")
                        .height() -
                        28;
                    var oh = $(".faq-box").eq(i).find(".faq-a").height() - 47;
                    $(".faq-box").eq(i).find(".su1").height(kh);
                    $(".faq-box").eq(i).find(".su2").height(oh);
                    $(window).resize(function () {
                        var skh = $(".faq-box ").eq(i).find(".faq-w").height() + $(".faq-box ").eq(i).find(
                                ".faq-a")
                            .height() - 28;
                        var soh = $(".faq-box").eq(i).find(".faq-a").height() - 47;
                        $(".faq-box").eq(i).find(".su1").height(skh);
                        $(".faq-box").eq(i).find(".su2").height(soh);
                    });
                }
 
            }
        }
 
        // 页面加载调用计算竖线高度函数
        window.onload = function () {
            clactime();
        }

CSS部分

.comment-list {
    clear: both
}
 
 .comment-list .left {
    float: left;
    margin-right: 20px
}
 .comment-list .left .iconfont {
    color: #AAB5C8
}
 
.comment-list .left .suxian {
    width: 1px;
    margin-left: 8px;
    background: rgba(170, 181, 200, 0.25)
}
 .comment-list .left .su1 {
    height: 116px
}
 .comment-list .left .su2 {
    height: 25px
}
 
 .comment-list .faq-box {
    margin-bottom: 3.5rem
}
 
 .comment-list .faq-box .faq-item .user {
    font-size: 14px;
    font-family: Montserrat;
    font-weight: 600;
    color: #1b8bcc;
    margin-bottom: 1rem;
}
 
.comment-list .faq-box .faq-item .user .replay {
    float: right;
    font-size: 14px;
    font-family: Montserrat;
    font-weight: 400;
    color: rgba(170, 181, 200, 1);
}
 
.comment-list .faq-box .faq-item .user .replay .iconfont {
    color: rgba(170, 181, 200, 1);
    margin-right: 7px;
}
 
 .comment-list .faq-box .faq-item .user .replay:hover,
 .comment-list .faq-box .faq-item .user .replay:hover .iconfont {
    color: rgba(27, 139, 204, 1);
    cursor: pointer;
}
 
.commentID {
    display: none;
}
 
.container .comment .comment-list .faq-box .faq-item .user .time {
    margin-left: 20px;
    font-size: 12px;
    font-family: Montserrat;
    font-weight: 400;
    color: #aab5c8
}
 
 .comment-list .faq-box .faq-item p {
    font-size: 14px;
    font-family: Montserrat;
    font-weight: 400;
    color: #6b7381;
    line-height: 20px;
    margin-bottom: 1.5rem
}
 
 .comment-list .faq-box .faq-a {
    margin-left: 3rem
}
 
.allComment {
    line-height: 45px;
    background: #1b8bcc;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: Montserrat;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 9rem
}