效果如下:

代码:

说明:用到了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楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间: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楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间: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楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间: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 --- 手机端,留言模块的样式相关推荐

shopnc 手机端添加自定义模块
(以商品模版为例) 第一步:添加个模版数据新增模名称版为goodsnew cccshop/data/model/mb_special.model.php /** * 获取专题模块类型列表 * @re ...
CSS手机端的主界面
开发工具与关键技术:VS/C# 作者:龙文浩撰写时间:2019/07/17 基于CSS的手机端的页面,见截图: 首先,用大的div盒子包裹住里面八个小的div盒子,分别为"文本框" ...
电商技术总结之SpringCloud+SpringBoot+mybatis+uniapp 前后端分离 b2b2c o2o 微服务商城电商之手机端首页模块设计分析
近期我参与了公司电子商务平台中"首页"模块设计, 电商平台首页功能大概分为几个区域,如下: 一.导航区域: 左上角定位入口搜索功能入口消息通知入口商品分类入口二.广告区域: ...
html+css手机端自适应网页
一,最近在做项目,写移动端的网页,主要是自适应的问题.bootstrap等前端框架用的不好,又不想耽误时间,不能自适应很烦人,这里给大家介绍下我的方法, 也是结合了很多人的思路. 1.在头部加入这样的 ...
CSS 手机端 hover 点击后无法取消样式解决方案
问题: 在 pc 端 hover 样式是鼠标悬浮显示效果,不悬浮就消失: 在移动端,hover 样式点击后显示,此后如果不做处理,那么 hover 样式就一直存在. 原因: 因为手机上的 :hover ...
手机端自适应表格table样式如何写
有时候我们的网页需要展示一些表格的内容,在pc端是很好控制它的展现方式的,但是到移动端就非常难控制了,那么该怎么做呢? 比如上图就是没控制好的移动端的表格table样式,展示非常的凌乱. 这个就是写好 ...
css手机端长摁背景变色,css动画，如何实现点击/长按时背景色切换的动画效果（背景从中间向两边延展）...
animation + keyframes 简易样例如下: 背景渐变动画 div { width:300px; height:48px; background:#eee; text-align:cen ...
PHPCMS v9 手机端栏目绑定模板
phpcms的手机端,模块是有了,但是有些地方用的还不是很舒服,其中移动端栏目无法绑定模板就不是很方便.如图,所有的栏目绑定的模板是固定的. 这次咱们就来处理下,移动端如何设置相应的模板. 这里说是设 ...
手机端应用的CSS字体样式规范
本人主要是前后端开发,设计不是很在行,在没有设计师的情况下,调字体样式真的很苦恼.这里整理一下自己通用的字体大小和颜色,方便后续直接使用. 这里是借鉴了微信小程序的视觉规范,主要是用于手机端H5应用. ...

css --- 手机端,留言模块的样式

效果如下:

代码:

css --- 手机端,留言模块的样式相关推荐

最新文章

热门文章