评论页页面拟定

 src/components/mini/box-friend.vue

@@ -219,5 +219,10 @@
            width: -webkit-calc(50% - 1.5rem);
            width: calc(50% - 1.5rem);
        }

        .blog-main {
            padding-left: 3%;
            padding-right: 3%;
        }
    }
</style>

 src/components/mini/box12-comment.vue

@@ -1,98 +1,184 @@
<template>
    <div class="myFriend">
        <a-form-model ref="myForm" layout="inline" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="昵称">
                <a-input v-model="form.secret" placeholder="..">
                </a-input>
            </a-form-model-item>
            <a-form-model-item label="邮箱">
                <a-input v-model="form.secret" placeholder="..仅后台可见">
                </a-input>
            </a-form-model-item>
            <a-form-model-item label="主页">
                <a-input v-model="form.secret" placeholder="http:// or https://">
                </a-input>
            </a-form-model-item>
        <replyBox></replyBox>
        <a-modal v-model="visible" title="回复Ta @xx" on-ok="handleOk"
            :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
            <template slot="footer">
                <!-- <a-button key="reset" @click="reset" type="danger">
                    擦掉重来
                </a-button>
                <a-button key="back" @click="handleCancel">
                    歇会
                </a-button>
                <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
                    完事<span style="font-size: 10px;">儿</span>..
                </a-button> -->
            </template>
            <replyBox ref="replyBoxId"></replyBox>
        </a-modal>

        </a-form-model>
        <div v-for="temp in commentListData" class="commentList">

        <a-comment>
            <div slot="content">
                <a-form-item>
                    <a-textarea :rows="4" :value="value" />
                </a-form-item>
                <a-form-item>
                    <a-button html-type="submit" type="primary">
                        高低整两句
                    </a-button>
                    <div>
                        <a-checkbox style="margin-left: 8px;">
                            悄悄回复<span class="myTip">(仅登录后可查看)</span>
                        </a-checkbox>
                        <a-checkbox>
                            接收邮件回复通知
                        </a-checkbox>
            <div class="commentGroup">
                <a-comment>
                    <span slot="actions" key="comment-nested-reply-to" @click="replyCall">
                        <a-icon type="edit" />回复
                    </span>

                    <div slot="avatar">
                        {{temp.userName}} :
                    </div>
                </a-form-item>
            </div>
        </a-comment>

        <a-comment>
            <span slot="actions" key="comment-nested-reply-to"><a-icon type="edit" />回复</span>
            <a slot="author">Han Solo</a>
            <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                alt="Han Solo" />
            <p slot="content">1+1=?</p>
			
            <a-comment>
                <span slot="actions" key="comment-nested-reply-to"><a-icon type="edit" />回复</span>
                <a slot="author">yi @ Han Solo</a>
                <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                    alt="Han Solo" />
                <p slot="content">2!
                </p>
                <a-comment>
                    <span slot="actions" key="comment-nested-reply-to"><a-icon type="edit" />回复</span>
                    <a slot="author">bimo @ yi</a>
                    <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo" />
                    <p slot="content">不对3!
                    </p>
                    <p slot="content">{{temp.userComment}}</p>

                    <a-comment v-for="tempData in temp.replyList.listData">
                        <span slot="actions" key="comment-nested-reply-to" @click="replyCall">
                            <a-icon type="edit" />回复
                        </span>
                        <div slot="avatar">
                            {{tempData.userName}} @ {{tempData.replyUserName}} :
                        </div>
                        <p slot="content">{{tempData.userComment}}</p>
                    </a-comment>


                    <div class="loadMore" @click="loadMore()">
                        <a-icon type="down" /><span>更多...</span>
                    </div>
                </a-comment>
                <a-comment>
                    <span slot="actions" key="comment-nested-reply-to"><a-icon type="edit" />回复</span>
                    <a slot="author">er @ yi</a>
                    <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo" />
                    <p slot="content">+∞
                    </p>
                </a-comment>
            </a-comment>
        </a-comment>
            </div>
        </div>
    </div>
</template>


<script>
    import replyBox from "./box13-reply.vue"
    export default {
        components: {
            replyBox
        },
        methods: {
            loadMore() {
                this.commentListData[0].replyList.listData = this.commentListData[0].replyList.listData.concat(this
                    .commentListData[0].replyList.listData)
            },
            replyCall() {
                this.visible = true;
                var msgInfo = {
                    useName: "22",
                    userComment: "11",
                };
                this.$refs.replyBoxId.getMsgInfo(msgInfo);
            }
        },
        data() {
            return {
                value: "",
                labelCol: {
                    span: 6,
                    offset: 0,
                },
                wrapperCol: {
                    span: 18,
                    offset: 0
                },
                form: {
                    secret: ""
                }
                visible: false,
                commentListData: [{
                    userName: "bimo",
                    userComment: "1+1=2?",
                    commentTime: "2022-02-22 22:22:22",
                    id: "1",
                    parentId: null,
                    replyId: null,
                    replyUserName: null,
                    replyList: {
                        total: "3",
                        current: "1",
                        listData: [{
                            userName: "inleft",
                            userComment: "2",
                            commentTime: "2022-02-22 23:22:22",
                            id: "2",
                            parentId: "1",
                            replyId: "1",
                            replyUserName: "bimo",
                        }, {
                            userName: "air",
                            userComment: "不对是3",
                            commentTime: "2022-02-23 13:13:13",
                            id: "3",
                            parentId: "1",
                            replyId: "2",
                            replyUserName: "inleft",
                        }]
                    },
                },{
                    userName: "bimo",
                    userComment: "1+1=2?",
                    commentTime: "2022-02-22 22:22:22",
                    id: "1",
                    parentId: null,
                    replyId: null,
                    replyUserName: null,
                    replyList: {
                        total: "3",
                        current: "1",
                        listData: [{
                            userName: "inleft",
                            userComment: "2",
                            commentTime: "2022-02-22 23:22:22",
                            id: "2",
                            parentId: "1",
                            replyId: "1",
                            replyUserName: "bimo",
                        }, {
                            userName: "air",
                            userComment: "不对是3",
                            commentTime: "2022-02-23 13:13:13",
                            id: "3",
                            parentId: "1",
                            replyId: "2",
                            replyUserName: "inleft",
                        }]
                    },
                }],

            }
        }
    }
</script>

<style>
<style lang="less">
    .visitInfo {
        user-select: none;
    }

    .commentList {

        img {
            user-select: none;
        }

        .ant-comment-actions {
            display: flex;
            justify-content: flex-end;
        }

        .ant-comment-content-author {
            margin-bottom: 0px;
        }

        .ant-comment-inner {
            padding: 10px 10px 0px;
        }

        .commentGroup {
            border-top: 1px solid #e5e9ef;
            margin-bottom: 10px;
            padding-bottom: 15px;


            .loadMore:hover {
                color: skyblue;
            }
        }

        .ant-comment-content-detail {
            p {
                margin-bottom: 0px;
            }
        }
    }
</style>

 src/components/mini/box13-reply.vue

New file
@@ -0,0 +1,88 @@
<template>
    <div>
        <div class="visitInfo">
            <a-form-model ref="myForm" layout="inline" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item label="昵称">
                    <a-input v-model="form.secret" placeholder="需填..">
                    </a-input>
                </a-form-model-item>
                <a-form-model-item label="邮箱">
                    <a-input v-model="form.secret" placeholder="..仅后台可见">
                    </a-input>
                </a-form-model-item>
                <a-form-model-item label="主页">
                    <a-input v-model="form.secret" placeholder="http:// or https://">
                    </a-input>
                </a-form-model-item>

            </a-form-model>

        </div>
        <div class="replyMsgInfo" v-if="showReplyMsgInfo">
            <div>{{msgInfo.useName}}</div>
            <div>{{msgInfo.userComment}}</div>
        </div>
        <a-comment>
            <div slot="content">
                <a-form-item>
                    <a-textarea :rows="4" :value="value" />
                </a-form-item>
                <div>
                    <a-button html-type="submit" type="primary" v-if="!showReplyMsgInfo">
                        高低整两句
                    </a-button>
                    <a-button html-type="submit" type="primary" v-else>
                        回复Ta
                    </a-button>
                </div>

                <div>
                    <a-checkbox style="margin-left: 8px;" v-if="!showReplyMsgInfo">
                        悄悄回复<span class="myTip">(仅登录后可查看)</span>
                    </a-checkbox>
                    <a-checkbox>
                        接收邮件回复通知
                    </a-checkbox>
                </div>
            </div>
        </a-comment>
    </div>
</template>

<script>
    export default {
        methods: {
            getMsgInfo(param) {
                this.msgInfo = param;
                this.showReplyMsgInfo = true;
            }
        },
        data() {
            return {
                msgInfo: {
                    useName: "",
                    userComment: "",
                },
                showReplyMsgInfo: false,
                labelCol: {
                    span: 6,
                    offset: 0,
                },
                wrapperCol: {
                    span: 15,
                    offset: 0
                },
                form: {
                    secret: ""
                },
                value: "",
            }
        }
    }
</script>

<style lang="less">
    .replyMsgInfo {
        padding: 10px 20px 0px;
    }
</style>

 src/components/swichLabel/main1-show.vue

@@ -197,8 +197,8 @@

    .blog-main {
        margin-top: 80px;
        padding-left: 5%;
        padding-right: 5%;
        padding-left: 3%;
        padding-right: 3%;
    }

    /*左右两边的盒子容器*/