生活随笔
收集整理的這篇文章主要介紹了
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 --- 手机端,留言模块的样式的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
