问答小程序开发《二》:提问页UI设计及前端代码编写
js部分似乎代码不全,所以本文仅供参考来自原文地址UI图:为方便用户使用,提问页即为首页。提问页有问题输入框、问题描述输入框、图片上传、提交/重置表单元素。index.wxss代码:/**index.wxss**/page{ background- ...
js部分似乎代码不全,所以本文仅供参考
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:10px0px;
}
.section.upload{
margin:20px0px!important;
}
.img-upload{
height:100%;
width:100%;
position: relative;
}
.img-upload .img-icon-box{
display:inline-block;
margin:0px20px15px0px;
}
.img-upload icon{
position: absolute;
margin:-15px0pxauto80px;
}
.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 .form form .btns{
width:100%;
}
/*版权*/
.copyright{
height:40px;
line-height:40px;
color:#8f8f94;
font-size:12px;
float: left;
bottom:20px;
}
/*字体图标*/
@font-face {
font-family:iconfont;
/*字体base64 https://transfonter.org/*/