模仿评论样式

1. 主要用到了padding-left把左侧的空白给留出来，然后把头像定位到留出的空白位置。
2. 行内对齐样式，使用了display:inline-flex;align-items:center;
3. 图标本来要用字体比较方便，暂时用的从icon font下载的svg
4. 样式写的一塌糊涂，一点也没考虑复用性
5. 一直就想写出个评论样式，终于能写出来了，我太难了
6. 如果评论中有表情图，暂时想到的处理方式是先整体设置行高，把表情图的高度设置和行高相同，再vertical-align:top顶部对齐（弹性布局好像处理不了这个）
7. 后面再参考下：Vue2封装评论组件详细讲解

<template>
    <div class="comment-wrapper">

        <div class="one">
            <div class="main-comment">
                <div class="avatar">
                    <a href="#">
                        <img src="@/assets/avatar/avatar1.jpg" alt="">
                    </a>
                </div>
                <div class="main-commentor">
                    <span class="uname">初见Ta_U</span>
                    <img style="width:20px" src="@/assets/avatar/lv4.svg" alt="">
                </div>
                <div class="main-content">验证码老是错误是为什么呢</div>
                <div class="tipper">
                    <div class="left-tipper align-inline">
                        <span class="timing">2022-10-26 17:04</span>
                        <span class="like align-inline">
                            <img style="width:16px" src="@/assets/avatar/zan.svg" alt="">
                            <span>50</span>
                        </span>
                        <span class="dislike align-inline">
                            <img style="width:16px" src="@/assets/avatar/cai.svg" alt="">
                            <span>2</span>
                        </span>
                    </div>
                    <div class="right-tipper">
                        <img style="height:20px;" src="@/assets/avatar/dot.svg" alt="">
                    </div>
                </div>
            </div>

            <div class="sub-comment">
                <div class="avatar">
                    <a href="#">
                        <img src="@/assets/avatar/avatar2.jpg" alt="">
                    </a>
                </div>
                <div class="sub-commentor">
                    <span class="uname">伏月小九九</span>
                    <img style="width:20px" src="@/assets/avatar/lv4.svg" alt="">
                </div>
                <span class="sub-comment-content">我也是 我觉得不是打开方式不对我也是 我觉得不是打开方式不对我也是
                    我觉得不是打开方式不对我也是 我觉得不是打开方式不对我也是
                </span>
                <div class="tipper">
                    <div class="left-tipper align-inline">
                        <span class="timing">2022-10-27 18:46</span>
                        <span class="like align-inline">
                            <img style="width:16px" src="@/assets/avatar/zan.svg" alt="">
                            <span>8</span>
                        </span>
                        <span class="dislike align-inline">
                            <img style="width:16px" src="@/assets/avatar/cai.svg" alt="">
                            <span>1</span>
                        </span>
                    </div>
                    <div class="right-tipper">
                        <img style="height:20px;" src="@/assets/avatar/dot.svg" alt="">
                    </div>
                </div>
            </div>

            <div class="sub-comment">
                <div class="avatar">
                    <a href="#">
                        <img src="@/assets/avatar/avatar3.jpg" alt="">
                    </a>
                </div>
                <div class="sub-commentor">
                    <span class="uname">BYKang3</span>
                    <img style="width:20px" src="@/assets/avatar/lv3.svg" alt="">
                </div>
                <span class="sub-comment-content">
                    <span>回复</span> <a href="#">@伏月小九九 :</a>
                    解决了吗，我也是验证一值错误
                </span>
                <div class="tipper">
                    <div class="left-tipper align-inline">
                        <span class="timing">2022-10-26 17:04</span>
                        <span class="like align-inline">
                            <img style="width:16px" src="@/assets/avatar/zan.svg" alt="">
                            <span>2</span>
                        </span>
                        <span class="dislike align-inline">
                            <img style="width:16px" src="@/assets/avatar/cai.svg" alt="">
                            <span>3</span>
                        </span>
                    </div>
                    <div class="right-tipper">
                        <img style="height:20px;" src="@/assets/avatar/dot.svg" alt="">
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>


<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'

</script>

<style lang="scss">
.align-inline {
    display: inline-flex;
    align-items: center;
}

.comment-wrapper {
    width: 800px;
    height: 540px;
    margin: 20px auto;
    border: 1px dashed #ddd;
    border-radius: 5px;

    .main-comment {

        position: relative;

        padding-left: 80px;
        padding-top: 18px;
        margin-bottom: 20px;


        .avatar {

            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;

            position: absolute;
            left: 10px;
            top: 10px;

            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

    }

    .main-commentor {
        display: inline-flex;
        align-items: center;
        margin-bottom: 10px;

        .uname {
            color: #fb7299;
            font-size: 14px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            margin-right: 5px;
        }
    }

    .sub-comment {
        padding-left: 120px;
        padding-top: 5px;
        margin-bottom: 10px;
        position: relative;

        .avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;

            position: absolute;
            left: 80px;
            top: 0;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .sub-commentor {
            color: #61666d;
            font-size: 14px;
            display: inline-flex;
            align-items: start;
            margin-right: 15px;

            .uname {
                margin-right: 5px;
            }
        }

        .sub-comment-content {
            color: #18191c;
        }
    }
}

.tipper {
    color: #9499a0;
    font-size: 14px;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;

    .timing {
        margin-right: 10px;

    }

    .like {
        margin-right: 10px;

        img {
            margin-right: 5px;
        }
    }

    .like {
        margin-right: 10px;

        img {
            cursor: pointer;
            margin-right: 5px;
        }
    }

    .dislike {
        img {
            cursor: pointer;
            margin-right: 5px;
        }
    }

    .right-tipper {
        margin-right: 10px;

        img {
            cursor: pointer;
        }
    }
}

a {
    text-decoration: none;
    color: #008ac9;
}
</style>