common.css 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894
  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: 9999;
  48. }
  49. .scroll_content {
  50. height: 100vh;
  51. width: 100vw;
  52. overflow: hidden;
  53. display: flex;
  54. flex-direction: column;
  55. }
  56. .is-hover {
  57. opacity: 0.6;
  58. }
  59. .bg-ragb-0 {
  60. background-color: rgba(0, 0, 0, 0.2);
  61. }
  62. .bg-ragb-255 {
  63. background-color: rgba(255, 255, 255, 0.2);
  64. }
  65. /*flex布局*/
  66. .flex {
  67. flex: 1;
  68. }
  69. .flex-wrap {
  70. flex-wrap: wrap;
  71. }
  72. .center {
  73. display: flex;
  74. align-items: center;
  75. }
  76. .justify-center {
  77. justify-content: center;
  78. }
  79. .justify-left {
  80. justify-content: left;
  81. }
  82. .row {
  83. display: flex;
  84. flex-direction: row;
  85. }
  86. .row-c {
  87. display: flex;
  88. flex-direction: row;
  89. align-items: center;
  90. }
  91. .column {
  92. display: flex;
  93. flex-direction: column;
  94. }
  95. .column-c {
  96. display: flex;
  97. flex-direction: column;
  98. align-items: center;
  99. }
  100. .column-sb-c {
  101. display: flex;
  102. flex-direction: column;
  103. align-items: center;
  104. justify-content: space-between;
  105. }
  106. .row-justify-c {
  107. display: flex;
  108. flex-direction: row;
  109. justify-content: center;
  110. }
  111. .row-justify-sb {
  112. display: flex;
  113. flex-direction: row;
  114. justify-content: space-between;
  115. }
  116. .column-justify-c {
  117. display: flex;
  118. flex-direction: column;
  119. justify-content: center;
  120. }
  121. .column-justify-sb {
  122. display: flex;
  123. flex-direction: column;
  124. justify-content: space-between;
  125. }
  126. /*padding大小*/
  127. .p-16 {
  128. padding: 16rpx;
  129. }
  130. .p-20 {
  131. padding: 20rpx;
  132. }
  133. .p-30 {
  134. padding: 30rpx;
  135. }
  136. .p-40 {
  137. padding: 40rpx;
  138. }
  139. .p-t6 {
  140. padding-top: 6rpx;
  141. }
  142. .p-t10 {
  143. padding-top: 10rpx;
  144. }
  145. .p-t16 {
  146. padding-top: 16rpx;
  147. }
  148. .p-t20 {
  149. padding-top: 20rpx;
  150. }
  151. .p-t30 {
  152. padding-top: 30rpx;
  153. }
  154. .p-t40 {
  155. padding-top: 40rpx;
  156. }
  157. .p-r10 {
  158. padding-right: 10rpx;
  159. }
  160. .p-r16 {
  161. padding-right: 16rpx;
  162. }
  163. .p-r20 {
  164. padding-right: 20rpx;
  165. }
  166. .p-r30 {
  167. padding-right: 30rpx;
  168. }
  169. .p-r40 {
  170. padding-right: 40rpx;
  171. }
  172. .p-r60 {
  173. padding-right: 60rpx;
  174. }
  175. .p-l10 {
  176. padding-left: 10rpx;
  177. }
  178. .p-l16 {
  179. padding-left: 16rpx;
  180. }
  181. .p-l20 {
  182. padding-left: 20rpx;
  183. }
  184. .p-l40 {
  185. padding-left: 30rpx;
  186. }
  187. .p-l40 {
  188. padding-left: 40rpx;
  189. }
  190. .p-b10 {
  191. padding-bottom: 10rpx;
  192. }
  193. .p-b16 {
  194. padding-bottom: 16rpx;
  195. }
  196. .p-b20 {
  197. padding-bottom: 20rpx;
  198. }
  199. .p-b30 {
  200. padding-bottom: 30rpx;
  201. }
  202. .p-b40 {
  203. padding-bottom: 40rpx;
  204. }
  205. .p-tb6 {
  206. padding-top: 6rpx;
  207. padding-bottom: 6rpx;
  208. }
  209. .p-tb10 {
  210. padding-top: 10rpx;
  211. padding-bottom: 10rpx;
  212. }
  213. .p-tb14 {
  214. padding-top: 14rpx;
  215. padding-bottom: 14rpx;
  216. }
  217. .p-tb16 {
  218. padding-top: 16rpx;
  219. padding-bottom: 16rpx;
  220. }
  221. .p-tb20 {
  222. padding-top: 20rpx;
  223. padding-bottom: 20rpx;
  224. }
  225. .p-tb25 {
  226. padding-top: 25rpx;
  227. padding-bottom: 25rpx;
  228. }
  229. .p-tb30 {
  230. padding-top: 30rpx;
  231. padding-bottom: 30rpx;
  232. }
  233. .p-tb40 {
  234. padding-top: 40rpx;
  235. padding-bottom: 40rpx;
  236. }
  237. .p-lr10 {
  238. padding-left: 10rpx;
  239. padding-right: 10rpx;
  240. }
  241. .p-lr16 {
  242. padding-left: 16rpx;
  243. padding-right: 16rpx;
  244. }
  245. .p-lr20 {
  246. padding-left: 20rpx;
  247. padding-right: 20rpx;
  248. }
  249. .p-lr24 {
  250. padding-left: 24rpx;
  251. padding-right: 24rpx;
  252. }
  253. .p-lr30 {
  254. padding-left: 30rpx;
  255. padding-right: 30rpx;
  256. }
  257. .p-lr40 {
  258. padding-left: 40rpx;
  259. padding-right: 40rpx;
  260. }
  261. /*margin大小*/
  262. .m-16 {
  263. margin: 16rpx;
  264. }
  265. .m-20 {
  266. margin: 20rpx;
  267. }
  268. .m-30 {
  269. margin: 30rpx;
  270. }
  271. .m-40 {
  272. margin: 40rpx;
  273. }
  274. .m-t10 {
  275. margin-top: 10rpx;
  276. }
  277. .m-t16 {
  278. margin-top: 16rpx;
  279. }
  280. .m-t20 {
  281. margin-top: 20rpx;
  282. }
  283. .m-t30 {
  284. margin-top: 30rpx;
  285. }
  286. .m-t40 {
  287. margin-top: 40rpx;
  288. }
  289. .m-t50 {
  290. margin-top: 50rpx;
  291. }
  292. .m-t60 {
  293. margin-top: 60rpx;
  294. }
  295. .m-b10 {
  296. margin-bottom: 10rpx;
  297. }
  298. .m-b16 {
  299. margin-bottom: 16rpx;
  300. }
  301. .m-b20 {
  302. margin-bottom: 20rpx;
  303. }
  304. .m-b25 {
  305. margin-bottom: 25rpx;
  306. }
  307. .m-b30 {
  308. margin-bottom: 30rpx;
  309. }
  310. .m-b40 {
  311. margin-bottom: 40rpx;
  312. }
  313. .m-b50 {
  314. margin-bottom: 50rpx;
  315. }
  316. .m-r6 {
  317. margin-right: 6rpx;
  318. }
  319. .m-r10 {
  320. margin-right: 10rpx;
  321. }
  322. .m-r16 {
  323. margin-right: 16rpx;
  324. }
  325. .m-r20 {
  326. margin-right: 20rpx;
  327. }
  328. .m-r30 {
  329. margin-right: 30rpx;
  330. }
  331. .m-r40 {
  332. margin-right: 40rpx;
  333. }
  334. .m-l10 {
  335. margin-left: 10rpx;
  336. }
  337. .m-l16 {
  338. margin-left: 16rpx;
  339. }
  340. .m-l20 {
  341. margin-left: 20rpx;
  342. }
  343. .m-l30 {
  344. margin-left: 30rpx;
  345. }
  346. .m-l40 {
  347. margin-left: 40rpx;
  348. }
  349. .m-tb10 {
  350. margin-top: 10rpx;
  351. margin-bottom: 10rpx;
  352. }
  353. .m-tb16 {
  354. margin-top: 16rpx;
  355. margin-bottom: 16rpx;
  356. }
  357. .m-tb20 {
  358. margin-top: 20rpx;
  359. margin-bottom: 20rpx;
  360. }
  361. .m-tb30 {
  362. margin-top: 30rpx;
  363. margin-bottom: 30rpx;
  364. }
  365. .m-tb40 {
  366. margin-top: 40rpx;
  367. margin-bottom: 40rpx;
  368. }
  369. .m-lr10 {
  370. margin-left: 10rpx;
  371. margin-right: 10rpx;
  372. }
  373. .m-lr16 {
  374. margin-left: 16rpx;
  375. margin-right: 16rpx;
  376. }
  377. .m-lr20 {
  378. margin-left: 20rpx;
  379. margin-right: 20rpx;
  380. }
  381. .m-lr30 {
  382. margin-left: 30rpx;
  383. margin-right: 30rpx;
  384. }
  385. .m-lr40 {
  386. margin-left: 40rpx;
  387. margin-right: 40rpx;
  388. }
  389. .m-lr50 {
  390. margin-left: 50rpx;
  391. margin-right: 50rpx;
  392. }
  393. .m-lr60 {
  394. margin-left: 60rpx;
  395. margin-right: 60rpx;
  396. }
  397. /*字体大小*/
  398. .size-16 {
  399. font-size: 16rpx;
  400. }
  401. .size-20 {
  402. font-size: 20rpx;
  403. }
  404. .size-22 {
  405. font-size: 22rpx;
  406. }
  407. .size-24 {
  408. font-size: 24rpx;
  409. }
  410. .size-26 {
  411. font-size: 26rpx;
  412. }
  413. .size-28 {
  414. font-size: 28rpx;
  415. }
  416. .size-30 {
  417. font-size: 30rpx;
  418. }
  419. .size-32 {
  420. font-size: 32rpx;
  421. }
  422. .size-34 {
  423. font-size: 34rpx;
  424. }
  425. .size-36 {
  426. font-size: 36rpx;
  427. }
  428. .size-38 {
  429. font-size: 38rpx;
  430. }
  431. .size-40 {
  432. font-size: 40rpx;
  433. }
  434. .size-44 {
  435. font-size: 44rpx;
  436. }
  437. .size-48 {
  438. font-size: 48rpx;
  439. }
  440. .size-64 {
  441. font-size: 64rpx;
  442. }
  443. /*边框*/
  444. .bor-f1 {
  445. border: 1rpx solid #ffffff;
  446. }
  447. .bor-f2 {
  448. border: 2rpx solid #ffffff;
  449. }
  450. .bor-solid-2 {
  451. border: 2rpx solid #E5E5E5;
  452. }
  453. .bor-dashed-1 {
  454. border: 1rpx dashed #E5E5E5;
  455. }
  456. .bor-dashed-2 {
  457. border: 2rpx dashed #E5E5E5;
  458. }
  459. .bor-bottom-1 {
  460. border-bottom: 1rpx solid #E5E5E5;
  461. }
  462. .bor-255 {
  463. border: 2rpx solid rgba(255, 255, 255, 0.7);
  464. }
  465. .view_line {
  466. height: 1rpx;
  467. background: #CCCCCC;
  468. }
  469. /*圆角*/
  470. .r-8 {
  471. border-radius: 8rpx;
  472. }
  473. .r-10 {
  474. border-radius: 10rpx;
  475. }
  476. .r-12 {
  477. border-radius: 12rpx;
  478. }
  479. .r-14 {
  480. border-radius: 14rpx;
  481. }
  482. .r-16 {
  483. border-radius: 16rpx;
  484. }
  485. .r-20 {
  486. border-radius: 20rpx;
  487. }
  488. .r-30 {
  489. border-radius: 30rpx;
  490. }
  491. .r-40 {
  492. border-radius: 40rpx;
  493. }
  494. .r-100 {
  495. border-radius: 100rpx;
  496. }
  497. .r-circle {
  498. border-radius: 50%;
  499. }
  500. /*宽高*/
  501. .wh-14 {
  502. width: 14rpx;
  503. height: 14rpx;
  504. display: block;
  505. }
  506. .wh-20 {
  507. width: 20rpx;
  508. height: 20rpx;
  509. display: block;
  510. }
  511. .wh-25 {
  512. width: 25rpx;
  513. height: 25rpx;
  514. display: block;
  515. }
  516. .wh-30 {
  517. width: 30rpx;
  518. height: 30rpx;
  519. display: block;
  520. }
  521. .wh-36 {
  522. width: 36rpx;
  523. height: 36rpx;
  524. display: block;
  525. }
  526. .wh-45 {
  527. width: 45rpx;
  528. height: 45rpx;
  529. display: block;
  530. }
  531. .wh-60 {
  532. width: 60rpx;
  533. height: 60rpx;
  534. display: block;
  535. }
  536. .wh-80 {
  537. width: 80rpx;
  538. height: 80rpx;
  539. display: block;
  540. }
  541. .wh-90 {
  542. width: 90rpx;
  543. height: 90rpx;
  544. display: block;
  545. }
  546. .wh-100 {
  547. width: 100rpx;
  548. height: 100rpx;
  549. display: block;
  550. }
  551. .wh-110 {
  552. width: 110rpx;
  553. height: 110rpx;
  554. display: block;
  555. }
  556. /*宽高*/
  557. .line-30 {
  558. line-height: 30rpx;
  559. }
  560. .line-34 {
  561. line-height: 34rpx;
  562. }
  563. .line-40 {
  564. line-height: 40rpx;
  565. }
  566. .line-40 {
  567. line-height: 40rpx;
  568. }
  569. .line-60 {
  570. height: 60rpx;
  571. line-height: 60rpx;
  572. }
  573. .line-80 {
  574. height: 80rpx;
  575. line-height: 80rpx;
  576. }
  577. .line-100 {
  578. line-height: 100rpx;
  579. }
  580. /*阴影*/
  581. .box-shadow-197 {
  582. box-shadow: 0 0 10px rgba(197, 197, 197, 0.25);
  583. }
  584. /*字体大小*/
  585. .sys-size-16 {
  586. font-size: 16rpx;
  587. }
  588. .sys-size-20 {
  589. font-size: 20rpx;
  590. }
  591. .sys-size-22 {
  592. font-size: 22rpx;
  593. }
  594. .sys-size-24 {
  595. font-size: 24rpx;
  596. }
  597. .sys-size-26 {
  598. font-size: 26rpx;
  599. }
  600. .sys-size-28 {
  601. font-size: 28rpx;
  602. }
  603. .sys-size-30 {
  604. font-size: 30rpx;
  605. }
  606. .sys-size-32 {
  607. font-size: 32rpx;
  608. }
  609. .sys-size-34 {
  610. font-size: 34rpx;
  611. }
  612. .sys-size-36 {
  613. font-size: 36rpx;
  614. }
  615. .sys-size-40 {
  616. font-size: 40rpx;
  617. }
  618. .sys-size-44 {
  619. font-size: 44rpx;
  620. }
  621. .sys-size-48 {
  622. font-size: 48rpx;
  623. }
  624. .sys-size-64 {
  625. font-size: 64rpx;
  626. }
  627. /*字体粗细*/
  628. .sys-weight-600 {
  629. font-weight: 600;
  630. }
  631. .sys-weight-400 {
  632. font-weight: 400;
  633. }
  634. .sys-weight-500 {
  635. font-weight: 500;
  636. }
  637. /* box 圆角 */
  638. .sys-radius-4 {
  639. border-radius: 4rpx;
  640. }
  641. .sys-radius-8 {
  642. border-radius: 8rpx;
  643. }
  644. .sys-radius-12 {
  645. border-radius: 12rpx;
  646. }
  647. .sys-radius-16 {
  648. border-radius: 16rpx;
  649. }
  650. .sys-radius-10 {
  651. border-radius: 10rpx;
  652. }
  653. .sys-radius-20 {
  654. border-radius: 20rpx;
  655. }
  656. .sys-radius-30 {
  657. border-radius: 30rpx;
  658. }
  659. .sys-radius-50 {
  660. border-radius: 50rpx;
  661. }
  662. .sys-radius-100 {
  663. border-radius: 100rpx;
  664. }
  665. .sys-radius-200 {
  666. border-radius: 200rpx;
  667. }
  668. /*按钮样式*/
  669. .sys-selected-but {
  670. text-align: center;
  671. transition: .5s ease;
  672. opacity: 1;
  673. }
  674. .sys-unselected-but {
  675. opacity: 0.5;
  676. transition: .5s ease;
  677. }
  678. /*文字排版*/
  679. .sys-webkit-box {
  680. display: -webkit-box;
  681. -webkit-line-clamp: 1;
  682. -webkit-box-orient: vertical;
  683. overflow: hidden;
  684. }
  685. .sys-webkit-box-2 {
  686. -webkit-line-clamp: 2 !important;
  687. }
  688. .sys-webkit-box-3 {
  689. -webkit-line-clamp: 3 !important;
  690. }
  691. .text-center {
  692. text-align: center;
  693. }
  694. .sys-tab-height {
  695. height: 134rpx;
  696. }