You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2649 lines
56KB

  1. html,
  2. body,
  3. div,
  4. span,
  5. applet,
  6. object,
  7. iframe,
  8. h1,
  9. h2,
  10. h3,
  11. h4,
  12. h5,
  13. h6,
  14. p,
  15. blockquote,
  16. pre,
  17. a,
  18. abbr,
  19. acronym,
  20. address,
  21. big,
  22. cite,
  23. code,
  24. del,
  25. dfn,
  26. em,
  27. img,
  28. ins,
  29. kbd,
  30. q,
  31. s,
  32. samp,
  33. small,
  34. strike,
  35. strong,
  36. sub,
  37. sup,
  38. tt,
  39. var,
  40. b,
  41. u,
  42. i,
  43. center,
  44. dl,
  45. dt,
  46. dd,
  47. ol,
  48. ul,
  49. li,
  50. fieldset,
  51. form,
  52. label,
  53. legend,
  54. table,
  55. caption,
  56. tbody,
  57. tfoot,
  58. thead,
  59. tr,
  60. th,
  61. td,
  62. article,
  63. aside,
  64. canvas,
  65. details,
  66. embed,
  67. figure,
  68. figcaption,
  69. footer,
  70. header,
  71. hgroup,
  72. menu,
  73. nav,
  74. output,
  75. ruby,
  76. section,
  77. summary,
  78. time,
  79. mark,
  80. audio,
  81. video {
  82. margin: 0;
  83. padding: 0;
  84. }
  85. ol,
  86. li,
  87. ul {
  88. list-style: none;
  89. }
  90. body {
  91. font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  92. -webkit-tap-highlight-color: transparent;
  93. -webkit-font-smoothing: antialiased;
  94. -moz-osx-font-smoothing: grayscale;
  95. }
  96. .md-icon {
  97. background-size: contain;
  98. fill: currentColor;
  99. -webkit-backface-visibility: hidden;
  100. transform: translateZ(0) scale(1, 1);
  101. }
  102. .md-icon.icon-font {
  103. font-family: "Mand-Mobile-Icon" !important;
  104. font-size: 0.21333rem;
  105. font-style: normal;
  106. font-weight: normal;
  107. font-variant: normal;
  108. text-transform: none;
  109. line-height: 1;
  110. letter-spacing: 0;
  111. speak: none;
  112. -webkit-font-smoothing: antialiased;
  113. -moz-osx-font-smoothing: grayscale;
  114. }
  115. .md-icon.icon-font.xss {
  116. font-size: icon-size-xxs;
  117. }
  118. .md-icon.icon-font.xs {
  119. font-size: 0.26667rem;
  120. }
  121. .md-icon.icon-font.sm {
  122. font-size: 0.32rem;
  123. }
  124. .md-icon.icon-font.md {
  125. font-size: 0.42667rem;
  126. }
  127. .md-icon.icon-font.lg {
  128. font-size: 0.56rem;
  129. }
  130. .md-icon.icon-font:before {
  131. position: relative;
  132. z-index: 2;
  133. }
  134. .md-icon.icon-svg.xss {
  135. width: icon-size-xxs;
  136. height: icon-size-xxs;
  137. line-height: icon-size-xxs;
  138. }
  139. .md-icon.icon-svg.xs {
  140. width: 0.26667rem;
  141. height: 0.26667rem;
  142. line-height: 0.26667rem;
  143. }
  144. .md-icon.icon-svg.sm {
  145. width: 0.32rem;
  146. height: 0.32rem;
  147. line-height: 0.32rem;
  148. }
  149. .md-icon.icon-svg.md {
  150. width: 0.42667rem;
  151. height: 0.42667rem;
  152. line-height: 0.42667rem;
  153. }
  154. .md-icon.icon-svg.lg {
  155. width: 0.56rem;
  156. height: 0.56rem;
  157. line-height: 0.56rem;
  158. }
  159. .md-icon-rectangle:before {
  160. content: "\e900";
  161. }
  162. .md-icon-invisible:before {
  163. content: "\e601";
  164. }
  165. .md-icon-visible:before {
  166. content: "\e602";
  167. }
  168. .md-icon-right:before {
  169. content: "\e905";
  170. }
  171. .md-icon-wrong:before {
  172. content: "\e906";
  173. }
  174. .md-icon-info:before {
  175. content: "\e605";
  176. }
  177. .md-icon-service:before {
  178. content: "\e606";
  179. }
  180. .md-icon-edit:before {
  181. content: "\e607";
  182. }
  183. .md-icon-refresh:before {
  184. content: "\e901";
  185. }
  186. .md-icon-question:before {
  187. content: "\e608";
  188. }
  189. .md-icon-setting:before {
  190. content: "\e609";
  191. }
  192. .md-icon-wait:before {
  193. content: "\e902";
  194. }
  195. .md-icon-check:before {
  196. content: "\e904";
  197. }
  198. .md-icon-check-disabled:before {
  199. content: "\e903";
  200. }
  201. .md-icon-checked:before,
  202. .md-icon-success:before {
  203. content: "\e908";
  204. }
  205. .md-icon-clear:before,
  206. .md-icon-fail:before {
  207. content: "\e60e";
  208. }
  209. .md-icon-info-solid:before {
  210. content: "\e907";
  211. }
  212. .md-icon-warn:before {
  213. content: "\e60b";
  214. }
  215. .md-icon-security:before {
  216. content: "\e60f";
  217. }
  218. .md-icon-rmb:before {
  219. content: "\e610";
  220. }
  221. .md-icon-scan:before {
  222. content: "\e611";
  223. }
  224. .md-icon-share:before {
  225. content: "\e612";
  226. }
  227. .md-icon-back:before {
  228. content: "\e613";
  229. }
  230. .md-icon-card-bag:before {
  231. content: "\e614";
  232. }
  233. .md-icon-message:before {
  234. content: "\e615";
  235. }
  236. .md-icon-order:before {
  237. content: "\e616";
  238. }
  239. .md-icon-balance:before {
  240. content: "\e617";
  241. }
  242. .md-icon-coupon:before {
  243. content: "\e618";
  244. }
  245. .md-icon-sort:before {
  246. content: "\e619";
  247. }
  248. .md-icon-address-book:before {
  249. content: "\e61a";
  250. }
  251. .md-icon-mobile-phone:before {
  252. content: "\e61b";
  253. }
  254. .md-icon-home:before {
  255. content: "\e61c";
  256. }
  257. .md-icon-discovery:before {
  258. content: "\e61d";
  259. }
  260. .md-icon-calendar:before {
  261. content: "\e61e";
  262. }
  263. .md-icon-user:before {
  264. content: "\e61f";
  265. }
  266. .md-icon-time:before {
  267. content: "\e620";
  268. }
  269. .md-icon-search:before {
  270. content: "\e621";
  271. }
  272. .md-icon-switch:before {
  273. content: "\e622";
  274. }
  275. .md-icon-camera:before {
  276. content: "\e623";
  277. }
  278. .md-icon-clock:before {
  279. content: "\e624";
  280. }
  281. .md-icon-profession:before {
  282. content: "\e625";
  283. }
  284. .md-icon-delete:before {
  285. content: "\e626";
  286. }
  287. .md-icon-id-card:before {
  288. content: "\e627";
  289. }
  290. .md-icon-filter:before {
  291. content: "\e628";
  292. }
  293. .md-icon-location:before {
  294. content: "\e629";
  295. }
  296. .md-icon-authentication:before {
  297. content: "\e62a";
  298. }
  299. .md-icon-motor-vehicle:before {
  300. content: "\e62b";
  301. }
  302. .md-icon-phone:before {
  303. content: "\e62c";
  304. }
  305. .md-icon-volumn:before {
  306. content: "\e62d";
  307. }
  308. .md-icon-arrow-left:before {
  309. content: "\e603";
  310. }
  311. .md-icon-arrow-right:before {
  312. content: "\e630";
  313. }
  314. .md-icon-arrow-up:before {
  315. content: "\e633";
  316. }
  317. .md-icon-arrow-down:before {
  318. content: "\e634";
  319. }
  320. .md-icon-close:before {
  321. content: "\e604";
  322. }
  323. @font-face {
  324. font-family: Mand-Mobile-Icon;
  325. font-style: normal;
  326. font-weight: normal;
  327. /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
  328. /* Version is required */
  329. src: url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.0.2/iconfont.woff") format("woff"), url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.0.2/iconfont.ttf") format("truetype");
  330. }
  331. .md-radio {
  332. display: flex;
  333. align-items: center;
  334. line-height: 1.5;
  335. margin-top: 0.16rem;
  336. margin-bottom: 0.16rem;
  337. }
  338. .md-radio .md-radio-icon {
  339. color: #c5cad5;
  340. }
  341. .md-radio .md-radio-icon .md-icon {
  342. display: flex;
  343. }
  344. .md-radio.is-checked .md-radio-icon {
  345. color: #2f86f6;
  346. }
  347. .md-radio.is-disabled .md-radio-icon,
  348. .md-radio.is-disabled .md-radio-label {
  349. color: #c5cad5;
  350. }
  351. .md-radio.is-inline {
  352. display: inline-flex;
  353. }
  354. .md-radio.is-inline:not(:last-child) {
  355. margin-right: 0.53333rem;
  356. }
  357. .md-radio-icon {
  358. position: relative;
  359. flex-shrink: 0;
  360. }
  361. .md-radio-label {
  362. margin-left: 0.16rem;
  363. font-size: inherit;
  364. font-weight: 400;
  365. }
  366. .md-field {
  367. padding: 0.53333rem 0.53333rem;
  368. border: none;
  369. background-color: #fff;
  370. }
  371. .md-field.is-plain {
  372. padding: 0;
  373. background-color: transparent;
  374. }
  375. .md-field-header {
  376. position: relative;
  377. display: flex;
  378. align-items: center;
  379. justify-content: space-between;
  380. margin-bottom: 0.42667rem;
  381. }
  382. .md-field-heading {
  383. flex: 1 1 0%;
  384. }
  385. .md-field-action {
  386. flex-shrink: 0;
  387. display: inline-flex;
  388. align-items: center;
  389. align-self: flex-start;
  390. justify-content: flex-end;
  391. margin-left: 0.16rem;
  392. color: #858b9c;
  393. font-size: 0.32rem;
  394. }
  395. .md-field-title {
  396. color: #111a34;
  397. font-size: 0.48rem;
  398. font-weight: 500;
  399. line-height: 1;
  400. }
  401. .md-field-brief {
  402. margin-top: 0.10667rem;
  403. color: #858b9c;
  404. font-size: 0.32rem;
  405. line-height: 1.4;
  406. }
  407. .md-field-footer {
  408. margin-top: 0.26667rem;
  409. }
  410. .md-field:disabled .md-field-title,
  411. .md-field.is-disabled .md-field-title,
  412. .md-field:disabled .md-field-brief,
  413. .md-field.is-disabled .md-field-brief,
  414. .md-field:disabled .md-field-action,
  415. .md-field.is-disabled .md-field-action,
  416. .md-field:disabled .md-field-content,
  417. .md-field.is-disabled .md-field-content,
  418. .md-field:disabled .md-field-footer,
  419. .md-field.is-disabled .md-field-footer {
  420. color: #c5cad5;
  421. }
  422. .md-cell-item {
  423. position: relative;
  424. }
  425. .md-cell-item.no-border .md-cell-item-body::before {
  426. display: none;
  427. }
  428. .md-cell-item-body {
  429. position: relative;
  430. display: flex;
  431. align-items: center;
  432. justify-content: space-between;
  433. min-height: 1.33333rem;
  434. padding-top: 0.42667rem;
  435. padding-bottom: 0.42667rem;
  436. box-sizing: border-box;
  437. }
  438. .md-cell-item-body::before {
  439. content: '';
  440. position: absolute;
  441. z-index: 2;
  442. transform-origin: 100% 50%;
  443. transform: scaleY(0.5) translateY(100%);
  444. bottom: 0;
  445. left: 0;
  446. right: auto;
  447. top: auto;
  448. width: 100%;
  449. border-bottom: solid 0.02667rem #e2e4ea;
  450. transform-origin: 50% 100%;
  451. }
  452. @media (min-resolution: 3dppx) {
  453. .md-cell-item-body::before {
  454. transform: scaleY(0.33) translateY(100%);
  455. }
  456. }
  457. .md-cell-item-body.multilines {
  458. padding-top: 0.48rem;
  459. padding-bottom: 0.48rem;
  460. }
  461. .md-cell-item-left {
  462. flex-shrink: 0;
  463. margin-right: 0.42667rem;
  464. }
  465. .md-cell-item-content {
  466. flex: 1 1 0%;
  467. color: #111a34;
  468. font-size: 0.42667rem;
  469. line-height: 1.2;
  470. }
  471. .md-cell-item-right {
  472. flex-shrink: 0;
  473. margin-left: 0.16rem;
  474. display: inline-flex;
  475. align-items: center;
  476. justify-content: flex-end;
  477. color: #858b9c;
  478. font-size: 0.37333rem;
  479. }
  480. .md-cell-item-right .md-icon-arrow-right {
  481. margin-left: 0.08rem;
  482. margin-right: -0.08rem;
  483. color: #c5cad5;
  484. }
  485. .md-cell-item-title {
  486. line-height: 1.2;
  487. }
  488. .md-cell-item-brief {
  489. color: #858b9c;
  490. font-size: 0.32rem;
  491. line-height: 1.4;
  492. margin-top: 0.10667rem;
  493. }
  494. .md-cell-item-children {
  495. padding: 0.42667rem 0;
  496. }
  497. .md-cell-item.is-disabled,
  498. .md-cell-item.is-disabled .md-cell-item-content,
  499. .md-cell-item.is-disabled .md-cell-item-title,
  500. .md-cell-item.is-disabled .md-cell-item-brief,
  501. .md-cell-item.is-disabled .md-cell-item-left,
  502. .md-cell-item.is-disabled .md-cell-item-right,
  503. .md-cell-item.is-disabled .md-cell-item-children {
  504. color: #c5cad5;
  505. }
  506. .md-field-item {
  507. position: relative;
  508. }
  509. .md-field-item-content {
  510. position: relative;
  511. display: flex;
  512. align-items: center;
  513. justify-content: space-between;
  514. min-height: 1.33333rem;
  515. padding-top: 0.4rem;
  516. padding-bottom: 0.4rem;
  517. box-sizing: border-box;
  518. }
  519. .md-field-item-content::before {
  520. content: '';
  521. position: absolute;
  522. z-index: 2;
  523. transform-origin: 100% 50%;
  524. transform: scaleY(0.5) translateY(100%);
  525. bottom: 0;
  526. left: 0;
  527. right: auto;
  528. top: auto;
  529. width: 100%;
  530. border-bottom: solid 0.02667rem #e2e4ea;
  531. transform-origin: 50% 100%;
  532. }
  533. @media (min-resolution: 3dppx) {
  534. .md-field-item-content::before {
  535. transform: scaleY(0.33) translateY(100%);
  536. }
  537. }
  538. .md-field-item-title {
  539. flex-shrink: 0;
  540. margin-right: 0.13333rem;
  541. font-size: 0.42667rem;
  542. }
  543. .md-field-item-left {
  544. flex-shrink: 0;
  545. margin-right: 0.16rem;
  546. display: inline-flex;
  547. align-items: center;
  548. justify-content: flex-start;
  549. color: #858b9c;
  550. font-size: 0.37333rem;
  551. }
  552. .md-field-item-control {
  553. position: relative;
  554. flex: 1 1 0%;
  555. color: #111a34;
  556. font-size: 0.42667rem;
  557. font-weight: 500;
  558. }
  559. .md-field-item-placeholder {
  560. color: #c5cad5;
  561. font-weight: 400;
  562. }
  563. .md-field-item-right {
  564. position: relative;
  565. flex-shrink: 0;
  566. margin-left: 0.16rem;
  567. display: inline-flex;
  568. align-items: center;
  569. justify-content: flex-end;
  570. color: #858b9c;
  571. font-size: 0.37333rem;
  572. }
  573. .md-field-item-right .md-icon-arrow-right {
  574. margin-right: -0.08rem;
  575. color: #c5cad5;
  576. }
  577. .md-field-item-children {
  578. font-size: 0.32rem;
  579. margin-top: 0.26667rem;
  580. }
  581. .md-field-item.is-solid .md-field-item-title {
  582. width: 2.13333rem;
  583. }
  584. .md-field-item.is-disabled .md-field-item-control,
  585. .md-field-item.is-disabled .md-field-item-left,
  586. .md-field-item.is-disabled .md-field-item-right {
  587. color: #c5cad5;
  588. }
  589. .md-field-item.is-align-right .md-field-item-control {
  590. text-align: right;
  591. }
  592. .md-field-item.is-android .md-field-item-control {
  593. font-weight: bold;
  594. }
  595. .md-bounce-enter-active {
  596. animation: bounce-in 300ms linear;
  597. }
  598. .md-bounce-leave-active {
  599. animation: zoom-out 250ms linear;
  600. }
  601. .md-zoom-enter,
  602. .md-zoom-leave-to {
  603. opacity: 0.01;
  604. transform: scale(0.75);
  605. }
  606. .md-zoom-enter-active {
  607. transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  608. }
  609. .md-zoom-leave-active {
  610. transition: all 250ms linear;
  611. }
  612. .md-punch-enter,
  613. .md-punch-leave-to {
  614. opacity: 0.01;
  615. transform: scale(1.35);
  616. }
  617. .md-punch-enter-active {
  618. transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  619. }
  620. .md-punch-leave-active {
  621. transition: all 250ms linear;
  622. }
  623. .md-slide-up-enter,
  624. .md-slide-up-leave-to {
  625. transform: translate3d(0, 100%, 0);
  626. }
  627. .md-slide-up-enter-active {
  628. transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  629. }
  630. .md-slide-up-leave-active {
  631. transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
  632. }
  633. .md-slide-right-enter,
  634. .md-slide-right-leave-to {
  635. transform: translate3d(-100%, 0, 0);
  636. }
  637. .md-slide-right-enter-active {
  638. transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  639. }
  640. .md-slide-right-leave-active {
  641. transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
  642. }
  643. .md-slide-left-enter,
  644. .md-slide-left-leave-to {
  645. transform: translate3d(100%, 0, 0);
  646. }
  647. .md-slide-left-enter-active {
  648. transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  649. }
  650. .md-slide-left-leave-active {
  651. transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
  652. }
  653. .md-slide-down-enter,
  654. .md-slide-down-leave-to {
  655. transform: translate3d(0, -100%, 0);
  656. }
  657. .md-slide-down-enter-active {
  658. transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  659. }
  660. .md-slide-down-leave-active {
  661. transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
  662. }
  663. .md-fade-enter,
  664. .md-fade-leave-to {
  665. opacity: 0.01;
  666. }
  667. .md-fade-enter-active {
  668. transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  669. }
  670. .md-fade-leave-active {
  671. transition: opacity 250ms linear;
  672. }
  673. .md-fade-up-enter,
  674. .md-fade-up-leave-to {
  675. opacity: 0.01;
  676. transform: translate3d(0, 20%, 0);
  677. }
  678. .md-fade-up-enter-active {
  679. transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  680. }
  681. .md-fade-up-leave-active {
  682. transition: all 250ms linear;
  683. }
  684. .md-fade-down-enter,
  685. .md-fade-down-leave-to {
  686. opacity: 0.01;
  687. transform: translate3d(0, -20%, 0);
  688. }
  689. .md-fade-down-enter-active {
  690. transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  691. }
  692. .md-fade-down-leave-active {
  693. transition: all 250ms linear;
  694. }
  695. .md-fade-right-enter,
  696. .md-fade-right-leave-to {
  697. opacity: 0.01;
  698. transform: translate3d(-20%, 0, 0);
  699. }
  700. .md-fade-right-enter-active {
  701. transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  702. }
  703. .md-fade-right-leave-active {
  704. transition: all 250ms linear;
  705. }
  706. .md-fade-left-enter,
  707. .md-fade-left-leave-to {
  708. opacity: 0.01;
  709. transform: translate3d(20%, 0, 0);
  710. }
  711. .md-fade-left-enter-active {
  712. transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  713. }
  714. .md-fade-left-leave-active {
  715. transition: all 250ms linear;
  716. }
  717. .md-fly-enter-active {
  718. animation: fly-in 600ms;
  719. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  720. }
  721. .md-fly-leave-active {
  722. animation: zoom-out 250ms;
  723. }
  724. @-moz-keyframes fly-in {
  725. 0% {
  726. opacity: 0.5;
  727. transform: scale(0.5) translate3d(0, 0.66667rem, 0);
  728. }
  729. 45% {
  730. opacity: 1;
  731. transform: scale(1.05) translate3d(0, -0.66667rem, 0);
  732. }
  733. 100% {
  734. transform: scale(1) translate3d(0, 0, 0);
  735. }
  736. }
  737. @-webkit-keyframes fly-in {
  738. 0% {
  739. opacity: 0.5;
  740. transform: scale(0.5) translate3d(0, 0.66667rem, 0);
  741. }
  742. 45% {
  743. opacity: 1;
  744. transform: scale(1.05) translate3d(0, -0.66667rem, 0);
  745. }
  746. 100% {
  747. transform: scale(1) translate3d(0, 0, 0);
  748. }
  749. }
  750. @-o-keyframes fly-in {
  751. 0% {
  752. opacity: 0.5;
  753. transform: scale(0.5) translate3d(0, 0.66667rem, 0);
  754. }
  755. 45% {
  756. opacity: 1;
  757. transform: scale(1.05) translate3d(0, -0.66667rem, 0);
  758. }
  759. 100% {
  760. transform: scale(1) translate3d(0, 0, 0);
  761. }
  762. }
  763. @keyframes fly-in {
  764. 0% {
  765. opacity: 0.5;
  766. transform: scale(0.5) translate3d(0, 0.66667rem, 0);
  767. }
  768. 45% {
  769. opacity: 1;
  770. transform: scale(1.05) translate3d(0, -0.66667rem, 0);
  771. }
  772. 100% {
  773. transform: scale(1) translate3d(0, 0, 0);
  774. }
  775. }
  776. @-moz-keyframes bounce-in {
  777. 0% {
  778. transform: scale(0.5);
  779. }
  780. 45% {
  781. transform: scale(1.05);
  782. }
  783. 80% {
  784. transform: scale(0.95);
  785. }
  786. 100% {
  787. transform: scale(1);
  788. }
  789. }
  790. @-webkit-keyframes bounce-in {
  791. 0% {
  792. transform: scale(0.5);
  793. }
  794. 45% {
  795. transform: scale(1.05);
  796. }
  797. 80% {
  798. transform: scale(0.95);
  799. }
  800. 100% {
  801. transform: scale(1);
  802. }
  803. }
  804. @-o-keyframes bounce-in {
  805. 0% {
  806. transform: scale(0.5);
  807. }
  808. 45% {
  809. transform: scale(1.05);
  810. }
  811. 80% {
  812. transform: scale(0.95);
  813. }
  814. 100% {
  815. transform: scale(1);
  816. }
  817. }
  818. @keyframes bounce-in {
  819. 0% {
  820. transform: scale(0.5);
  821. }
  822. 45% {
  823. transform: scale(1.05);
  824. }
  825. 80% {
  826. transform: scale(0.95);
  827. }
  828. 100% {
  829. transform: scale(1);
  830. }
  831. }
  832. @-moz-keyframes zoom-out {
  833. to {
  834. opacity: 0.01;
  835. transform: scale(0.75);
  836. }
  837. }
  838. @-webkit-keyframes zoom-out {
  839. to {
  840. opacity: 0.01;
  841. transform: scale(0.75);
  842. }
  843. }
  844. @-o-keyframes zoom-out {
  845. to {
  846. opacity: 0.01;
  847. transform: scale(0.75);
  848. }
  849. }
  850. @keyframes zoom-out {
  851. to {
  852. opacity: 0.01;
  853. transform: scale(0.75);
  854. }
  855. }
  856. .md-popup {
  857. top: 0;
  858. right: 0;
  859. bottom: 0;
  860. left: 0;
  861. position: fixed;
  862. display: flex;
  863. pointer-events: none;
  864. z-index: 1000;
  865. }
  866. .md-popup.center {
  867. align-items: center;
  868. justify-content: center;
  869. }
  870. .md-popup.top {
  871. flex-direction: column;
  872. justify-content: flex-start;
  873. }
  874. .md-popup.top .md-popup-box {
  875. width: 100%;
  876. }
  877. .md-popup.bottom {
  878. flex-direction: column;
  879. justify-content: flex-end;
  880. }
  881. .md-popup.bottom .md-popup-box {
  882. width: 100%;
  883. }
  884. .md-popup.left {
  885. justify-content: flex-start;
  886. }
  887. .md-popup.left .md-popup-box {
  888. height: 100%;
  889. }
  890. .md-popup.right {
  891. justify-content: flex-end;
  892. }
  893. .md-popup.right .md-popup-box {
  894. height: 100%;
  895. }
  896. .md-popup.inner-popup .md-popup-box {
  897. background-color: #fff;
  898. border-radius: 0.10667rem 0.10667rem 0 0;
  899. }
  900. .md-popup.large-radius.inner-popup .md-popup-box {
  901. border-radius: 0.53333rem 0.53333rem 0 0;
  902. }
  903. .md-popup-mask {
  904. top: 0;
  905. right: 0;
  906. bottom: 0;
  907. left: 0;
  908. position: absolute;
  909. pointer-events: auto;
  910. z-index: 1;
  911. background-color: rgba(37,38,45,0.7);
  912. }
  913. .md-popup-box {
  914. position: relative;
  915. pointer-events: auto;
  916. z-index: 2;
  917. max-width: 100%;
  918. max-height: 100%;
  919. overflow: auto;
  920. }
  921. .md-mask-fade-enter,
  922. .md-mask-fade-leave-to {
  923. opacity: 0.01;
  924. }
  925. .md-mask-fade-enter-active,
  926. .md-mask-fade-leave-active {
  927. transition: opacity 250ms;
  928. }
  929. .md-number-keyboard-container {
  930. position: relative;
  931. -webkit-user-select: none;
  932. -webkit-tap-highlight-color: transparent;
  933. display: flex;
  934. width: 100%;
  935. height: 5.70667rem;
  936. }
  937. .md-number-keyboard-container::after {
  938. content: '';
  939. position: absolute;
  940. z-index: 2;
  941. transform-origin: 100% 50%;
  942. transform: scaleY(0.5) translateY(-100%);
  943. top: 0;
  944. left: 0;
  945. right: auto;
  946. bottom: auto;
  947. width: 100%;
  948. border-top: solid 0.02667rem #e2e4ea;
  949. transform-origin: 50% 0;
  950. }
  951. @media (min-resolution: 3dppx) {
  952. .md-number-keyboard-container::after {
  953. transform: scaleY(0.33) translateY(-100%);
  954. }
  955. }
  956. .md-number-keyboard-container .keyboard-number,
  957. .md-number-keyboard-container .keyboard-operate {
  958. display: flex;
  959. }
  960. .md-number-keyboard-container .keyboard-number {
  961. flex: 3;
  962. background: #f9fafb;
  963. }
  964. .md-number-keyboard-container .keyboard-number .keyboard-number-list {
  965. float: left;
  966. width: 100%;
  967. }
  968. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item {
  969. position: relative;
  970. float: left;
  971. width: 33.3%;
  972. height: 1.42667rem;
  973. padding-top: 0.06667rem;
  974. text-align: center;
  975. line-height: 1.42667rem;
  976. font-size: 0.69333rem;
  977. font-weight: 500;
  978. font-family: DINPro-Medium, DIN Alternate, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  979. color: #111a34;
  980. transition: background 0.3s;
  981. background: #fff;
  982. box-sizing: border-box;
  983. }
  984. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item::before {
  985. content: '';
  986. position: absolute;
  987. z-index: 2;
  988. transform-origin: 100% 50%;
  989. transform: scaleX(0.5) translateX(100%);
  990. top: 0;
  991. right: 0;
  992. left: auto;
  993. bottom: auto;
  994. border-right: solid 0.02667rem #e2e4ea;
  995. height: 100%;
  996. transform-origin: 100% 50%;
  997. }
  998. @media (min-resolution: 3dppx) {
  999. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item::before {
  1000. transform: scaleX(0.33) translateX(100%);
  1001. }
  1002. }
  1003. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item::after {
  1004. content: '';
  1005. position: absolute;
  1006. z-index: 2;
  1007. transform-origin: 100% 50%;
  1008. transform: scaleY(0.5) translateY(-100%);
  1009. top: 0;
  1010. left: 0;
  1011. right: auto;
  1012. bottom: auto;
  1013. width: 100%;
  1014. border-top: solid 0.02667rem #e2e4ea;
  1015. transform-origin: 50% 0;
  1016. }
  1017. @media (min-resolution: 3dppx) {
  1018. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item::after {
  1019. transform: scaleY(0.33) translateY(-100%);
  1020. }
  1021. }
  1022. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item.no-bg {
  1023. background: transparent;
  1024. }
  1025. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:nth-of-type(-n+3)::after {
  1026. display: none;
  1027. }
  1028. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:nth-of-type(3n) {
  1029. width: 33.4%;
  1030. }
  1031. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item.delete {
  1032. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABECAMAAABJe8AqAAAAdVBMVEUAAABBSF5GTWBBSF5CSmJBSF1BSF1hYXVCSV1CSF5SXGtBSV1BSF5DSV9ESl5FTWRBSV5BSF5BSV1BSF5BSV1CSl5BSV5CSV5CSV5DSl9DS2JOTmNBSF1CSV9CSl5ETGBJSWRCSV5CSV1ES19CSF1CSl5BSF2IZB1/AAAAJnRSTlMA1yffH5T1BfudCuvLWUQW8OTUtamjj4FzNy0QwIxNQBxoZkvCZK9RzSgAAAGQSURBVFjDzNW5jsJQDIXhQ8LNwpKwDfswA4Xf/xEpXLhwbo4AWcJVlEj/V6Q4yN9ePr8J8reUWOBcxQKXUmKBrcQCB4kFbqK3xNtXjAHFSvt7xACzjfavdRCw0/66Rwxw1H5zQgzw1yjwQAzwP9d+ixigXmh/MQsCWu3Pp4gBHtpvOsQAp0qBI2KAfq39HWKA+qr9zYs/uB4F/EauikzoJ2HoppNuDPAbecv1RdJQv5Sq44Bt5CHfV8H1xQQH+I3cZvq9fk9DfZFfAthGlhfYDaUSf+kB28jqDDCB9B3gN5ILvG+A30gukL4D3EZSgfQd4DeSC/bIAb+RXGB9A2wj77CjQmt9AmQ2kgrWJ0B+I7mQwIH8RnIh4SuAZ3VmbgMACMNAL0IF7L8iokposaLYEyDx5OyD3CKBQ6avqcBDKx8VMezW57DrH9fAJIHTj0wa+gKxhQxeCtERGN/hVyW+5wJiWqGAHSXQtMZmgpqqhIegpjonE9RVqZVLQWDWac0gqLlavgQ11/u1HxRBUH6BA3XHDDIvn0o0AAAAAElFTkSuQmCC) center no-repeat;
  1033. background-size: 0.61333rem;
  1034. }
  1035. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item.slidedown {
  1036. background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABeAgMAAAC7uhn4AAAACVBMVEUAAAASHDYRGjQxUFCHAAAAAnRSTlMAgJsrThgAAAB/SURBVEjH7dUxDoAgEETRsbGgtvI0XkdP4xEoaOSUJgQzJMMmlpvAtL94YRuQ7flqEf2F2WazWsjtotvm6WbOWvgO5rx5utlsP5uzP84ehtlaX3xDt9R2oLOrpAe97aUlEySnIDkFySlITkFyCpJTkJyCyT4pOQXJ6U7Y29DuBThrzOxbC3kTAAAAAElFTkSuQmCC) center no-repeat;
  1037. background-size: 0.72rem;
  1038. }
  1039. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item.large-item {
  1040. width: 66.6%;
  1041. }
  1042. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:active,
  1043. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item.active {
  1044. background-color: #f9fafb;
  1045. }
  1046. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:before,
  1047. .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:after {
  1048. pointer-events: none;
  1049. }
  1050. .md-number-keyboard-container .keyboard-operate {
  1051. flex: 1;
  1052. }
  1053. .md-number-keyboard-container .keyboard-operate .keyboard-operate-list {
  1054. position: relative;
  1055. float: left;
  1056. width: 100%;
  1057. display: flex;
  1058. flex-direction: column;
  1059. }
  1060. .md-number-keyboard-container .keyboard-operate .keyboard-operate-list .keyboard-operate-item {
  1061. position: relative;
  1062. float: left;
  1063. width: 100%;
  1064. background: #fff;
  1065. transition: background 0.3s;
  1066. }
  1067. .md-number-keyboard-container .keyboard-operate .keyboard-operate-list .keyboard-operate-item.delete {
  1068. height: 1.42667rem;
  1069. background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABECAMAAABJe8AqAAAAdVBMVEUAAABBSF5GTWBBSF5CSmJBSF1BSF1hYXVCSV1CSF5SXGtBSV1BSF5DSV9ESl5FTWRBSV5BSF5BSV1BSF5BSV1CSl5BSV5CSV5CSV5DSl9DS2JOTmNBSF1CSV9CSl5ETGBJSWRCSV5CSV1ES19CSF1CSl5BSF2IZB1/AAAAJnRSTlMA1yffH5T1BfudCuvLWUQW8OTUtamjj4FzNy0QwIxNQBxoZkvCZK9RzSgAAAGQSURBVFjDzNW5jsJQDIXhQ8LNwpKwDfswA4Xf/xEpXLhwbo4AWcJVlEj/V6Q4yN9ePr8J8reUWOBcxQKXUmKBrcQCB4kFbqK3xNtXjAHFSvt7xACzjfavdRCw0/66Rwxw1H5zQgzw1yjwQAzwP9d+ixigXmh/MQsCWu3Pp4gBHtpvOsQAp0qBI2KAfq39HWKA+qr9zYs/uB4F/EauikzoJ2HoppNuDPAbecv1RdJQv5Sq44Bt5CHfV8H1xQQH+I3cZvq9fk9DfZFfAthGlhfYDaUSf+kB28jqDDCB9B3gN5ILvG+A30gukL4D3EZSgfQd4DeSC/bIAb+RXGB9A2wj77CjQmt9AmQ2kgrWJ0B+I7mQwIH8RnIh4SuAZ3VmbgMACMNAL0IF7L8iokposaLYEyDx5OyD3CKBQ6avqcBDKx8VMezW57DrH9fAJIHTj0wa+gKxhQxeCtERGN/hVyW+5wJiWqGAHSXQtMZmgpqqhIegpjonE9RVqZVLQWDWac0gqLlavgQ11/u1HxRBUH6BA3XHDDIvn0o0AAAAAElFTkSuQmCC) center no-repeat;
  1070. background-size: 0.56rem;
  1071. display: flex;
  1072. flex: 1;
  1073. }
  1074. .md-number-keyboard-container .keyboard-operate .keyboard-operate-list .keyboard-operate-item.delete:active {
  1075. background-color: #f9fafb;
  1076. }
  1077. .md-number-keyboard-container .keyboard-operate .keyboard-operate-list .keyboard-operate-item.confirm {
  1078. padding-top: 0.06667rem;
  1079. color: #fff;
  1080. font-size: 0.48rem;
  1081. background: #0057ff;
  1082. display: flex;
  1083. flex: 1;
  1084. align-items: center;
  1085. justify-content: center;
  1086. }
  1087. .md-number-keyboard-container .keyboard-operate .keyboard-operate-list .keyboard-operate-item.confirm:active {
  1088. background-color: #2a78dc;
  1089. }
  1090. .md-number-keyboard .md-popup {
  1091. z-index: 1302;
  1092. }
  1093. .md-number-keyboard .md-popup-box {
  1094. padding-top: 1px;
  1095. background-color: #f9fafb;
  1096. padding-bottom: constant(safe-area-inset-bottom);
  1097. padding-bottom: env(safe-area-inset-bottom);
  1098. }
  1099. .md-input-item .md-field-item-content {
  1100. padding-top: 0;
  1101. padding-bottom: 0;
  1102. }
  1103. .md-input-item .md-field-item-control {
  1104. display: flex;
  1105. align-items: center;
  1106. }
  1107. .md-input-item-clear {
  1108. padding: 0.13333rem 0;
  1109. color: #c5cad5;
  1110. }
  1111. .md-input-item-clear .md-icon {
  1112. display: flex;
  1113. background: #f9fafb;
  1114. border-radius: 50%;
  1115. }
  1116. .md-input-item-input,
  1117. .md-input-item-fake {
  1118. width: 100%;
  1119. height: 1.33333rem;
  1120. color: #111a34;
  1121. font-size: 0.42667rem;
  1122. font-weight: 500;
  1123. font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  1124. line-height: 1;
  1125. -webkit-appearance: none;
  1126. border: none;
  1127. background: transparent;
  1128. outline: none;
  1129. box-sizing: border-box;
  1130. -webkit-tap-highlight-color: transparent;
  1131. appearance: none;
  1132. }
  1133. .md-input-item-input:disabled,
  1134. .md-input-item-input[disabled] {
  1135. opacity: 1;
  1136. }
  1137. .md-input-item-input::-webkit-input-placeholder {
  1138. color: #c5cad5;
  1139. font-weight: 400;
  1140. }
  1141. .md-input-item-input::-webkit-outer-spin-button,
  1142. .md-input-item-input::-webkit-inner-spin-button {
  1143. -webkit-appearance: none;
  1144. }
  1145. .md-input-item-fake {
  1146. line-height: 1.33333rem;
  1147. white-space: nowrap;
  1148. overflow: hidden;
  1149. text-overflow: ellipsis;
  1150. cursor: text;
  1151. }
  1152. .md-input-item-fake::after {
  1153. position: relative;
  1154. z-index: 2;
  1155. display: none;
  1156. content: " ";
  1157. height: 1.06667rem;
  1158. border-right: solid 1.5px #111a34;
  1159. }
  1160. .md-input-item-fake.is-focus:after {
  1161. display: inline;
  1162. }
  1163. .md-input-item-fake.is-waiting:after {
  1164. animation: keyboard-cursor infinite 1s step-start;
  1165. }
  1166. .md-input-item-fake-placeholder {
  1167. position: absolute;
  1168. top: 0;
  1169. left: 0;
  1170. width: 100%;
  1171. color: #c5cad5;
  1172. font-weight: 400;
  1173. }
  1174. .md-input-item-msg,
  1175. .md-input-item-brief {
  1176. word-break: break-all;
  1177. word-wrap: break-word;
  1178. }
  1179. .md-input-item-msg:not(:last-child),
  1180. .md-input-item-brief:not(:last-child) {
  1181. margin-bottom: 0.13333rem;
  1182. }
  1183. .md-input-item-brief {
  1184. font-size: 0.32rem;
  1185. color: #858b9c;
  1186. }
  1187. .md-input-item-msg {
  1188. font-size: 0.32rem;
  1189. color: #ff5257;
  1190. }
  1191. .md-input-item.left .md-input-item-input,
  1192. .md-input-item.left .md-input-item-fake {
  1193. text-align: left;
  1194. }
  1195. .md-input-item.center .md-input-item-input,
  1196. .md-input-item.center .md-input-item-fake {
  1197. text-align: center;
  1198. }
  1199. .md-input-item.right .md-input-item-input,
  1200. .md-input-item.right .md-input-item-fake {
  1201. text-align: right;
  1202. }
  1203. .md-input-item.is-title-latent .md-field-item-title {
  1204. position: absolute;
  1205. top: 50%;
  1206. left: 0;
  1207. height: auto;
  1208. font-size: 0.34667rem;
  1209. color: #666f83;
  1210. transform: translate3d(0, -50%, 0);
  1211. transition: all 0.3s ease;
  1212. opacity: 0;
  1213. will-change: auto;
  1214. }
  1215. .md-input-item.is-title-latent .md-field-item-content {
  1216. min-height: 1.53333rem;
  1217. }
  1218. .md-input-item.is-title-latent .md-field-item-content,
  1219. .md-input-item.is-title-latent .md-field-item-left,
  1220. .md-input-item.is-title-latent .md-field-item-right,
  1221. .md-input-item.is-title-latent .md-input-item-input,
  1222. .md-input-item.is-title-latent .md-input-item-fake {
  1223. padding-top: 0.26667rem;
  1224. }
  1225. .md-input-item.is-title-latent.is-active .md-field-item-title {
  1226. opacity: 1;
  1227. top: 0.26667rem;
  1228. transform: translate3d(0, 0, 0);
  1229. }
  1230. .md-input-item.is-highlight.is-focus .md-field-item-content::before {
  1231. content: '';
  1232. position: absolute;
  1233. z-index: 2;
  1234. transform-origin: 100% 50%;
  1235. transform: scaleY(0.5) translateY(100%);
  1236. bottom: 0;
  1237. left: 0;
  1238. right: auto;
  1239. top: auto;
  1240. width: 100%;
  1241. border-bottom: solid 0.05333rem #111a34;
  1242. transform-origin: 50% 100%;
  1243. }
  1244. @media (min-resolution: 3dppx) {
  1245. .md-input-item.is-highlight.is-focus .md-field-item-content::before {
  1246. transform: scaleY(0.33) translateY(100%);
  1247. }
  1248. }
  1249. .md-input-item.is-disabled .md-input-item-input,
  1250. .md-input-item.is-disabled .md-input-item-fake,
  1251. .md-input-item.is-disabled .md-input-item-fake-placeholder {
  1252. -webkit-text-fill-color: #858b9c;
  1253. color: #858b9c;
  1254. }
  1255. .md-input-item.is-amount .md-input-item-input,
  1256. .md-input-item.is-amount .md-input-item-fake {
  1257. font-family: DINPro-Medium, DIN Alternate, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  1258. }
  1259. .md-input-item.is-amount.large .md-input-item-input,
  1260. .md-input-item.is-amount.large .md-input-item-fake {
  1261. padding-top: 0.10667rem;
  1262. }
  1263. .md-input-item.large .md-input-item-input,
  1264. .md-input-item.large .md-input-item-fake {
  1265. padding-bottom: 0.2rem;
  1266. font-size: 1.06667rem;
  1267. }
  1268. .md-input-item.large .md-input-item-input::-webkit-input-placeholder {
  1269. font-size: 0.8rem;
  1270. line-height: 1.33333rem;
  1271. }
  1272. .md-input-item.is-error .md-field-item-content::before {
  1273. content: '';
  1274. position: absolute;
  1275. z-index: 2;
  1276. transform-origin: 100% 50%;
  1277. transform: scaleY(0.5) translateY(100%);
  1278. bottom: 0;
  1279. left: 0;
  1280. right: auto;
  1281. top: auto;
  1282. width: 100%;
  1283. border-bottom: solid 0.05333rem #ff5257;
  1284. transform-origin: 50% 100%;
  1285. }
  1286. @media (min-resolution: 3dppx) {
  1287. .md-input-item.is-error .md-field-item-content::before {
  1288. transform: scaleY(0.33) translateY(100%);
  1289. }
  1290. }
  1291. .md-input-item.is-ios .md-input-item-input::-webkit-input-placeholder {
  1292. position: relative;
  1293. top: 0.04rem;
  1294. overflow: visible;
  1295. }
  1296. .md-input-item.is-ios .md-input-item-fake::after {
  1297. border-right: solid 0.08rem #2c6cf5;
  1298. border-radius: 0.02667rem;
  1299. }
  1300. .md-input-item.is-android .md-input-item-fake::after {
  1301. border-right: solid 0.05333rem #111a34;
  1302. }
  1303. .md-input-item.is-android .md-input-item-input,
  1304. .md-input-item.is-android .md-input-item-fake {
  1305. font-weight: bold;
  1306. }
  1307. @-webkit-keyframes keyboard-cursor {
  1308. 0% {
  1309. opacity: 1;
  1310. }
  1311. 50% {
  1312. opacity: 0;
  1313. }
  1314. to {
  1315. opacity: 1;
  1316. }
  1317. }
  1318. @-moz-keyframes keyboard-cursor {
  1319. 0% {
  1320. opacity: 1;
  1321. }
  1322. 50% {
  1323. opacity: 0;
  1324. }
  1325. to {
  1326. opacity: 1;
  1327. }
  1328. }
  1329. @-webkit-keyframes keyboard-cursor {
  1330. 0% {
  1331. opacity: 1;
  1332. }
  1333. 50% {
  1334. opacity: 0;
  1335. }
  1336. to {
  1337. opacity: 1;
  1338. }
  1339. }
  1340. @-o-keyframes keyboard-cursor {
  1341. 0% {
  1342. opacity: 1;
  1343. }
  1344. 50% {
  1345. opacity: 0;
  1346. }
  1347. to {
  1348. opacity: 1;
  1349. }
  1350. }
  1351. @keyframes keyboard-cursor {
  1352. 0% {
  1353. opacity: 1;
  1354. }
  1355. 50% {
  1356. opacity: 0;
  1357. }
  1358. to {
  1359. opacity: 1;
  1360. }
  1361. }
  1362. .md-radio-item .md-radio {
  1363. margin-top: 0;
  1364. margin-bottom: 0;
  1365. }
  1366. .md-radio-list .md-cell-item-body.multilines .md-cell-item-title {
  1367. font-weight: 500;
  1368. }
  1369. .md-radio-list.is-align-center .md-cell-item-content {
  1370. text-align: center;
  1371. }
  1372. .md-radio-list.is-align-center .md-cell-left,
  1373. .md-radio-list.is-align-center .md-cell-right {
  1374. display: none;
  1375. }
  1376. .md-tag {
  1377. color: #111a34;
  1378. font-size: 0.37333rem;
  1379. text-align: center;
  1380. display: inline-block;
  1381. -webkit-user-select: none;
  1382. }
  1383. .md-tag .default {
  1384. background: rgba(0,0,0,0);
  1385. color: #0057ff;
  1386. border-color: #0057ff;
  1387. }
  1388. .md-tag .shape-square {
  1389. padding: 0 0.16rem;
  1390. border-radius: 50%;
  1391. }
  1392. .md-tag .shape-square {
  1393. padding: 0 0.16rem;
  1394. border-radius: 0;
  1395. }
  1396. .md-tag .shape-fillet {
  1397. padding: 0.02667rem 0.10667rem;
  1398. border-radius: 0.02667rem;
  1399. }
  1400. .md-tag .shape-quarter {
  1401. position: relative;
  1402. display: flex;
  1403. width: 0.74667rem;
  1404. height: 0.74667rem;
  1405. background: transparent !important;
  1406. overflow: hidden;
  1407. }
  1408. .md-tag .shape-quarter .quarter-content {
  1409. position: relative;
  1410. left: 10%;
  1411. bottom: 10%;
  1412. display: flex;
  1413. flex: 1;
  1414. z-index: 2;
  1415. justify-content: center;
  1416. align-items: center;
  1417. }
  1418. .md-tag .shape-quarter .quarter-bg {
  1419. position: absolute;
  1420. top: -100%;
  1421. left: 0;
  1422. width: 200%;
  1423. height: 200%;
  1424. border-radius: 50%;
  1425. }
  1426. .md-tag .shape-quarter .quarter-wrap {
  1427. display: inline-block;
  1428. padding: 0.21333rem 0.16rem 0.13333rem 0.34667rem;
  1429. }
  1430. .md-tag .shape-quarter .quarter-wrap-hidden {
  1431. visibility: hidden;
  1432. display: inline-block;
  1433. padding: 0.21333rem 0.16rem 0.13333rem 0.34667rem;
  1434. }
  1435. .md-tag .shape-quarter.size-small {
  1436. width: 0.53333rem;
  1437. height: 0.53333rem;
  1438. }
  1439. .md-tag .shape-quarter.size-tiny {
  1440. width: 0.32rem;
  1441. height: 0.32rem;
  1442. }
  1443. .md-tag .shape-coupon {
  1444. position: relative;
  1445. padding: 0 0.13333rem;
  1446. background: transparent !important;
  1447. }
  1448. .md-tag .shape-coupon .coupon-container {
  1449. padding: 0.02667rem 0;
  1450. }
  1451. .md-tag .shape-coupon .left-coupon,
  1452. .md-tag .shape-coupon .right-coupon {
  1453. position: absolute;
  1454. top: 0;
  1455. width: 0.13333rem;
  1456. height: 100%;
  1457. }
  1458. .md-tag .shape-coupon .left-coupon {
  1459. left: 0;
  1460. }
  1461. .md-tag .shape-coupon .right-coupon {
  1462. right: 0;
  1463. }
  1464. .md-tag .shape-coupon.size-small {
  1465. padding: 0 0.10667rem;
  1466. }
  1467. .md-tag .shape-coupon.size-small .left-coupon,
  1468. .md-tag .shape-coupon.size-small .right-coupon {
  1469. width: 0.10667rem;
  1470. }
  1471. .md-tag .shape-coupon.size-tiny {
  1472. padding: 0 0.06667rem;
  1473. }
  1474. .md-tag .shape-coupon.size-tiny .left-coupon,
  1475. .md-tag .shape-coupon.size-tiny .right-coupon {
  1476. width: 0.06667rem;
  1477. }
  1478. .md-tag .shape-bubble {
  1479. width: 0.66667rem;
  1480. padding: 0.08rem 0;
  1481. border-radius: 50%;
  1482. border-bottom-left-radius: 0;
  1483. box-sizing: border-box;
  1484. }
  1485. .md-tag .shape-bubble.size-small {
  1486. width: 0.50667rem;
  1487. padding: 0.04rem 0;
  1488. }
  1489. .md-tag .shape-bubble.size-tiny {
  1490. width: 0.32rem;
  1491. padding: 0.02667rem 0;
  1492. }
  1493. .md-tag .size-large {
  1494. font-size: 0.34667rem;
  1495. }
  1496. .md-tag .size-small {
  1497. font-size: 0.26667rem;
  1498. }
  1499. .md-tag .size-tiny {
  1500. font-size: 0.16rem;
  1501. }
  1502. .md-tag .type-fill {
  1503. color: #fff;
  1504. background: #0057ff;
  1505. }
  1506. .md-tag .type-ghost {
  1507. border: 1px solid #0057ff;
  1508. background: rgba(0,0,0,0);
  1509. }
  1510. .md-tag .font-weight-normal {
  1511. font-weight: normal;
  1512. }
  1513. .md-tag .font-weight-bold {
  1514. font-weight: bold;
  1515. }
  1516. .md-tag .font-weight-bolder {
  1517. font-weight: bolder;
  1518. }
  1519. .md-tag .md-icon.icon-font {
  1520. font-size: inherit;
  1521. transform: scale(1.2);
  1522. }
  1523. .md-check-base-box {
  1524. position: relative;
  1525. display: inline-block;
  1526. text-align: center;
  1527. color: #111a34;
  1528. font-size: 0.42667rem;
  1529. padding: 0.16rem 0.26667rem;
  1530. border: 1px solid #c5cad5;
  1531. border-radius: 0.05333rem;
  1532. box-sizing: border-box;
  1533. overflow: hidden;
  1534. }
  1535. .md-check-base-box.is-checked {
  1536. color: #0057ff;
  1537. border-color: #0057ff;
  1538. }
  1539. .md-check-base-box.is-checked.is-disabled {
  1540. color: #0057ff;
  1541. border-color: #0057ff;
  1542. opacity: 0.6;
  1543. }
  1544. .md-check-base-box.is-disabled {
  1545. color: #c5cad5;
  1546. border-color: #c5cad5;
  1547. }
  1548. .md-check-base-box .md-tag {
  1549. position: absolute;
  1550. top: 0;
  1551. right: 0;
  1552. }
  1553. .md-check-base-box .md-tag .quarter-bg {
  1554. background-color: #0057ff;
  1555. }
  1556. .md-check {
  1557. display: flex;
  1558. align-items: center;
  1559. margin-top: 0.16rem;
  1560. margin-bottom: 0.16rem;
  1561. }
  1562. .md-check.is-checked .md-check-icon {
  1563. color: #2f86f6;
  1564. }
  1565. .md-check.is-disabled .md-check-icon,
  1566. .md-check.is-disabled .md-check-label {
  1567. color: #c5cad5;
  1568. }
  1569. .md-check-icon {
  1570. position: relative;
  1571. color: #c5cad5;
  1572. }
  1573. .md-check-icon .md-icon {
  1574. display: flex;
  1575. }
  1576. .md-check-label {
  1577. margin-left: 0.16rem;
  1578. font-size: inherit;
  1579. }
  1580. .md-check-item .md-check {
  1581. margin-top: 0;
  1582. margin-bottom: 0;
  1583. pointer-events: none;
  1584. }
  1585. .md-check-item .md-cell-item-body.multilines .md-cell-item-title {
  1586. font-weight: 500;
  1587. }
  1588. .md-check-list.is-align-center .md-cell-item-content {
  1589. text-align: center;
  1590. }
  1591. .md-check-list.is-align-center .md-cell-left,
  1592. .md-check-list.is-align-center .md-cell-right {
  1593. display: none;
  1594. }
  1595. .md-check-box {
  1596. position: relative;
  1597. display: inline-block;
  1598. text-align: center;
  1599. color: #111a34;
  1600. font-size: 0.42667rem;
  1601. padding: 0.16rem 0.26667rem;
  1602. border: 1px solid #c5cad5;
  1603. border-radius: 0.05333rem;
  1604. box-sizing: border-box;
  1605. overflow: hidden;
  1606. }
  1607. .md-check-box.is-checked {
  1608. color: #0057ff;
  1609. border-color: #0057ff;
  1610. }
  1611. .md-check-box.is-checked.is-disabled {
  1612. color: #0057ff;
  1613. border-color: #0057ff;
  1614. opacity: 0.6;
  1615. }
  1616. .md-check-box.is-disabled {
  1617. color: #c5cad5;
  1618. border-color: #c5cad5;
  1619. }
  1620. .md-check-box .md-tag {
  1621. position: absolute;
  1622. top: 0;
  1623. right: 0;
  1624. }
  1625. .md-check-box .md-tag .quarter-bg {
  1626. background-color: #0057ff;
  1627. }
  1628. .md-activity-indicator-rolling:after {
  1629. content: "";
  1630. display: table;
  1631. clear: both;
  1632. }
  1633. .md-activity-indicator-rolling .rolling-container {
  1634. position: relative;
  1635. float: left;
  1636. }
  1637. .md-activity-indicator-rolling .rolling {
  1638. float: left;
  1639. }
  1640. .md-activity-indicator-rolling .rolling circle.stroke {
  1641. will-change: auto;
  1642. }
  1643. .md-activity-indicator-rolling .content {
  1644. position: absolute;
  1645. top: 0;
  1646. right: 0;
  1647. bottom: 0;
  1648. left: 0;
  1649. display: flex;
  1650. justify-content: center;
  1651. align-items: center;
  1652. }
  1653. .md-scroll-view-refresh {
  1654. display: flex;
  1655. padding: 0.66667rem 0;
  1656. justify-content: center;
  1657. align-items: center;
  1658. overflow: hidden;
  1659. }
  1660. .md-scroll-view-refresh .md-activity-indicator-rolling .md-activity-indicator-svg {
  1661. width: 0.42667rem !important;
  1662. height: 0.42667rem !important;
  1663. transform: rotateZ(-45deg);
  1664. }
  1665. .md-scroll-view-refresh .refresh-tip {
  1666. margin-left: 0.2rem;
  1667. font-size: 0.32rem;
  1668. color: #999;
  1669. }
  1670. .md-scroll-view {
  1671. position: relative;
  1672. display: block;
  1673. height: 100%;
  1674. overflow: hidden;
  1675. user-select: none;
  1676. }
  1677. .md-scroll-view .scroll-view-header,
  1678. .md-scroll-view .scroll-view-footer {
  1679. position: absolute;
  1680. left: 0;
  1681. right: 0;
  1682. z-index: 2;
  1683. }
  1684. .md-scroll-view .scroll-view-header {
  1685. top: 0;
  1686. }
  1687. .md-scroll-view .scroll-view-footer {
  1688. bottom: 0;
  1689. }
  1690. .md-scroll-view .scroll-view-container {
  1691. position: relative;
  1692. z-index: 1;
  1693. }
  1694. .md-scroll-view .scroll-view-container:after {
  1695. content: "";
  1696. display: table;
  1697. clear: both;
  1698. }
  1699. .md-scroll-view .scroll-view-container .scroll-view-refresh {
  1700. position: absolute;
  1701. left: 0;
  1702. right: 0;
  1703. transform: translate3d(0, -100%, 0);
  1704. }
  1705. .md-scroll-view .scroll-view-container .scroll-view-refresh:after {
  1706. content: "";
  1707. display: table;
  1708. clear: both;
  1709. }
  1710. .md-scroll-view .scroll-view-container .scroll-view-more {
  1711. visibility: hidden;
  1712. }
  1713. .md-scroll-view .scroll-view-container .scroll-view-more.active {
  1714. visibility: visible;
  1715. }
  1716. .md-scroll-view .scroll-view-container.horizon {
  1717. display: inline-block;
  1718. }
  1719. .md-steps {
  1720. display: flex;
  1721. justify-content: space-around;
  1722. font-size: 0.37333rem;
  1723. }
  1724. .md-steps.md-steps-horizontal {
  1725. align-items: center;
  1726. padding: 0.53333rem 1.33333rem 1.33333rem;
  1727. }
  1728. .md-steps.md-steps-horizontal .step-wrapper {
  1729. margin: 0 0.05333rem;
  1730. justify-content: center;
  1731. align-items: center;
  1732. flex-direction: column;
  1733. }
  1734. .md-steps.md-steps-horizontal .step-wrapper.reached .text-wrapper .name {
  1735. color: #41485d;
  1736. }
  1737. .md-steps.md-steps-horizontal .step-wrapper.current .text-wrapper .name {
  1738. color: #0057ff;
  1739. }
  1740. .md-steps.md-steps-horizontal .text-wrapper {
  1741. top: 100%;
  1742. padding-top: 0.26667rem;
  1743. text-align: center;
  1744. }
  1745. .md-steps.md-steps-horizontal .text-wrapper .name {
  1746. color: #858b9c;
  1747. }
  1748. .md-steps.md-steps-horizontal .text-wrapper .desc {
  1749. margin-top: 0.13333rem;
  1750. color: #858b9c;
  1751. }
  1752. .md-steps.md-steps-horizontal.no-current .reached:last-of-type {
  1753. display: none !important;
  1754. }
  1755. .md-steps.md-steps-vertical {
  1756. align-items: flex-start;
  1757. padding: 0.53333rem;
  1758. flex-direction: column;
  1759. }
  1760. .md-steps.md-steps-vertical.vertical-adaptive {
  1761. justify-content: normal;
  1762. padding: 0.53333rem 0.53333rem 0.10667rem;
  1763. }
  1764. .md-steps.md-steps-vertical.vertical-adaptive .bar.vertical-bar {
  1765. flex: 1;
  1766. }
  1767. .md-steps.md-steps-vertical .step-wrapper {
  1768. width: 100%;
  1769. margin: 0.05333rem 0;
  1770. align-items: stretch;
  1771. }
  1772. .md-steps.md-steps-vertical .step-wrapper .icon-wrapper {
  1773. position: relative;
  1774. }
  1775. .md-steps.md-steps-vertical .step-wrapper .icon-wrapper .step-node-default {
  1776. min-width: 0.42667rem;
  1777. min-height: 0.42667rem;
  1778. }
  1779. .md-steps.md-steps-vertical .step-wrapper .text-wrapper {
  1780. left: 0.42667rem;
  1781. padding-left: 0.53333rem;
  1782. }
  1783. .md-steps.md-steps-vertical .step-wrapper .text-wrapper .name,
  1784. .md-steps.md-steps-vertical .step-wrapper .text-wrapper .desc {
  1785. white-space: normal;
  1786. }
  1787. .md-steps.md-steps-vertical .step-wrapper .text-wrapper .name {
  1788. color: #41485d;
  1789. }
  1790. .md-steps.md-steps-vertical .step-wrapper .text-wrapper .desc {
  1791. margin-top: 0.24rem;
  1792. color: #858b9c;
  1793. }
  1794. .md-steps .icon-wrapper {
  1795. display: flex;
  1796. justify-content: center;
  1797. align-items: center;
  1798. color: #e2e4ea;
  1799. }
  1800. .md-steps .icon-wrapper >div {
  1801. display: flex;
  1802. justify-content: center;
  1803. align-items: center;
  1804. }
  1805. .md-steps .icon-wrapper:nth-child(2) {
  1806. display: none;
  1807. }
  1808. .md-steps .icon-wrapper .step-node-default-icon {
  1809. background: #e2e4ea;
  1810. }
  1811. .md-steps .step-wrapper {
  1812. display: flex;
  1813. position: relative;
  1814. min-width: 0.42667rem;
  1815. min-height: 0.42667rem;
  1816. }
  1817. .md-steps .step-wrapper .icon-wrapper {
  1818. min-width: 0.42667rem;
  1819. min-height: 0.42667rem;
  1820. }
  1821. .md-steps .step-wrapper .icon-wrapper .md-icon {
  1822. width: 0.42667rem;
  1823. height: 0.42667rem;
  1824. font-size: 0.42667rem;
  1825. line-height: 0.42667rem;
  1826. }
  1827. .md-steps .step-wrapper .text-wrapper {
  1828. position: absolute;
  1829. }
  1830. .md-steps .step-wrapper .text-wrapper .name,
  1831. .md-steps .step-wrapper .text-wrapper .desc {
  1832. white-space: nowrap;
  1833. }
  1834. .md-steps .step-wrapper .text-wrapper .name {
  1835. line-height: 0.37333rem;
  1836. font-size: 0.37333rem;
  1837. }
  1838. .md-steps .step-wrapper .text-wrapper .desc {
  1839. line-height: 0.37333rem;
  1840. font-size: 0.34667rem;
  1841. }
  1842. .md-steps .step-wrapper.reached .icon-wrapper,
  1843. .md-steps .step-wrapper.current .icon-wrapper {
  1844. color: #0057ff;
  1845. }
  1846. .md-steps .step-wrapper.reached .icon-wrapper .step-node-default-icon,
  1847. .md-steps .step-wrapper.current .icon-wrapper .step-node-default-icon {
  1848. background: #0057ff;
  1849. }
  1850. .md-steps .bar {
  1851. position: relative;
  1852. background-color: #e2e4ea;
  1853. overflow: hidden;
  1854. }
  1855. .md-steps .bar .bar-inner {
  1856. z-index: 10;
  1857. position: absolute;
  1858. top: 0;
  1859. left: 0;
  1860. display: block;
  1861. content: '';
  1862. transition: all linear 1s;
  1863. }
  1864. .md-steps .bar.horizontal-bar {
  1865. flex: 1;
  1866. height: 1px;
  1867. }
  1868. .md-steps .bar.horizontal-bar .bar-inner {
  1869. width: 100%;
  1870. height: 1px;
  1871. background-color: #0057ff;
  1872. }
  1873. .md-steps .bar.vertical-bar {
  1874. left: 0.21333rem;
  1875. width: 1px;
  1876. transform: translateX(-50%);
  1877. }
  1878. .md-steps .bar.vertical-bar .bar-inner {
  1879. width: 1px;
  1880. height: 100%;
  1881. background-color: #0057ff;
  1882. }
  1883. .md-steps .bar:last-of-type.horizontal-bar {
  1884. display: none;
  1885. }
  1886. .md-steps .bar:last-of-type.vertical-bar {
  1887. visibility: hidden;
  1888. }
  1889. .md-swiper-item {
  1890. position: relative;
  1891. width: 100%;
  1892. flex-shrink: 0;
  1893. }
  1894. .md-swiper-box {
  1895. overflow: hidden;
  1896. will-change: tranform;
  1897. }
  1898. .md-swiper,
  1899. .md-swiper-box {
  1900. width: 100%;
  1901. height: 100%;
  1902. position: relative;
  1903. }
  1904. .md-swiper.disabled,
  1905. .md-swiper-box.disabled {
  1906. visibility: hidden;
  1907. }
  1908. .md-swiper.md-swiper-fade .md-swiper-item,
  1909. .md-swiper-box.md-swiper-fade .md-swiper-item {
  1910. position: absolute;
  1911. opacity: 0;
  1912. top: 0;
  1913. left: 0;
  1914. }
  1915. .md-swiper.md-swiper-vertical .md-swiper-container,
  1916. .md-swiper-box.md-swiper-vertical .md-swiper-container {
  1917. width: 100%;
  1918. height: auto;
  1919. box-orient: vertical;
  1920. flex-direction: column;
  1921. }
  1922. .md-swiper.md-swiper-vertical .md-swiper-indicators,
  1923. .md-swiper-box.md-swiper-vertical .md-swiper-indicators {
  1924. flex-direction: column;
  1925. right: 0.26667rem;
  1926. left: auto;
  1927. bottom: auto;
  1928. top: 50%;
  1929. transform: translate(0, -50%);
  1930. }
  1931. .md-swiper.md-swiper-vertical .md-swiper-indicators.disabled,
  1932. .md-swiper-box.md-swiper-vertical .md-swiper-indicators.disabled {
  1933. visibility: hidden;
  1934. }
  1935. .md-swiper.md-swiper-vertical .md-swiper-indicators .md-swiper-indicator,
  1936. .md-swiper-box.md-swiper-vertical .md-swiper-indicators .md-swiper-indicator {
  1937. width: 0.05333rem;
  1938. height: 0.21333rem;
  1939. margin: 0.03333rem 0;
  1940. }
  1941. .md-swiper-container {
  1942. height: 100%;
  1943. width: auto;
  1944. position: relative;
  1945. display: flex;
  1946. box-sizing: content-box;
  1947. }
  1948. .md-swiper-indicators {
  1949. position: absolute;
  1950. bottom: 0.26667rem;
  1951. left: 50%;
  1952. display: flex;
  1953. transform: translateX(-50%);
  1954. }
  1955. .md-swiper-indicator {
  1956. width: 0.21333rem;
  1957. height: 0.05333rem;
  1958. display: inline-block;
  1959. background: #ddd;
  1960. margin: 0 0.04rem;
  1961. }
  1962. .md-swiper-indicator.md-swiper-indicator-active {
  1963. background: #0057ff;
  1964. }
  1965. .md-tab-bar {
  1966. position: relative;
  1967. padding-left: 0.53333rem;
  1968. padding-right: 0.53333rem;
  1969. background-color: #f9fafb;
  1970. }
  1971. .md-tab-bar-inner {
  1972. position: relative;
  1973. width: 100%;
  1974. }
  1975. .md-tab-bar-list {
  1976. display: flex;
  1977. justify-content: space-between;
  1978. min-width: 100%;
  1979. }
  1980. .md-tab-bar-item {
  1981. flex: auto;
  1982. flex-shrink: 0;
  1983. position: relative;
  1984. display: inline-flex;
  1985. align-items: center;
  1986. justify-content: center;
  1987. color: #666f83;
  1988. font-size: 0.37333rem;
  1989. font-weight: 500;
  1990. min-height: 1.33333rem;
  1991. padding: 0 0.26667rem;
  1992. margin: 0 auto;
  1993. box-sizing: border-box;
  1994. -webkit-user-select: none;
  1995. -webkit-tap-highlight-color: transparent;
  1996. }
  1997. .md-tab-bar-item.is-active {
  1998. color: #0057ff;
  1999. }
  2000. .md-tab-bar-item.is-disabled {
  2001. color: #c5cad5;
  2002. }
  2003. .md-tab-bar-ink {
  2004. position: absolute;
  2005. bottom: 0;
  2006. left: 0;
  2007. display: block;
  2008. height: 0.04rem;
  2009. background-color: #0057ff;
  2010. transition: all 300ms;
  2011. }
  2012. .md-tab-bar-ink.is-disabled {
  2013. background-color: #c5cad5;
  2014. }
  2015. .md-tab-bar-start,
  2016. .md-tab-bar-end {
  2017. position: absolute;
  2018. top: 0;
  2019. left: 0;
  2020. width: 0.18667rem;
  2021. height: 1.33333rem;
  2022. overflow: hidden;
  2023. }
  2024. .md-tab-bar-start::after,
  2025. .md-tab-bar-end::after {
  2026. content: '';
  2027. display: block;
  2028. position: absolute;
  2029. left: -0.18667rem;
  2030. top: 50%;
  2031. width: 0.18667rem;
  2032. margin-top: -0.53333rem;
  2033. height: 1.06667rem;
  2034. border-radius: 50%;
  2035. box-shadow: -1px 0 0.16rem 0 rgba(0,0,0,0.2);
  2036. }
  2037. .md-tab-bar-end {
  2038. left: auto;
  2039. right: 0;
  2040. transform: rotate(180deg);
  2041. }
  2042. .md-tab-bar .md-scroll-view {
  2043. display: block;
  2044. }
  2045. .md-tab-bar .scroll-view-container {
  2046. min-width: 100%;
  2047. }
  2048. .md-button {
  2049. position: relative;
  2050. display: block;
  2051. height: 1.33333rem;
  2052. line-height: 1.33333rem;
  2053. font-size: 0.48rem;
  2054. font-weight: 500;
  2055. font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  2056. text-align: center;
  2057. border: none;
  2058. border-radius: 0.05333rem;
  2059. box-sizing: border-box;
  2060. outline: none;
  2061. transition: all 0.3s;
  2062. -webkit-appearance: none;
  2063. -webkit-user-select: none;
  2064. -webkit-tap-highlight-color: transparent;
  2065. overflow: visible;
  2066. }
  2067. .md-button-inner {
  2068. display: flex;
  2069. align-items: center;
  2070. justify-content: center;
  2071. width: 100%;
  2072. height: 100%;
  2073. overflow: hidden;
  2074. text-overflow: ellipsis;
  2075. word-break: break-all;
  2076. word-wrap: break-word;
  2077. white-space: nowrap;
  2078. }
  2079. .md-button-loading .md-activity-indicator-svg {
  2080. width: 0.46667rem !important;
  2081. height: 0.46667rem !important;
  2082. margin-right: 0.13333rem;
  2083. }
  2084. .md-button-content {
  2085. display: flex;
  2086. align-items: center;
  2087. padding: 0 0.08rem;
  2088. }
  2089. .md-button-content .md-icon {
  2090. padding: 0;
  2091. }
  2092. .md-button {
  2093. position: relative;
  2094. }
  2095. .md-button .md-icon {
  2096. display: flex;
  2097. align-items: center;
  2098. justify-content: center;
  2099. padding: 0 0.08rem;
  2100. }
  2101. .md-button.default {
  2102. background: #fff;
  2103. color: #41485d;
  2104. }
  2105. .md-button.default::after {
  2106. content: '';
  2107. position: absolute;
  2108. top: 0;
  2109. left: 0;
  2110. right: auto;
  2111. bottom: auto;
  2112. width: 200%;
  2113. height: 200%;
  2114. border: solid 0.04rem #c5cad5;
  2115. box-sizing: border-box;
  2116. transform-origin: 0 0;
  2117. transform: scale(0.5);
  2118. z-index: 2;
  2119. border-radius: 0.10667rem;
  2120. }
  2121. .md-button.default.active:active {
  2122. background: #f9fafb;
  2123. }
  2124. .md-button.default .md-button-loading .md-activity-indicator-svg .circle circle {
  2125. stroke: #41485d !important;
  2126. }
  2127. .md-button.primary {
  2128. background: #0057ff;
  2129. color: #fff;
  2130. }
  2131. .md-button.primary::after {
  2132. content: '';
  2133. position: absolute;
  2134. top: 0;
  2135. left: 0;
  2136. right: auto;
  2137. bottom: auto;
  2138. width: 200%;
  2139. height: 200%;
  2140. border: solid 0.04rem #0057ff;
  2141. box-sizing: border-box;
  2142. transform-origin: 0 0;
  2143. transform: scale(0.5);
  2144. z-index: 2;
  2145. border-radius: 0.10667rem;
  2146. }
  2147. .md-button.primary.active:active {
  2148. background: #2a78dc;
  2149. }
  2150. .md-button.primary .md-button-loading .md-activity-indicator-svg .circle circle {
  2151. stroke: #fff !important;
  2152. }
  2153. .md-button.warning {
  2154. background: #ff5257;
  2155. color: #fff;
  2156. }
  2157. .md-button.warning::after {
  2158. content: '';
  2159. position: absolute;
  2160. top: 0;
  2161. left: 0;
  2162. right: auto;
  2163. bottom: auto;
  2164. width: 200%;
  2165. height: 200%;
  2166. border: solid 0.04rem #ff5257;
  2167. box-sizing: border-box;
  2168. transform-origin: 0 0;
  2169. transform: scale(0.5);
  2170. z-index: 2;
  2171. border-radius: 0.10667rem;
  2172. }
  2173. .md-button.warning.active:active {
  2174. background: #e9424f;
  2175. }
  2176. .md-button.warning .md-button-loading .md-activity-indicator-svg .circle circle {
  2177. stroke: #fff !important;
  2178. }
  2179. .md-button.disabled {
  2180. background: #e2e4ea;
  2181. color: #fff;
  2182. }
  2183. .md-button.disabled::after {
  2184. content: '';
  2185. position: absolute;
  2186. top: 0;
  2187. left: 0;
  2188. right: auto;
  2189. bottom: auto;
  2190. width: 200%;
  2191. height: 200%;
  2192. border: solid 0.04rem #e2e4ea;
  2193. box-sizing: border-box;
  2194. transform-origin: 0 0;
  2195. transform: scale(0.5);
  2196. z-index: 2;
  2197. border-radius: 0.10667rem;
  2198. }
  2199. .md-button.disabled .md-button-loading .md-activity-indicator-svg .circle circle {
  2200. stroke: #fff !important;
  2201. }
  2202. .md-button.plain {
  2203. background: transparent;
  2204. }
  2205. .md-button.plain.default {
  2206. color: #41485d;
  2207. }
  2208. .md-button.plain.default::after {
  2209. content: '';
  2210. position: absolute;
  2211. top: 0;
  2212. left: 0;
  2213. right: auto;
  2214. bottom: auto;
  2215. width: 200%;
  2216. height: 200%;
  2217. border: solid 0.04rem #c5cad5;
  2218. box-sizing: border-box;
  2219. transform-origin: 0 0;
  2220. transform: scale(0.5);
  2221. z-index: 2;
  2222. border-radius: 0.10667rem;
  2223. }
  2224. .md-button.plain.default.active:active {
  2225. background: #f9fafb;
  2226. }
  2227. .md-button.plain.default .md-button-loading .md-activity-indicator-svg .circle circle {
  2228. stroke: #41485d !important;
  2229. }
  2230. .md-button.plain.primary {
  2231. color: #0057ff;
  2232. }
  2233. .md-button.plain.primary::after {
  2234. content: '';
  2235. position: absolute;
  2236. top: 0;
  2237. left: 0;
  2238. right: auto;
  2239. bottom: auto;
  2240. width: 200%;
  2241. height: 200%;
  2242. border: solid 0.04rem #0057ff;
  2243. box-sizing: border-box;
  2244. transform-origin: 0 0;
  2245. transform: scale(0.5);
  2246. z-index: 2;
  2247. border-radius: 0.10667rem;
  2248. }
  2249. .md-button.plain.primary.active:active {
  2250. background: #eaf2fe;
  2251. }
  2252. .md-button.plain.primary .md-button-loading .md-activity-indicator-svg .circle circle {
  2253. stroke: #0057ff !important;
  2254. }
  2255. .md-button.plain.warning {
  2256. color: #ff5257;
  2257. }
  2258. .md-button.plain.warning::after {
  2259. content: '';
  2260. position: absolute;
  2261. top: 0;
  2262. left: 0;
  2263. right: auto;
  2264. bottom: auto;
  2265. width: 200%;
  2266. height: 200%;
  2267. border: solid 0.04rem #ff5257;
  2268. box-sizing: border-box;
  2269. transform-origin: 0 0;
  2270. transform: scale(0.5);
  2271. z-index: 2;
  2272. border-radius: 0.10667rem;
  2273. }
  2274. .md-button.plain.warning.active:active {
  2275. background: #fac3c6;
  2276. }
  2277. .md-button.plain.warning .md-button-loading .md-activity-indicator-svg .circle circle {
  2278. stroke: #ff5257 !important;
  2279. }
  2280. .md-button.plain.disabled {
  2281. color: #c5cad5;
  2282. }
  2283. .md-button.plain.disabled::after {
  2284. content: '';
  2285. position: absolute;
  2286. top: 0;
  2287. left: 0;
  2288. right: auto;
  2289. bottom: auto;
  2290. width: 200%;
  2291. height: 200%;
  2292. border: solid 0.04rem #c5cad5;
  2293. box-sizing: border-box;
  2294. transform-origin: 0 0;
  2295. transform: scale(0.5);
  2296. z-index: 2;
  2297. border-radius: 0.10667rem;
  2298. }
  2299. .md-button.plain.disabled .md-button-loading .md-activity-indicator-svg .circle circle {
  2300. stroke: #c5cad5 !important;
  2301. }
  2302. .md-button.round {
  2303. border-radius: 1.33333rem;
  2304. }
  2305. .md-button.round:after {
  2306. border-radius: 1.33333rem !important;
  2307. }
  2308. .md-button.inline {
  2309. display: inline-block;
  2310. padding: 0 0.26667rem;
  2311. }
  2312. .md-button.block {
  2313. width: 100%;
  2314. }
  2315. .md-button.small {
  2316. height: 0.85333rem;
  2317. line-height: 0.85333rem;
  2318. font-size: 0.37333rem;
  2319. }
  2320. .md-button.small.round {
  2321. border-radius: 0.85333rem;
  2322. }
  2323. .md-button.small.round:after {
  2324. border-radius: 0.85333rem;
  2325. }
  2326. .md-button.link {
  2327. display: inline;
  2328. width: auto;
  2329. height: auto;
  2330. line-height: normal;
  2331. font-size: 0.37333rem;
  2332. font-weight: 400;
  2333. color: #0057ff;
  2334. background: transparent;
  2335. }
  2336. .md-button.link.inactive {
  2337. color: #c5cad5;
  2338. opacity: 1;
  2339. }
  2340. .md-button.inactive {
  2341. opacity: 0.3;
  2342. }
  2343. .md-button.inactive.disabled {
  2344. opacity: 1;
  2345. }
  2346. .md-notice-bar {
  2347. display: flex;
  2348. z-index: 999;
  2349. font-size: 0.34667rem;
  2350. min-height: 0.85333rem;
  2351. background-color: rgba(89,158,248,0.08);
  2352. color: #0057ff;
  2353. position: relative;
  2354. padding-left: 0.42667rem;
  2355. box-sizing: border-box;
  2356. }
  2357. .md-notice-bar.md-notice-bar-round {
  2358. border-radius: 0.42667rem;
  2359. }
  2360. .md-notice-bar.activity {
  2361. background-color: #ffedde;
  2362. color: #ff843d;
  2363. }
  2364. .md-notice-bar.warning {
  2365. background-color: #ffeeef;
  2366. color: #ff5b60;
  2367. }
  2368. .md-notice-bar-left,
  2369. .md-notice-bar-right {
  2370. display: flex;
  2371. align-items: center;
  2372. }
  2373. .md-notice-bar-left {
  2374. padding-right: 0.16rem;
  2375. }
  2376. .md-notice-bar-right {
  2377. padding-right: 0.42667rem;
  2378. }
  2379. .md-notice-bar-empty {
  2380. padding-right: 0;
  2381. }
  2382. .md-notice-bar-content {
  2383. flex: 1;
  2384. margin: auto;
  2385. width: auto;
  2386. line-height: 0.85333rem;
  2387. white-space: nowrap;
  2388. overflow: hidden;
  2389. }
  2390. .md-notice-bar-content.md-notice-bar-multi-content {
  2391. padding: 0.26667rem 0;
  2392. line-height: 0.48rem;
  2393. white-space: normal;
  2394. }
  2395. .md-notice-bar-content .md-notice-bar-content-animate {
  2396. padding-left: 100%;
  2397. display: inline-block;
  2398. animation: md-notice-bar-animation linear 16s infinite both;
  2399. }
  2400. @-moz-keyframes md-notice-bar-animation {
  2401. 0% {
  2402. transform: translate3d(0, 0, 0);
  2403. }
  2404. 100% {
  2405. transform: translate3d(-100%, 0, 0);
  2406. }
  2407. }
  2408. @-webkit-keyframes md-notice-bar-animation {
  2409. 0% {
  2410. transform: translate3d(0, 0, 0);
  2411. }
  2412. 100% {
  2413. transform: translate3d(-100%, 0, 0);
  2414. }
  2415. }
  2416. @-o-keyframes md-notice-bar-animation {
  2417. 0% {
  2418. transform: translate3d(0, 0, 0);
  2419. }
  2420. 100% {
  2421. transform: translate3d(-100%, 0, 0);
  2422. }
  2423. }
  2424. @keyframes md-notice-bar-animation {
  2425. 0% {
  2426. transform: translate3d(0, 0, 0);
  2427. }
  2428. 100% {
  2429. transform: translate3d(-100%, 0, 0);
  2430. }
  2431. }
  2432. .md-popup-title-bar[data-v-e23f0fda] {
  2433. position: relative;
  2434. width: 100%;
  2435. height: 1.6rem;
  2436. background-color: #fff;
  2437. border-radius: 0.10667rem 0.10667rem 0 0;
  2438. overflow: hidden;
  2439. }
  2440. .md-popup-title-bar[data-v-e23f0fda]:after {
  2441. content: "";
  2442. display: table;
  2443. clear: both;
  2444. }
  2445. .md-popup-title-bar.large[data-v-e23f0fda] {
  2446. height: 2.4rem;
  2447. }
  2448. .md-popup-title-bar.large-radius[data-v-e23f0fda] {
  2449. border-radius: 0.53333rem 0.53333rem 0 0;
  2450. }
  2451. .md-popup-title-bar.title-align-left .title-bar-title[data-v-e23f0fda] {
  2452. padding-left: 0.53333rem;
  2453. align-items: flex-start;
  2454. }
  2455. .md-popup-title-bar.title-align-left .title-bar-left[data-v-e23f0fda] {
  2456. display: none;
  2457. }
  2458. .md-popup-title-bar.title-align-right .title-bar-title[data-v-e23f0fda] {
  2459. padding-right: 0.53333rem;
  2460. align-items: flex-end;
  2461. }
  2462. .md-popup-title-bar.title-align-right .title-bar-right[data-v-e23f0fda] {
  2463. display: none;
  2464. }
  2465. .md-popup-title-bar>div[data-v-e23f0fda] {
  2466. display: flex;
  2467. float: left;
  2468. height: 100%;
  2469. padding-top: 0.8rem;
  2470. flex-direction: column;
  2471. align-items: center;
  2472. justify-content: flex-start;
  2473. overflow: hidden;
  2474. text-overflow: ellipsis;
  2475. word-break: break-all;
  2476. word-wrap: break-word;
  2477. white-space: nowrap;
  2478. }
  2479. .md-popup-title-bar .title-bar-left[data-v-e23f0fda],
  2480. .md-popup-title-bar .title-bar-right[data-v-e23f0fda] {
  2481. position: absolute;
  2482. width: 20%;
  2483. max-height: 1.6rem;
  2484. font-size: 0.48rem;
  2485. font-weight: 500;
  2486. box-sizing: border-box;
  2487. line-height: 1;
  2488. }
  2489. .md-popup-title-bar .title-bar-title[data-v-e23f0fda] {
  2490. width: 100%;
  2491. padding-left: 20%;
  2492. padding-right: 20%;
  2493. box-sizing: border-box;
  2494. line-height: 1;
  2495. }
  2496. .md-popup-title-bar .title-bar-title p.title[data-v-e23f0fda] {
  2497. font-size: 0.53333rem;
  2498. color: #111a34;
  2499. }
  2500. .md-popup-title-bar .title-bar-title p.describe[data-v-e23f0fda] {
  2501. margin-top: 0.2rem;
  2502. font-size: 0.37333rem;
  2503. color: #858b9c;
  2504. }
  2505. .md-popup-title-bar .title-bar-left[data-v-e23f0fda] {
  2506. left: 0;
  2507. padding-left: 0.53333rem;
  2508. align-items: flex-start;
  2509. }
  2510. .md-popup-title-bar .title-bar-right[data-v-e23f0fda] {
  2511. right: 0;
  2512. padding-right: 0.53333rem;
  2513. align-items: flex-end;
  2514. }
  2515. .md-popup-title-bar .md-popup-cancel[data-v-e23f0fda] {
  2516. color: #666f83;
  2517. }
  2518. .md-popup-title-bar .md-popup-confirm[data-v-e23f0fda] {
  2519. color: #2f86f6;
  2520. }
  2521. .md-popup-title-bar .md-popup-close[data-v-e23f0fda] {
  2522. padding-top: 0.53333rem;
  2523. color: #666f83;
  2524. justify-content: flex-start;
  2525. }
  2526. .md-textarea-item-msg {
  2527. color: #ff5257;
  2528. }
  2529. .md-textarea-item .md-field-item-content {
  2530. align-items: normal;
  2531. }
  2532. .md-textarea-item.is-disabled .md-textarea-item__textarea {
  2533. -webkit-text-fill-color: #858b9c;
  2534. color: #858b9c;
  2535. }
  2536. .md-textarea-item .md-field-item-right {
  2537. align-items: start;
  2538. }
  2539. .md-textarea-item__clear {
  2540. padding: 0.08rem 0;
  2541. color: #c5cad5;
  2542. }
  2543. .md-textarea-item__clear .md-icon {
  2544. display: flex;
  2545. }
  2546. .md-textarea-item__textarea {
  2547. box-sizing: border-box;
  2548. width: 100%;
  2549. font: 500 0.42667rem "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  2550. line-height: 1.4;
  2551. color: #111a34;
  2552. background: transparent;
  2553. border: none;
  2554. outline: none;
  2555. resize: none;
  2556. appearance: none;
  2557. -webkit-tap-highlight-color: transparent;
  2558. }
  2559. .md-textarea-item__textarea::-webkit-input-placeholder {
  2560. color: #c5cad5;
  2561. font-weight: 400;
  2562. }
  2563. .md-textarea-item.is-error .md-field-item-content::before {
  2564. content: '';
  2565. position: absolute;
  2566. z-index: 2;
  2567. transform-origin: 100% 50%;
  2568. transform: scaleY(0.5) translateY(100%);
  2569. bottom: 0;
  2570. left: 0;
  2571. right: auto;
  2572. top: auto;
  2573. width: 100%;
  2574. border-bottom: solid 0.05333rem #ff5257;
  2575. transform-origin: 50% 100%;
  2576. }
  2577. @media (min-resolution: 3dppx) {
  2578. .md-textarea-item.is-error .md-field-item-content::before {
  2579. transform: scaleY(0.33) translateY(100%);
  2580. }
  2581. }
  2582. .md-activity-indicator-spinning:after {
  2583. content: "";
  2584. display: table;
  2585. clear: both;
  2586. }
  2587. .md-activity-indicator-spinning .md-icon {
  2588. float: left;
  2589. }
  2590. .md-activity-indicator-spinning.dark .md-icon {
  2591. filter: invert(1);
  2592. }
  2593. .md-activity-indicator-carousel:after {
  2594. content: "";
  2595. display: table;
  2596. clear: both;
  2597. }
  2598. .md-activity-indicator-carousel .carouseling {
  2599. float: left;
  2600. overflow: visible;
  2601. }
  2602. .md-activity-indicator .indicator-container {
  2603. display: flex;
  2604. flex-direction: row;
  2605. align-items: center;
  2606. }
  2607. .md-activity-indicator .indicator-container .indicator-text {
  2608. margin: 0 0 0 0.2rem;
  2609. color: #666f83;
  2610. }
  2611. .md-activity-indicator .indicator-container.vertical {
  2612. flex-direction: column;
  2613. justify-content: center;
  2614. }
  2615. .md-activity-indicator .indicator-container.vertical .indicator-text {
  2616. margin: 0.2rem 0 0 0;
  2617. }