common.wxss 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. /* flex */
  2. .i-flex {
  3. display: flex;
  4. }
  5. .i-flex-wrap {
  6. flex-wrap: wrap;
  7. }
  8. .i-flex-nowrap {
  9. flex-wrap: nowrap;
  10. }
  11. .i-flex-col {
  12. display: flex;
  13. flex-direction: column;
  14. }
  15. .i-flex-item {
  16. flex: 1;
  17. }
  18. .i-flex-alc {
  19. justify-content: center;
  20. align-items: center;
  21. }
  22. .i-flex-spb {
  23. justify-content: space-between;
  24. align-items: center;
  25. }
  26. .i-aic {
  27. align-items: center!important;
  28. }
  29. .jcontent-c {
  30. justify-content: center;
  31. }
  32. .jcontent-sb {
  33. justify-content: space-between;
  34. }
  35. .jcontent-sa {
  36. justify-content: space-around;
  37. }
  38. .weight {
  39. font-weight: bold;
  40. }
  41. .text-overflow1 {
  42. overflow: hidden;
  43. text-overflow:ellipsis;
  44. white-space: nowrap;
  45. }
  46. .text-overflow2 {
  47. display: -webkit-box;
  48. -webkit-box-orient: vertical;
  49. -webkit-line-clamp: 2;
  50. overflow: hidden;
  51. }
  52. .text-center {
  53. text-align: center;
  54. }
  55. .text-right {
  56. text-align: right;
  57. }
  58. /* 字体大小 */
  59. .fsz-16 {
  60. font-size: 16rpx!important;
  61. }
  62. .fsz-22 {
  63. font-size: 22rpx;
  64. }
  65. .fsz-24 {
  66. font-size: 24rpx;
  67. }
  68. .fsz-26 {
  69. font-size: 26rpx;
  70. }
  71. .fsz-28 {
  72. font-size: 28rpx;
  73. }
  74. .fsz-30 {
  75. font-size: 30rpx;
  76. }
  77. .fsz-32 {
  78. font-size: 32rpx;
  79. }
  80. .fsz-34 {
  81. font-size: 34rpx;
  82. }
  83. .fsz-36 {
  84. font-size: 36rpx;
  85. }
  86. .fsz-38 {
  87. font-size: 38rpx;
  88. }
  89. .fsz-60 {
  90. font-size: 60rpx;
  91. }
  92. /* 字体颜色 */
  93. .text-3 {
  94. color: #333!important;
  95. }
  96. .text-6 {
  97. color: #666;
  98. }
  99. .text-gray {
  100. color: #999;
  101. }
  102. .text-white {
  103. color: #fff!important;
  104. }
  105. .text-dark {
  106. color: #000!important;
  107. }
  108. .text-sucess {
  109. color: #5cb85c!important;
  110. }
  111. .text-warning {
  112. color: #f0ad4e!important;
  113. }
  114. .red {
  115. color: #ff5344;
  116. }
  117. .bule {
  118. color: rgb(59,140,232);
  119. }
  120. /* 背景 */
  121. .bg-f {
  122. background-color: #fff;
  123. }
  124. .bg-blue {
  125. background-color: rgb(59,140,232);
  126. }
  127. .bg-primary {
  128. background-color: #ff5344;
  129. }
  130. .bg-lighter {
  131. background-color: #f8f8f8;
  132. }
  133. .bg-ccc {
  134. background: #ccc!important;
  135. }
  136. .bg-sucess {
  137. background: #5cb85c!important;
  138. }
  139. .bg-warning {
  140. background: #f0ad4e!important;
  141. }
  142. /* 边距 */
  143. .ml5 {
  144. margin-left: 10rpx;
  145. }
  146. .ml10 {
  147. margin-left: 20rpx;
  148. }
  149. .mb5 {
  150. margin-bottom: 10rpx;
  151. }
  152. .mt-auto {
  153. margin-top: auto;
  154. }
  155. .mt5 {
  156. margin-top: 10rpx;
  157. }
  158. .mx5 {
  159. margin-left: 10rpx;
  160. margin-right: 10rpx;
  161. }
  162. .m10 {
  163. margin: 20rpx;
  164. }
  165. .mt10 {
  166. margin-top: 20rpx;
  167. }
  168. .my10 {
  169. margin-top: 10rpx;
  170. margin-bottom: 10rpx;
  171. }
  172. .mx10 {
  173. margin-left: 20rpx;
  174. margin-right: 20rpx;
  175. }
  176. .mx15 {
  177. margin-left: 30rpx;
  178. margin-right: 30rpx;
  179. }
  180. .mb10 {
  181. margin-bottom: 20rpx;
  182. }
  183. .mb20 {
  184. margin-bottom: 40rpx;
  185. }
  186. .m15 {
  187. margin: 30rpx;
  188. }
  189. .p5 {
  190. padding: 10rpx;
  191. }
  192. .p10 {
  193. padding: 20rpx;
  194. }
  195. .p15 {
  196. padding: 30rpx;
  197. }
  198. .pt10 {
  199. padding-top: 20rpx;
  200. }
  201. .pb10 {
  202. padding-bottom: 20rpx!important;
  203. }
  204. .py10 {
  205. padding-top: 20rpx!important;
  206. padding-bottom: 20rpx!important;
  207. }
  208. .pb15 {
  209. padding-bottom: 30rpx;
  210. }
  211. .px15 {
  212. padding-left: 30rpx;
  213. padding-right: 30rpx;
  214. }
  215. .py15 {
  216. padding-top: 30rpx!important;
  217. padding-bottom: 30rpx!important;
  218. }
  219. .pb20 {
  220. padding-bottom: 40rpx;
  221. }
  222. .p30 {
  223. padding: 30rpx;
  224. }
  225. .ml30 {
  226. margin-left: 30rpx;
  227. }
  228. .pb100 {
  229. padding-bottom: 100rpx;
  230. }
  231. .w0 {
  232. width: 0;
  233. }
  234. .w90p {
  235. width: 90%;
  236. }
  237. .maxH {
  238. max-height: 75vh;
  239. }
  240. .rounded-mini {
  241. border-radius: 5rpx;
  242. }
  243. .rounded {
  244. border-radius: 10rpx;
  245. }
  246. .border-bottom,
  247. .border-top {
  248. position: relative;
  249. }
  250. .border-bottom::after {
  251. content: "";
  252. position: absolute;
  253. left: 0;
  254. bottom: 0;
  255. right: 0;
  256. border-bottom: 1px solid #e5e5e5;
  257. transform-origin: 0 0;
  258. transform: scaleY(0.5);
  259. }
  260. .border-top::before {
  261. content: "";
  262. position: absolute;
  263. left: 0;
  264. top: 0;
  265. right: 0;
  266. border-bottom: 1px solid #e5e5e5;
  267. transform-origin: 0 0;
  268. transform: scaleY(0.5);
  269. }
  270. .btn-hollow {
  271. border: 1rpx solid #e5e5e5;
  272. padding: 12rpx 20rpx;
  273. border-radius: 30rpx;
  274. font-size: 22rpx;
  275. color: #666;
  276. line-height: 1;
  277. }
  278. .line-through {
  279. text-decoration: line-through;
  280. }
  281. .line-height {
  282. line-height: 1.5;
  283. }
  284. /* 定位 */
  285. .pos-r {
  286. position: relative;
  287. }
  288. .pos-a {
  289. position: absolute;
  290. }
  291. .pos-f {
  292. position: fixed;
  293. }
  294. .avatar {
  295. width: 80rpx;
  296. height: 80rpx;
  297. border-radius: 50%;
  298. }
  299. .shadow {
  300. box-shadow: 1px 2px 5px #ccc;
  301. }
  302. .shadow-top {
  303. box-shadow: 0px -3px 5px -2px #ccc;
  304. }
  305. .avatar-md {
  306. width: 100rpx;
  307. height: 100rpx;
  308. border-radius: 50%;
  309. overflow: hidden;
  310. }
  311. /* 边距 字体 */
  312. .u-m-l-5{margin-left:5rpx !important}.u-m-l-10{margin-left:10rpx !important}.u-m-l-15{margin-left:15rpx !important}.u-m-l-20{margin-left:20rpx !important}.u-m-l-25{margin-left:25rpx !important}.u-m-l-30{margin-left:30rpx !important}.u-m-l-35{margin-left:35rpx !important}.u-m-l-40{margin-left:40rpx !important}.u-m-l-45{margin-left:45rpx !important}.u-m-l-50{margin-left:50rpx !important}.u-m-l-55{margin-left:55rpx !important}.u-m-l-60{margin-left:60rpx !important}.u-m-t-5{margin-top:5rpx !important}.u-m-t-10{margin-top:10rpx !important}.u-m-t-15{margin-top:15rpx !important}.u-m-t-20{margin-top:20rpx !important}.u-m-t-25{margin-top:25rpx !important}.u-m-t-30{margin-top:30rpx !important}.u-m-t-35{margin-top:35rpx !important}.u-m-t-40{margin-top:40rpx !important}.u-m-t-45{margin-top:45rpx !important}.u-m-t-50{margin-top:50rpx !important}.u-m-t-55{margin-top:55rpx !important}.u-m-t-60{margin-top:60rpx !important}.u-m-r-5{margin-right:5rpx !important}.u-m-r-10{margin-right:10rpx !important}.u-m-r-15{margin-right:15rpx !important}.u-m-r-20{margin-right:20rpx !important}.u-m-r-25{margin-right:25rpx !important}.u-m-r-30{margin-right:30rpx !important}.u-m-r-35{margin-right:35rpx !important}.u-m-r-40{margin-right:40rpx !important}.u-m-r-45{margin-right:45rpx !important}.u-m-r-50{margin-right:50rpx !important}.u-m-r-55{margin-right:55rpx !important}.u-m-r-60{margin-right:60rpx !important}.u-m-b-5{margin-bottom:5rpx !important}.u-m-b-10{margin-bottom:10rpx !important}.u-m-b-15{margin-bottom:15rpx !important}.u-m-b-20{margin-bottom:20rpx !important}.u-m-b-25{margin-bottom:25rpx !important}.u-m-b-30{margin-bottom:30rpx !important}.u-m-b-35{margin-bottom:35rpx !important}.u-m-b-40{margin-bottom:40rpx !important}.u-m-b-45{margin-bottom:45rpx !important}.u-m-b-50{margin-bottom:50rpx !important}.u-m-b-55{margin-bottom:55rpx !important}.u-m-b-60{margin-bottom:60rpx !important}.u-p-l-5{padding-left:5rpx !important}.u-p-l-10{padding-left:10rpx !important}.u-p-l-15{padding-left:15rpx !important}.u-p-l-20{padding-left:20rpx !important}.u-p-l-25{padding-left:25rpx !important}.u-p-l-30{padding-left:30rpx !important}.u-p-l-35{padding-left:35rpx !important}.u-p-l-40{padding-left:40rpx !important}.u-p-l-45{padding-left:45rpx !important}.u-p-l-50{padding-left:50rpx !important}.u-p-l-55{padding-left:55rpx !important}.u-p-l-60{padding-left:60rpx !important}.u-p-t-5{padding-top:5rpx !important}.u-p-t-10{padding-top:10rpx !important}.u-p-t-15{padding-top:15rpx !important}.u-p-t-20{padding-top:20rpx !important}.u-p-t-25{padding-top:25rpx !important}.u-p-t-30{padding-top:30rpx !important}.u-p-t-35{padding-top:35rpx !important}.u-p-t-40{padding-top:40rpx !important}.u-p-t-45{padding-top:45rpx !important}.u-p-t-50{padding-top:50rpx !important}.u-p-t-55{padding-top:55rpx !important}.u-p-t-60{padding-top:60rpx !important}.u-p-r-5{padding-right:5rpx !important}.u-p-r-10{padding-right:10rpx !important}.u-p-r-15{padding-right:15rpx !important}.u-p-r-20{padding-right:20rpx !important}.u-p-r-25{padding-right:25rpx !important}.u-p-r-30{padding-right:30rpx !important}.u-p-r-35{padding-right:35rpx !important}.u-p-r-40{padding-right:40rpx !important}.u-p-r-45{padding-right:45rpx !important}.u-p-r-50{padding-right:50rpx !important}.u-p-r-55{padding-right:55rpx !important}.u-p-r-60{padding-right:60rpx !important}.u-p-b-5{padding-bottom:5rpx !important}.u-p-b-10{padding-bottom:10rpx !important}.u-p-b-15{padding-bottom:15rpx !important}.u-p-b-20{padding-bottom:20rpx !important}.u-p-b-25{padding-bottom:25rpx !important}.u-p-b-30{padding-bottom:30rpx !important}.u-p-b-35{padding-bottom:35rpx !important}.u-p-b-40{padding-bottom:40rpx !important}.u-p-b-45{padding-bottom:45rpx !important}.u-p-b-50{padding-bottom:50rpx !important}.u-p-b-55{padding-bottom:55rpx !important}.u-p-b-60{padding-bottom:60rpx !important}.u-m-5{margin:5rpx !important}.u-m-10{margin:10rpx !important}.u-m-15{margin:15rpx !important}.u-m-20{margin:20rpx !important}.u-m-25{margin:25rpx !important}.u-m-30{margin:30rpx !important}.u-m-35{margin:35rpx !important}.u-m-40{margin:40rpx !important}.u-p-5{padding:5rpx !important}.u-p-10{padding:10rpx !important}.u-p-15{padding:15rpx !important}.u-p-20{padding:20rpx !important}.u-p-25{padding:25rpx !important}.u-p-30{padding:30rpx !important}.u-p-35{padding:35rpx !important}.u-p-40{padding:40rpx !important}.u-font-12{font-size:12rpx !important}.u-font-14{font-size:14rpx !important}.u-font-16{font-size:16rpx !important}.u-font-18{font-size:18rpx !important}.u-font-20{font-size:20rpx !important}.u-font-22{font-size:22rpx !important}.u-font-24{font-size:24rpx !important}.u-font-26{font-size:26rpx !important}.u-font-28{font-size:28rpx !important}.u-font-30{font-size:30rpx !important}.u-font-32{font-size:32rpx !important}.u-font-34{font-size:34rpx !important}.u-font-36{font-size:36rpx !important}.u-font-38{font-size:38rpx !important}.u-font-40{font-size:40rpx !important}
  313. /* 边框 */
  314. .u-border-bottom,
  315. .u-border-left,
  316. .u-border-right,
  317. .u-border-top,
  318. .u-border-top-bottom{position:relative}.u-border-bottom:after,
  319. .u-border-left:after,
  320. .u-border-right:after,
  321. .u-border-top-bottom:after,
  322. .u-border-top:after,
  323. .u-border:after{content:" ";position:absolute;left:0;top:0;pointer-events:none;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;width:199.8%;height:199.7%;-webkit-transform:scale(.5);transform:scale(.5);border:0 solid #e4e7ed;z-index:2}.u-border-top:after{border-top-width:1px}.u-border-left:after{border-left-width:1px}.u-border-right:after{border-right-width:1px}.u-border-bottom:after{border-bottom-width:1px}.u-border-top-bottom:after{border-width:1px 0}.u-border:after{border-width:1px}