推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序开发手记《五》：组件
发布时间:2020-11-28
来自原文地址
UI图：
为方便用户使用，提问页即为首页。提问页有问题输入框、问题描述输入框、图片上传、提交/重置表单元素。
index.wxss代码：
/**index.wxss**/
page{
background-color: #efeff4;
}
.container{
padding:0px;
}
.container .tip{
width: 100%;
background-color: #FFFFFF;
margin-bottom: 10px;
}
.container .tip text{
display:block;
padding: 10px;
text-align: center;
font-size: 14px;
line-height: 30px;
}
.container .form{
width: 100%;
height:100%;
background-color: #FFFFFF;
}
.container .form form{
height:100%;
display: block;
padding: 10px;
text-align: center;
}
.container .form form .section{
text-align: left;
margin: 10px 0px;
}
.section.upload{
margin: 20px 0px!important;
}
.img-upload{
height: 100%;
width: 100%;
position: relative;
}
.img-upload .img-icon-box{
display: inline-block;
margin:0px 20px 15px 0px;
}
.img-upload icon{
position: absolute;
margin: -15px 0px auto 80px;
}
.img-upload .img-box{
border: 1px #eee solid;
}
.img-upload image{
width: 80px;
height: 80px;
}
input{
width: 95%;
border-radius: 5px;
border: 1px #eee solid;
font-size: 14px;
padding: 2%;
}
textarea{
width: 95%;
border-radius: 5px;
border: 1px #eee solid;
height: 100px;
font-size: 14px;
padding: 2%;
}
.container .fo
- 上一篇：小程序生成带参二维码（JAVA）
- 下一篇：微信小程序开发手记《四》：视图容器
