customized.wxss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. @import './iconfont.wxss';
  2. .iconfont {
  3. font-family: "iconfont" !important;
  4. font-size: 36rpx;
  5. font-style: normal;
  6. -webkit-font-smoothing: antialiased;
  7. -moz-osx-font-smoothing: grayscale;
  8. }
  9. /* 通用 */
  10. page{
  11. color: #333;
  12. font-size:26rpx;
  13. }
  14. .auto{
  15. margin:0 26rpx;
  16. }
  17. /* flex布局 */
  18. .f-box{
  19. display: flex;
  20. display: -webkit-flex; /* Safari */
  21. }
  22. .f-item {
  23. flex-grow: 1; /* default 0 */
  24. }
  25. .bg-white{
  26. background:white;
  27. }
  28. /* 排列方向 */
  29. .f-direction-row{
  30. flex-direction: row/*主轴为水平方向,起点在左端。*/
  31. }
  32. .f-direction-row-reverse{
  33. flex-direction: row-reverse;/*主轴为水平方向,起点在右端。*/
  34. }
  35. .f-direction-column{
  36. flex-direction: column;/*主轴为垂直方向,起点在上端。*/
  37. }
  38. .f-direction-column-reverse{
  39. flex-direction: column-reverse;/*主轴为垂直方向,起点在下端。*/
  40. }
  41. /*水平 对齐方向 */
  42. .f-justify-content-start{
  43. justify-content: flex-start; /* 向左对齐 */
  44. }
  45. .f-justify-content-end{
  46. justify-content: flex-end; /* 向右对齐 */
  47. }
  48. .f-justify-content-center{
  49. justify-content: center; /* 居中对齐 */
  50. }
  51. .f-justify-content-between{
  52. justify-content: space-between; /*两端对齐*/
  53. }
  54. .f-justify-content-around{
  55. justify-content: space-around; /* 距离等比 */
  56. }
  57. /* 交叉轴对齐方向 */
  58. .f-align-items-start{
  59. align-items: flex-start
  60. }
  61. .f-align-items-end{
  62. align-items: flex-end
  63. }
  64. .f-align-items-center{
  65. align-items:center;
  66. }
  67. .f-align-items-baseline{
  68. align-items: baseline; /*项目的第一行文字的基线对齐。*/
  69. }
  70. .f-align-items-stretch{
  71. align-items: stretch; /*如果项目未设置高度或设为auto,将占满整个容器的高度。*/
  72. }
  73. .f-flex-wrap{
  74. flex-wrap:wrap;
  75. }
  76. /* color */
  77. .c-green{
  78. color:#00af66
  79. }
  80. .c-orange{
  81. color:#e8976a;
  82. }
  83. .c-white{
  84. color:white
  85. }
  86. .c-black{
  87. color:black;
  88. }
  89. .c-666{
  90. color:#666;
  91. }
  92. .c-999{
  93. color:#999
  94. }
  95. .c-333{
  96. color:#333;
  97. }
  98. .bg-orange{
  99. background:#e8976a;
  100. }
  101. .bg-green{
  102. background:#00af66;
  103. }
  104. /* 通用样式 */
  105. .t-right{
  106. text-align: right
  107. }
  108. .f-s26{
  109. font-size:26rpx;
  110. }
  111. .f-s28{
  112. font-size:28rpx;
  113. }
  114. .f-s30{
  115. font-size:30rpx;
  116. }
  117. .f-s32{
  118. font-size:32rpx;
  119. }
  120. .f-s34{
  121. font-size:34rpx;
  122. }
  123. .f-s36{
  124. font-size:36rpx;
  125. }
  126. .mar-l20{
  127. margin-left:20rpx;
  128. }
  129. .mar-t20{
  130. margin-top:20rpx;
  131. }
  132. .mar-b20{
  133. margin-bottom:20rpx;
  134. }
  135. .mar-r20{
  136. margin-right:20rpx;
  137. }
  138. .pad-l20{
  139. padding-left:20rpx;
  140. }
  141. .pad-t20{
  142. padding-top:20rpx;
  143. }
  144. .pad-b20{
  145. padding-bottom:20rpx;
  146. }
  147. .pad-r20{
  148. padding-right:20rpx;
  149. }
  150. /* 公用样式 */
  151. .public-prompt{
  152. width:100%;
  153. line-height:72rpx;
  154. text-align: center;
  155. background:#edecf1;
  156. color:#626262;
  157. font-size:24rpx;
  158. position:fixed;
  159. bottom: 92rpx;
  160. z-index:10;
  161. }
  162. /* footer */
  163. .footer{
  164. padding-bottom:120rpx;
  165. }
  166. .footer-box{
  167. position: fixed;
  168. bottom:0;
  169. left:0;
  170. width:100%;
  171. height:100rpx;
  172. line-height:100rpx;
  173. background:#fff;
  174. font-size:30rpx;
  175. z-index:10;
  176. }