changePhoneActivity.css 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  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. }
  193. .rule-text{
  194. width: 3.11rem;
  195. height: 0.23rem;
  196. }
  197. .entry-QQ{
  198. width: 4.37rem;
  199. height: 0.74rem;
  200. position: absolute;
  201. bottom: -0.3rem;
  202. left: 1.59rem;
  203. z-index: 99;
  204. }
  205. .entry-QQ-btn{
  206. width: 4.37rem;
  207. height: 0.74rem;
  208. position: absolute;
  209. bottom: 0;
  210. left: 0;
  211. }
  212. .entry-QQ-text{
  213. width: 3.46rem;
  214. height: 0.38rem;
  215. position: absolute;
  216. top: 0.14rem;
  217. left: 0.42rem;
  218. }
  219. .middle{
  220. width: 7.5rem;
  221. height: 13.34rem;
  222. position: relative;
  223. }
  224. .middle_bg_img{
  225. width: 100%;
  226. height: 100%;
  227. }
  228. .activity-rule{
  229. width: 5.36rem;
  230. height: 0.97rem;
  231. position: absolute;
  232. top: 0.42rem;
  233. left: 1.07rem;
  234. }
  235. .activity-rule-btn{
  236. width: 5.36rem;
  237. height: 0.97rem;
  238. position: absolute;
  239. top: 0.04rem;
  240. left: 0;
  241. }
  242. .activity-rule-text{
  243. width: 1.56rem;
  244. height: 0.37rem;
  245. position: absolute;
  246. top: 0.3rem;
  247. left: 1.9rem;
  248. }
  249. .rule1{
  250. width: 6.2rem;
  251. height: 3.98rem;
  252. position: absolute;
  253. top: 1.75rem;
  254. left: 0.65rem;
  255. }
  256. .rule2{
  257. width: 6.2rem;
  258. height: 4.7rem;
  259. position: absolute;
  260. top: 6.14rem;
  261. left: 0.65rem;
  262. }
  263. .rule3{
  264. width: 6.2rem;
  265. height: 3.13rem;
  266. position: absolute;
  267. top: 11.24rem;
  268. left: 0.65rem;
  269. z-index: 999;
  270. }
  271. .footer{
  272. width: 7.5rem;
  273. height: 9.83rem;
  274. position: relative;
  275. }
  276. .footer_bg_img{
  277. width: 100%;
  278. height: 100%;
  279. }
  280. .rule4{
  281. width: 6.2rem;
  282. height: 6.68rem;
  283. position: absolute;
  284. top: 1.75rem;
  285. left: 0.65rem;
  286. }
  287. #toast-container>.toast-error {
  288. background-image: none !important;
  289. }
  290. .toast-error {
  291. background-color: rgba(0, 0, 0, 0.8);
  292. }
  293. #toast-container>div {
  294. font-size: 14px;
  295. min-width: 80px !important;
  296. padding: 12px !important;
  297. box-shadow: none;
  298. }
  299. .toast-center-center {
  300. min-width: 100px;
  301. top: 50%;
  302. left: 50%;
  303. text-align: center;
  304. transform: translateX(-50%);
  305. }
  306. @media (max-width: 480px) and (min-width: 241px) {
  307. #toast-container>div {
  308. min-width: 80px !important;
  309. width: auto;
  310. }
  311. }