common.css 10 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030
  1. body {
  2. background-color: #F5F5F5;
  3. }
  4. view,
  5. text {
  6. font-size: 24rpx;
  7. color: #333;
  8. }
  9. /* 隐藏scroll-view 滚动条 */
  10. ::-webkit-scrollbar {
  11. display: none;
  12. }
  13. .iPhone-bottom {
  14. padding-bottom: constant(safe-area-inset-bottom);
  15. padding-bottom: env(safe-area-inset-bottom);
  16. }
  17. /* 不换行 */
  18. .view-nowrap {
  19. white-space: nowrap;
  20. }
  21. .z-index-max {
  22. position: relative;
  23. z-index: 99999;
  24. }
  25. /* 自动换行 */
  26. .view-word-wrap {
  27. white-space: pre-wrap;
  28. word-wrap: break-word;
  29. }
  30. /*超出三行... */
  31. .text-overflow-ellipsis-t {
  32. text-overflow: -o-ellipsis-lastline;
  33. overflow: hidden;
  34. text-overflow: ellipsis;
  35. display: -webkit-box;
  36. -webkit-line-clamp: 3;
  37. line-clamp: 3;
  38. -webkit-box-orient: vertical;
  39. white-space: pre-wrap;
  40. word-wrap: break-word;
  41. }
  42. /*超出两行... */
  43. .text-overflow-ellipsis {
  44. text-overflow: -o-ellipsis-lastline;
  45. overflow: hidden;
  46. text-overflow: ellipsis;
  47. display: -webkit-box;
  48. -webkit-line-clamp: 2;
  49. line-clamp: 2;
  50. -webkit-box-orient: vertical;
  51. white-space: pre-wrap;
  52. word-wrap: break-word;
  53. }
  54. /*超出一行... */
  55. .text-overflow-ellipsis-one {
  56. white-space: nowrap;
  57. text-overflow: ellipsis;
  58. overflow: hidden;
  59. word-break: break-all;
  60. }
  61. /* 内部盒子 */
  62. .box-border-box {
  63. box-sizing: border-box;
  64. }
  65. .flex-common-css {
  66. width: 100%;
  67. height: 100vh;
  68. display: flex;
  69. flex-direction: column;
  70. }
  71. .flex-index-css {
  72. width: 100%;
  73. height: 100%;
  74. display: flex;
  75. flex-direction: column;
  76. }
  77. .flex-direction {
  78. display: flex;
  79. flex-direction: column;
  80. }
  81. .display-flex {
  82. display: flex;
  83. }
  84. .flex-justify-space {
  85. display: flex;
  86. justify-content: space-between;
  87. }
  88. .flex-justify-around {
  89. display: flex;
  90. justify-content: space-around;
  91. }
  92. .flex-justify-center {
  93. display: flex;
  94. justify-content: center;
  95. }
  96. .flex-justify-end {
  97. display: flex;
  98. justify-content: flex-end;
  99. }
  100. .flex-justify-start {
  101. display: flex;
  102. justify-content: flex-start;
  103. }
  104. .align-items-center {
  105. display: flex;
  106. align-items: center;
  107. }
  108. .align-items-baseline {
  109. display: flex;
  110. align-items: baseline;
  111. }
  112. .align-items-flex-end {
  113. display: flex;
  114. align-items: flex-end;
  115. }
  116. .align-items-flex-start {
  117. display: flex;
  118. align-items: flex-start;
  119. }
  120. .align-self-flex-end {
  121. display: flex;
  122. align-self: flex-end;
  123. }
  124. .flex-wrap-wrap {
  125. display: flex;
  126. flex-wrap: wrap;
  127. }
  128. .common-view-css {
  129. width: 100%;
  130. flex: 1;
  131. }
  132. .scroll-view-css {
  133. width: 100%;
  134. flex: 1;
  135. overflow: auto;
  136. }
  137. .box-sizing-border {
  138. box-sizing: border-box;
  139. }
  140. .text-align-center {
  141. text-align: center;
  142. }
  143. .text-align-right {
  144. text-align: right;
  145. }
  146. .text-align-left {
  147. text-align: left;
  148. }
  149. .letter-spacing-6 {
  150. letter-spacing: 6rpx;
  151. }
  152. .letter-spacing-3 {
  153. letter-spacing: 3rpx;
  154. }
  155. .flex-1 {
  156. flex: 1;
  157. }
  158. .flex-shrink0 {
  159. flex-shrink: 0;
  160. }
  161. /* 字体大小 */
  162. .fs-18 {
  163. font-size: 18rpx;
  164. }
  165. .fs-20 {
  166. font-size: 20rpx;
  167. }
  168. .fs-22 {
  169. font-size: 22rpx;
  170. }
  171. .fs-24 {
  172. font-size: 24rpx;
  173. }
  174. .fs-26 {
  175. font-size: 26rpx;
  176. }
  177. .fs-28 {
  178. font-size: 28rpx;
  179. }
  180. .fs-30 {
  181. font-size: 30rpx;
  182. }
  183. .fs-32 {
  184. font-size: 32rpx;
  185. }
  186. .fs-34 {
  187. font-size: 34rpx;
  188. }
  189. .fs-36 {
  190. font-size: 36rpx;
  191. }
  192. .fs-38 {
  193. font-size: 38rpx;
  194. }
  195. .fs-40 {
  196. font-size: 40rpx;
  197. }
  198. .fs-44 {
  199. font-size: 44rpx;
  200. }
  201. .fs-48 {
  202. font-size: 48rpx;
  203. }
  204. .fs-64 {
  205. font-size: 64rpx;
  206. }
  207. .fs-52 {
  208. font-size: 52rpx
  209. }
  210. /* 字体下面横线 */
  211. .text-underline {
  212. text-decoration: underline;
  213. }
  214. /* 字体中间横线 */
  215. .text-line-through {
  216. text-decoration: line-through
  217. }
  218. /* 斜体 */
  219. .fs-i {
  220. font-style: italic;
  221. }
  222. /* 字间距 */
  223. .l-s-2 {
  224. letter-spacing: 4rpx;
  225. }
  226. /* 字体粗细 */
  227. .fw-b {
  228. font-weight: bold;
  229. }
  230. .fw-400 {
  231. font-weight: 400;
  232. }
  233. .fw-500 {
  234. font-weight: 500;
  235. }
  236. .fw-600 {
  237. font-weight: 600;
  238. }
  239. /* 字体颜色 */
  240. .fc-f {
  241. color: #fff;
  242. }
  243. .fc-0 {
  244. color: #000;
  245. }
  246. .fc-213C45 {
  247. color: #213C45;
  248. }
  249. .fc-3 {
  250. color: #333;
  251. }
  252. .fc-a {
  253. color: #aaa;
  254. }
  255. .fc-6 {
  256. color: #666;
  257. }
  258. .fc-94969A {
  259. color: #94969A;
  260. }
  261. .fc-9198A2 {
  262. color: #9198A2;
  263. }
  264. .fc-9 {
  265. color: #999;
  266. }
  267. .fc-3BB5FE {
  268. color: #3BB5FE;
  269. }
  270. .fc-41ABF5 {
  271. color: #41ABF5;
  272. }
  273. .fc-1089D1 {
  274. color: #1089D1;
  275. }
  276. .fc-57CAFF {
  277. color: #57CAFF;
  278. }
  279. .fc-96ECFB {
  280. color: #96ECFB;
  281. }
  282. .fc-4495FD {
  283. color: #4495FD;
  284. }
  285. .fc-FD5D05 {
  286. color: #FD5D05;
  287. }
  288. .fc-FF6320 {
  289. color: #FF6320;
  290. }
  291. .fc-FB4845 {
  292. color: #FB4845;
  293. }
  294. .fc-FB3D03 {
  295. color: #ff3422;
  296. }
  297. .fc-F6ABAC {
  298. color: #F6ABAC;
  299. }
  300. .fc-ff3939 {
  301. color: #ff3939;
  302. }
  303. .fc-FC4642 {
  304. color: #FC4642;
  305. }
  306. .fc-F93435 {
  307. color: #F93435;
  308. }
  309. .fc-F43D04 {
  310. color: #F43D04;
  311. }
  312. .fc-F0372F {
  313. color: #F0372F;
  314. }
  315. .fc-F75820 {
  316. color: #F75820;
  317. }
  318. .fc-F5531E {
  319. color: #F5531E;
  320. }
  321. .fc-FF7F00 {
  322. color: #FF7F00;
  323. }
  324. .fc-FD5C02 {
  325. color: #FD5C02;
  326. }
  327. .fc-F7663A {
  328. color: #F7663A;
  329. }
  330. .fc-ED301D {
  331. color: #ED301D;
  332. }
  333. .fc-F6531E {
  334. color: #F6531E;
  335. }
  336. .fc-FF5022 {
  337. color: #FF5022;
  338. }
  339. .fc-ADADAD {
  340. color: #ADADAD;
  341. }
  342. .fc-65420c {
  343. color: #65420c;
  344. }
  345. .fc-FE9E11 {
  346. color: #FE9E11;
  347. }
  348. .fc-FCFBF8 {
  349. color: #FCFBF8;
  350. }
  351. /* 背景颜色 */
  352. .bgc-f {
  353. background-color: #fff;
  354. }
  355. .bgc-3 {
  356. background-color: #333;
  357. }
  358. .bgc-3-6 {
  359. background-color: rgba(51, 51, 51, .6);
  360. }
  361. .bgc-9 {
  362. background-color: #999;
  363. }
  364. .bgc-D9D9D9 {
  365. background-color: #D9D9D9;
  366. }
  367. .bgc-4FB3EF {
  368. background-color: #4FB3EF;
  369. }
  370. .bgc-5CC2FF {
  371. background-color: #5CC2FF;
  372. }
  373. .bgc-41ABF5 {
  374. background-color: #41ABF5;
  375. }
  376. .bgc-E4F3FD {
  377. background-color: #E4F3FD;
  378. }
  379. .bgc-BCEAFF {
  380. background-color: #BCEAFF;
  381. }
  382. .bgc-B3DDFB {
  383. background-color: #B3DDFB;
  384. }
  385. .bgc-ECF7FE {
  386. background-color: #ECF7FE;
  387. }
  388. .bgc-FCE7E2 {
  389. background-color: #FCE7E2;
  390. }
  391. .bgc-F5F5F6 {
  392. background-color: #F5F5F6;
  393. }
  394. .bgc-F4F5F7 {
  395. background-color: #F4F5F7;
  396. }
  397. .bgc-F2F2F2 {
  398. background-color: #F2F2F2;
  399. }
  400. .bgc-E6E6E6 {
  401. background-color: #E6E6E6;
  402. }
  403. .bgc-F6F6F6 {
  404. background-color: #F6F6F6;
  405. }
  406. .bgc-F5541E {
  407. background: linear-gradient(-90deg, #F5811E, #F5541E);
  408. }
  409. .bgc-FF5555 {
  410. background: linear-gradient(-90deg, #FF5555, #FF1111);
  411. }
  412. .bgc-48D3C5 {
  413. background: linear-gradient(-90deg, #48D3C5, #26B7A7);
  414. }
  415. .bgc-4db8ff {
  416. background: linear-gradient(-90deg, #4db8ff, #1aa3ff);
  417. }
  418. .bgc-46D1C2 {
  419. background-color: #46D1C2;
  420. }
  421. .bgc-EDF6FF {
  422. background-color: #EDF6FF;
  423. }
  424. .bgc-FD492D {
  425. background-color: #FD492D;
  426. }
  427. .bgc-FF3E5D {
  428. background-color: #FF3E5D;
  429. }
  430. .bgc-EB5127 {
  431. background-color: #EB5127;
  432. }
  433. .bgc-FCEDED {
  434. background-color: #FCEDED;
  435. }
  436. .bgc-FAE5E2 {
  437. background-color: #FAE5E2;
  438. }
  439. .bgc-F5811E {
  440. background-color: #F5811E;
  441. }
  442. .bgc-FFD977 {
  443. background-color: #FFD977;
  444. }
  445. .bgc-FDF3EC {
  446. background-color: #FDF3EC;
  447. }
  448. .bgc-16BB5D {
  449. background-color: #16BB5D;
  450. }
  451. .bgc-F5F4F9 {
  452. background-color: #F5F4F9;
  453. }
  454. .bgc-F3F4F6 {
  455. background-color: #F3F4F6;
  456. }
  457. .bgc-D5EDFB {
  458. background-color: #D5EDFB;
  459. }
  460. .b-t-F9F9F9 {
  461. border-top: 1rpx solid #F9F9F9;
  462. }
  463. .b-b-F9F9F9 {
  464. border-bottom: 1rpx solid #F9F9F9;
  465. }
  466. .b-b-eee {
  467. border-bottom: .5rpx solid #eee;
  468. }
  469. .b-b-999 {
  470. border-bottom: 1rpx solid #999;
  471. }
  472. .b-b-EAEAEC {
  473. border-bottom: 1rpx solid #EAEAEC;
  474. }
  475. .b-b-EDEDF1 {
  476. border-bottom: 1rpx solid #EDEDF1;
  477. }
  478. .b-r-ccc {
  479. border: 1rpx solid #ccc;
  480. }
  481. /* 圆角 */
  482. .b-rad-5 {
  483. border-radius: 5rpx;
  484. }
  485. .b-rad-12 {
  486. border-radius: 12rpx;
  487. }
  488. .b-rad-16 {
  489. border-radius: 16rpx;
  490. }
  491. .b-rad-20 {
  492. border-radius: 20rpx;
  493. }
  494. .b-rad-24 {
  495. border-radius: 24rpx;
  496. }
  497. .b-rad-20-20-0-0 {
  498. border-radius: 20rpx 20rpx 0 0;
  499. }
  500. .b-rad-200 {
  501. border-radius: 200rpx;
  502. }
  503. .b-rad-50 {
  504. border-radius: 50%;
  505. }
  506. /* 内边距 */
  507. .p-8 {
  508. padding: 8rpx;
  509. }
  510. .p-16 {
  511. padding: 16rpx;
  512. }
  513. .p-20 {
  514. padding: 20rpx;
  515. }
  516. .p-24 {
  517. padding: 24rpx;
  518. }
  519. .p-30 {
  520. padding: 30rpx;
  521. }
  522. .p-32 {
  523. padding: 32rpx;
  524. }
  525. .pr-14 {
  526. padding-right: 14rpx;
  527. }
  528. .pt-48 {
  529. padding-top: 48rpx;
  530. }
  531. .p-t-4 {
  532. padding-top: 4rpx;
  533. }
  534. .p-t-10 {
  535. padding-top: 10rpx;
  536. }
  537. .p-t-20 {
  538. padding-top: 20rpx;
  539. }
  540. .pt-15 {
  541. padding-top: 15rpx;
  542. }
  543. .pt-33 {
  544. padding-top: 33rpx;
  545. }
  546. .pt-40 {
  547. padding-top: 40rpx;
  548. }
  549. .p-t-80 {
  550. padding-top: 80rpx;
  551. }
  552. .pb-5 {
  553. padding-bottom: 5rpx;
  554. }
  555. .pb-10 {
  556. padding-bottom: 10rpx;
  557. }
  558. .p-b-20 {
  559. padding-bottom: 20rpx;
  560. }
  561. .pb-36 {
  562. padding-bottom: 36rpx;
  563. }
  564. .plr-12 {
  565. padding: 0 12rpx;
  566. }
  567. .plr-10 {
  568. padding: 0 10rpx;
  569. }
  570. .plr-24 {
  571. padding: 0 24rpx;
  572. }
  573. .p-12-30 {
  574. padding: 12rpx 30rpx;
  575. }
  576. .p-40-32 {
  577. padding: 40rpx 32rpx;
  578. }
  579. .p-20-32 {
  580. padding: 20rpx 32rpx;
  581. }
  582. .p-40-32-16 {
  583. padding: 40rpx 32rpx 16rpx;
  584. }
  585. .plr-30 {
  586. padding: 0 30rpx;
  587. }
  588. .plr-32 {
  589. padding: 0 32rpx;
  590. }
  591. .ptb-15 {
  592. padding: 15rpx 0;
  593. }
  594. .ptb-22 {
  595. padding: 22rpx 0;
  596. }
  597. .ptb-24 {
  598. padding: 24rpx 0;
  599. }
  600. .ptb-30 {
  601. padding: 30rpx 0;
  602. }
  603. .p-12-24 {
  604. padding: 12rpx 24rpx;
  605. }
  606. .p-28-20-39 {
  607. padding: 28rpx 20rpx 39rpx
  608. }
  609. .p-38-20-24 {
  610. padding: 38rpx 20rpx 24rpx;
  611. }
  612. .pl-15 {
  613. padding-left: 15rpx;
  614. }
  615. .pl-24 {
  616. padding-left: 24rpx;
  617. }
  618. .pl-42 {
  619. padding-left: 42rpx;
  620. }
  621. .pr-24 {
  622. padding-right: 24rpx;
  623. }
  624. /* 外边距 */
  625. .m-24 {
  626. margin: 24rpx;
  627. }
  628. .mt-4 {
  629. margin-top: 4rpx;
  630. }
  631. .mt-5 {
  632. margin-top: 5rpx;
  633. }
  634. .mt-20 {
  635. margin-top: 20rpx;
  636. }
  637. .mt-24 {
  638. margin-top: 24rpx;
  639. }
  640. .ml-2 {
  641. margin-left: 2rpx;
  642. }
  643. .ml-8 {
  644. margin-left: 8rpx;
  645. }
  646. .ml-10 {
  647. margin-left: 10rpx;
  648. }
  649. .ml-16 {
  650. margin-left: 16rpx;
  651. }
  652. .ml-40 {
  653. margin-left: 40rpx;
  654. }
  655. .mr-4 {
  656. margin-right: 4rpx;
  657. }
  658. .mr-6 {
  659. margin-right: 6rpx;
  660. }
  661. .mr-8 {
  662. margin-right: 8rpx;
  663. }
  664. .mr-10 {
  665. margin-right: 10rpx;
  666. }
  667. .mr-12 {
  668. margin-right: 12rpx;
  669. }
  670. .mr-14 {
  671. margin-right: 14rpx;
  672. }
  673. .mr-16 {
  674. margin-right: 16rpx;
  675. }
  676. .mr-18 {
  677. margin-right: 18rpx;
  678. }
  679. .mr-20 {
  680. margin-right: 20rpx;
  681. }
  682. .mr-24 {
  683. margin-right: 24rpx;
  684. }
  685. .mr-30 {
  686. margin-right: 30rpx;
  687. }
  688. .mr-36 {
  689. margin-right: 36rpx;
  690. }
  691. .mr-40 {
  692. margin-right: 40px;
  693. }
  694. .mr-46 {
  695. margin-right: 46rpx;
  696. }
  697. .mr-50 {
  698. margin-right: 50rpx;
  699. }
  700. .mb-2 {
  701. margin-bottom: 2rpx;
  702. }
  703. .mb-4 {
  704. margin-bottom: 4rpx;
  705. }
  706. .mb-8 {
  707. margin-bottom: 8rpx;
  708. }
  709. .mb-10 {
  710. margin-bottom: 10rpx;
  711. }
  712. .mb-12 {
  713. margin-bottom: 12rpx;
  714. }
  715. .mb-16 {
  716. margin-bottom: 16rpx;
  717. }
  718. .mb-18 {
  719. margin-bottom: 18rpx;
  720. }
  721. .mb-20 {
  722. margin-bottom: 20rpx;
  723. }
  724. .mb-22 {
  725. margin-bottom: 22rpx;
  726. }
  727. .mb-24 {
  728. margin-bottom: 24rpx;
  729. }
  730. .mb-26 {
  731. margin-bottom: 26rpx;
  732. }
  733. .mb-28 {
  734. margin-bottom: 28rpx;
  735. }
  736. .mb-30 {
  737. margin-bottom: 30rpx;
  738. }
  739. .mb-32 {
  740. margin-bottom: 32rpx;
  741. }
  742. .mb-40 {
  743. margin-bottom: 40rpx;
  744. }
  745. .mb-48 {
  746. margin-bottom: 48rpx;
  747. }
  748. .mb-50 {
  749. margin-bottom: 50rpx;
  750. }
  751. .mb-52 {
  752. margin-bottom: 52rpx;
  753. }
  754. .mb-60 {
  755. margin-bottom: 60rpx;
  756. }
  757. .mb-64 {
  758. margin-bottom: 64rpx;
  759. }
  760. .mb-80 {
  761. margin-bottom: 80rpx;
  762. }
  763. /* 宽度 */
  764. .w-100 {
  765. width: 100rpx;
  766. }
  767. .w-200 {
  768. width: 200rpx;
  769. }
  770. .w-10030 {
  771. width: 30%;
  772. }
  773. .b-b-F0 {
  774. border-bottom: 1rpx solid #F0F0F0;
  775. }
  776. .b-b-EFF2F5 {
  777. border-bottom: 1rpx solid #EFF2F5;
  778. }
  779. .b-F5541E {
  780. border: 1rpx solid #F5541E;
  781. }
  782. .b-FFD7CC {
  783. border: 2rpx solid #FFD7CC;
  784. }