changePhoneActivity.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
  1. @media screen and (max-width: 750px) {
  2. html {
  3. font-size: calc(100vw / 7.5);
  4. }
  5. }
  6. @media screen and (min-width: 750px) {
  7. html {
  8. font-size: calc(450px / 7.5);
  9. }
  10. }
  11. html, body, div, ul, li, p {
  12. padding: 0;
  13. margin: 0;
  14. }
  15. ul, li {
  16. list-style: none;
  17. }
  18. .header{
  19. width: 7.5rem;
  20. height: 13.34rem;
  21. position: relative;
  22. }
  23. .bg_img{
  24. width: 100%;
  25. height: 100%;
  26. }
  27. .share{
  28. width: 0.88rem;
  29. height: 0.45rem;
  30. position: absolute;
  31. top: 0.7rem;
  32. right: 0;
  33. }
  34. .logo{
  35. width: 2.36rem;
  36. height: 0.73rem;
  37. position: absolute;
  38. top: 1.44rem;
  39. left: 2.52rem;
  40. }
  41. .theme{
  42. width: 5.43rem;
  43. height: 2.44rem;
  44. position: absolute;
  45. top: 2.5rem;
  46. left: 1.11rem;
  47. }
  48. .activity-bg{
  49. width: 4.91rem;
  50. height: 0.98rem;
  51. position: absolute;
  52. top: 5.08rem;
  53. left: 1.28rem;
  54. }
  55. .time{
  56. width: 4.25rem;
  57. height: 0.63rem;
  58. position: absolute;
  59. top: 5.21rem;
  60. left: 1.62rem;
  61. }
  62. .login-container{
  63. width: 6.44rem;
  64. height: 5.88rem;
  65. position: absolute;
  66. top: 6.26rem;
  67. left: 0.65rem;
  68. }
  69. .login-bg{
  70. width: 100%;
  71. height: 100%;
  72. position: absolute;
  73. top: 0;
  74. left: 0;
  75. }
  76. .login-row-select{
  77. width: 5.04rem;
  78. height: 0.72rem;
  79. position: absolute;
  80. top: 1.14rem;
  81. left: 0.63rem;
  82. background-color: #FFFFFF;
  83. border-radius: 5px;
  84. }
  85. .options{
  86. width: 2.92rem;
  87. height: 1.2rem;
  88. position: absolute;
  89. top: 1.24rem;
  90. left: 1.73rem;
  91. display: none;
  92. }
  93. .show{
  94. display: block;
  95. }
  96. .first{
  97. width: 2.92rem;
  98. height: 0.57rem;
  99. position: absolute;
  100. top: 0;
  101. left: 0;
  102. }
  103. .second{
  104. width: 2.92rem;
  105. height: 0.57rem;
  106. position: absolute;
  107. top: 0.71rem;
  108. left: 0;
  109. z-index: 99;
  110. }
  111. .first-text{
  112. font-size: 14px;
  113. color: #FFFFFF;
  114. position: absolute;
  115. top: 0.1rem;
  116. left: 0.84rem;
  117. }
  118. .second-text{
  119. font-size: 14px;
  120. color: #FFFFFF;
  121. position: absolute;
  122. top: 0.81rem;
  123. left: 0.84rem;
  124. z-index: 999;
  125. }
  126. .login-row-account{
  127. width: 5.04rem;
  128. height: 0.72rem;
  129. position: absolute;
  130. top: 2.1rem;
  131. left: 0.63rem;
  132. background-color: #FFFFFF;
  133. border-radius: 5px;
  134. }
  135. .login-row-password{
  136. width: 5.04rem;
  137. height: 0.72rem;
  138. position: absolute;
  139. top: 3.06rem;
  140. left: 0.63rem;
  141. background-color: #FFFFFF;
  142. border-radius: 5px;
  143. }
  144. .login-row-title{
  145. position: absolute;
  146. top: 0.14rem;
  147. left: 0.14rem;
  148. font-size: 16px;
  149. }
  150. .login-row-plc{
  151. position: absolute;
  152. top: 0.1rem;
  153. left: 1.14rem;
  154. font-size: 16px;
  155. }
  156. .login-row-ipt{
  157. border: none;
  158. outline: none;
  159. position: absolute;
  160. top: 0.2rem;
  161. left: 1.2rem;
  162. }
  163. .icon-down-img{
  164. width: 0.32rem;
  165. height: 0.18rem;
  166. position: absolute;
  167. top: 0.26rem;
  168. right: 0.2rem;
  169. }
  170. .login-btn{
  171. width: 2.75rem;
  172. height: 0.75rem;
  173. position: absolute;
  174. bottom: 0.22rem;
  175. left: 1.76rem;
  176. }
  177. .login-btn-text{
  178. width: 1.81rem;
  179. height: 0.48rem;
  180. position: absolute;
  181. bottom: 0.39rem;
  182. left: 2.21rem;
  183. }
  184. .read-rule{
  185. position: absolute;
  186. top: 11.58rem;
  187. left: 2.02rem;
  188. }
  189. .selected{
  190. width: 0.2rem;
  191. height: 0.2rem;
  192. position: absolute;
  193. top: 0.82rem;
  194. left: 0.12rem;
  195. }
  196. .no-selected{
  197. width: 0.2rem;
  198. height: 0.2rem;
  199. position: absolute;
  200. top: 0.82rem;
  201. left: 0.12rem;
  202. display: none;
  203. }
  204. .rule-text{
  205. width: 3.11rem;
  206. height: 0.23rem;
  207. position: absolute;
  208. top: 0.8rem;
  209. left: 0.42rem;
  210. }
  211. .entry-QQ{
  212. width: 5.84rem;
  213. height: 0.6rem;
  214. position: absolute;
  215. bottom: -0.2rem;
  216. left: 0.83rem;
  217. z-index: 99;
  218. }
  219. .entry-QQ-btn{
  220. width: 5.84rem;
  221. height: 0.6rem;
  222. position: absolute;
  223. bottom: 0;
  224. left: 0;
  225. }
  226. .middle{
  227. width: 7.5rem;
  228. height: 13.34rem;
  229. position: relative;
  230. }
  231. .middle_bg_img{
  232. width: 100%;
  233. height: 100%;
  234. }
  235. .activity-rule{
  236. width: 5.36rem;
  237. height: 0.97rem;
  238. position: absolute;
  239. top: 0.42rem;
  240. left: 1.07rem;
  241. }
  242. .activity-rule-btn{
  243. width: 5.36rem;
  244. height: 0.97rem;
  245. position: absolute;
  246. top: 0.04rem;
  247. left: 0;
  248. }
  249. .activity-rule-text{
  250. width: 1.56rem;
  251. height: 0.37rem;
  252. position: absolute;
  253. top: 0.3rem;
  254. left: 1.9rem;
  255. }
  256. .rule1{
  257. width: 6.2rem;
  258. height: 3.98rem;
  259. position: absolute;
  260. top: 1.75rem;
  261. left: 0.65rem;
  262. }
  263. .rule2{
  264. width: 6.2rem;
  265. height: 4.7rem;
  266. position: absolute;
  267. top: 6.14rem;
  268. left: 0.65rem;
  269. }
  270. .rule3{
  271. width: 6.2rem;
  272. height: 3.13rem;
  273. position: absolute;
  274. top: 11.24rem;
  275. left: 0.65rem;
  276. z-index: 999;
  277. }
  278. .footer{
  279. width: 7.5rem;
  280. height: 9.83rem;
  281. position: relative;
  282. }
  283. .footer_bg_img{
  284. width: 100%;
  285. height: 100%;
  286. }
  287. .rule4{
  288. width: 6.2rem;
  289. height: 6.68rem;
  290. position: absolute;
  291. top: 1.75rem;
  292. left: 0.65rem;
  293. }
  294. #toast-container>.toast-error {
  295. background-image: none !important;
  296. }
  297. .toast-error {
  298. background-color: rgba(0, 0, 0, 0.8);
  299. }
  300. #toast-container>div {
  301. font-size: 14px;
  302. min-width: 80px !important;
  303. padding: 12px !important;
  304. box-shadow: none;
  305. }
  306. .toast-center-center {
  307. min-width: 100px;
  308. top: 50%;
  309. left: 50%;
  310. text-align: center;
  311. transform: translateX(-50%);
  312. }
  313. @media (max-width: 480px) and (min-width: 241px) {
  314. #toast-container>div {
  315. min-width: 80px !important;
  316. width: auto;
  317. }
  318. }
  319. .mask {
  320. width: 7.5rem;
  321. height: 100vh;
  322. position: absolute;
  323. top: 0;
  324. left: 0;
  325. background: rgba(0, 0, 0, 0.24);
  326. display: none;
  327. }
  328. .dialog {
  329. width: 4.96rem;
  330. height: 5.08rem;
  331. position: absolute;
  332. left: 1.27rem;
  333. top: -6.96rem;
  334. z-index: 999;
  335. }
  336. .dialog-bg{
  337. width: 100%;
  338. height: 100%;
  339. }
  340. .title{
  341. width: 2.75rem;
  342. height: 0.38rem;
  343. position: absolute;
  344. top: 1.22rem;
  345. left: 1.1rem;
  346. }
  347. .content{
  348. width: 3.55rem;
  349. height: 1.11rem;
  350. position: absolute;
  351. top: 2.01rem;
  352. left: 0.72rem;
  353. }
  354. .register-btn{
  355. width: 2.29rem;
  356. height: 0.64rem;
  357. position: absolute;
  358. bottom: 0.88rem;
  359. left: 1.35rem;
  360. }
  361. .register-text{
  362. width: 1.44rem;
  363. height: 0.39rem;
  364. position: absolute;
  365. bottom: 1.01rem;
  366. left: 1.78rem;
  367. }
  368. .tip {
  369. width: 4.88rem;
  370. height: 2.8rem;
  371. position: absolute;
  372. left: 1.31rem;
  373. top: -6.96rem;
  374. z-index: 999;
  375. }
  376. .tip-bg{
  377. width: 100%;
  378. height: 100%;
  379. }
  380. .tip-title{
  381. width: 4.88rem;
  382. text-align: center;
  383. font-size: 14px;
  384. position: absolute;
  385. top: 0.95rem;
  386. }
  387. .sure-btn{
  388. width: 1.43rem;
  389. height: 0.66rem;
  390. position: absolute;
  391. bottom: 0.53rem;
  392. left: 1.76rem;
  393. }
  394. .sure-text{
  395. width: 0.78rem;
  396. height: 0.34rem;
  397. position: absolute;
  398. bottom: 0.73rem;
  399. left: 2.05rem;
  400. }
  401. .hidden{
  402. display: none;
  403. }
  404. .show{
  405. display: block;
  406. }