common.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960
  1. /* #ifndef APP-PLUS */
  2. @font-face {
  3. font-family: "iconfont";
  4. src: url('~@/static/css/font/iconfont.ttf') format('truetype');
  5. }
  6. /* #endif*/
  7. .icon {
  8. /* #ifndef APP-PLUS */
  9. font-family: "iconfont";
  10. /* #endif*/
  11. font-family: iconfont;
  12. color: #ffffff;
  13. }
  14. /* Tag标签 */
  15. .tag {
  16. height: 32rpx;
  17. /* #ifndef APP-PLUS */
  18. display: inline-flex;
  19. /* #endif */
  20. align-items: center;
  21. flex-direction: row;
  22. padding: 0 8rpx;
  23. background-image: linear-gradient(-90deg, #ff4950, #ff8123);
  24. border-radius: 10rpx;
  25. margin-right: 10rpx;
  26. }
  27. .tag-icon {
  28. font-size: 20rpx;
  29. color: #ffffff;
  30. margin-right: 6rpx;
  31. }
  32. .tag-text {
  33. font-size: 20rpx;
  34. color: #ffffff;
  35. }
  36. /* 文本大小 */
  37. .text-xs {
  38. font-size: 22rpx;
  39. }
  40. .text-min {
  41. font-size: 24rpx;
  42. }
  43. .text-sm {
  44. font-size: 26rpx;
  45. }
  46. .text-df {
  47. font-size: 28rpx;
  48. }
  49. .text-30 {
  50. font-size: 30rpx;
  51. }
  52. .text-lg {
  53. font-size: 32rpx;
  54. }
  55. .text-34 {
  56. font-size: 34rpx;
  57. }
  58. .text-xl {
  59. font-size: 36rpx;
  60. }
  61. .text-40 {
  62. font-size: 40rpx;
  63. }
  64. .text-xxl {
  65. font-size: 44rpx;
  66. }
  67. .text-xxxl {
  68. font-size: 56rpx;
  69. }
  70. .text-xxxxl {
  71. font-size: 68rpx;
  72. }
  73. .text-sl {
  74. font-size: 80rpx;
  75. }
  76. .text-xsl {
  77. font-size: 120rpx;
  78. }
  79. .text-bold {
  80. font-weight: bold;
  81. }
  82. .text-center {
  83. text-align: center;
  84. }
  85. .text-content {
  86. line-height: 1.6;
  87. }
  88. .text-left {
  89. text-align: left;
  90. }
  91. .text-right {
  92. text-align: right;
  93. }
  94. .text-lines-mp {
  95. lines: 2;
  96. text-overflow: ellipsis;
  97. overflow: hidden;
  98. /* #ifndef APP-PLUS */
  99. white-space: normal;
  100. display: -webkit-box;
  101. -webkit-box-orient: vertical;
  102. -webkit-line-clamp: 2;
  103. /* #endif*/
  104. }
  105. .text-lines-2 {
  106. lines: 2;
  107. text-overflow: ellipsis;
  108. }
  109. .text-mp-2 {
  110. overflow: hidden;
  111. /* #ifndef APP-PLUS */
  112. white-space: normal;
  113. display: -webkit-box;
  114. -webkit-box-orient: vertical;
  115. -webkit-line-clamp: 2;
  116. /* #endif*/
  117. }
  118. .text-lines-3 {
  119. lines: 3;
  120. text-overflow: ellipsis;
  121. }
  122. /* 字体粗细 */
  123. .text-bold1 {
  124. font-weight: 100;
  125. }
  126. .text-bold2 {
  127. font-weight: 200;
  128. }
  129. .text-bold4 {
  130. font-weight: 400;
  131. }
  132. .text-bold5 {
  133. font-weight: 500;
  134. }
  135. .text-bold6 {
  136. font-weight: 600;
  137. }
  138. .text-bold7 {
  139. font-weight: 700;
  140. }
  141. .text-bold8 {
  142. font-weight: 800;
  143. }
  144. .round {
  145. border-radius: 5000rpx;
  146. }
  147. .radius {
  148. border-radius: 6rpx;
  149. }
  150. .radius-bock {
  151. border-radius: 18rpx;
  152. }
  153. .radius-circular {
  154. border-radius: 2000rpx;
  155. }
  156. /* 字体颜色 */
  157. .text-white {
  158. color: #ffffff;
  159. }
  160. .text-white-5 {
  161. color: rgba(255, 255, 255, 0.5);
  162. }
  163. .text-white-6 {
  164. color: rgba(255, 255, 255, 0.6);
  165. }
  166. .text-white-7 {
  167. color: rgba(255, 255, 255, 0.7);
  168. }
  169. .text-white-8 {
  170. color: rgba(255, 255, 255, 0.8);
  171. }
  172. .text-white-9 {
  173. color: rgba(255, 255, 255, 0.9);
  174. }
  175. .text-black {
  176. color: #000000;
  177. }
  178. .text-black-1 {
  179. color: rgba(0, 0, 0, 0.1);
  180. }
  181. .text-black-2 {
  182. color: rgba(0, 0, 0, 0.2);
  183. }
  184. .text-black-3 {
  185. color: rgba(0, 0, 0, 0.3);
  186. }
  187. .text-black-4 {
  188. color: rgba(0, 0, 0, 0.4);
  189. }
  190. .text-black-5 {
  191. color: rgba(0, 0, 0, 0.5);
  192. }
  193. .text-black-6 {
  194. color: rgba(0, 0, 0, 0.6);
  195. }
  196. .text-black-7 {
  197. color: rgba(0, 0, 0, 0.7);
  198. }
  199. .text-black-8 {
  200. color: rgba(0, 0, 0, 0.8);
  201. }
  202. .text-black-9 {
  203. color: rgba(0, 0, 0, 0.9);
  204. }
  205. .text-gray {
  206. color: #888888;
  207. }
  208. .text-gray-light {
  209. color: #999999;
  210. }
  211. .text-gray-dark {
  212. color: #666666;
  213. }
  214. .text-red {
  215. color: #ff243a;
  216. }
  217. .text-orange {
  218. color: #fe6600;
  219. }
  220. .text-yellow {
  221. color: #FF6A0C;
  222. }
  223. .text-olive {
  224. color: #8dc63f;
  225. }
  226. .text-green {
  227. color: #39b54a;
  228. }
  229. .text-cyan {
  230. color: #1cbbb4;
  231. }
  232. .text-blue {
  233. color: #0081ff;
  234. }
  235. .text-purple {
  236. color: #6739b6;
  237. }
  238. .text-mauve {
  239. color: #9c26b0;
  240. }
  241. .text-pink {
  242. color: #F840B1;
  243. }
  244. .text-brown {
  245. color: #a5673f;
  246. }
  247. /* 背景颜色 */
  248. .wanl-bg-redorange {
  249. background: #ff3d33;
  250. background-image: linear-gradient(90deg, #ff6333, #fe6600);
  251. color: white;
  252. }
  253. .wanl-bg-redorange-light {
  254. background-image: linear-gradient(90deg, #ffc0ae, #ffa7b0);
  255. color: white;
  256. }
  257. /* 橙色 */
  258. .wanl-bg-orange {
  259. color: white;
  260. background-image: linear-gradient(-90deg, #ff4950, #ff8123);
  261. }
  262. /* 粉色 */
  263. .wanl-bg-pink {
  264. color: white;
  265. background-image: linear-gradient(-90deg, #fa3b26, #ff4d8a);
  266. }
  267. /* 蓝色 */
  268. .wanl-bg-blue {
  269. color: white;
  270. background-image: linear-gradient(-90deg, #2676fa, #23d7ff);
  271. }
  272. /* 灰色 */
  273. .wanl-bg-grey {
  274. color: white;
  275. background-image: linear-gradient(-90deg, #8799a3, #8799a3);
  276. }
  277. .bg-nav {
  278. background-color: #f9f9f9;
  279. }
  280. .bg-white {
  281. background-color: #ffffff;
  282. color: #333333;
  283. }
  284. .bg-black {
  285. background-color: #333333;
  286. color: #ffffff;
  287. }
  288. .bg-gray {
  289. background-color: #f0f0f0;
  290. color: #333333;
  291. }
  292. .bg-gradual-yellow {
  293. background-image: linear-gradient(to left, #ff9700, #ffca00);
  294. color: white;
  295. }
  296. .bg-red {
  297. background-color: red;
  298. color: #ffffff;
  299. }
  300. .bg-orange {
  301. background-color: #fe6600;
  302. color: #ffffff;
  303. }
  304. .bg-yellow {
  305. background-color: #fbbd08;
  306. color: #333333;
  307. }
  308. .bg-olive {
  309. background-color: #8dc63f;
  310. color: #ffffff;
  311. }
  312. .bg-green {
  313. background-color: #39b54a;
  314. color: #ffffff;
  315. }
  316. .bg-cyan {
  317. background-color: #1cbbb4;
  318. color: #ffffff;
  319. }
  320. .bg-blue {
  321. background-color: #0081ff;
  322. color: #ffffff;
  323. }
  324. .bg-purple {
  325. background-color: #6739b6;
  326. color: #ffffff;
  327. }
  328. .bg-mauve {
  329. background-color: #9c26b0;
  330. color: #ffffff;
  331. }
  332. .bg-pink {
  333. background-color: #e03997;
  334. color: #ffffff;
  335. }
  336. .bg-brown {
  337. background-color: #a5673f;
  338. color: #ffffff;
  339. }
  340. /* -- 内外边距 -- */
  341. .margin-xs {
  342. margin: 10rpx;
  343. }
  344. .margin-sm {
  345. margin: 20rpx;
  346. }
  347. .margin {
  348. margin: 30rpx;
  349. }
  350. .margin-lg {
  351. margin: 40rpx;
  352. }
  353. .margin-xl {
  354. margin: 50rpx;
  355. }
  356. .margin-top-xs {
  357. margin-top: 10rpx;
  358. }
  359. .margin-top-s {
  360. margin-top: 6rpx;
  361. }
  362. .margin-top-sm {
  363. margin-top: 20rpx;
  364. }
  365. .margin-top {
  366. margin-top: 30rpx;
  367. }
  368. .margin-top-lg {
  369. margin-top: 40rpx;
  370. }
  371. .margin-top-xl {
  372. margin-top: 50rpx;
  373. }
  374. .margin-right-s {
  375. margin-right: 4rpx;
  376. }
  377. .margin-right-xs {
  378. margin-right: 10rpx;
  379. }
  380. .margin-right-sm {
  381. margin-right: 20rpx;
  382. }
  383. .margin-right {
  384. margin-right: 30rpx;
  385. }
  386. .margin-right-lg {
  387. margin-right: 40rpx;
  388. }
  389. .margin-right-xl {
  390. margin-right: 50rpx;
  391. }
  392. .margin-bottom-s {
  393. margin-bottom: 6rpx;
  394. }
  395. .margin-bottom-xs {
  396. margin-bottom: 10rpx;
  397. }
  398. .margin-bottom-sm {
  399. margin-bottom: 20rpx;
  400. }
  401. .margin-bottom {
  402. margin-bottom: 30rpx;
  403. }
  404. .margin-bottom-lg {
  405. margin-bottom: 40rpx;
  406. }
  407. .margin-bottom-xl {
  408. margin-bottom: 50rpx;
  409. }
  410. .margin-left-s {
  411. margin-left: 4rpx;
  412. }
  413. .margin-left-xs {
  414. margin-left: 10rpx;
  415. }
  416. .margin-left-sm {
  417. margin-left: 20rpx;
  418. }
  419. .margin-left {
  420. margin-left: 30rpx;
  421. }
  422. .margin-left-lg {
  423. margin-left: 40rpx;
  424. }
  425. .margin-left-xl {
  426. margin-left: 50rpx;
  427. }
  428. .margin-lr-xs {
  429. margin-left: 10rpx;
  430. margin-right: 10rpx;
  431. }
  432. .margin-lr-sm {
  433. margin-left: 20rpx;
  434. margin-right: 20rpx;
  435. }
  436. .margin-lr {
  437. margin-left: 30rpx;
  438. margin-right: 30rpx;
  439. }
  440. .margin-lr-lg {
  441. margin-left: 40rpx;
  442. margin-right: 40rpx;
  443. }
  444. .margin-lr-xl {
  445. margin-left: 50rpx;
  446. margin-right: 50rpx;
  447. }
  448. .margin-tb-s {
  449. margin-top: 4rpx;
  450. margin-bottom: 4rpx;
  451. }
  452. .margin-tb-xs {
  453. margin-top: 10rpx;
  454. margin-bottom: 10rpx;
  455. }
  456. .margin-tb-sm {
  457. margin-top: 20rpx;
  458. margin-bottom: 20rpx;
  459. }
  460. .margin-tb {
  461. margin-top: 30rpx;
  462. margin-bottom: 30rpx;
  463. }
  464. .margin-tb-lg {
  465. margin-top: 40rpx;
  466. margin-bottom: 40rpx;
  467. }
  468. .margin-tb-xl {
  469. margin-top: 50rpx;
  470. margin-bottom: 50rpx;
  471. }
  472. .margin-bj {
  473. margin: 25rpx;
  474. }
  475. .margin-top-bj {
  476. margin-top: 25rpx;
  477. }
  478. .margin-right-bj {
  479. margin-right: 25rpx;
  480. }
  481. .margin-bottom-bj {
  482. margin-bottom: 25rpx;
  483. }
  484. .margin-left-bj {
  485. margin-left: 25rpx;
  486. }
  487. .margin-lr-bj {
  488. margin-left: 25rpx;
  489. margin-right: 25rpx;
  490. }
  491. .margin-tb-bj {
  492. margin-top: 25rpx;
  493. margin-bottom: 25rpx;
  494. }
  495. .padding-bj {
  496. padding: 25rpx;
  497. }
  498. .padding-top-bj {
  499. padding-top: 25rpx;
  500. }
  501. .padding-right-bj {
  502. padding-right: 25rpx;
  503. }
  504. .padding-left-bj {
  505. padding-left: 25rpx;
  506. }
  507. .padding-lr-bj {
  508. padding-left: 25rpx;
  509. padding-right: 25rpx;
  510. }
  511. .padding-tb-bj {
  512. padding-top: 25rpx;
  513. padding-bottom: 25rpx;
  514. }
  515. .padding-bottom-bj {
  516. padding-bottom: 25rpx;
  517. }
  518. .padding-0 {
  519. padding: 0;
  520. }
  521. .padding-xs {
  522. padding: 10rpx;
  523. }
  524. .padding-sm {
  525. padding: 20rpx;
  526. }
  527. .padding {
  528. padding: 30rpx;
  529. }
  530. .padding-lg {
  531. padding: 40rpx;
  532. }
  533. .padding-xl {
  534. padding: 50rpx;
  535. }
  536. .padding-top-s {
  537. padding-top: 4rpx;
  538. }
  539. .padding-top-xs {
  540. padding-top: 10rpx;
  541. }
  542. .padding-top-sm {
  543. padding-top: 20rpx;
  544. }
  545. .padding-top {
  546. padding-top: 30rpx;
  547. }
  548. .padding-top-lg {
  549. padding-top: 40rpx;
  550. }
  551. .padding-top-xl {
  552. padding-top: 50rpx;
  553. }
  554. .padding-right-xs {
  555. padding-right: 10rpx;
  556. }
  557. .padding-right-sm {
  558. padding-right: 20rpx;
  559. }
  560. .padding-right {
  561. padding-right: 30rpx;
  562. }
  563. .padding-right-lg {
  564. padding-right: 40rpx;
  565. }
  566. .padding-right-xl {
  567. padding-right: 50rpx;
  568. }
  569. .padding-bottom-xs {
  570. padding-bottom: 10rpx;
  571. }
  572. .padding-bottom-sm {
  573. padding-bottom: 20rpx;
  574. }
  575. .padding-bottom {
  576. padding-bottom: 30rpx;
  577. }
  578. .padding-bottom-lg {
  579. padding-bottom: 40rpx;
  580. }
  581. .padding-bottom-xl {
  582. padding-bottom: 50rpx;
  583. }
  584. .padding-left-xs {
  585. padding-left: 10rpx;
  586. }
  587. .padding-left-sm {
  588. padding-left: 20rpx;
  589. }
  590. .padding-left {
  591. padding-left: 30rpx;
  592. }
  593. .padding-left-lg {
  594. padding-left: 40rpx;
  595. }
  596. .padding-left-xl {
  597. padding-left: 50rpx;
  598. }
  599. .padding-lr-s {
  600. padding-left: 4rpx;
  601. padding-right: 4rpx;
  602. }
  603. .padding-lr-xs {
  604. padding-left: 10rpx;
  605. padding-right: 10rpx;
  606. }
  607. .padding-lr-sm {
  608. padding-left: 20rpx;
  609. padding-right: 20rpx;
  610. }
  611. .padding-lr {
  612. padding-left: 30rpx;
  613. padding-right: 30rpx;
  614. }
  615. .padding-lr-lg {
  616. padding-left: 40rpx;
  617. padding-right: 40rpx;
  618. }
  619. .padding-lr-xl {
  620. padding-left: 50rpx;
  621. padding-right: 50rpx;
  622. }
  623. .padding-tb-s {
  624. padding-top: 4rpx;
  625. padding-bottom: 4rpx;
  626. }
  627. .padding-tb-xs {
  628. padding-top: 10rpx;
  629. padding-bottom: 10rpx;
  630. }
  631. .padding-tb-sm {
  632. padding-top: 20rpx;
  633. padding-bottom: 20rpx;
  634. }
  635. .padding-tb {
  636. padding-top: 30rpx;
  637. padding-bottom: 30rpx;
  638. }
  639. .padding-tb-lg {
  640. padding-top: 40rpx;
  641. padding-bottom: 40rpx;
  642. }
  643. .padding-tb-xl {
  644. padding-top: 50rpx;
  645. padding-bottom: 50rpx;
  646. }
  647. /* 定位 */
  648. .position-relative {
  649. position: relative;
  650. }
  651. .position-absolute {
  652. position: absolute;
  653. }
  654. .position-center {
  655. position: absolute;
  656. top: 0;
  657. bottom: 0;
  658. left: 0;
  659. right: 0;
  660. }
  661. .position-top-center {
  662. position: absolute;
  663. top: 0;
  664. left: 0;
  665. right: 0;
  666. }
  667. .position-bottom-center {
  668. position: absolute;
  669. bottom: 0;
  670. left: 0;
  671. right: 0;
  672. }
  673. /* flex弹性布局*/
  674. .flex {
  675. /* #ifndef APP-NVUE */
  676. display: flex;
  677. /* #endif */
  678. }
  679. .flex-sub {
  680. flex: 1;
  681. }
  682. .flex-twice {
  683. flex: 2;
  684. }
  685. .flex-treble {
  686. flex: 3;
  687. }
  688. .flex-direction {
  689. flex-direction: row;
  690. }
  691. .flex-wrap {
  692. flex-wrap: wrap;
  693. }
  694. .align-start {
  695. align-items: flex-start;
  696. }
  697. .align-end {
  698. align-items: flex-end;
  699. }
  700. .align-center {
  701. align-items: center;
  702. }
  703. .align-stretch {
  704. align-items: stretch;
  705. }
  706. .align-stretch {
  707. align-items: stretch;
  708. }
  709. .justify-start {
  710. justify-content: flex-start;
  711. }
  712. .justify-end {
  713. justify-content: flex-end;
  714. }
  715. .justify-center {
  716. justify-content: center;
  717. }
  718. .justify-between {
  719. justify-content: space-between;
  720. }
  721. .justify-around {
  722. justify-content: space-around;
  723. }
  724. .overflow-hidden {
  725. overflow: hidden;
  726. }