register.css 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. @media screen and (min-width: 320px) {
  2. html {
  3. font-size: 21.33333333px;
  4. }
  5. }
  6. @media screen and (min-width: 360px) {
  7. html {
  8. font-size: 24px;
  9. }
  10. }
  11. @media screen and (min-width: 375px) {
  12. html {
  13. font-size: 25px;
  14. }
  15. }
  16. @media screen and (min-width: 384px) {
  17. html {
  18. font-size: 25.6px;
  19. }
  20. }
  21. @media screen and (min-width: 400px) {
  22. html {
  23. font-size: 26.66666667px;
  24. }
  25. }
  26. @media screen and (min-width: 414px) {
  27. html {
  28. font-size: 27.6px;
  29. }
  30. }
  31. @media screen and (min-width: 424px) {
  32. html {
  33. font-size: 28.26666667px;
  34. }
  35. }
  36. @media screen and (min-width: 540px) {
  37. html {
  38. font-size: 36px;
  39. }
  40. }
  41. @media screen and (min-width: 720px) {
  42. html {
  43. font-size: 48px;
  44. }
  45. }
  46. @media screen and (min-width: 750px) {
  47. html {
  48. font-size: 50px;
  49. }
  50. }
  51. body {
  52. margin: 0;
  53. padding: 0;
  54. background-color: #12141B;
  55. color: #E5E7EF;
  56. }
  57. .title {
  58. text-align: center;
  59. font-size: 0.9rem;
  60. margin-top: 2.72rem;
  61. }
  62. .content {
  63. display: flex;
  64. flex-direction: column;
  65. align-items: center;
  66. margin-top: 1.66rem;
  67. }
  68. .content .out-box {
  69. width: 13rem;
  70. height: 1.84rem;
  71. margin-bottom: 0.8rem;
  72. border: 1px solid #CCCCCC;
  73. border-radius: 0.92rem;
  74. }
  75. .content .out-box .inner-box {
  76. display: flex;
  77. align-items: center;
  78. width: 12.36rem;
  79. height: 1.84rem;
  80. margin: 0 auto;
  81. }
  82. .content .out-box .icon {
  83. display: flex;
  84. align-items: center;
  85. justify-content: center;
  86. width: 1.94rem;
  87. height: 0.8rem;
  88. }
  89. .content .out-box .icon .icon-img {
  90. width: 0.8rem;
  91. height: 0.8rem;
  92. margin-left: 0.1rem;
  93. }
  94. .content .out-box .line {
  95. width: 0.04rem;
  96. height: 0.8rem;
  97. background-color: #6F7073;
  98. }
  99. .content .out-box .input {
  100. flex: 1;
  101. height: 80%;
  102. margin-left: 0.48rem;
  103. }
  104. .content .out-box .input input {
  105. display: block;
  106. width: 100%;
  107. height: 100%;
  108. margin: 0;
  109. padding: 0;
  110. background-color: transparent;
  111. border: none;
  112. color: white;
  113. font-size: 0.56rem;
  114. outline: none;
  115. }
  116. .content .out-box .btn-code {
  117. width: 3.48rem;
  118. height: 1.08rem;
  119. font-size: 0.48rem;
  120. background-color: #FC913A;
  121. border-radius: 0.54rem;
  122. text-align: center;
  123. line-height: 1.08rem;
  124. margin-left: 0.28rem;
  125. }
  126. .content .out-box .btn-password {
  127. display: flex;
  128. align-items: center;
  129. justify-content: right;
  130. width: 0.8rem;
  131. height: 0.8rem;
  132. margin-right: 0.56rem;
  133. margin-left: 0.28rem;
  134. }
  135. .content .out-box .btn-password .btn-password-img {
  136. width: 0.72rem;
  137. height: 0.52rem;
  138. }
  139. .content .yaoqingma {
  140. margin: 0;
  141. }
  142. .content .protocol {
  143. display: flex;
  144. align-items: center;
  145. justify-content: center;
  146. width: 13rem;
  147. height: 0.56rem;
  148. font-size: 0.52rem;
  149. color: #707173;
  150. margin-top: 0.84rem;
  151. margin-bottom: 0.84rem;
  152. }
  153. .content .protocol input[type='checkbox'] {
  154. box-sizing: border-box;
  155. width: 0.56rem;
  156. height: 0.56rem;
  157. background-color: transparent;
  158. -webkit-appearance: none;
  159. border: 2px solid #979797;
  160. border-radius: 12px;
  161. outline: none;
  162. }
  163. .content .protocol .checkbox input[type='checkbox']:checked {
  164. background-color: #FF9B40;
  165. }
  166. .content .protocol .checkbox {
  167. display: flex;
  168. align-items: center;
  169. }
  170. .content .protocol .txt {
  171. display: block;
  172. margin-left: 0.28rem;
  173. line-height: 0.56rem;
  174. }
  175. .content .protocol .txt a {
  176. color: #D48634;
  177. text-decoration: none;
  178. }
  179. .content input[type='submit'] {
  180. width: 13rem;
  181. height: 1.84rem;
  182. border-radius: 0.92rem;
  183. border: none;
  184. background-image: linear-gradient(to right, #FF7C39, #FF9C40);
  185. color: white;
  186. font-size: 0.56rem;
  187. box-shadow: 0 0 8px #ff7b398a;
  188. }
  189. /*弹窗*/
  190. .Mask{position: fixed;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0,0,0,.5);display: flex;align-items: center;justify-content: center;}
  191. #content{width: 80%;
  192. border-radius: 5px;
  193. background: #fff;
  194. padding: 15px;}
  195. .name{font-size: 16px;
  196. text-align: center;
  197. color: #333;
  198. padding-bottom: 15px;}
  199. .neir{font-size: 12px;
  200. color: #6E6E6E;
  201. line-height: 16px;
  202. min-height: 50px;
  203. max-height: 400px;
  204. overflow: auto;
  205. }
  206. .neir::-webkit-scrollbar{display:none;}
  207. .btn{width: 90%;
  208. height: 36px;
  209. border-radius: 18px;
  210. background: #0076c7;
  211. text-align: center;
  212. line-height: 36px;
  213. font-size: 14px;
  214. color: #fff;
  215. margin-top: 20px;
  216. margin-left: 5%;
  217. background-image: linear-gradient(to right, #FF7C39, #FF9C40);
  218. }
  219. p{
  220. /*margin-top: inherit;*/
  221. margin-bottom: 0;
  222. }