首页 > 其他 > 详细

demo_34 评论内容实现_2 评论发布及发布组件初步实现

时间:2020-09-09 11:00:36      阅读:68      评论:0      收藏:0      [点我收藏+]

本节目的:前端发布评论到数据库 及 创建评论组件

效果图:

技术分享图片

 1. 发布评论功能实现

技术分享图片

 2. 评论模块

2.1 评论模块内容

技术分享图片

 2.2 评论模块样式

技术分享图片

 2.3 评论组件comments-box

内容

技术分享图片

样式

<style lang="scss" scoped>
    .comments-box {
        margin: 15px 0;

        .comments-header {
            display: flex;

            .comments-header_logo {
                flex-shrink: 0;
                width: 30px;
                height: 30px;
                border-radius: 5px;
                overflow: hidden;

                .comments-header_logo-img {
                    width: 100%;
                    height: 100%;
                }
            }

            .comments-header_info {
                display: flex;
                flex-direction: column;
                padding-left: 15px;
                font-size: 12px;
                color: #999;
                line-height: 1;

                .title {
                    margin-bottom: 10px;
                    font-size: 14px;
                    color: #333;

                    .reply-text {
                        margin: 0 10px;
                        font-weight: bold;
                        color: #000;
                    }
                }
            }
        }

        .comments-content {
            margin-top: 10px;
            font-size: 14px;
            color: #000;

            .comments-info {
                margin-top: 15px;
                display: flex;

                .comments-button {
                    padding: 2px 10px;
                    font-size: 12px;
                    color: #999;
                    border-radius: 20px;
                    border: 1px #ccc solid;
                }
            }

            .comments-reply {
                display: flex;
                margin: 15px 0;
                padding: 0 10px;
                border: 1px #eee solid;
            }

        }

    }
</style>

demo_34 评论内容实现_2 评论发布及发布组件初步实现

原文:https://www.cnblogs.com/luwei0915/p/13636847.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!