微信小程序开发手记《五》：组件

来自原文地址 
UI图：

为方便用户使用，提问页即为首页。提问页有问题输入框、问题描述输入框、图片上传、提交/重置表单元素。

index.wxss代码：

1. /**index.wxss**/
2. page{
3. background-color: #efeff4;
4. }
5. .container{
6. padding:0px;
7. }
8. .container .tip{
9. width: 100%;
10. background-color: #FFFFFF;
11. margin-bottom: 10px;
12. }
13. .container .tip text{
14. display:block;
15. padding: 10px;
16. text-align: center;
17. font-size: 14px;
18. line-height: 30px;
19. }
20. .container .form{
21. width: 100%;
22. height:100%;
23. background-color: #FFFFFF;
24. }
25. .container .form form{
26. height:100%;
27. display: block;
28. padding: 10px;
29. text-align: center;
30. }
31. .container .form form .section{
32. text-align: left;
33. margin: 10px 0px;
34. }
35. .section.upload{
36. margin: 20px 0px!important;
37. }
38. .img-upload{
39. height: 100%;
40. width: 100%;
41. position: relative;
42. }
43. .img-upload .img-icon-box{
44. display: inline-block;
45. margin:0px 20px 15px 0px;
46. }
47. .img-upload icon{
48. position: absolute;
49. margin: -15px 0px auto 80px;
50. }
51. .img-upload .img-box{
52. border: 1px #eee solid;
53. }
54. .img-upload image{
55. width: 80px;
56. height: 80px;
57. }
58. input{
59. width: 95%;
60. border-radius: 5px;
61. border: 1px #eee solid;
62. font-size: 14px;
63. padding: 2%;
64. }
65. textarea{
66. width: 95%;
67. border-radius: 5px;
68. border: 1px #eee solid;
69. height: 100px;
70. font-size: 14px;
71. padding: 2%;
72. }
73. .container .fo