common.css 12 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163
  1. .total-page {
  2. box-sizing: border-box;
  3. min-height: 100%;
  4. z-index: 1;
  5. }
  6. .hidden_scrollbar::-webkit-scrollbar {
  7. display: none;
  8. }
  9. .task-bg {
  10. display: flex;
  11. flex-direction: column;
  12. min-height: 100%;
  13. background-image: url('https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-nav-bg.png');
  14. background-repeat: no-repeat;
  15. background-size: 100% auto;
  16. }
  17. .page-env-20 {
  18. padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  19. }
  20. .page-env-160 {
  21. padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
  22. }
  23. .page-bg1 {
  24. background-image: url("https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/index/index-bg.png?imageMogr2/quality/20");
  25. background-repeat: no-repeat;
  26. background-size: 100% 700rpx;
  27. }
  28. .page-bg2 {
  29. /* background-image: url("https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/index/index-bg.png?imageMogr2/quality/20");
  30. background-repeat: no-repeat;
  31. background-size: 100% auto; */
  32. }
  33. .page-bg3 {
  34. background-image: url("https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/index/index-bg.png?imageMogr2/quality/20");
  35. background-repeat: no-repeat;
  36. background-size: 100% auto;
  37. }
  38. .iPhone-padding {
  39. box-sizing: border-box;
  40. padding-bottom: env(safe-area-inset-bottom);
  41. }
  42. /* 页面style*/
  43. .task-tabs {
  44. position: fixed;
  45. width: 100%;
  46. top: 84px;
  47. z-index: 4;
  48. }
  49. .scroll_content {
  50. height: 100vh;
  51. width: 100vw;
  52. overflow: hidden;
  53. display: flex;
  54. flex-direction: column;
  55. }
  56. .flex-common-css {
  57. width: 100%;
  58. height: 100vh;
  59. display: flex;
  60. flex-direction: column;
  61. }
  62. .flex-common-css-tab {
  63. width: 100%;
  64. height: calc(100vh - 49px);
  65. display: flex;
  66. flex-direction: column;
  67. }
  68. .flex-index-css {
  69. width: 100%;
  70. height: 100%;
  71. display: flex;
  72. flex-direction: column;
  73. }
  74. .flex-direction {
  75. display: flex;
  76. flex-direction: column;
  77. }
  78. .common-view-css {
  79. width: 100%;
  80. flex: 1;
  81. }
  82. .scroll-view-css {
  83. width: 100%;
  84. flex: 1;
  85. overflow: auto;
  86. }
  87. .is-hover {
  88. opacity: 0.6;
  89. }
  90. .bg-ragb-0 {
  91. background-color: rgba(0, 0, 0, 0.2);
  92. }
  93. .bg-ragb-255 {
  94. background-color: rgba(255, 255, 255, 0.2);
  95. }
  96. .box-border-box {
  97. box-sizing: border-box;
  98. }
  99. .text-overflow-ellipsis-one {
  100. white-space: nowrap;
  101. text-overflow: ellipsis;
  102. overflow: hidden;
  103. word-break: break-all;
  104. }
  105. .flex-1 {
  106. flex: 1;
  107. }
  108. .flex-shrink0 {
  109. flex-shrink: 0;
  110. }
  111. /*flex布局*/
  112. .flex {
  113. flex: 1;
  114. }
  115. .flex-wrap {
  116. flex-wrap: wrap;
  117. }
  118. .center {
  119. display: flex;
  120. align-items: center;
  121. }
  122. .justify-center {
  123. justify-content: center;
  124. }
  125. .justify-left {
  126. justify-content: left;
  127. }
  128. .flex-direction {
  129. display: flex;
  130. flex-direction: column;
  131. }
  132. .row {
  133. display: flex;
  134. flex-direction: row;
  135. }
  136. .row-c {
  137. display: flex;
  138. flex-direction: row;
  139. align-items: center;
  140. }
  141. .column {
  142. display: flex;
  143. flex-direction: column;
  144. }
  145. .column-c {
  146. display: flex;
  147. flex-direction: column;
  148. align-items: center;
  149. }
  150. .column-sb-c {
  151. display: flex;
  152. flex-direction: column;
  153. align-items: center;
  154. justify-content: space-between;
  155. }
  156. .align-items-flex-start {
  157. display: flex;
  158. align-items: flex-start;
  159. }
  160. .row-justify-c {
  161. display: flex;
  162. flex-direction: row;
  163. justify-content: center;
  164. }
  165. .row-justify-sb {
  166. display: flex;
  167. flex-direction: row;
  168. justify-content: space-between;
  169. }
  170. .row-justify-l {
  171. display: flex;
  172. flex-direction: row;
  173. justify-content: left;
  174. }
  175. .column-justify-c {
  176. display: flex;
  177. flex-direction: column;
  178. justify-content: center;
  179. }
  180. .column-justify-sb {
  181. display: flex;
  182. flex-direction: column;
  183. justify-content: space-between;
  184. }
  185. /*padding大小*/
  186. .p-16 {
  187. padding: 16rpx;
  188. }
  189. .p-20 {
  190. padding: 20rpx;
  191. }
  192. .p-24 {
  193. padding: 24rpx;
  194. }
  195. .p-30 {
  196. padding: 30rpx;
  197. }
  198. .p-40 {
  199. padding: 40rpx;
  200. }
  201. .p-t6 {
  202. padding-top: 6rpx;
  203. }
  204. .p-t10 {
  205. padding-top: 10rpx;
  206. }
  207. .p-t16 {
  208. padding-top: 16rpx;
  209. }
  210. .p-t20 {
  211. padding-top: 20rpx;
  212. }
  213. .p-t30 {
  214. padding-top: 30rpx;
  215. }
  216. .p-t40 {
  217. padding-top: 40rpx;
  218. }
  219. .p-t60 {
  220. padding-top: 60rpx;
  221. }
  222. .p-r10 {
  223. padding-right: 10rpx;
  224. }
  225. .p-r16 {
  226. padding-right: 16rpx;
  227. }
  228. .p-r20 {
  229. padding-right: 20rpx;
  230. }
  231. .p-r30 {
  232. padding-right: 30rpx;
  233. }
  234. .p-r40 {
  235. padding-right: 40rpx;
  236. }
  237. .p-r60 {
  238. padding-right: 60rpx;
  239. }
  240. .p-l10 {
  241. padding-left: 10rpx;
  242. }
  243. .p-l16 {
  244. padding-left: 16rpx;
  245. }
  246. .p-l20 {
  247. padding-left: 20rpx;
  248. }
  249. .p-l40 {
  250. padding-left: 30rpx;
  251. }
  252. .p-l40 {
  253. padding-left: 40rpx;
  254. }
  255. .p-b10 {
  256. padding-bottom: 10rpx;
  257. }
  258. .p-b16 {
  259. padding-bottom: 16rpx;
  260. }
  261. .p-b20 {
  262. padding-bottom: 20rpx;
  263. }
  264. .p-b30 {
  265. padding-bottom: 30rpx;
  266. }
  267. .p-b40 {
  268. padding-bottom: 40rpx;
  269. }
  270. .p-tb6 {
  271. padding-top: 6rpx;
  272. padding-bottom: 6rpx;
  273. }
  274. .p-tb10 {
  275. padding-top: 10rpx;
  276. padding-bottom: 10rpx;
  277. }
  278. .p-tb14 {
  279. padding-top: 14rpx;
  280. padding-bottom: 14rpx;
  281. }
  282. .p-tb16 {
  283. padding-top: 16rpx;
  284. padding-bottom: 16rpx;
  285. }
  286. .p-tb20 {
  287. padding-top: 20rpx;
  288. padding-bottom: 20rpx;
  289. }
  290. .p-tb25 {
  291. padding-top: 25rpx;
  292. padding-bottom: 25rpx;
  293. }
  294. .p-tb30 {
  295. padding-top: 30rpx;
  296. padding-bottom: 30rpx;
  297. }
  298. .p-tb40 {
  299. padding-top: 40rpx;
  300. padding-bottom: 40rpx;
  301. }
  302. .p-lr10 {
  303. padding-left: 10rpx;
  304. padding-right: 10rpx;
  305. }
  306. .p-lr16 {
  307. padding-left: 16rpx;
  308. padding-right: 16rpx;
  309. }
  310. .p-lr20 {
  311. padding-left: 20rpx;
  312. padding-right: 20rpx;
  313. }
  314. .p-lr24 {
  315. padding-left: 24rpx;
  316. padding-right: 24rpx;
  317. }
  318. .p-lr30 {
  319. padding-left: 30rpx;
  320. padding-right: 30rpx;
  321. }
  322. .p-lr40 {
  323. padding-left: 40rpx;
  324. padding-right: 40rpx;
  325. }
  326. .m-t6{
  327. max-width: 50%; /* 最大宽度 */
  328. overflow: hidden; /* 超出隐藏 */
  329. text-overflow: ellipsis; /* 显示省略号 */
  330. white-space: nowrap; /* 不换行 */
  331. }
  332. /*margin大小*/
  333. .m-16 {
  334. margin: 16rpx;
  335. }
  336. .m-20 {
  337. margin: 20rpx;
  338. }
  339. .m-30 {
  340. margin: 30rpx;
  341. }
  342. .m-40 {
  343. margin: 40rpx;
  344. }
  345. .m-t10 {
  346. margin-top: 10rpx;
  347. }
  348. .m-t16 {
  349. margin-top: 16rpx;
  350. }
  351. .m-t20 {
  352. margin-top: 20rpx;
  353. }
  354. .m-t30 {
  355. margin-top: 30rpx;
  356. }
  357. .m-t40 {
  358. margin-top: 40rpx;
  359. }
  360. .m-t50 {
  361. margin-top: 50rpx;
  362. }
  363. .m-t60 {
  364. margin-top: 60rpx;
  365. }
  366. .m-b10 {
  367. margin-bottom: 10rpx;
  368. }
  369. .m-b16 {
  370. margin-bottom: 16rpx;
  371. }
  372. .m-b20 {
  373. margin-bottom: 20rpx;
  374. }
  375. .m-b25 {
  376. margin-bottom: 25rpx;
  377. }
  378. .m-b30 {
  379. margin-bottom: 30rpx;
  380. }
  381. .m-b40 {
  382. margin-bottom: 40rpx;
  383. }
  384. .m-b50 {
  385. margin-bottom: 50rpx;
  386. }
  387. .m-r6 {
  388. margin-right: 6rpx;
  389. }
  390. .m-r10 {
  391. margin-right: 10rpx;
  392. }
  393. .m-r16 {
  394. margin-right: 16rpx;
  395. }
  396. .m-r20 {
  397. margin-right: 20rpx;
  398. }
  399. .m-r30 {
  400. margin-right: 30rpx;
  401. }
  402. .m-r40 {
  403. margin-right: 40rpx;
  404. }
  405. .m-l10 {
  406. margin-left: 10rpx;
  407. }
  408. .m-l16 {
  409. margin-left: 16rpx;
  410. }
  411. .m-l20 {
  412. margin-left: 20rpx;
  413. }
  414. .m-l30 {
  415. margin-left: 30rpx;
  416. }
  417. .m-l40 {
  418. margin-left: 40rpx;
  419. }
  420. .m-tb10 {
  421. margin-top: 10rpx;
  422. margin-bottom: 10rpx;
  423. }
  424. .m-tb16 {
  425. margin-top: 16rpx;
  426. margin-bottom: 16rpx;
  427. }
  428. .m-tb20 {
  429. margin-top: 20rpx;
  430. margin-bottom: 20rpx;
  431. }
  432. .m-tb30 {
  433. margin-top: 30rpx;
  434. margin-bottom: 30rpx;
  435. }
  436. .m-tb40 {
  437. margin-top: 40rpx;
  438. margin-bottom: 40rpx;
  439. }
  440. .m-lr10 {
  441. margin-left: 10rpx;
  442. margin-right: 10rpx;
  443. }
  444. .m-lr16 {
  445. margin-left: 16rpx;
  446. margin-right: 16rpx;
  447. }
  448. .m-lr20 {
  449. margin-left: 20rpx;
  450. margin-right: 20rpx;
  451. }
  452. .m-lr30 {
  453. margin-left: 30rpx;
  454. margin-right: 30rpx;
  455. }
  456. .m-lr40 {
  457. margin-left: 40rpx;
  458. margin-right: 40rpx;
  459. }
  460. .m-lr50 {
  461. margin-left: 50rpx;
  462. margin-right: 50rpx;
  463. }
  464. .m-lr60 {
  465. margin-left: 60rpx;
  466. margin-right: 60rpx;
  467. }
  468. /*字体大小*/
  469. .size-16 {
  470. font-size: 16rpx;
  471. }
  472. .size-20 {
  473. font-size: 20rpx;
  474. }
  475. .size-22 {
  476. font-size: 22rpx;
  477. }
  478. .size-24 {
  479. font-size: 24rpx;
  480. }
  481. .size-26 {
  482. font-size: 26rpx;
  483. }
  484. .size-28 {
  485. font-size: 28rpx;
  486. }
  487. .size-30 {
  488. font-size: 30rpx;
  489. }
  490. .size-32 {
  491. font-size: 32rpx;
  492. }
  493. .size-34 {
  494. font-size: 34rpx;
  495. }
  496. .size-36 {
  497. font-size: 36rpx;
  498. }
  499. .size-38 {
  500. font-size: 38rpx;
  501. }
  502. .size-40 {
  503. font-size: 40rpx;
  504. }
  505. .size-44 {
  506. font-size: 44rpx;
  507. }
  508. .size-48 {
  509. font-size: 48rpx;
  510. }
  511. .size-64 {
  512. font-size: 64rpx;
  513. }
  514. /*边框*/
  515. .bor-f1 {
  516. border: 1rpx solid #ffffff;
  517. }
  518. .bor-f2 {
  519. border: 2rpx solid #ffffff;
  520. }
  521. .bor-solid-2 {
  522. border: 2rpx solid #E5E5E5;
  523. }
  524. .bor-dashed-1 {
  525. border: 1rpx dashed #E5E5E5;
  526. }
  527. .bor-dashed-2 {
  528. border: 2rpx dashed #E5E5E5;
  529. }
  530. .b-F3F4F6-1 {
  531. border: .1rpx solid #F3F4F6;
  532. }
  533. .b-B9F8CF-1 {
  534. border: .1rpx solid #B9F8CF;
  535. }
  536. .bor-bottom-1 {
  537. border-bottom: 1rpx solid #E5E5E5;
  538. }
  539. .bor-255 {
  540. border: 2rpx solid rgba(255, 255, 255, 0.7);
  541. }
  542. .view_line {
  543. height: 1rpx;
  544. background: #CCCCCC;
  545. }
  546. .bgc-fff {
  547. background-color: #fff;
  548. }
  549. .bgc-6A7383 {
  550. background-color: #6A7383;
  551. }
  552. .bgc-F9FAFB {
  553. background-color: #F9FAFB;
  554. }
  555. .bgc-F0FDF4 {
  556. background-color: #F0FDF4;
  557. }
  558. .bgc-DBFCE7 {
  559. background-color: #DBFCE7;
  560. }
  561. .fc-6A7383 {
  562. color: #6A7383;
  563. }
  564. .fc-00A63D {
  565. color: #00A63D;
  566. }
  567. .fc-155DFB {
  568. color: #155DFB;
  569. }
  570. .fc-99A1AF {
  571. color: #99A1AF;
  572. }
  573. .fc-4B5666 {
  574. color: #4B5666;
  575. }
  576. .fc-343C47 {
  577. color: #343C47;
  578. }
  579. /*圆角*/
  580. .r-8 {
  581. border-radius: 8rpx;
  582. }
  583. .r-10 {
  584. border-radius: 10rpx;
  585. }
  586. .r-12 {
  587. border-radius: 12rpx;
  588. }
  589. .r-14 {
  590. border-radius: 14rpx;
  591. }
  592. .r-16 {
  593. border-radius: 16rpx;
  594. }
  595. .r-20 {
  596. border-radius: 20rpx;
  597. }
  598. .r-30 {
  599. border-radius: 30rpx;
  600. }
  601. .r-40 {
  602. border-radius: 40rpx;
  603. }
  604. .r-100 {
  605. border-radius: 100rpx;
  606. }
  607. .r-circle {
  608. border-radius: 50%;
  609. }
  610. /*宽高*/
  611. .wh-14 {
  612. width: 14rpx;
  613. height: 14rpx;
  614. display: block;
  615. }
  616. .wh-20 {
  617. width: 20rpx;
  618. height: 20rpx;
  619. display: block;
  620. }
  621. .wh-25 {
  622. width: 25rpx;
  623. height: 25rpx;
  624. display: block;
  625. }
  626. .wh-30 {
  627. width: 30rpx;
  628. height: 30rpx;
  629. display: block;
  630. }
  631. .wh-36 {
  632. width: 36rpx;
  633. height: 36rpx;
  634. display: block;
  635. }
  636. .wh-45 {
  637. width: 45rpx;
  638. height: 45rpx;
  639. display: block;
  640. }
  641. .wh-60 {
  642. width: 60rpx;
  643. height: 60rpx;
  644. display: block;
  645. }
  646. .wh-80 {
  647. width: 80rpx;
  648. height: 80rpx;
  649. display: block;
  650. }
  651. .wh-90 {
  652. width: 90rpx;
  653. height: 90rpx;
  654. display: block;
  655. }
  656. .wh-100 {
  657. width: 100rpx;
  658. height: 100rpx;
  659. display: block;
  660. }
  661. .wh-110 {
  662. width: 110rpx;
  663. height: 110rpx;
  664. display: block;
  665. }
  666. /*宽高*/
  667. .line-30 {
  668. line-height: 30rpx;
  669. }
  670. .line-34 {
  671. line-height: 34rpx;
  672. }
  673. .line-40 {
  674. line-height: 40rpx;
  675. }
  676. .line-40 {
  677. line-height: 40rpx;
  678. }
  679. .line-60 {
  680. height: 60rpx;
  681. line-height: 60rpx;
  682. }
  683. .line-80 {
  684. height: 80rpx;
  685. line-height: 80rpx;
  686. }
  687. .line-100 {
  688. line-height: 100rpx;
  689. }
  690. /*阴影*/
  691. .box-shadow-197 {
  692. box-shadow: 0 0 10px rgba(197, 197, 197, 0.25);
  693. }
  694. /*字体大小*/
  695. .sys-size-16 {
  696. font-size: 16rpx;
  697. }
  698. .sys-size-20 {
  699. font-size: 20rpx;
  700. }
  701. .sys-size-22 {
  702. font-size: 22rpx;
  703. }
  704. .sys-size-24 {
  705. font-size: 24rpx;
  706. }
  707. .sys-size-26 {
  708. font-size: 26rpx;
  709. }
  710. .sys-size-28 {
  711. font-size: 28rpx;
  712. }
  713. .sys-size-30 {
  714. font-size: 30rpx;
  715. }
  716. .sys-size-32 {
  717. font-size: 32rpx;
  718. }
  719. .sys-size-34 {
  720. font-size: 34rpx;
  721. }
  722. .sys-size-36 {
  723. font-size: 36rpx;
  724. }
  725. .sys-size-40 {
  726. font-size: 40rpx;
  727. }
  728. .sys-size-44 {
  729. font-size: 44rpx;
  730. }
  731. .sys-size-48 {
  732. font-size: 48rpx;
  733. }
  734. .sys-size-64 {
  735. font-size: 64rpx;
  736. }
  737. /*字体粗细*/
  738. .sys-weight-600 {
  739. font-weight: 600;
  740. }
  741. .sys-weight-400 {
  742. font-weight: 400;
  743. }
  744. .sys-weight-500 {
  745. font-weight: 500;
  746. }
  747. /* box 圆角 */
  748. .sys-radius-4 {
  749. border-radius: 4rpx;
  750. }
  751. .sys-radius-8 {
  752. border-radius: 8rpx;
  753. }
  754. .sys-radius-12 {
  755. border-radius: 12rpx;
  756. }
  757. .sys-radius-16 {
  758. border-radius: 16rpx;
  759. }
  760. .sys-radius-10 {
  761. border-radius: 10rpx;
  762. }
  763. .sys-radius-20 {
  764. border-radius: 20rpx;
  765. }
  766. .sys-radius-30 {
  767. border-radius: 30rpx;
  768. }
  769. .sys-radius-50 {
  770. border-radius: 50rpx;
  771. }
  772. .sys-radius-100 {
  773. border-radius: 100rpx;
  774. }
  775. .sys-radius-200 {
  776. border-radius: 200rpx;
  777. }
  778. /*按钮样式*/
  779. .sys-selected-but {
  780. text-align: center;
  781. transition: .5s ease;
  782. opacity: 1;
  783. }
  784. .sys-unselected-but {
  785. opacity: 0.5;
  786. transition: .5s ease;
  787. }
  788. .ellipsis {
  789. overflow: hidden;
  790. white-space: nowrap;
  791. text-overflow: ellipsis;
  792. }
  793. /*文字排版*/
  794. .sys-webkit-box {
  795. display: -webkit-box;
  796. -webkit-line-clamp: 1;
  797. -webkit-box-orient: vertical;
  798. overflow: hidden;
  799. }
  800. .sys-webkit-box-2 {
  801. -webkit-line-clamp: 2 !important;
  802. }
  803. .sys-webkit-box-3 {
  804. -webkit-line-clamp: 3 !important;
  805. }
  806. .text-center {
  807. text-align: center;
  808. }
  809. .sys-tab-height {
  810. height: 134rpx;
  811. }
  812. .mb-2 {
  813. margin-bottom: 2rpx;
  814. }
  815. .mb-4 {
  816. margin-bottom: 4rpx;
  817. }
  818. .mb-6 {
  819. margin-bottom: 6rpx;
  820. }
  821. .mb-8 {
  822. margin-bottom: 8rpx;
  823. }
  824. .mb-10 {
  825. margin-bottom: 10rpx;
  826. }
  827. .mb-12 {
  828. margin-bottom: 12rpx;
  829. }
  830. .mb-14 {
  831. margin-bottom: 14rpx;
  832. }
  833. .mb-16 {
  834. margin-bottom: 16rpx;
  835. }
  836. .mb-18 {
  837. margin-bottom: 18rpx;
  838. }
  839. .mb-20 {
  840. margin-bottom: 20rpx;
  841. }
  842. .mb-22 {
  843. margin-bottom: 22rpx;
  844. }
  845. .mb-24 {
  846. margin-bottom: 24rpx;
  847. }
  848. .mb-26 {
  849. margin-bottom: 26rpx;
  850. }
  851. .mb-28 {
  852. margin-bottom: 28rpx;
  853. }
  854. .mb-32 {
  855. margin-bottom: 32rpx;
  856. }
  857. .mb-40 {
  858. margin-bottom: 40rpx;
  859. }
  860. .mb-48 {
  861. margin-bottom: 48rpx;
  862. }
  863. .mb-50 {
  864. margin-bottom: 50rpx;
  865. }
  866. .mb-52 {
  867. margin-bottom: 52rpx;
  868. }
  869. .mb-60 {
  870. margin-bottom: 60rpx;
  871. }
  872. .mb-64 {
  873. margin-bottom: 64rpx;
  874. }
  875. .mb-80 {
  876. margin-bottom: 80rpx;
  877. }
  878. .mb-108 {
  879. margin-bottom: 108rpx;
  880. }
  881. .mr-8 {
  882. margin-right: 8rpx;
  883. }
  884. .mr-10 {
  885. margin-right: 10rpx;
  886. }
  887. .mr-12 {
  888. margin-right: 12rpx;
  889. }
  890. .mr-16 {
  891. margin-right: 16rpx;
  892. }
  893. .mr-18 {
  894. margin-right: 18rpx;
  895. }
  896. .mr-20 {
  897. margin-right: 20rpx;
  898. }
  899. .mr-24 {
  900. margin-right: 24rpx;
  901. }
  902. .mr-30 {
  903. margin-right: 30rpx;
  904. }
  905. .mr-32 {
  906. margin-right: 32rpx;
  907. }
  908. .mr-40 {
  909. margin-right: 40rpx;
  910. }