common.css 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709
  1. body{
  2. margin: 0;
  3. padding: 0;
  4. font-size: 16rpx;
  5. background: rgb(246, 247, 250);
  6. }
  7. .black-custom-img{
  8. width: 160rpx;
  9. height: 160rpx;
  10. }
  11. .black-custom-img-1{
  12. width: 60rpx;
  13. height: 1rpx;
  14. }
  15. /* 隐藏scroll-view 滚动条 */
  16. ::-webkit-scrollbar {
  17. display: none;
  18. }
  19. /* 不换行 */
  20. .view-nowrap{
  21. white-space: nowrap;
  22. }
  23. /* 数字和文字不自动换行 */
  24. .overflowWrap{
  25. overflowWrap:break-word;
  26. word-break: break-all;
  27. }
  28. /* 自动换行 */
  29. .view-word-wrap{
  30. white-space: pre-wrap;
  31. word-wrap: break-word;
  32. }
  33. /*超出三行... */
  34. .text-overflow-ellipsis-t {
  35. overflow: hidden;
  36. text-overflow: ellipsis;
  37. display: -webkit-box;
  38. -webkit-line-clamp: 3;
  39. line-clamp: 3;
  40. -webkit-box-orient: vertical;
  41. white-space: pre-wrap;
  42. word-wrap: break-word;
  43. }
  44. /*超出两行... */
  45. .text-overflow-ellipsis {
  46. overflow: hidden;
  47. text-overflow: ellipsis;
  48. display: -webkit-box;
  49. -webkit-line-clamp: 2;
  50. line-clamp: 2;
  51. -webkit-box-orient: vertical;
  52. white-space: pre-wrap;
  53. word-wrap: break-word;
  54. }
  55. /*超出一行... */
  56. .text-overflow-ellipsis-one {
  57. white-space: nowrap;
  58. text-overflow: ellipsis;
  59. overflow: hidden;
  60. word-break: break-all;
  61. }
  62. /* 内部盒子 */
  63. .box-border-box{
  64. box-sizing: border-box;
  65. }
  66. .flex-common-css {
  67. width: 100%;
  68. height: 100vh;
  69. display: flex;
  70. flex-direction: column;
  71. }
  72. .flex-index-css {
  73. width: 100%;
  74. height: 100%;
  75. display: flex;
  76. flex-direction: column;
  77. }
  78. .flex-direction-column {
  79. display: flex;
  80. flex-direction: column;
  81. }
  82. .display-flex {
  83. display: flex;
  84. }
  85. .flex-justify-space {
  86. display: flex;
  87. justify-content: space-between;
  88. }
  89. .flex-justify-around {
  90. display: flex;
  91. justify-content: space-around;
  92. }
  93. .flex-justify-center {
  94. display: flex;
  95. justify-content: center;
  96. }
  97. .flex-justify-end {
  98. display: flex;
  99. justify-content: flex-end;
  100. }
  101. .flex-justify-start {
  102. display: flex;
  103. justify-content: flex-start;
  104. }
  105. .align-items-start {
  106. display: flex;
  107. align-items: flex-start;
  108. }
  109. .align-items-center {
  110. display: flex;
  111. align-items: center;
  112. }
  113. .align-items-flex-end {
  114. display: flex;
  115. align-items: flex-end;
  116. }
  117. .flex-wrap-wrap {
  118. display: flex;
  119. flex-wrap: wrap;
  120. }
  121. .common-view-css{
  122. width: 100%;
  123. flex: 1;
  124. }
  125. .scroll-view-css {
  126. width: 100%;
  127. flex: 1;
  128. overflow: auto;
  129. }
  130. .box-sizing-border {
  131. box-sizing: border-box;
  132. }
  133. .text-align-center {
  134. text-align: center;
  135. }
  136. .text-align-right {
  137. text-align: right;
  138. }
  139. .text-align-left {
  140. text-align: left;
  141. }
  142. .flex-1{
  143. flex: 1;
  144. }
  145. .flex-shrink0{
  146. flex-shrink: 0;
  147. }
  148. /* 字体大小 */
  149. .fs-12{
  150. font-size: 12rpx;
  151. }
  152. .fs-14{
  153. font-size: 14rpx;
  154. }
  155. .fs-15{
  156. font-size: 15rpx;
  157. }
  158. .fs-16{
  159. font-size: 16rpx;
  160. }
  161. .fs-17{
  162. font-size: 17rpx;
  163. }
  164. .fs-18{
  165. font-size: 18rpx;
  166. }
  167. .fs-20{
  168. font-size: 20rpx;
  169. }
  170. .fs-22{
  171. font-size: 22rpx;
  172. }
  173. .fs-24{
  174. font-size: 24rpx;
  175. }
  176. .fs-26{
  177. font-size: 26rpx;
  178. }
  179. .fs-28{
  180. font-size: 28rpx;
  181. }
  182. .fs-30{
  183. font-size: 30rpx;
  184. }
  185. .fs-32{
  186. font-size: 32rpx;
  187. }
  188. .fs-34{
  189. font-size: 34rpx;
  190. }
  191. .fs-36{
  192. font-size: 36rpx;
  193. }
  194. .fs-40{
  195. font-size: 40rpx;
  196. }
  197. .fs-44{
  198. font-size: 44rpx;
  199. }
  200. .fs-48{
  201. font-size: 48rpx;
  202. }
  203. .fs-52{
  204. font-size: 52rpx;
  205. }
  206. .fs-64{
  207. font-size: 64rpx;
  208. }
  209. .fs-72{
  210. font-size: 72rpx;
  211. }
  212. /* 字体粗细 */
  213. .fw-b{
  214. font-weight: bold;
  215. }
  216. .fw-400{
  217. font-weight: 400;
  218. }
  219. .fw-500{
  220. font-weight: 500;
  221. }
  222. .fw-600{
  223. font-weight: 600;
  224. }
  225. /* 圆角 */
  226. .br-r-8{
  227. border-radius: 8rpx;
  228. }
  229. .br-r-16{
  230. border-radius: 16rpx;
  231. }
  232. .br-r-20{
  233. border-radius: 20rpx;
  234. }
  235. /* 字体颜色 */
  236. .fc-f{
  237. color: #fff;
  238. }
  239. .fc-0{
  240. color: #000;
  241. }
  242. .fc-3{
  243. color: #333;
  244. }
  245. .fc-6{
  246. color: #666;
  247. }
  248. .fc-858585{
  249. color: #858585;
  250. }
  251. .fc-9{
  252. color: #999;
  253. }
  254. .fc-808080{
  255. color: #808080;
  256. }
  257. .fc-794B06{
  258. color: #794B06;
  259. }
  260. .fc-FFDDA1{
  261. color: #FFDDA1;
  262. }
  263. .fc-16BB5D{
  264. color: #16BB5D;
  265. }
  266. .fc-4BC285{
  267. color: #4BC285;
  268. }
  269. .fc-13984C{
  270. color: #13984C;
  271. }
  272. .fc-34C759{
  273. color: #34C759;
  274. }
  275. .fc-ED301D{
  276. color: #ED301D;
  277. }
  278. .fc-FF3B30{
  279. color: #FF3B30;
  280. }
  281. .fc-f78820{
  282. color: #f78820;
  283. }
  284. .fc-ED930F{
  285. color: #ED930F;
  286. }
  287. .fc-FF9D00{
  288. color: #FF9D00;
  289. }
  290. .fc-FE9E11{
  291. color: #FE9E11;
  292. }
  293. .fc-3489FF{
  294. color: #3489FF;
  295. }
  296. .fc-358AFD{
  297. color:#358AFD;
  298. font-weight: 600;
  299. }
  300. .fc-27AE60{
  301. color: #27AE60;
  302. }
  303. .fc-9198A2{
  304. color: #9198A2;
  305. }
  306. .fc-2F80ED{
  307. color: #2F80ED;
  308. }
  309. .fc-632611{
  310. color: #632611;
  311. }
  312. .fc-8C5E0B{
  313. color: #8C5E0B;
  314. }
  315. .fc-2680EB{
  316. color: #2680EB;
  317. }
  318. .fc-4C96EF{
  319. color: #4C96EF;
  320. }
  321. .fc-1778FD{
  322. color: #1778FD;
  323. }
  324. .fc-C6DBFE{
  325. color: #C6DBFE;
  326. }
  327. .fc-7B7D82{
  328. color: #7B7D82;
  329. }
  330. /* 背景颜色 */
  331. .bgc-f{
  332. background-color: #fff;
  333. }
  334. .bgc-c{
  335. background-color: #ccc;
  336. }
  337. .bgc-3{
  338. background-color: #333;
  339. }
  340. .bgc-9{
  341. background-color: #999;
  342. }
  343. .bgc-F5F5F5{
  344. background-color: #F5F5F5;
  345. }
  346. .bgc-F6F7FA{
  347. background-color: #F6F7FA;
  348. }
  349. .bgc-F6F6F6{
  350. background-color: #F6F6F6;
  351. }
  352. .bgc-27AE60{
  353. background-color: #27AE60;
  354. }
  355. .bgc-A2E4BE{
  356. background-color: #A2E4BE;
  357. }
  358. .bgc-16BB5D{
  359. background-color: #16BB5D;
  360. }
  361. .bgc-E8F9EF{
  362. background-color: #E8F9EF;
  363. }
  364. .bgc-3489FF{
  365. background-color: #3489FF;
  366. }
  367. .bgc-E2EEFF{
  368. background-color: #E2EEFF;
  369. }
  370. .bgc-1778FD{
  371. background-color: #1778FD;
  372. }
  373. .bgc-EAF4FD{
  374. background-color: #EAF4FD;
  375. }
  376. .bgc-4FB3EF{
  377. background-color: #4FB3EF;
  378. }
  379. .bgc-B3DDFB{
  380. background-color: #B3DDFB;
  381. }
  382. .bgc-f1f9fe{
  383. background-color: #f1f9fe;
  384. }
  385. .bgc-1989F9{
  386. background-color: #1989F9;
  387. }
  388. .bgc-ADCDFE{
  389. background-color: #ADCDFE;
  390. }
  391. .bgc-F5F4F9{
  392. background-color: #F5F4F9;
  393. }
  394. .bgc-F7F7F7{
  395. background-color: #F7F7F7;
  396. }
  397. .bgc-F6F7FB{
  398. background-color: #F6F7FB;
  399. }
  400. .bgc-FE9E11{
  401. background: #FE9E11;
  402. }
  403. /* 内边距 */
  404. .pb-10{
  405. padding-bottom: 10rpx;
  406. }
  407. .pb-20{
  408. padding-bottom: 20rpx;
  409. }
  410. .pb-30{
  411. padding-bottom: 30rpx;
  412. }
  413. .pb-32{
  414. padding-bottom: 32rpx;
  415. }
  416. .pb-24{
  417. padding-bottom: 24rpx;
  418. }
  419. .p-10{
  420. padding: 10rpx;
  421. }
  422. .p-16{
  423. padding: 16rpx;
  424. }
  425. .p-20{
  426. padding: 20rpx;
  427. }
  428. .p-24{
  429. padding: 24rpx;
  430. }
  431. .p-30{
  432. padding: 30rpx;
  433. }
  434. .p-32{
  435. padding: 32rpx;
  436. }
  437. .p-40{
  438. padding: 40rpx;
  439. }
  440. .p-46{
  441. padding: 46rpx;
  442. }
  443. .pl-20{
  444. padding-left: 20rpx;
  445. }
  446. .plr-20{
  447. padding: 0 20rpx;
  448. }
  449. .plr-24{
  450. padding: 0 24rpx;
  451. }
  452. .plr-32{
  453. padding: 0 32rpx;
  454. }
  455. .plr-40{
  456. padding: 0 40rpx;
  457. }
  458. .plr-38{
  459. padding: 0 38rpx;
  460. }
  461. .pr-8{
  462. padding-right: 8rpx;
  463. }
  464. .pt-24 {
  465. padding-top: 24rpx;
  466. }
  467. .pt-10{
  468. padding-top: 10rpx;
  469. }
  470. .pt-7{
  471. padding-top: 7rpx;
  472. }
  473. .pt-5{
  474. padding-top: 5rpx;
  475. }
  476. /* 外边距 */
  477. .m-24{
  478. margin: 24rpx;
  479. }
  480. .ml-8{
  481. margin-left: 8rpx;
  482. }
  483. .ml-10{
  484. margin-left: 10rpx;
  485. }
  486. .ml-16{
  487. margin-left: 16rpx;
  488. }
  489. .ml-20{
  490. margin-left: 20rpx;
  491. }
  492. .ml-26{
  493. margin-left: 26rpx;
  494. }
  495. .ml-30{
  496. margin-left: 30rpx;
  497. }
  498. .ml-40{
  499. margin-left: 40rpx;
  500. }
  501. .mt-4{
  502. margin-top: 4rpx;
  503. }
  504. .mt-7{
  505. margin-top: 7rpx;
  506. }
  507. .mt-8{
  508. margin-top: 8rpx;
  509. }
  510. .mt-10{
  511. margin-top: 10rpx;
  512. }
  513. .mt-17{
  514. margin-top: 17rpx;
  515. }
  516. .mt-20{
  517. margin-top: 20rpx;
  518. }
  519. .mt-30{
  520. margin-top: 30rpx;
  521. }
  522. .mb-2{
  523. margin-bottom: 2rpx;
  524. }
  525. .mb-8{
  526. margin-bottom: 8rpx;
  527. }
  528. .mb-10{
  529. margin-bottom: 10rpx;
  530. }
  531. .mb-13{
  532. margin-bottom: 13rpx;
  533. }
  534. .mb-16{
  535. margin-bottom: 16rpx;
  536. }
  537. .mb-18{
  538. margin-bottom: 18rpx;
  539. }
  540. .mb-24{
  541. margin-bottom: 24rpx;
  542. }
  543. .mb-30{
  544. margin-bottom: 30rpx;
  545. }
  546. .mb-32{
  547. margin-bottom: 32rpx;
  548. }
  549. .mb-40{
  550. margin-bottom: 40rpx;
  551. }
  552. .mb-50{
  553. margin-bottom: 50rpx;
  554. }
  555. .mb-56{
  556. margin-bottom: 56rpx;
  557. }
  558. .mb-64{
  559. margin-bottom: 64rpx;
  560. }
  561. .mb-80{
  562. margin-bottom: 80rpx;
  563. }
  564. .mb-100{
  565. margin-bottom: 100rpx;
  566. }
  567. .mr-4{
  568. margin-right: 4rpx;
  569. }
  570. .mr-6{
  571. margin-right: 6rpx;
  572. }
  573. .mr-8{
  574. margin-right: 8rpx;
  575. }
  576. .mr-10{
  577. margin-right: 10rpx;
  578. }
  579. .mr-16{
  580. margin-right: 16rpx;
  581. }
  582. .mr-20{
  583. margin-right: 20rpx;
  584. }
  585. .mr-22{
  586. margin-right: 22rpx;
  587. }
  588. .mr-24{
  589. margin-right: 24rpx;
  590. }
  591. .mr-26{
  592. margin-right: 26rpx;
  593. }
  594. .mr-30{
  595. margin-right: 30rpx;
  596. }
  597. .mr-40{
  598. margin-right: 40rpx;
  599. }
  600. .mr-50{
  601. margin-right: 50rpx;
  602. }
  603. .mr-68{
  604. margin-right: 68rpx;
  605. }
  606. .mr-90{
  607. margin-right: 90rpx;
  608. }
  609. .mt-80{
  610. margin-top: 80rpx;
  611. }
  612. .m-t-40{
  613. margin-top: 40rpx;
  614. }
  615. .mb-4{
  616. margin-bottom: 4rpx;
  617. }
  618. .mb-8{
  619. margin-bottom: 8rpx;
  620. }
  621. .m-b-20{
  622. margin-bottom: 20rpx;
  623. }
  624. .m-b-32{
  625. margin-bottom: 32rpx;
  626. }
  627. .m-b-72{
  628. margin-bottom: 72rpx;
  629. }
  630. .mb-20{
  631. margin-bottom: 20rpx;
  632. }
  633. .mb-40{
  634. margin-bottom: 40rpx;
  635. }
  636. .pb-30{
  637. padding-bottom: 30rpx;
  638. }
  639. .border-9 {
  640. border: 1rpx solid #999999;
  641. }
  642. .border-bottom-E6E7E9{
  643. border-bottom: 1rpx solid #E6E7E9;
  644. }
  645. .border-bottom-e5e5e5{
  646. border-bottom: 1rpx solid #e5e5e5;
  647. }
  648. .b-b-EEEEEE{
  649. border-bottom: 1rpx solid #EEEEEE;
  650. }
  651. .w-100{
  652. width: 100rpx;
  653. }
  654. .w-200{
  655. width: 200rpx;
  656. }
  657. .w-10030{
  658. width: 30%;
  659. }
  660. .w-100100{
  661. width: 100%;
  662. }
  663. .b-rad-200{
  664. border-radius: 200rpx;
  665. }
  666. .b-rad-100{
  667. border-radius: 100rpx;
  668. }
  669. .b-rad-40{
  670. border-radius: 40rpx;
  671. }
  672. .b-rad-20{
  673. border-radius: 20rpx;
  674. }
  675. .b-rad-16{
  676. border-radius: 16rpx;
  677. }
  678. .b-rad-10{
  679. border-radius: 10rpx;
  680. }
  681. .b-rad-8{
  682. border-radius: 8rpx;
  683. }
  684. .sc-img{
  685. width: 40rpx;
  686. height: 40rpx;
  687. }