甘肃建设项目审批权限网站,佛山网中互联网服务有限公司,做网站优化的公司的宣传海报,南宁网站建设排名主要用到了padding-left把左侧的空白给留出来#xff0c;然后把头像定位到留出的空白位置。行内对齐样式#xff0c;使用了display:inline-flex;align-items:center;图标本来要用字体比较方便#xff0c;暂时用的从icon font下载的svg样式写的一塌糊涂#xff0c;一点也没考…
主要用到了padding-left把左侧的空白给留出来然后把头像定位到留出的空白位置。行内对齐样式使用了display:inline-flex;align-items:center;图标本来要用字体比较方便暂时用的从icon font下载的svg样式写的一塌糊涂一点也没考虑复用性一直就想写出个评论样式终于能写出来了我太难了后面再参考下Vue2封装评论组件详细讲解
templatediv classcomment-wrapperdiv classonediv classmain-commentdiv classavatara href#img src/assets/avatar/avatar1.jpg alt/a/divdiv classmain-commentorspan classuname初见Ta_U/spanimg stylewidth:20px src/assets/avatar/lv4.svg alt/divdiv classmain-content验证码老是错误是为什么呢/divdiv classtipperdiv classleft-tipper align-inlinespan classtiming2022-10-26 17:04/spanspan classlike align-inlineimg stylewidth:16px src/assets/avatar/zan.svg altspan50/span/spanspan classdislike align-inlineimg stylewidth:16px src/assets/avatar/cai.svg altspan2/span/span/divdiv classright-tipperimg styleheight:20px; src/assets/avatar/dot.svg alt/div/div/divdiv classsub-commentdiv classavatara href#img src/assets/avatar/avatar2.jpg alt/a/divdiv classsub-commentorspan classuname伏月小九九/spanimg stylewidth:20px src/assets/avatar/lv4.svg alt/divspan classsub-comment-content我也是 我觉得不是打开方式不对我也是 我觉得不是打开方式不对我也是我觉得不是打开方式不对我也是 我觉得不是打开方式不对我也是/spandiv classtipperdiv classleft-tipper align-inlinespan classtiming2022-10-27 18:46/spanspan classlike align-inlineimg stylewidth:16px src/assets/avatar/zan.svg altspan8/span/spanspan classdislike align-inlineimg stylewidth:16px src/assets/avatar/cai.svg altspan1/span/span/divdiv classright-tipperimg styleheight:20px; src/assets/avatar/dot.svg alt/div/div/divdiv classsub-commentdiv classavatara href#img src/assets/avatar/avatar3.jpg alt/a/divdiv classsub-commentorspan classunameBYKang3/spanimg stylewidth:20px src/assets/avatar/lv3.svg alt/divspan classsub-comment-contentspan回复/span a href#伏月小九九 :/a解决了吗我也是验证一值错误/spandiv classtipperdiv classleft-tipper align-inlinespan classtiming2022-10-26 17:04/spanspan classlike align-inlineimg stylewidth:16px src/assets/avatar/zan.svg altspan2/span/spanspan classdislike align-inlineimg stylewidth:16px src/assets/avatar/cai.svg altspan3/span/span/divdiv classright-tipperimg styleheight:20px; src/assets/avatar/dot.svg alt/div/div/div/div/div
/templatescript langts setup
import { ref, reactive, onMounted } from vue/scriptstyle langscss
.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
