main.css 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
  1. @font-face {
  2. font-family: "SourceHanSansSC-Regular";
  3. 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");
  4. }
  5. @font-face {
  6. font-family: "SourceHanSansSC-Medium";
  7. 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");
  8. }
  9. @font-face {
  10. font-family: "SourceHanSansSC-Light";
  11. 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");
  12. }
  13. html,
  14. html,
  15. body,
  16. div,
  17. span,
  18. applet,
  19. object,
  20. iframe,
  21. h1,
  22. h2,
  23. h3,
  24. h4,
  25. h5,
  26. h6,
  27. p,
  28. blockquote,
  29. pre,
  30. a,
  31. abbr,
  32. acronym,
  33. address,
  34. big,
  35. cite,
  36. code,
  37. del,
  38. dfn,
  39. em,
  40. img,
  41. ins,
  42. kbd,
  43. q,
  44. s,
  45. samp,
  46. small,
  47. strike,
  48. strong,
  49. sub,
  50. sup,
  51. tt,
  52. var,
  53. b,
  54. u,
  55. i,
  56. center,
  57. dl,
  58. dt,
  59. dd,
  60. ol,
  61. ul,
  62. li,
  63. fieldset,
  64. form,
  65. label,
  66. legend,
  67. table,
  68. caption,
  69. tbody,
  70. tfoot,
  71. thead,
  72. tr,
  73. th,
  74. td,
  75. article,
  76. aside,
  77. canvas,
  78. details,
  79. embed,
  80. figure,
  81. figcaption,
  82. footer,
  83. header,
  84. hgroup,
  85. menu,
  86. nav,
  87. output,
  88. ruby,
  89. section,
  90. summary,
  91. time,
  92. mark,
  93. audio,
  94. video {
  95. margin: 0;
  96. padding: 0;
  97. border: 0;
  98. font-size: 100%;
  99. font: inherit;
  100. vertical-align: baseline;
  101. }
  102. article,
  103. aside,
  104. details,
  105. figcaption,
  106. figure,
  107. footer,
  108. header,
  109. hgroup,
  110. menu,
  111. nav,
  112. section {
  113. display: block;
  114. }
  115. ol,
  116. ul {
  117. list-style: none;
  118. }
  119. blockquote,
  120. q {
  121. quotes: none;
  122. }
  123. blockquote:before,
  124. blockquote:after,
  125. q:before,
  126. q:after {
  127. content: '';
  128. content: none;
  129. }
  130. table {
  131. border-collapse: collapse;
  132. border-spacing: 0;
  133. }
  134. input {
  135. -webkit-box-sizing: border-box;
  136. -moz-box-sizing: border-box;
  137. box-sizing: border-box;
  138. }
  139. body {
  140. height: 100%;
  141. }
  142. body {
  143. background: url(../images/bg-big.png) no-repeat #ffeee0;
  144. font-family: "SourceHanSansSC-Regular", sans-serif, "Microsoft YaHei", "微软雅黑", STXihei, SimHei, "华文细黑";
  145. background-size: 100%;
  146. min-height: 5.98rem;
  147. font-size: 0.3rem;
  148. margin: 0;
  149. }
  150. .dialog-agr {
  151. width: 6.6rem;
  152. height: 10.11rem;
  153. background: url(../images/bg-agr.png) no-repeat;
  154. background-size: 100% 100%;
  155. z-index: 9991;
  156. position: fixed;
  157. left: 50%;
  158. top: 50%;
  159. transform: translate(-50%, -50%);
  160. overflow: hidden;
  161. }
  162. .head {
  163. position: relative;
  164. padding-top: 0.3rem;
  165. }
  166. .overlay {
  167. position: fixed;
  168. top: 0;
  169. right: 0;
  170. bottom: 0;
  171. left: 0;
  172. z-index: 9990;
  173. background-color: rgba(0, 0, 0, 0.4);
  174. min-height: 6.5rem;
  175. }
  176. .img-a {
  177. width: 2.41rem;
  178. height: 1.4rem;
  179. margin: 0.24rem auto;
  180. background: url(../images/product-douyin-de.png) no-repeat;
  181. background-size: 100% 100%;
  182. margin-top: 0.33rem;
  183. }
  184. .img-b {
  185. width: 2.41rem;
  186. height: 1.4rem;
  187. margin: 0.24rem auto;
  188. background: url(../images/product-baidu.png) no-repeat;
  189. background-size: 100% 100%;
  190. }
  191. .products {
  192. display: flex;
  193. justify-content: center;
  194. margin-top: 0.7rem;
  195. }
  196. .item {
  197. width: 3.34rem;
  198. height: 1.88rem;
  199. background-color: #95C1FF;
  200. margin-top: 0.07rem;
  201. margin-right: 0.12rem;
  202. border-radius: 0.2rem;
  203. }
  204. .banner {
  205. padding-top: 0.6rem;
  206. }
  207. .banber {
  208. width: 4.94rem;
  209. height: 4.42rem;
  210. margin: 0 auto;
  211. background: url(../images/banner.png) no-repeat;
  212. background-size: 100% 100%;
  213. /* margin-top: -0.06rem; */
  214. }
  215. .order {
  216. width: 6.33rem;
  217. height: 0.97rem;
  218. margin: 0.14rem auto 0;
  219. background: url(../images/bg-btn-order-9.png) no-repeat;
  220. background-size: 100% 100%;
  221. }
  222. .text {
  223. border-bottom: 0.02rem solid #FFF;
  224. padding-bottom: 0.1rem;
  225. }
  226. .more {
  227. height: 0.5rem;
  228. color: #FFF;
  229. font-size: 0.26rem;
  230. font-weight: 400;
  231. text-align: center;
  232. margin-top: 0.25rem;
  233. }
  234. .flex-c {
  235. display: flex;
  236. margin-top: 0.5rem;
  237. justify-content: center;
  238. }
  239. .modify {
  240. width: 3.83rem;
  241. height: 1.8rem;
  242. background: url(../images/bg-btn-modify.png) no-repeat;
  243. background-size: 100%;
  244. }
  245. .img-d {
  246. width: 3.83rem;
  247. height: 1.8rem;
  248. background: url(../images/bg-btn-cancel.png) no-repeat;
  249. background-size: 100%;
  250. }
  251. .title {
  252. width: 2.47rem;
  253. height: 0.95rem;
  254. background: url(../images/tips-title.png) no-repeat;
  255. background-size: 100% 100%;
  256. margin: 0 auto;
  257. }
  258. .close {
  259. position: absolute;
  260. top: 0.2rem;
  261. right: 0.18rem;
  262. width: 0.16rem;
  263. height: 0.16rem;
  264. background: url(../images/btn-close.png) no-repeat;
  265. background-size: 100% 100%;
  266. }
  267. ul {
  268. color: #333333;
  269. font-size: 0.26rem;
  270. margin: 0.3rem;
  271. height: 8.18rem;
  272. overflow: scroll;
  273. text-align: justify;
  274. }
  275. li {
  276. margin-bottom: 0.1rem;
  277. }
  278. .active {
  279. width: 3.53rem;
  280. height: 2.2rem;
  281. margin-top: 0;
  282. background: url(../images/bg-item-active.png) no-repeat;
  283. background-size: 100% 100%;
  284. }
  285. .banner-text {
  286. width: 4.94rem;
  287. height: 4.42rem;
  288. margin: 0 auto;
  289. background: url(../images/banner.png) no-repeat;
  290. background-size: 100% 100%;
  291. }
  292. .login {
  293. width: 7.19rem;
  294. height: 4.71rem;
  295. margin: 0 auto;
  296. background: url(../images/bg-login-border.png) no-repeat;
  297. background-size: 100% 100%;
  298. }
  299. .form-group {
  300. border-radius: 0.2rem;
  301. padding: 0.4rem 0.2rem 0.35rem;
  302. }
  303. .input-row {
  304. display: flex;
  305. align-content: space-between;
  306. justify-content: center;
  307. margin-bottom: 0.4rem;
  308. }
  309. .smscode {
  310. width: 100%;
  311. margin-right: 0.15rem;
  312. }
  313. .sendcode-wait {
  314. font-weight: unset;
  315. }
  316. .mb0 {
  317. margin-bottom: 0;
  318. }
  319. .sms-form {
  320. padding: 0.3rem 0.4rem 0;
  321. }
  322. input::-webkit-input-placeholder {
  323. color: #b1b1b1;
  324. font-size: 0.28rem;
  325. }
  326. input::-moz-placeholder {
  327. color: #b1b1b1;
  328. font-size: 0.28rem;
  329. }
  330. input:-moz-placeholder {
  331. color: #b1b1b1;
  332. font-size: 0.28rem;
  333. }
  334. input:-ms-input-placeholder {
  335. color: #b1b1b1;
  336. font-size: 0.28rem;
  337. }
  338. .btn {
  339. color: white;
  340. font-size: 0.34rem;
  341. height: 0.7rem;
  342. display: flex;
  343. align-items: center;
  344. justify-content: center;
  345. width: 2rem;
  346. border-radius: 0.4rem;
  347. }
  348. .sendcode {
  349. color: white;
  350. font-size: 0.32rem;
  351. font-weight: bold;
  352. height: .86rem;
  353. line-height: 0.86rem;
  354. padding: 0 0.2rem;
  355. word-break: keep-all;
  356. white-space: nowrap;
  357. border-radius: 0.1rem;
  358. background: url('../images/bg-btn-send-smscode.png') no-repeat;
  359. background-size: 100% 100%;
  360. }
  361. input {
  362. font-size: 0.36rem;
  363. width: 100%;
  364. height: 0.88rem;
  365. outline: none;
  366. -webkit-appearance: none;
  367. min-width: 2.4rem;
  368. border: 0.01rem solid rgb(204, 204, 204);
  369. border-radius: 0.1rem;
  370. padding-left: 0.3rem;
  371. }
  372. .dialog-alert {
  373. top: 50%;
  374. transform: translateY(-50%);
  375. left: 1.2rem;
  376. right: 1.2rem;
  377. z-index: 9998;
  378. position: fixed;
  379. animation: frames-top-center-01 300ms;
  380. border-radius: 0.1rem;
  381. min-height: auto;
  382. height: auto;
  383. background: white;
  384. color: black;
  385. height: 3.15rem;
  386. }
  387. .actionss {
  388. width: 2.58rem;
  389. height: 0.89rem;
  390. margin: 0.31rem auto 0;
  391. background: url(../images/btn-cancel.png) no-repeat;
  392. background-size: 100% 100%;
  393. }
  394. .actionss>.login {
  395. background: none;
  396. }
  397. .actions {
  398. height: 1rem;
  399. display: flex;
  400. justify-content: center;
  401. }
  402. .actions>.btn {
  403. background: linear-gradient(-90deg, #4e52ef, #10b1fd);
  404. color: white;
  405. font-size: 0.34rem;
  406. height: 0.7rem;
  407. display: flex;
  408. align-items: center;
  409. justify-content: center;
  410. width: 2rem;
  411. border-radius: 0.4rem;
  412. }
  413. .dialog-meesag>.actions {
  414. display: flex;
  415. margin: 0 0.2 rem 0.24 rem;
  416. }
  417. .dialog-meesage>.content {
  418. color: #2A2A2A;
  419. font-size: 0.36rem;
  420. padding: 0.6rem;
  421. text-align: center;
  422. }
  423. .dialog-meesage>.actions>.btn {
  424. width: 3.05rem;
  425. height: 0.83rem;
  426. margin: 0 auto;
  427. background: url(../images/bg-btn-okay.png) no-repeat;
  428. background-size: 100% 100%;
  429. }
  430. h1 {
  431. font-size: 0.36rem;
  432. font-weight: bold;
  433. text-align: center;
  434. margin-top: 0.5rem;
  435. }
  436. .warning {
  437. position: absolute;
  438. top: 14px;
  439. right: -45px;
  440. left: 4rem;
  441. background: #FFFFFF;
  442. box-shadow: 0 2px 10px 0 rgb(91 91 91 / 50%);
  443. border-radius: 3px;
  444. font-size: 12px;
  445. color: #FF1516;
  446. padding: 10px;
  447. }
  448. .dialog-meesage {
  449. width: 4.93rem;
  450. min-height: 2.8rem;
  451. background: url(../images/bg-dialog.png) no-repeat;
  452. background-size: 100% 100%;
  453. z-index: 9991;
  454. position: fixed;
  455. left: 50%;
  456. top: 50%;
  457. transform: translate(-50%, -50%);
  458. }
  459. .dialog-alert>.content {
  460. min-height: 0.8rem;
  461. margin: 0.2rem 0.6rem;
  462. display: flex;
  463. align-items: center;
  464. justify-content: center;
  465. font-size: 0.3rem;
  466. }
  467. .loading {
  468. position: absolute;
  469. top: 5rem;
  470. left: 1.8rem;
  471. width: 4rem;
  472. border-radius: 0.13rem;
  473. text-indent: 45px;
  474. height: 0.6rem;
  475. line-height: 0.5rem;
  476. }
  477. .loading>.content {
  478. color: #FFFF;
  479. }