zcm-main-nvue.css 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813
  1. .scroll-row {
  2. flex-direction: row;
  3. }
  4. /* 定位 */
  5. .position-absolute {
  6. position: absolute;
  7. }
  8. .position-fixed {
  9. position: fixed;
  10. }
  11. .position-relative {
  12. position: relative;
  13. }
  14. .left-0 {
  15. left: 0;
  16. }
  17. .top-0 {
  18. top: 0;
  19. }
  20. .bottom-0 {
  21. bottom: 0;
  22. }
  23. .right-0 {
  24. right: 0;
  25. }
  26. /* 宽高 */
  27. .w-100 {
  28. width: 750px;
  29. }
  30. .w-50 {
  31. width: 375px;
  32. }
  33. .h-100 {
  34. height: 1250px;
  35. }
  36. .h-50 {
  37. width: 625px;
  38. }
  39. /* 字体 */
  40. .font {
  41. font-size: 30rpx;
  42. }
  43. .font-sm {
  44. font-size: 25rpx;
  45. }
  46. .font-md {
  47. font-size: 35rpx !important;
  48. }
  49. .font-lg {
  50. font-size: 40rpx;
  51. }
  52. .font-big {
  53. font-size: 60rpx;
  54. }
  55. .font-weight {
  56. font-weight: bold;
  57. }
  58. .font-weight-100 {
  59. font-weight: 100 !important;
  60. }
  61. .line-through {
  62. text-decoration: line-through;
  63. }
  64. /* -- 栅格布局 -- */
  65. .row {
  66. flex-direction: row;
  67. flex-wrap: wrap;
  68. }
  69. .col-1 {
  70. width: 62.5px;
  71. }
  72. .col-2 {
  73. width: 125px;
  74. }
  75. .col-3 {
  76. width: 187.5px;
  77. }
  78. .col-4 {
  79. width: 250px;
  80. }
  81. .col-5 {
  82. width: 312.5px;
  83. }
  84. .col-6 {
  85. width: 375px;
  86. }
  87. .col-7 {
  88. width: 437.5px;
  89. }
  90. .col-8 {
  91. width: 500px;
  92. }
  93. .col-9 {
  94. width: 562.5px;
  95. }
  96. .col-10 {
  97. width: 625px;
  98. }
  99. .col-11 {
  100. width: 687.5px;
  101. }
  102. .col-12 {
  103. width: 750px;
  104. }
  105. /* flex布局 */
  106. .d-flex {
  107. flex-direction: row;
  108. }
  109. .flex-1 {
  110. flex: 1;
  111. }
  112. .flex-column {
  113. flex-direction: column;
  114. }
  115. .flex-row {
  116. flex-direction: row;
  117. }
  118. .flex-wrap {
  119. flex-wrap: wrap;
  120. }
  121. .flex-nowrap {
  122. flex-wrap: nowrap;
  123. }
  124. .j-start {
  125. justify-content: flex-start;
  126. }
  127. .j-center {
  128. justify-content: center;
  129. }
  130. .j-end {
  131. justify-content: flex-end;
  132. }
  133. .j-sb {
  134. justify-content: space-between;
  135. }
  136. .a-center {
  137. align-items: center;
  138. }
  139. .a-start {
  140. align-items: flex-start;
  141. }
  142. .a-end {
  143. align-items: flex-end;
  144. }
  145. .a-stretch {
  146. align-items: stretch;
  147. }
  148. /* Border */
  149. .border {
  150. border-width: 1px;
  151. border-style: solid;
  152. border-color: #dee2e6;
  153. }
  154. .border-top {
  155. border-top-width: 1px;
  156. border-top-style: solid;
  157. border-top-color: #dee2e6;
  158. }
  159. .border-right {
  160. border-right-width: 1px;
  161. border-right-style: solid;
  162. border-right-color: #dee2e6;
  163. }
  164. .border-bottom {
  165. border-bottom-width: 1px;
  166. border-bottom-style: solid;
  167. border-bottom-color: #dee2e6;
  168. }
  169. .border-left {
  170. border-left-width: 1px;
  171. border-left-style: solid;
  172. border-left-color: #dee2e6;
  173. }
  174. .border-0 {
  175. border-width: 0;
  176. }
  177. .border-top-0 {
  178. border-top-width: 0;
  179. }
  180. .border-right-0 {
  181. border-right-width: 0;
  182. }
  183. .border-bottom-0 {
  184. border-bottom-width: 0;
  185. }
  186. .border-left-0 {
  187. border-left-width: 0;
  188. }
  189. .border-primary {
  190. border-color: #007bff
  191. }
  192. .border-secondary {
  193. border-color: #6c757d
  194. }
  195. .border-success {
  196. border-color: #6c757d
  197. }
  198. .border-danger {
  199. border-color: #dc3545
  200. }
  201. .border-warning {
  202. border-color: #ffc107
  203. }
  204. .border-info {
  205. border-color: #17a2b8
  206. }
  207. .border-light {
  208. border-color: #f8f9fa
  209. }
  210. .border-dark {
  211. border-color: #343a40
  212. }
  213. .border-white {
  214. border-color: #ffffff
  215. }
  216. .border-light-secondary {
  217. border-color: #F1F1F1 !important;
  218. }
  219. .rounded {
  220. border-radius: 5px;
  221. }
  222. .rounded-circle {
  223. border-radius: 100%;
  224. }
  225. .rounded-0 {
  226. border-radius: 0;
  227. }
  228. /* color */
  229. .text-primary {
  230. color: #007bff;
  231. }
  232. .text-secondary {
  233. color: #6c757d;
  234. }
  235. .text-success {
  236. color: #6c757d;
  237. }
  238. .text-danger {
  239. color: #dc3545;
  240. }
  241. .text-warning {
  242. color: #ffc107;
  243. }
  244. .text-info {
  245. color: #17a2b8;
  246. }
  247. .text-light {
  248. color: #f8f9fa;
  249. }
  250. .text-dark {
  251. color: #343a40;
  252. }
  253. .text-muted {
  254. color: #6c757d;
  255. }
  256. .text-light-muted {
  257. color: #B2B2B2 !important;
  258. }
  259. .text-white {
  260. color: #ffffff;
  261. }
  262. .bg-primary {
  263. background-color: #007bff;
  264. }
  265. .bg-secondary {
  266. background-color: #6c757d;
  267. }
  268. .bg-success {
  269. background-color: #6c757d;
  270. }
  271. .bg-danger {
  272. background-color: #dc3545;
  273. }
  274. .bg-warning {
  275. background-color: #ffc107;
  276. }
  277. .bg-info {
  278. background-color: #17a2b8;
  279. }
  280. .bg-light {
  281. background-color: #f8f9fa;
  282. }
  283. .bg-dark {
  284. background-color: #343a40;
  285. }
  286. .bg-white {
  287. background-color: #ffffff;
  288. }
  289. /* -- 内外边距 -- */
  290. .m-0 {
  291. margin: 0;
  292. }
  293. /* #ifndef APP-PLUS-NVUE */
  294. .m-auto {
  295. margin: auto;
  296. }
  297. /* #endif */
  298. .m-1 {
  299. margin: 10rpx;
  300. }
  301. .m-2 {
  302. margin: 20rpx;
  303. }
  304. .m-3 {
  305. margin: 30rpx;
  306. }
  307. .m-4 {
  308. margin: 40rpx;
  309. }
  310. .m-5 {
  311. margin: 50rpx;
  312. }
  313. .mt-0 {
  314. margin-top: 0;
  315. }
  316. /* #ifndef APP-PLUS-NVUE */
  317. .mt-auto {
  318. margin-top: auto;
  319. }
  320. /* #endif */
  321. .mt-1 {
  322. margin-top: 10rpx;
  323. }
  324. .mt-2 {
  325. margin-top: 20rpx;
  326. }
  327. .mt-3 {
  328. margin-top: 30rpx;
  329. }
  330. .mt-4 {
  331. margin-top: 40rpx;
  332. }
  333. .mt-5 {
  334. margin-top: 50rpx;
  335. }
  336. .mb-0 {
  337. margin-bottom: 0;
  338. }
  339. /* #ifndef APP-PLUS-NVUE */
  340. .mb-auto {
  341. margin-bottom: auto;
  342. }
  343. /* #endif */
  344. .mb-1 {
  345. margin-bottom: 10rpx;
  346. }
  347. .mb-2 {
  348. margin-bottom: 20rpx;
  349. }
  350. .mb-3 {
  351. margin-bottom: 30rpx;
  352. }
  353. .mb-4 {
  354. margin-bottom: 40rpx;
  355. }
  356. .mb-5 {
  357. margin-bottom: 50rpx;
  358. }
  359. .ml-0 {
  360. margin-left: 0;
  361. }
  362. /* #ifndef APP-PLUS-NVUE */
  363. .ml-auto {
  364. margin-left: auto;
  365. }
  366. /* #endif */
  367. .ml-1 {
  368. margin-left: 10rpx;
  369. }
  370. .ml-2 {
  371. margin-left: 20rpx;
  372. }
  373. .ml-3 {
  374. margin-left: 30rpx;
  375. }
  376. .ml-4 {
  377. margin-left: 40rpx;
  378. }
  379. .ml-5 {
  380. margin-left: 50rpx;
  381. }
  382. .mr-0 {
  383. margin-right: 0;
  384. }
  385. /* #ifndef APP-PLUS-NVUE */
  386. .mr-auto {
  387. margin-right: auto;
  388. }
  389. /* #endif */
  390. .mr-1 {
  391. margin-right: 10rpx;
  392. }
  393. .mr-2 {
  394. margin-right: 20rpx;
  395. }
  396. .mr-3 {
  397. margin-right: 30rpx;
  398. }
  399. .mr-4 {
  400. margin-right: 40rpx;
  401. }
  402. .mr-5 {
  403. margin-right: 50rpx;
  404. }
  405. .my-0 {
  406. margin-top: 0;
  407. margin-bottom: 0;
  408. }
  409. /* #ifndef APP-PLUS-NVUE */
  410. .my-auto {
  411. margin-top: auto;
  412. margin-bottom: auto;
  413. }
  414. /* #endif */
  415. .my-1 {
  416. margin-top: 10rpx;
  417. margin-bottom: 10rpx;
  418. }
  419. .my-2 {
  420. margin-top: 20rpx;
  421. margin-bottom: 20rpx;
  422. }
  423. .my-3 {
  424. margin-top: 30rpx;
  425. margin-bottom: 30rpx;
  426. }
  427. .my-4 {
  428. margin-top: 40rpx;
  429. margin-bottom: 40rpx;
  430. }
  431. .my-5 {
  432. margin-top: 50rpx;
  433. margin-bottom: 50rpx;
  434. }
  435. .mx-0 {
  436. margin-left: 0;
  437. margin-right: 0;
  438. }
  439. /* #ifndef APP-PLUS-NVUE */
  440. .mx-auto {
  441. margin-left: auto;
  442. margin-right: auto;
  443. }
  444. /* #endif */
  445. .mx-1 {
  446. margin-left: 10rpx;
  447. margin-right: 10rpx;
  448. }
  449. .mx-2 {
  450. margin-left: 20rpx;
  451. margin-right: 20rpx;
  452. }
  453. .mx-3 {
  454. margin-left: 30rpx;
  455. margin-right: 30rpx;
  456. }
  457. .mx-4 {
  458. margin-left: 40rpx;
  459. margin-right: 40rpx;
  460. }
  461. .mx-5 {
  462. margin-left: 50rpx;
  463. margin-right: 50rpx;
  464. }
  465. .p-0 {
  466. padding: 0;
  467. }
  468. .p {
  469. padding: 5rpx;
  470. }
  471. .p-1 {
  472. padding: 10rpx;
  473. }
  474. .p-2 {
  475. padding: 20rpx;
  476. }
  477. .p-3 {
  478. padding: 30rpx;
  479. }
  480. .p-4 {
  481. padding: 40rpx;
  482. }
  483. .p-5 {
  484. padding: 50rpx;
  485. }
  486. .pt-0 {
  487. padding-top: 0;
  488. }
  489. .pt {
  490. padding-top: 5rpx;
  491. }
  492. .pt-1 {
  493. padding-top: 10rpx;
  494. }
  495. .pt-2 {
  496. padding-top: 20rpx;
  497. }
  498. .pt-3 {
  499. padding-top: 30rpx;
  500. }
  501. .pt-4 {
  502. padding-top: 40rpx;
  503. }
  504. .pt-5 {
  505. padding-top: 50rpx;
  506. }
  507. .pb-0 {
  508. padding-bottom: 0;
  509. }
  510. .pb-1 {
  511. padding-bottom: 10rpx;
  512. }
  513. .pb {
  514. padding-bottom: 5rpx;
  515. }
  516. .pb-2 {
  517. padding-bottom: 20rpx;
  518. }
  519. .pb-3 {
  520. padding-bottom: 30rpx;
  521. }
  522. .pb-4 {
  523. padding-bottom: 40rpx;
  524. }
  525. .pb-5 {
  526. padding-bottom: 50rpx;
  527. }
  528. .pl-0 {
  529. padding-left: 0;
  530. }
  531. .pl {
  532. padding-left: 5rpx;
  533. }
  534. .pl-1 {
  535. padding-left: 10rpx;
  536. }
  537. .pl-2 {
  538. padding-left: 20rpx;
  539. }
  540. .pl-3 {
  541. padding-left: 30rpx;
  542. }
  543. .pl-4 {
  544. padding-left: 40rpx;
  545. }
  546. .pl-5 {
  547. padding-left: 50rpx;
  548. }
  549. .pr-0 {
  550. padding-right: 0;
  551. }
  552. .pr {
  553. padding-right: 5rpx;
  554. }
  555. .pr-1 {
  556. padding-right: 10rpx;
  557. }
  558. .pr-2 {
  559. padding-right: 20rpx;
  560. }
  561. .pr-3 {
  562. padding-right: 30rpx;
  563. }
  564. .pr-4 {
  565. padding-right: 40rpx;
  566. }
  567. .pr-5 {
  568. padding-right: 50rpx;
  569. }
  570. .py-0 {
  571. padding-top: 0;
  572. padding-bottom: 0;
  573. }
  574. .py {
  575. padding-top: 5rpx;
  576. padding-bottom: 5rpx;
  577. }
  578. .py-1 {
  579. padding-top: 10rpx;
  580. padding-bottom: 10rpx;
  581. }
  582. .py-2 {
  583. padding-top: 20rpx;
  584. padding-bottom: 20rpx;
  585. }
  586. .py-3 {
  587. padding-top: 30rpx;
  588. padding-bottom: 30rpx;
  589. }
  590. .py-4 {
  591. padding-top: 40rpx;
  592. padding-bottom: 40rpx;
  593. }
  594. .py-5 {
  595. padding-top: 50rpx;
  596. padding-bottom: 50rpx;
  597. }
  598. .px-0 {
  599. padding-left: 0;
  600. padding-right: 0;
  601. }
  602. .px-1 {
  603. padding-left: 10rpx;
  604. padding-right: 10rpx;
  605. }
  606. .px {
  607. padding-left: 5rpx;
  608. padding-right: 5rpx;
  609. }
  610. .px-2 {
  611. padding-left: 20rpx;
  612. padding-right: 20rpx;
  613. }
  614. .px-3 {
  615. padding-left: 30rpx;
  616. padding-right: 30rpx;
  617. }
  618. .px-4 {
  619. padding-left: 40rpx;
  620. padding-right: 40rpx;
  621. }
  622. .px-5 {
  623. padding-left: 50rpx;
  624. padding-right: 50rpx;
  625. }