当前位置：首页 > news >正文

模仿评论样式

news 2025/7/8 10:35:13

在这里插入图片描述

主要用到了padding-left把左侧的空白给留出来，然后把头像定位到留出的空白位置。
行内对齐样式，使用了display:inline-flex;align-items:center;
图标本来要用字体比较方便，暂时用的从icon font下载的svg
样式写的一塌糊涂，一点也没考虑复用性
一直就想写出个评论样式，终于能写出来了，我太难了
后面再参考下：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>