实现回复列表功能

最新推荐文章于 2023-04-11 20:55:34 发布

舍予大可

最新推荐文章于 2023-04-11 20:55:34 发布

阅读量413

点赞数 1

分类专栏：列表前端文章标签： html css 列表

本文链接：https://blog.csdn.net/qq_44574863/article/details/106126375

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

列表

1 篇文章 0 订阅

订阅专栏

功能模块:展示回复列表
在这里插入图片描述
前端代码：

<!--回复列表-->
            <h4>
                <span th:text="${question.commentCount}"></span> 个回复
            </h4>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments" th:each="comment:${comments}">
                <!--回复者的信息-->
                <div class="media" >
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-rounded"
                                 th:src="${comment.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading" >
                            <span th:text="${comment.user.name}"></span>
                        </h5>
                        <div th:text="${comment.content}"></div>
                        <div class="menu">
                            <span class="glyphicon glyphicon-thumbs-up icon"></span>
                            <span class="glyphicon glyphicon-comment icon"></span>
                            <span class="pull-right" th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd')}"></span>
                        </div>
                    </div>
                </div>
            </div>

css样式：

.btn-comment{
    float: right;
    margin-bottom: 10px;
}
.comments{
    padding-bottom: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.comment-sp{
    margin-top: 0;
}
/*评论下方的菜单样式*/
.menu {
    color: #999;
    margin-top: 5px;
}
.menu .icon {
    margin-right: 6px;
    font-size: 15px;
    cursor: pointer;
}
.menu .icon:hover{
    color: #499ef3;
}