生活随笔
收集整理的这篇文章主要介绍了
css --- 手机端,留言模块的样式
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
效果如下:
代码:
- 说明:用到了mint-ui,需要先安装
- mt-button的导入: import { Button } from ‘mint-ui’
- mt-button的使用: Vue.component(Button.name, Button)
- 更多 http://mint-ui.github.io/
// comment.vue
<template><div class="comment-container"><hr><h3 class="title">发表评论</h3><textareaplaceholder="请输入要BB的内容(最多吐槽120字)"maxlength="120"></textarea><mt-buttontype="primary"size="large">发表评论</mt-button><div class="cmt-list"><div class="cmt-item"><div class="cmt-title">第1楼 用户:匿名用户 发表时间:2019-09-19 14:45:42</div><div class="cmt-body">锄禾日当午 栗子1</div></div></div><div class="cmt-list"><div class="cmt-item"><div class="cmt-title">第2楼 用户:匿名用户 发表时间:2019-09-19 15:18:22</div><div class="cmt-body">锄禾日当午 栗子2</div></div></div><div class="cmt-list"><div class="cmt-item"><div class="cmt-title">第3楼 用户:匿名用户 发表时间:2019-09-19 15:18:47</div><div class="cmt-body">锄禾日当午 栗子3</div></div></div><mt-buttontype="danger"size="large"plain>加载更多</mt-button></div>
</template><script>
</script><style lang="scss" scoped>
.comment-container {h3 {font-size: 18px;text-align: center;color: black;}textarea {font-size: 14px;height: 85px;margin: 0;}.cmt-list {margin: 5px 0;.cmt-item {font-size: 13px;.cmt-title {background-color: #ccc;line-height: 30px;}.cmt-body {text-indent: 2em;line-height: 35px;}}}
}
</style>
总结
以上是生活随笔为你收集整理的css --- 手机端,留言模块的样式的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
