- 主要用到了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>
