customized.wxss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  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-theme{
  78. color:#e60012 !important;
  79. }
  80. .c-green{
  81. color:#00af66
  82. }
  83. .c-orange{
  84. color:#e8976a;
  85. }
  86. .c-white{
  87. color:white
  88. }
  89. .c-black{
  90. color:black;
  91. }
  92. .c-666{
  93. color:#666;
  94. }
  95. .c-999{
  96. color:#999
  97. }
  98. .c-333{
  99. color:#333;
  100. }
  101. .bg-theme{
  102. background:#e60012 !important;
  103. }
  104. .bg-orange{
  105. background:#e8976a;
  106. }
  107. .bg-green{
  108. background:#00af66;
  109. }
  110. .bdc-theme{
  111. border-color:#e60012 !important;
  112. }
  113. /* 通用样式 */
  114. .t-right{
  115. text-align: right
  116. }
  117. .f-s26{
  118. font-size:26rpx;
  119. }
  120. .f-s28{
  121. font-size:28rpx;
  122. }
  123. .f-s30{
  124. font-size:30rpx;
  125. }
  126. .f-s32{
  127. font-size:32rpx;
  128. }
  129. .f-s34{
  130. font-size:34rpx;
  131. }
  132. .f-s36{
  133. font-size:36rpx;
  134. }
  135. .mar-l20{
  136. margin-left:20rpx;
  137. }
  138. .mar-t20{
  139. margin-top:20rpx;
  140. }
  141. .mar-b20{
  142. margin-bottom:20rpx;
  143. }
  144. .mar-r20{
  145. margin-right:20rpx;
  146. }
  147. .pad-l20{
  148. padding-left:20rpx;
  149. }
  150. .pad-t20{
  151. padding-top:20rpx;
  152. }
  153. .pad-b20{
  154. padding-bottom:20rpx;
  155. }
  156. .pad-r20{
  157. padding-right:20rpx;
  158. }
  159. .mar-l26{
  160. margin-left:26rpx;
  161. }
  162. .mar-t26{
  163. margin-top:26rpx;
  164. }
  165. .mar-b26{
  166. margin-bottom:26rpx;
  167. }
  168. .mar-r26{
  169. margin-right:26rpx;
  170. }
  171. .pad-l26{
  172. padding-left:26rpx;
  173. }
  174. .pad-t26{
  175. padding-top:26rpx;
  176. }
  177. .pad-b26{
  178. padding-bottom:26rpx;
  179. }
  180. .pad-r26{
  181. padding-right:26rpx;
  182. }
  183. /* 公用样式 */
  184. .public-prompt{
  185. width:100%;
  186. line-height:72rpx;
  187. text-align: center;
  188. background:#edecf1;
  189. color:#626262;
  190. font-size:24rpx;
  191. position:fixed;
  192. bottom: 92rpx;
  193. z-index:10;
  194. }
  195. /* header */
  196. .header{
  197. padding-top:100rpx;
  198. }
  199. .header-box{
  200. position: fixed;
  201. top:0;
  202. left:0;
  203. width:100%;
  204. height:100rpx;
  205. line-height:100rpx;
  206. background:#fff;
  207. font-size:30rpx;
  208. z-index:100;
  209. }
  210. /* footer */
  211. .footer{
  212. padding-bottom:120rpx;
  213. }
  214. .footer-box{
  215. position: fixed;
  216. bottom:0;
  217. left:0;
  218. width:100%;
  219. height:100rpx;
  220. line-height:100rpx;
  221. background:#fff;
  222. font-size:30rpx;
  223. z-index:100;
  224. }
  225. .price-cancel{
  226. color:#999 !important;
  227. text-decoration: line-through;
  228. margin-left:10rpx;
  229. font-size: 26rpx !important;
  230. font-weight: normal !important;
  231. }