scanboardLogin.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. html,body{
  2. height: 100%;
  3. overflow: hidden;
  4. }
  5. body{
  6. background: url(../images/loginBg.jpg);
  7. background-size: 100% 100%;
  8. }
  9. input:-webkit-autofill,
  10. textarea:-webkit-autofill,
  11. select:-webkit-autofill {
  12. -webkit-box-shadow: 0 0 0 1000px transparent inset;
  13. background-color: none;
  14. }
  15. .wp{
  16. height: 100%;
  17. /* background: url(../images/bgImg.png) no-repeat center 0;
  18. background-size: auto 100%; */
  19. position: relative;
  20. z-index: 2;
  21. }
  22. #particles-js{
  23. position: absolute;
  24. top: 0;
  25. left: 0%;
  26. width: 100%;
  27. height: 100%;
  28. z-index: 1;
  29. opacity: 0.5;
  30. }
  31. .boardLogin{
  32. width: 16.8%;
  33. min-width: 200px;
  34. margin: 0 auto;
  35. position: relative;
  36. top: 50%;
  37. -webkit-transform: translateY(-50%);
  38. -moz-transform: translateY(-50%);
  39. -ms-transform: translateY(-50%);
  40. -o-transform: translateY(-50%);
  41. transform: translateY(-50%);
  42. }
  43. .boardLogin .logo{
  44. display: block;
  45. margin-bottom: 40px;
  46. text-align: center;
  47. }
  48. .boardLogin .logo img{
  49. width: 100%;
  50. max-width: 326px;
  51. }
  52. .boardLogin .inpGroup{
  53. height: 20px;
  54. padding: 14px 24px 14px 52px;
  55. background: #2a658a;
  56. background: rgba(255,255,255,0.1);
  57. border-radius: 24px;
  58. position: relative;
  59. }
  60. .boardLogin .inpGroup span{
  61. display: block;
  62. width: 20px;
  63. height: 20px;
  64. position: absolute;
  65. top: 14px;
  66. left: 24px;
  67. }
  68. .boardLogin .inpGroup span.loginIco1{
  69. background: url(../images/s_ico6.png);
  70. }
  71. .boardLogin .inpGroup span.loginIco2{
  72. background: url(../images/s_ico7.png);
  73. }
  74. .boardLogin .inpGroup input{
  75. display: block;
  76. width: 100%;
  77. height: 20px;
  78. line-height: 20px;
  79. color: #fff;
  80. }
  81. .boardLogin .inpGroup input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  82. color: #fff; opacity:1;
  83. }
  84. .boardLogin .inpGroup input::-moz-placeholder { /* Mozilla Firefox 19+ */
  85. color: #fff;opacity:1;
  86. }
  87. .boardLogin .inpGroup input:-ms-input-placeholder{
  88. color: #fff;opacity:1;
  89. }
  90. .boardLogin .inpGroup input::-webkit-input-placeholder{
  91. color: #fff;opacity:1;
  92. }
  93. .boardLogin .prompt{
  94. min-height: 20px;
  95. padding: 5px 24px 10px 24px;
  96. }
  97. .boardLogin p{
  98. line-height: 16px;
  99. font-size: 12px;
  100. display: none;
  101. }
  102. .boardLogin p.error{
  103. color: #f60;
  104. }
  105. .boardLogin p.success{
  106. color: #449d44;
  107. }
  108. .boardLogin .submit{
  109. width: 100%;
  110. box-sizing: border-box;
  111. display: block;
  112. height: 40px;
  113. line-height: 38px;
  114. text-align: center;
  115. border: 1px solid #01d1f2;
  116. border-radius: 20px;
  117. color: #fff;
  118. cursor: pointer;
  119. -webkit-transition: 0.3s ease-in-out;
  120. -moz-transition: 0.3s ease-in-out;
  121. -ms-transition: 0.3s ease-in-out;
  122. -o-transition: 0.3s ease-in-out;
  123. transition: 0.3s ease-in-out;
  124. }
  125. .boardLogin .submit:hover{
  126. background: #01d1f2;
  127. -webkit-transition: 0.3s ease-in-out;
  128. -moz-transition: 0.3s ease-in-out;
  129. -ms-transition: 0.3s ease-in-out;
  130. -o-transition: 0.3s ease-in-out;
  131. transition: 0.3s ease-in-out;
  132. }
  133. @media screen and (max-width: 1919px) and (min-width: 1680px){
  134. .boardLogin .logo{
  135. margin-bottom: 38px;
  136. }
  137. .boardLogin .inpGroup{
  138. padding: 12px 22px 12px 50px;
  139. border-radius: 22px;
  140. }
  141. .boardLogin .inpGroup span{
  142. width: 20px;
  143. height: 20px;
  144. top: 12px;
  145. left: 22px;
  146. }
  147. .boardLogin .prompt{
  148. min-height: 20px;
  149. padding: 5px 22px 10px 22px;
  150. }
  151. .boardLogin p{
  152. line-height: 16px;
  153. }
  154. .boardLogin .submit{
  155. height: 38px;
  156. line-height: 36px;
  157. border-radius: 20px;
  158. }
  159. }
  160. @media screen and (max-width: 1679px) and (min-width: 1440px){
  161. .boardLogin .logo{
  162. margin-bottom: 34px;
  163. }
  164. .boardLogin .inpGroup{
  165. padding: 8px 18px 8px 48px;
  166. border-radius: 18px;
  167. }
  168. .boardLogin .inpGroup span{
  169. width: 18px;
  170. height: 18px;
  171. top: 8px;
  172. left: 18px;
  173. }
  174. .boardLogin .inpGroup span.loginIco1{
  175. background: url(../images/s_ico6.png);
  176. background-size: 100% 100%;
  177. }
  178. .boardLogin .inpGroup span.loginIco2{
  179. background: url(../images/s_ico7.png);
  180. background-size: 100% 100%;
  181. }
  182. .boardLogin .prompt{
  183. min-height: 20px;
  184. padding: 5px 18px 10px 18px;
  185. }
  186. .boardLogin p{
  187. line-height: 16px;
  188. }
  189. .boardLogin .submit{
  190. height: 36px;
  191. line-height: 34px;
  192. border-radius: 18px;
  193. }
  194. }
  195. @media screen and (max-width: 1439px){
  196. .boardLogin .logo{
  197. margin-bottom: 30px;
  198. }
  199. .boardLogin .inpGroup{
  200. padding: 6px 16px 6px 46px;
  201. border-radius: 16px;
  202. }
  203. .boardLogin .inpGroup span{
  204. width: 18px;
  205. height: 18px;
  206. top: 6px;
  207. left: 16px;
  208. }
  209. .boardLogin .inpGroup span.loginIco1{
  210. background: url(../images/s_ico6.png);
  211. background-size: 100% 100%;
  212. }
  213. .boardLogin .inpGroup span.loginIco2{
  214. background: url(../images/s_ico7.png);
  215. background-size: 100% 100%;
  216. }
  217. .boardLogin .prompt{
  218. min-height: 20px;
  219. padding: 2px 16px 6px 16px;
  220. }
  221. .boardLogin p{
  222. line-height: 16px;
  223. }
  224. .boardLogin .submit{
  225. height: 32px;
  226. line-height: 30px;
  227. border-radius: 16px;
  228. }
  229. }