base.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. .clearfix:after,
  2. .clearfix:before {
  3. display: table;
  4. content: " "
  5. }
  6. .clearfix:after {
  7. clear: both
  8. }
  9. .single-line-ellipsis {
  10. white-space: nowrap;
  11. word-break: break-word;
  12. /* 单行显示 */
  13. overflow: hidden;
  14. /* 超出隐藏 */
  15. text-overflow: ellipsis;
  16. /* 显示省略号 */
  17. }
  18. .tworow {
  19. overflow: hidden;
  20. text-overflow: ellipsis;
  21. display: -webkit-box;
  22. -webkit-line-clamp: 2;
  23. -webkit-box-orient: vertical;
  24. word-break: break-all;
  25. }
  26. /* flex弹性布局*/
  27. .flex {
  28. display: flex;
  29. }
  30. .align-center {
  31. align-items: center;
  32. }
  33. .align-start {
  34. align-items: flex-start;
  35. }
  36. .align-end {
  37. align-items: flex-end;
  38. }
  39. .justify-between {
  40. justify-content: space-between;
  41. }
  42. .justify-center {
  43. justify-content: center !important;
  44. }
  45. .justify-around {
  46. justify-content: space-around;
  47. }
  48. .justify-end {
  49. justify-content: flex-end !important;
  50. }
  51. .justify-start {
  52. justify-content: flex-start !important;
  53. }
  54. .flex-wrap {
  55. flex-wrap: wrap;
  56. }
  57. .flex-column {
  58. flex-direction: column;
  59. }
  60. .flex-column-reverse {
  61. flex-direction: column-reverse;
  62. }
  63. .flex-row {
  64. flex-direction: row;
  65. }
  66. .flex-row-reverse {
  67. flex-direction: row-reverse;
  68. }
  69. .flex-1 {
  70. flex: 1;
  71. }
  72. .flex-2 {
  73. flex: 2;
  74. }
  75. .flex-3 {
  76. flex: 3;
  77. }
  78. .flex-shrink {
  79. flex-shrink: 0;
  80. }
  81. .self-center {
  82. align-self: center;
  83. }
  84. .self-start {
  85. align-self: flex-start;
  86. }
  87. .self-end {
  88. align-self: flex-end;
  89. }
  90. .border-box {
  91. box-sizing: border-box;
  92. }
  93. /* padding */
  94. .pl-0 {
  95. padding-left: 0rpx !important;
  96. }
  97. .pl-0_5 {
  98. padding-left: 5rpx !important;
  99. }
  100. .pl-1 {
  101. padding-left: 10rpx !important;
  102. }
  103. .pl-2 {
  104. padding-left: 20rpx !important;
  105. }
  106. .pl-3 {
  107. padding-left: 30rpx !important;
  108. }
  109. .pr-0 {
  110. padding-right: 0rpx !important;
  111. }
  112. .pr-0_5 {
  113. padding-right: 5rpx !important;
  114. }
  115. .pr-1 {
  116. padding-right: 10rpx !important;
  117. }
  118. .pr-2 {
  119. padding-right: 20rpx !important;
  120. }
  121. .pr-3 {
  122. padding-right: 30rpx !important;
  123. }
  124. .pt-0 {
  125. padding-top: 0rpx !important;
  126. }
  127. .pt-0_5 {
  128. padding-top: 5rpx !important;
  129. }
  130. .pt-1 {
  131. padding-top: 10rpx !important;
  132. }
  133. .pt-2 {
  134. padding-top: 20rpx !important;
  135. }
  136. .pt-3 {
  137. padding-top: 30rpx !important;
  138. }
  139. .pb-0 {
  140. padding-bottom: 0rpx !important;
  141. }
  142. .pb-0_5 {
  143. padding-bottom: 5rpx !important;
  144. }
  145. .pb-1 {
  146. padding-bottom: 10rpx !important;
  147. }
  148. .pb-2 {
  149. padding-bottom: 20rpx !important;
  150. }
  151. .pb-3 {
  152. padding-bottom: 30rpx !important;
  153. }
  154. .px-0 {
  155. padding: 0 !important;
  156. }
  157. .px-0_5 {
  158. padding: 0 5rpx !important;
  159. }
  160. .px-1 {
  161. padding: 0 10rpx !important;
  162. }
  163. .px-2 {
  164. padding: 0 20rpx !important;
  165. }
  166. .px-3 {
  167. padding: 0 30rpx;
  168. }
  169. .py-0_5 {
  170. padding: 5rpx 0;
  171. }
  172. .py-1 {
  173. padding: 10rpx 0;
  174. }
  175. .py-2 {
  176. padding: 20rpx 0;
  177. }
  178. .py-3 {
  179. padding: 30rpx 0;
  180. }
  181. .p-0_5 {
  182. padding: 5rpx;
  183. }
  184. .p-1 {
  185. padding: 10rpx;
  186. }
  187. .p-2 {
  188. padding: 20rpx !important;
  189. }
  190. .p-3 {
  191. padding: 30rpx;
  192. }
  193. /* margin */
  194. .ml-0 {
  195. margin-left: 0rpx !important;
  196. }
  197. .ml-0_5 {
  198. margin-left: 5rpx !important;
  199. }
  200. .ml-1 {
  201. margin-left: 10rpx !important;
  202. }
  203. .ml-2 {
  204. margin-left: 20rpx !important;
  205. }
  206. .ml-3 {
  207. margin-left: 30rpx !important;
  208. }
  209. .mr-0 {
  210. margin-right: 0rpx !important;
  211. }
  212. .mr-0_5 {
  213. margin-right: 5rpx !important;
  214. }
  215. .mr-1 {
  216. margin-right: 10rpx !important;
  217. }
  218. .mr-2 {
  219. margin-right: 20rpx !important;
  220. }
  221. .mr-3 {
  222. margin-right: 30rpx !important;
  223. }
  224. .mt-0 {
  225. margin-top: 0rpx !important;
  226. }
  227. .mt-0_5 {
  228. margin-top: 5rpx !important;
  229. }
  230. .mt-1 {
  231. margin-top: 10rpx !important;
  232. }
  233. .mt-2 {
  234. margin-top: 20rpx !important;
  235. }
  236. .mt-3 {
  237. margin-top: 30rpx !important;
  238. }
  239. .mb-0 {
  240. margin-bottom: 0rpx !important;
  241. }
  242. .mb-0_5 {
  243. margin-bottom: 5rpx !important;
  244. }
  245. .mb-1 {
  246. margin-bottom: 10rpx !important;
  247. }
  248. .mb-2 {
  249. margin-bottom: 20rpx !important;
  250. }
  251. .mb-3 {
  252. margin-bottom: 30rpx !important;
  253. }
  254. .mx-0_5 {
  255. margin: 0 5rpx;
  256. }
  257. .mx-1 {
  258. margin: 0 10rpx;
  259. }
  260. .mx-2 {
  261. margin: 0 20rpx;
  262. }
  263. .mx-3 {
  264. margin: 0 30rpx;
  265. }
  266. .my-0_5 {
  267. margin: 5rpx 0;
  268. }
  269. .my-1 {
  270. margin: 10rpx 0;
  271. }
  272. .my-2 {
  273. margin: 20rpx 0;
  274. }
  275. .my-3 {
  276. margin: 30rpx 0;
  277. }
  278. .m-0_5 {
  279. margin: 5rpx;
  280. }
  281. .m-1 {
  282. margin: 10rpx;
  283. }
  284. .m-2 {
  285. margin: 20rpx;
  286. }
  287. .m-3 {
  288. margin: 30rpx;
  289. }