main.css 27 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246
  1. @charset "UTF-8";
  2. /* http://meyerweb.com/eric/tools/css/reset/
  3. v2.0 | 20110126
  4. License: none (public domain)
  5. */
  6. html, body, div, span, applet, object, iframe,
  7. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  8. a, abbr, acronym, address, big, cite, code,
  9. del, dfn, em, img, ins, kbd, q, s, samp,
  10. small, strike, strong, sub, sup, tt, var,
  11. b, u, i, center,
  12. dl, dt, dd, ol, ul, li,
  13. fieldset, form, label, legend,
  14. table, caption, tbody, tfoot, thead, tr, th, td,
  15. article, aside, canvas, details, embed,
  16. figure, figcaption, footer, header, hgroup,
  17. menu, nav, output, ruby, section, summary,
  18. time, mark, audio, video {
  19. margin: 0;
  20. padding: 0;
  21. border: 0;
  22. font-size: 100%;
  23. font: inherit;
  24. vertical-align: baseline;
  25. }
  26. /* HTML5 display-role reset for older browsers */
  27. article, aside, details, figcaption, figure,
  28. footer, header, hgroup, menu, nav, section {
  29. display: block;
  30. }
  31. ol, ul {
  32. list-style: none;
  33. }
  34. blockquote, q {
  35. quotes: none;
  36. }
  37. blockquote:before, blockquote:after,
  38. q:before, q:after {
  39. content: '';
  40. content: none;
  41. }
  42. table {
  43. border-collapse: collapse;
  44. border-spacing: 0;
  45. }
  46. input {
  47. -webkit-box-sizing: border-box;
  48. box-sizing: border-box;
  49. }
  50. .loading {
  51. position: fixed;
  52. top: 0;
  53. left: 0;
  54. right: 0;
  55. bottom: 0;
  56. z-index: 9995;
  57. }
  58. .loading .content {
  59. color: rgba(255, 255, 255, 0.6);
  60. margin-top: 4rem;
  61. text-align: center;
  62. font-size: 0.3rem;
  63. }
  64. .lockScroll {
  65. overflow: hidden;
  66. }
  67. .dialog-alert {
  68. top: 50%;
  69. -webkit-transform: translateY(-50%);
  70. transform: translateY(-50%);
  71. left: 1.2rem;
  72. right: 1.2rem;
  73. z-index: 9998;
  74. position: fixed;
  75. -webkit-animation: frames-top-center-01 300ms;
  76. animation: frames-top-center-01 300ms;
  77. border-radius: 0.1rem;
  78. min-height: auto;
  79. height: auto;
  80. background: white;
  81. color: black;
  82. }
  83. .dialog-alert h1 {
  84. font-size: 0.36rem;
  85. font-weight: bold;
  86. text-align: center;
  87. margin-top: 0.5rem;
  88. }
  89. .dialog-alert .content {
  90. min-height: 0.8rem;
  91. margin: 0.2rem 0.6rem;
  92. display: -webkit-box;
  93. display: -ms-flexbox;
  94. display: flex;
  95. -webkit-box-align: center;
  96. -ms-flex-align: center;
  97. align-items: center;
  98. -webkit-box-pack: center;
  99. -ms-flex-pack: center;
  100. justify-content: center;
  101. font-size: 0.3rem;
  102. }
  103. .dialog-alert .actions {
  104. height: 1rem;
  105. display: -webkit-box;
  106. display: -ms-flexbox;
  107. display: flex;
  108. -webkit-box-pack: center;
  109. -ms-flex-pack: center;
  110. justify-content: center;
  111. }
  112. .dialog-alert .actions .btn {
  113. color: white;
  114. font-size: 0.36rem;
  115. background: -webkit-gradient(linear, right top, left top, from(#fa382f), to(#ff7453));
  116. background: linear-gradient(-90deg, #fa382f, #ff7453);
  117. height: 0.7rem;
  118. display: -webkit-box;
  119. display: -ms-flexbox;
  120. display: flex;
  121. -webkit-box-align: center;
  122. -ms-flex-align: center;
  123. align-items: center;
  124. -webkit-box-pack: center;
  125. -ms-flex-pack: center;
  126. justify-content: center;
  127. width: 2rem;
  128. border-radius: 0.4rem;
  129. padding: 0;
  130. margin: 0;
  131. }
  132. @-webkit-keyframes frames-top-center-01 {
  133. 0% {
  134. top: -10%;
  135. }
  136. 100% {
  137. top: 50%;
  138. }
  139. }
  140. @keyframes frames-top-center-01 {
  141. 0% {
  142. top: -10%;
  143. }
  144. 100% {
  145. top: 50%;
  146. }
  147. }
  148. @-webkit-keyframes frames-top-center-02 {
  149. 0% {
  150. top: 0%;
  151. }
  152. 92% {
  153. top: 50%;
  154. }
  155. 100% {
  156. top: 40%;
  157. }
  158. }
  159. @keyframes frames-top-center-02 {
  160. 0% {
  161. top: 0%;
  162. }
  163. 92% {
  164. top: 50%;
  165. }
  166. 100% {
  167. top: 40%;
  168. }
  169. }
  170. @-webkit-keyframes capauth-zoom-in {
  171. 0% {
  172. opacity: 0;
  173. }
  174. 80% {
  175. opacity: 0;
  176. }
  177. 100% {
  178. opacity: 1;
  179. }
  180. }
  181. @keyframes capauth-zoom-in {
  182. 0% {
  183. opacity: 0;
  184. }
  185. 80% {
  186. opacity: 0;
  187. }
  188. 100% {
  189. opacity: 1;
  190. }
  191. }
  192. .overlay {
  193. position: fixed;
  194. top: 0;
  195. right: 0;
  196. bottom: 0;
  197. left: 0;
  198. z-index: 9990;
  199. background-color: rgba(0, 0, 0, 0.7);
  200. min-height: 6.5rem;
  201. }
  202. .overlay-alert {
  203. z-index: 9995;
  204. }
  205. .overlay-loading {
  206. z-index: 9995;
  207. }
  208. #uniauthframe {
  209. width: 100%;
  210. height: 100%;
  211. position: fixed;
  212. top: 0px;
  213. left: 0px;
  214. margin: 0px;
  215. padding: 0px;
  216. border: 0px;
  217. -webkit-animation: capauth-zoom-in 600ms;
  218. animation: capauth-zoom-in 600ms;
  219. z-index: 9990;
  220. }
  221. /*
  222. .dialog-alert .content {
  223. min-height: 1.2rem;
  224. margin: 0.2rem 0.6rem;
  225. display: flex;
  226. align-items: center;
  227. justify-content: center;
  228. }
  229. .actions {
  230. height: 1rem;
  231. display: flex;
  232. justify-content: center;
  233. .btn {
  234. background: red;
  235. height: 0.7rem;
  236. display: flex;
  237. align-items: center;
  238. justify-content: center;
  239. width: 2rem;
  240. border-radius: 0.4rem;
  241. }
  242. }
  243. */
  244. @font-face {
  245. font-family: "SourceHanSansSC-Regular";
  246. src: url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Regular.woff2") format("woff2"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Regular.woff") format("woff"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Regular.ttf") format("truetype"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Regular.eot") format("embedded-opentype"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Regular.svg") format("svg");
  247. }
  248. @font-face {
  249. font-family: "SourceHanSansSC-Medium";
  250. src: url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Medium.woff2") format("woff2"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Medium.woff") format("woff"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Medium.ttf") format("truetype"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Medium.eot") format("embedded-opentype"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Medium.svg") format("svg");
  251. }
  252. @font-face {
  253. font-family: "SourceHanSansSC-Light";
  254. src: url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Light.woff2") format("woff2"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Light.woff") format("woff"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Light.ttf") format("truetype"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Light.eot") format("embedded-opentype"), url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Light.svg") format("svg");
  255. }
  256. html,
  257. body {
  258. margin: 0;
  259. padding: 0;
  260. }
  261. body {
  262. font-size: 0.3rem;
  263. color: white;
  264. font-family: PingFangSC-Regular, sans-serif, "SourceHanSansCN-Regular", "Microsoft YaHei", "微软雅黑", STXihei, SimHei, "华文细黑";
  265. }
  266. .main {
  267. min-height: 22.16rem;
  268. background: url("../images/bg.png") no-repeat;
  269. background-size: 100%;
  270. }
  271. .float-business-button {
  272. position: fixed;
  273. top: 2rem;
  274. left: 0;
  275. width: 0.6rem;
  276. height: 2rem;
  277. background-color: #FF0082;
  278. border-radius: 0 0.2rem 0.2rem 0;
  279. display: -webkit-box;
  280. display: -ms-flexbox;
  281. display: flex;
  282. -webkit-box-align: center;
  283. -ms-flex-align: center;
  284. align-items: center;
  285. -webkit-box-pack: center;
  286. -ms-flex-pack: center;
  287. justify-content: center;
  288. -webkit-box-orient: vertical;
  289. -webkit-box-direction: normal;
  290. -ms-flex-direction: column;
  291. flex-direction: column;
  292. z-index: 100;
  293. }
  294. .float-business-button .question {
  295. width: 0.34rem;
  296. height: 0.34rem;
  297. margin-left: 0.05rem;
  298. background: url(../images/question.png) no-repeat;
  299. background-size: 100% 100%;
  300. }
  301. .float-business-button .name {
  302. line-height: 0.32rem;
  303. margin-left: 0.05rem;
  304. padding: 0.1rem 0.15rem 0;
  305. }
  306. .section-order {
  307. padding-top: 6.13rem;
  308. display: -webkit-box;
  309. display: -ms-flexbox;
  310. display: flex;
  311. -webkit-box-align: center;
  312. -ms-flex-align: center;
  313. align-items: center;
  314. -webkit-box-pack: center;
  315. -ms-flex-pack: center;
  316. justify-content: center;
  317. }
  318. .section-order .btn-order {
  319. width: 5.59rem;
  320. height: 1.35rem;
  321. background: url(../images/btn-order.png) no-repeat;
  322. background-size: 100% 100%;
  323. }
  324. .section-explain-flow {
  325. width: 7.32rem;
  326. height: 3.28rem;
  327. margin: -0.1rem auto 0;
  328. background: url(../images/bg-freeflow.png) no-repeat;
  329. background-size: 100% 100%;
  330. }
  331. .section-explain-flow .title {
  332. height: 0.65rem;
  333. display: -webkit-box;
  334. display: -ms-flexbox;
  335. display: flex;
  336. -webkit-box-align: center;
  337. -ms-flex-align: center;
  338. align-items: center;
  339. -webkit-box-pack: center;
  340. -ms-flex-pack: center;
  341. justify-content: center;
  342. }
  343. .section-explain-flow .content {
  344. font-weight: 400;
  345. font-size: 0.24rem;
  346. line-height: 0.4rem;
  347. padding: 0.35rem 0.5rem 0;
  348. }
  349. .section-rbt {
  350. width: 6.9rem;
  351. height: 11.137rem;
  352. margin: 0 auto;
  353. border-radius: 0.15rem;
  354. }
  355. .section-rbt .rbt-list-box .rbt-box-head {
  356. height: 0.58rem;
  357. overflow-x: scroll;
  358. }
  359. .section-rbt .rbt-list-box .rbt-box-head .rbt-item-box {
  360. width: 12.483rem;
  361. font-size: 0.28rem;
  362. }
  363. .section-rbt .rbt-list-box .rbt-box-head .rbt-item-box .item {
  364. float: left;
  365. width: 1.347rem;
  366. height: 0.58rem;
  367. display: -webkit-box;
  368. display: -ms-flexbox;
  369. display: flex;
  370. -webkit-box-align: center;
  371. -ms-flex-align: center;
  372. align-items: center;
  373. -webkit-box-pack: center;
  374. -ms-flex-pack: center;
  375. justify-content: center;
  376. background: #8558FF;
  377. margin-right: 0.04rem;
  378. border-radius: 0.1rem 0.1rem 0 0;
  379. }
  380. .section-rbt .rbt-list-box .rbt-box-head .rbt-item-box .item-active {
  381. color: #227EE3;
  382. background: #CAECFF;
  383. }
  384. .section-rbt .rbt-list-box .rbt-box-body-container {
  385. background: #FFF;
  386. border-radius: 0 0 0.1rem 0.1rem;
  387. }
  388. .section-rbt .rbt-list-box .rbt-box-body-container .flip-for-more {
  389. color: #3783FB;
  390. font-size: 0.3rem;
  391. padding: 0.43rem 0 0.48rem;
  392. display: -webkit-box;
  393. display: -ms-flexbox;
  394. display: flex;
  395. -webkit-box-align: center;
  396. -ms-flex-align: center;
  397. align-items: center;
  398. -webkit-box-pack: center;
  399. -ms-flex-pack: center;
  400. justify-content: center;
  401. }
  402. .section-rbt .rbt-list-box .rbt-box-body-container .flip-for-more img {
  403. width: 0.22rem;
  404. height: 0.26rem;
  405. margin: 0 0.11rem;
  406. }
  407. .section-rbt .rbt-list-box .rbt-box-body {
  408. height: 10.5rem;
  409. overflow-x: scroll;
  410. }
  411. .section-rbt .rbt-list-box .rbt-box-body .rbt-item {
  412. width: 3.12rem;
  413. height: 6.216rem;
  414. float: left;
  415. margin: 0.27rem 0 0 0.22rem;
  416. }
  417. .section-rbt .rbt-list-box .rbt-box-body .rbt-item .rbt-main {
  418. font-size: 0;
  419. position: relative;
  420. border-radius: 0.1rem;
  421. }
  422. .section-rbt .rbt-list-box .rbt-box-body .rbt-item .rbt-main .rbt-cover {
  423. width: 3.12rem;
  424. border-radius: 0.1rem;
  425. }
  426. .section-rbt .rbt-list-box .rbt-box-body .rbt-item .rbt-main .rbt-play {
  427. width: 0.67rem;
  428. height: 0.67rem;
  429. position: absolute;
  430. top: 50%;
  431. left: 50%;
  432. -webkit-transform: translate(-50%);
  433. transform: translate(-50%);
  434. }
  435. .section-rbt .rbt-list-box .rbt-box-body .rbt-item .rbt-main .btn {
  436. position: absolute;
  437. bottom: 0;
  438. right: 0;
  439. width: 1.52rem;
  440. height: 0.5rem;
  441. font-size: 0.3rem;
  442. border-radius: 0.1rem;
  443. background: #FF0082;
  444. display: -webkit-box;
  445. display: -ms-flexbox;
  446. display: flex;
  447. -webkit-box-align: center;
  448. -ms-flex-align: center;
  449. align-items: center;
  450. -webkit-box-pack: center;
  451. -ms-flex-pack: center;
  452. justify-content: center;
  453. }
  454. .section-rbt .rbt-list-box .rbt-box-body .rbt-item .rbt-title {
  455. color: #010101;
  456. font-size: 0.3rem;
  457. overflow: hidden;
  458. text-overflow: ellipsis;
  459. display: -webkit-box;
  460. display: -ms-flexbox;
  461. display: flex;
  462. -webkit-box-align: center;
  463. -ms-flex-align: center;
  464. align-items: center;
  465. height: 1rem;
  466. }
  467. .section-rbt .rbt-list-box .rbt-box-body .no-more {
  468. float: left;
  469. height: 1rem;
  470. width: 100%;
  471. color: #aaa9a9;
  472. text-align: center;
  473. -webkit-box-pack: center;
  474. -ms-flex-pack: center;
  475. justify-content: center;
  476. display: -webkit-box;
  477. display: -ms-flexbox;
  478. display: flex;
  479. -webkit-box-align: center;
  480. -ms-flex-align: center;
  481. align-items: center;
  482. font-size: 0.3rem;
  483. }
  484. .section-rbt .rbt-list-box .rbt-box-body .no-more .line {
  485. height: 1px;
  486. width: 2rem;
  487. border-bottom: 1px solid #aaa9a9;
  488. }
  489. .section-rbt .rbt-list-box .rbt-box-body .no-more .title {
  490. margin: 0 0.2rem;
  491. }
  492. .section-agr {
  493. width: 6.86rem;
  494. height: 10.86rem;
  495. position: fixed;
  496. top: 50%;
  497. left: 50%;
  498. color: #333;
  499. font-size: 0.24rem;
  500. -webkit-transform: translate(-50%, -50%);
  501. transform: translate(-50%, -50%);
  502. background: #FFF5E5;
  503. border-radius: 0.16rem;
  504. z-index: 9991;
  505. }
  506. .section-agr .agr-title {
  507. height: 0.48rem;
  508. }
  509. .section-agr .agr-title .close {
  510. position: absolute;
  511. top: 0.22rem;
  512. right: 0.22rem;
  513. width: 0.26rem;
  514. height: 0.25rem;
  515. background: url(../images/close.png) no-repeat;
  516. background-size: 100% 100%;
  517. }
  518. .section-agr .agr-content {
  519. height: 9rem;
  520. position: relative;
  521. overflow-x: scroll;
  522. }
  523. .section-agr .agr-content .title {
  524. font-size: 0.36rem;
  525. text-align: center;
  526. margin: 0 auto 0.36rem;
  527. }
  528. .section-agr .agr-content .content {
  529. margin: 0 0.4rem 0.36rem;
  530. }
  531. .section-agr .agr-content .content ul li {
  532. line-height: 0.45rem;
  533. text-align: justify;
  534. }
  535. .section-agr .action {
  536. display: -webkit-box;
  537. display: -ms-flexbox;
  538. display: flex;
  539. -webkit-box-align: center;
  540. -ms-flex-align: center;
  541. align-items: center;
  542. -webkit-box-pack: center;
  543. -ms-flex-pack: center;
  544. justify-content: center;
  545. margin-top: 0.28rem;
  546. }
  547. .section-agr .action .btn {
  548. width: 3.36rem;
  549. height: 0.64rem;
  550. background: #FF0083;
  551. border-radius: 0.32rem;
  552. display: -webkit-box;
  553. display: -ms-flexbox;
  554. display: flex;
  555. -webkit-box-align: center;
  556. -ms-flex-align: center;
  557. align-items: center;
  558. -webkit-box-pack: center;
  559. -ms-flex-pack: center;
  560. justify-content: center;
  561. color: #FFFFFF;
  562. }
  563. .section-preview {
  564. position: fixed;
  565. top: 0;
  566. left: 0;
  567. right: 0;
  568. bottom: 0;
  569. z-index: 9990;
  570. background: red;
  571. }
  572. .section-preview .content {
  573. width: 100%;
  574. height: 100%;
  575. position: relative;
  576. }
  577. .section-preview .content .close {
  578. width: 1.2rem;
  579. height: 0.5rem;
  580. position: absolute;
  581. top: 0.39rem;
  582. left: 0.3rem;
  583. color: #FFF;
  584. font-size: 0.3rem;
  585. background: #FF0081;
  586. border-radius: 0.1rem;
  587. z-index: 9992;
  588. display: -webkit-box;
  589. display: -ms-flexbox;
  590. display: flex;
  591. -webkit-box-align: center;
  592. -ms-flex-align: center;
  593. align-items: center;
  594. -webkit-box-pack: center;
  595. -ms-flex-pack: center;
  596. justify-content: center;
  597. }
  598. .section-preview .content .close:hover {
  599. opacity: 1;
  600. }
  601. .section-preview .content .close span {
  602. font-size: 0.24rem;
  603. margin-right: 0.05rem;
  604. margin-left: -0.1rem;
  605. }
  606. .section-preview .content video {
  607. width: 100%;
  608. height: 100%;
  609. background: black;
  610. }
  611. .section-preview .content .play {
  612. width: 1.35rem;
  613. height: 1.35rem;
  614. position: absolute;
  615. top: 50%;
  616. left: 50%;
  617. -webkit-transform: translate(-50%, -50%);
  618. transform: translate(-50%, -50%);
  619. background: url(../images/icon-play.png) no-repeat;
  620. background-size: 100% 100%;
  621. }
  622. .section-preview .content .dail {
  623. width: 5.48rem;
  624. height: 3rem;
  625. position: absolute;
  626. bottom: 2.39rem;
  627. left: 50%;
  628. -webkit-transform: translate(-50%);
  629. transform: translate(-50%);
  630. background: url(../images/dail.png) no-repeat;
  631. background-size: 100% 100%;
  632. }
  633. .section-preview .content .setting {
  634. width: 3rem;
  635. height: 0.6rem;
  636. background: #FF0081;
  637. border-radius: 0.1rem;
  638. position: absolute;
  639. bottom: 1.3rem;
  640. left: 50%;
  641. -webkit-transform: translate(-50%);
  642. transform: translate(-50%);
  643. border-radius: 0.1rem;
  644. display: -webkit-box;
  645. display: -ms-flexbox;
  646. display: flex;
  647. -webkit-box-align: center;
  648. -ms-flex-align: center;
  649. align-items: center;
  650. -webkit-box-pack: center;
  651. -ms-flex-pack: center;
  652. justify-content: center;
  653. }
  654. .section-preview .content .must-know {
  655. width: 1.24rem;
  656. height: 0.42rem;
  657. font-size: 0.28rem;
  658. font-weight: 500;
  659. color: #FFFFFF;
  660. position: absolute;
  661. bottom: 0.5rem;
  662. left: 50%;
  663. -webkit-transform: translate(-50%);
  664. transform: translate(-50%);
  665. border-bottom: 0.01rem solid #FFFFFF;
  666. padding-bottom: 0.01rem;
  667. text-align: center;
  668. }
  669. .absolute-center {
  670. position: absolute;
  671. top: 50%;
  672. left: 50%;
  673. -webkit-transform: translate(-50%, -50%);
  674. transform: translate(-50%, -50%);
  675. z-index: 9991;
  676. }
  677. .fixed-center {
  678. position: fixed;
  679. top: 50%;
  680. left: 50%;
  681. -webkit-transform: translate(-50%, -50%);
  682. transform: translate(-50%, -50%);
  683. z-index: 9991;
  684. background: #FFF5E5;
  685. border-radius: 0.16rem;
  686. }
  687. input::-webkit-input-placeholder {
  688. color: #999999;
  689. font-size: 0.28rem;
  690. }
  691. input::-moz-placeholder {
  692. /* Mozilla Firefox 19+ */
  693. color: #999999;
  694. font-size: 0.28rem;
  695. }
  696. input:-moz-placeholder {
  697. /* Mozilla Firefox 4 to 18 */
  698. color: #999999;
  699. font-size: 0.28rem;
  700. }
  701. input:-ms-input-placeholder {
  702. /* Internet Explorer 10-11 */
  703. color: #999999;
  704. font-size: 0.28rem;
  705. }
  706. .sms-form .form-group {
  707. border-radius: 0.18rem;
  708. padding: 0.35rem 0.3rem;
  709. }
  710. .sms-form .form-group .input-row {
  711. display: -webkit-box;
  712. display: -ms-flexbox;
  713. display: flex;
  714. -webkit-box-align: center;
  715. -ms-flex-align: center;
  716. align-items: center;
  717. -webkit-box-pack: center;
  718. -ms-flex-pack: center;
  719. justify-content: center;
  720. -ms-flex-line-pack: justify;
  721. align-content: space-between;
  722. margin-bottom: 0.16rem;
  723. background: #FFFFFF;
  724. border-radius: 0.08rem;
  725. }
  726. .sms-form .form-group .input-row .smscode {
  727. width: 100%;
  728. }
  729. .sms-form .form-group .input-row .sendcode {
  730. height: .64rem;
  731. min-width: 1.1rem;
  732. color: #FFFFFF;
  733. font-size: 0.24rem;
  734. padding: 0 0.2rem;
  735. word-break: keep-all;
  736. white-space: nowrap;
  737. border-radius: 0.1rem;
  738. background: #FF0083;
  739. margin-right: 0.04rem;
  740. outline: none;
  741. -webkit-appearance: none;
  742. display: -webkit-box;
  743. display: -ms-flexbox;
  744. display: flex;
  745. -webkit-box-align: center;
  746. -ms-flex-align: center;
  747. align-items: center;
  748. -webkit-box-pack: center;
  749. -ms-flex-pack: center;
  750. justify-content: center;
  751. }
  752. .sms-form .form-group .input-row:last-child {
  753. margin-bottom: 0rem;
  754. }
  755. .sms-form .form-group input {
  756. width: 100%;
  757. height: 0.72rem;
  758. line-height: 0.72rem;
  759. color: #333333;
  760. font-size: 0.3rem;
  761. outline: none;
  762. -webkit-appearance: none;
  763. min-width: 2.4rem;
  764. margin-bottom: 0.01rem;
  765. border: 0 solid #FFFFFF;
  766. border-radius: 0.1rem;
  767. padding-left: 0.3rem;
  768. background: none;
  769. }
  770. .sms-form .actions {
  771. width: 4.46rem;
  772. margin: 0 auto;
  773. display: -webkit-box;
  774. display: -ms-flexbox;
  775. display: flex;
  776. -webkit-box-align: center;
  777. -ms-flex-align: center;
  778. align-items: center;
  779. -webkit-box-pack: justify;
  780. -ms-flex-pack: justify;
  781. justify-content: space-between;
  782. }
  783. .sms-form .actions .btn {
  784. width: 2.16rem;
  785. height: 0.64rem;
  786. font-size: 0.28rem;
  787. display: -webkit-box;
  788. display: -ms-flexbox;
  789. display: flex;
  790. -webkit-box-align: center;
  791. -ms-flex-align: center;
  792. align-items: center;
  793. -webkit-box-pack: center;
  794. -ms-flex-pack: center;
  795. justify-content: center;
  796. border-radius: 0.32rem;
  797. }
  798. .sms-form .actions .btn-primary {
  799. color: white;
  800. background: #FAABD3;
  801. }
  802. .sms-form .actions .btn-info {
  803. color: white;
  804. background: #FF0083;
  805. }
  806. .section-login {
  807. width: 5.4rem;
  808. height: 3.31rem;
  809. background: #FFF5E5;
  810. border-radius: 0.16rem;
  811. }
  812. .section-message {
  813. width: 4.2rem;
  814. min-height: 2.58rem;
  815. background: #FFF5E5;
  816. border-radius: 0.16rem;
  817. }
  818. .section-message .content {
  819. font-size: 0.28rem;
  820. color: #333333;
  821. min-height: 1rem;
  822. padding: 0.3rem;
  823. text-align: center;
  824. word-break: break-all;
  825. display: -webkit-box;
  826. display: -ms-flexbox;
  827. display: flex;
  828. -webkit-box-align: center;
  829. -ms-flex-align: center;
  830. align-items: center;
  831. -webkit-box-pack: center;
  832. -ms-flex-pack: center;
  833. justify-content: center;
  834. }
  835. .section-message .actions {
  836. width: 3.36rem;
  837. margin: 0 auto 0.3rem;
  838. display: -webkit-box;
  839. display: -ms-flexbox;
  840. display: flex;
  841. -webkit-box-align: center;
  842. -ms-flex-align: center;
  843. align-items: center;
  844. -webkit-box-pack: justify;
  845. -ms-flex-pack: justify;
  846. justify-content: space-between;
  847. }
  848. .section-message .actions .btn {
  849. width: 1.6rem;
  850. height: 0.64rem;
  851. font-size: 0.28rem;
  852. display: -webkit-box;
  853. display: -ms-flexbox;
  854. display: flex;
  855. -webkit-box-align: center;
  856. -ms-flex-align: center;
  857. align-items: center;
  858. -webkit-box-pack: center;
  859. -ms-flex-pack: center;
  860. justify-content: center;
  861. border-radius: 0.32rem;
  862. }
  863. .section-message .actions .btn-primary {
  864. color: white;
  865. background: #FAABD3;
  866. }
  867. .section-message .actions .btn-info {
  868. color: white;
  869. background: #FF0083;
  870. }
  871. .section-setting {
  872. width: 5.4rem;
  873. background: #FFF5E5;
  874. border-radius: 0.16rem;
  875. }
  876. .section-setting .content {
  877. color: #333333;
  878. padding: 0 0.3rem;
  879. text-align: center;
  880. word-break: break-all;
  881. display: -webkit-box;
  882. display: -ms-flexbox;
  883. display: flex;
  884. -webkit-box-align: center;
  885. -ms-flex-align: center;
  886. align-items: center;
  887. -webkit-box-pack: center;
  888. -ms-flex-pack: center;
  889. justify-content: center;
  890. }
  891. .section-setting .content .form-group {
  892. margin: 0.36rem auto;
  893. background: #FFFFFF;
  894. border-radius: 0.08rem;
  895. display: -webkit-box;
  896. display: -ms-flexbox;
  897. display: flex;
  898. -webkit-box-align: center;
  899. -ms-flex-align: center;
  900. align-items: center;
  901. }
  902. .section-setting .content .form-group input {
  903. height: 0.72rem;
  904. line-height: 0.72rem;
  905. background: none;
  906. border-radius: 0.08rem;
  907. padding: 0 0 0 0.2rem;
  908. border: none;
  909. }
  910. .section-setting .content .form-group .mobile {
  911. width: 4.80rem;
  912. }
  913. .section-setting .content .form-group .code {
  914. width: 3.26rem;
  915. }
  916. .section-setting .content .form-group .send {
  917. font-size: 0.24rem;
  918. min-width: 1.5rem;
  919. height: 0.64rem;
  920. color: white;
  921. background: #FF0083;
  922. border-radius: 0.08rem;
  923. margin-right: 0.04rem;
  924. padding: 0 0.2rem;
  925. display: -webkit-box;
  926. display: -ms-flexbox;
  927. display: flex;
  928. -webkit-box-align: center;
  929. -ms-flex-align: center;
  930. align-items: center;
  931. -webkit-box-pack: center;
  932. -ms-flex-pack: center;
  933. justify-content: center;
  934. }
  935. .section-setting .content .form-group .sendcode-wait {
  936. background: #B5B5B5;
  937. }
  938. .section-setting .content .status {
  939. display: -webkit-box;
  940. display: -ms-flexbox;
  941. display: flex;
  942. -webkit-box-orient: vertical;
  943. -webkit-box-direction: normal;
  944. -ms-flex-direction: column;
  945. flex-direction: column;
  946. -webkit-box-align: center;
  947. -ms-flex-align: center;
  948. align-items: center;
  949. margin: 0.45rem auto 0.35rem;
  950. }
  951. .section-setting .content .status .status-icon {
  952. width: 0.84rem;
  953. height: 0.84rem;
  954. background: url(../images/success.png) no-repeat;
  955. background-size: 100% 100%;
  956. }
  957. .section-setting .content .status .status-name {
  958. margin-top: 0.24rem;
  959. }
  960. .section-setting .actions {
  961. width: 4.46rem;
  962. margin: 0 auto;
  963. display: -webkit-box;
  964. display: -ms-flexbox;
  965. display: flex;
  966. -webkit-box-align: center;
  967. -ms-flex-align: center;
  968. align-items: center;
  969. -webkit-box-pack: justify;
  970. -ms-flex-pack: justify;
  971. justify-content: space-between;
  972. margin-bottom: 0.39rem;
  973. }
  974. .section-setting .actions .btn {
  975. width: 2.16rem;
  976. height: 0.64rem;
  977. font-size: 0.28rem;
  978. display: -webkit-box;
  979. display: -ms-flexbox;
  980. display: flex;
  981. -webkit-box-align: center;
  982. -ms-flex-align: center;
  983. align-items: center;
  984. -webkit-box-pack: center;
  985. -ms-flex-pack: center;
  986. justify-content: center;
  987. border-radius: 0.32rem;
  988. background: #FAABD3;
  989. }
  990. .section-setting .actions .btn-primary {
  991. color: white;
  992. background: #FF0083;
  993. }
  994. .section-setting .actions .btn-lg {
  995. width: 3.36rem;
  996. margin: 0 auto;
  997. }
  998. .section-alert {
  999. width: unset;
  1000. }
  1001. .dialog-alert {
  1002. width: 4.2rem;
  1003. top: 50%;
  1004. left: 50%;
  1005. right: unset;
  1006. -webkit-transform: translate(-50%, -50%);
  1007. transform: translate(-50%, -50%);
  1008. z-index: 9998;
  1009. position: fixed;
  1010. -webkit-animation: frames-top-center-01 300ms;
  1011. animation: frames-top-center-01 300ms;
  1012. min-height: auto;
  1013. height: auto;
  1014. color: #333;
  1015. background: #FFF5E5;
  1016. border-radius: 0.16rem;
  1017. }
  1018. .dialog-alert h1 {
  1019. font-size: 0.3rem;
  1020. margin-top: 0.4rem;
  1021. }
  1022. .dialog-alert .content {
  1023. font-size: 0.28rem;
  1024. min-height: 0.8rem;
  1025. margin: 0.1rem 0.5rem;
  1026. word-break: break-all;
  1027. display: -webkit-box;
  1028. display: -ms-flexbox;
  1029. display: flex;
  1030. -webkit-box-align: center;
  1031. -ms-flex-align: center;
  1032. align-items: center;
  1033. -webkit-box-pack: center;
  1034. -ms-flex-pack: center;
  1035. justify-content: center;
  1036. }
  1037. .dialog-alert .actions .btn {
  1038. width: 3.36rem;
  1039. height: 0.64rem;
  1040. font-size: 0.28rem;
  1041. background: #FF0083;
  1042. border-radius: 0.32rem;
  1043. }
  1044. .overlaycsr {
  1045. position: fixed;
  1046. top: 0;
  1047. right: 0;
  1048. bottom: 0;
  1049. left: 0;
  1050. z-index: 9990;
  1051. background-color: #000000ab;
  1052. min-height: 6.5rem;
  1053. }
  1054. .dialog-alertsrc {
  1055. width: 7.49rem;
  1056. height: 4.57rem;
  1057. position: fixed;
  1058. top: 3.05rem;
  1059. z-index: 9998;
  1060. -webkit-animation: frames-top-center-01 300ms;
  1061. animation: frames-top-center-01 300ms;
  1062. border-radius: 0.1rem;
  1063. background: url(../images/弹窗bgg.png) no-repeat;
  1064. background-size: 100% 100%;
  1065. }
  1066. .dialog-alertsrc .guanbi {
  1067. background: url(../images/关闭bgg.png) no-repeat;
  1068. background-size: 100% 100%;
  1069. width: 0.41rem;
  1070. height: 0.41rem;
  1071. margin-left: 6.22rem;
  1072. margin-top: 0.88rem;
  1073. }
  1074. .dialog-alertsrc .content {
  1075. margin: 1rem 1.9rem;
  1076. display: -webkit-box;
  1077. display: -ms-flexbox;
  1078. display: flex;
  1079. -webkit-box-align: center;
  1080. -ms-flex-align: center;
  1081. align-items: center;
  1082. -webkit-box-pack: center;
  1083. -ms-flex-pack: center;
  1084. justify-content: center;
  1085. font-size: 0.26rem;
  1086. color: #ffffff;
  1087. letter-spacing: 0.03rem;
  1088. }
  1089. .dialog-alertsrc .actions {
  1090. height: 1rem;
  1091. display: -webkit-box;
  1092. display: -ms-flexbox;
  1093. display: flex;
  1094. -webkit-box-pack: center;
  1095. -ms-flex-pack: center;
  1096. justify-content: center;
  1097. }
  1098. .dialog-alertsrc .actions .img_btn {
  1099. background: url(../images/按钮bgg.png) no-repeat;
  1100. background-size: 100% 100%;
  1101. width: 4.51rem;
  1102. height: 0.97rem;
  1103. margin-top: -0.02rem;
  1104. }
  1105. .dialog-alertsrc .actions .btn {
  1106. display: -webkit-box;
  1107. display: -ms-flexbox;
  1108. display: flex;
  1109. -webkit-box-align: center;
  1110. -ms-flex-align: center;
  1111. align-items: center;
  1112. -webkit-box-pack: center;
  1113. -ms-flex-pack: center;
  1114. justify-content: center;
  1115. border-radius: 0.4rem;
  1116. padding: 0;
  1117. }
  1118. /*# sourceMappingURL=main.css.map */