login.less 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. html,body,#login{
  2. height: 100%;
  3. }
  4. body{
  5. background-color: #ffffff;
  6. }
  7. body,p{
  8. margin: 0;
  9. }
  10. input:focus,textarea:focus {
  11. outline: none;
  12. }
  13. #login{
  14. display: flex;
  15. flex-direction:column;
  16. height: 893px;
  17. min-width: 1200px;
  18. background:url("../images/pic.png") no-repeat;
  19. background-position: 50%;
  20. .ms-none{
  21. display: none !important;
  22. }
  23. .ms-login-float{
  24. float: left;
  25. }
  26. .ms-head,.ms-footer,.ms-content-form,.ms-content-code{
  27. background-color: #ffffff;
  28. }
  29. .ms-head-line,.ms-head-welcome-login,.ms-footer{
  30. color: #999999;
  31. }
  32. .ms-head-welcome-login,.ms-login-english-title,.ms-login-remmember-password,.ms-footer{
  33. font-size: 12px;
  34. }
  35. .ms-head{
  36. a{
  37. width: 147px;
  38. }
  39. vertical-align: middle;
  40. height: 22px;
  41. padding: 34px 46px;
  42. display: flex;
  43. align-content: center;
  44. img{
  45. height: 100%;
  46. }
  47. .ms-head-welcome-login{
  48. margin-top: 4px;
  49. font-size: 1rem !important;
  50. }
  51. .ms-head-line{
  52. margin: 0 12px;
  53. border-left: 1px solid #999;
  54. }
  55. }
  56. .ms-content{
  57. flex:1;
  58. position: relative;
  59. .ms-content-form,.ms-content-code{
  60. width: 280px;
  61. height: 215px;
  62. padding: 24px 20px;
  63. position: absolute;
  64. right: 160px;
  65. top: 25%;
  66. box-shadow: 2px 2px 8px 6px rgb(59, 177, 255);
  67. }
  68. #ms-content-form-register{
  69. height: 260px;
  70. }
  71. .ms-login-chinese-title{
  72. color: #0099ff;
  73. font-size: 16px;
  74. line-height: 15px;
  75. }
  76. .ms-login-code{
  77. position: absolute;
  78. top: 4px;
  79. right: 4px;
  80. }
  81. .ms-login-code-title{
  82. color: #0099ff;
  83. font-size: 12px;
  84. }
  85. .ms-content-form{
  86. .ms-login-title{
  87. line-height: 13px;
  88. }
  89. .ms-login-english-title,.ms-login-remmember-password,.ms-login-code-text{
  90. color: #999999;
  91. }
  92. .ms-login-people-name,.ms-login-remmember-password{
  93. margin-bottom: 12px;
  94. }
  95. .ms-login-error-text{
  96. height: 15px;
  97. font-size: 12px;
  98. color: #e4393c;
  99. display: flex;
  100. align-items: center;
  101. padding: 5px 0;
  102. img{
  103. padding-right: 5px;
  104. }
  105. }
  106. input{
  107. border: 1px solid #eeeeee;
  108. border-radius: 3px;
  109. color: #555555;
  110. outline-color: #0099ff;
  111. &::-webkit-input-placeholder {
  112. color: #999999;
  113. }
  114. &::-moz-placeholder {
  115. color: #999999;
  116. }
  117. }
  118. .ms-login-people-name{
  119. width: 260px;
  120. height: 20px;
  121. padding: 5px 10px;
  122. }
  123. .ms-error{
  124. border:1px solid #e4393c;
  125. }
  126. .ms-login-remmember-password{
  127. display: flex;
  128. line-height: 13px;
  129. align-items: center;
  130. height: 13px;
  131. }
  132. .ms-login-remmember-password input[type="checkbox"]{
  133. margin:0 6px 0 0;
  134. }
  135. .ms-login-button{
  136. pointer-events:none;
  137. background-color:#fafafa;
  138. color:#ddd;
  139. width: 100%;
  140. height: 34px;
  141. line-height: 34px;
  142. font-size: 14px;
  143. /*color: #ffffff;*/
  144. text-align: center;
  145. /*background-color: #009aff;*/
  146. cursor: pointer;
  147. border-radius: 4px;
  148. }
  149. .login-code{
  150. overflow: hidden;
  151. margin-bottom: 12px;
  152. .login-code-input{
  153. width: 120px;
  154. height: 12px;
  155. padding:10px;
  156. }
  157. .login-code-input,.login-code-img{
  158. margin-right: 11px;
  159. }
  160. .login-code-img{
  161. height: 34px;
  162. }
  163. .login-code-text{
  164. font-size: 10px;
  165. }
  166. .login-code-change{
  167. cursor: pointer;
  168. color: #0099ff;
  169. }
  170. .login-code-rompt{
  171. color: #999;
  172. }
  173. }
  174. .ms-login-rand-code{
  175. width: 110px;
  176. height: 12px;
  177. padding:10px;
  178. }
  179. .ms-login-rand-code-img{
  180. height: 34px;
  181. }
  182. }
  183. .ms-content-code{
  184. .ms-computer-title{
  185. background: url(../images/frame.png) no-repeat;
  186. position: absolute;
  187. top: 10px;
  188. background-size: 100% 100%;
  189. color: #ffffff;
  190. font-size: 10px;
  191. width: 90px;
  192. right: 45px;
  193. }
  194. .ms-login-weixin{
  195. text-align: center;
  196. img{
  197. margin: auto;
  198. display: block;
  199. margin-top: 18px;
  200. margin-bottom: 16px;
  201. }
  202. }
  203. }
  204. .ms-login-button:hover,.ms-login-button:active{
  205. background-color: #0086ff;
  206. }
  207. }
  208. .ms-footer{
  209. a:link{color:#999999;text-decoration:none}
  210. a:visited{color:#999999;text-decoration:none}
  211. a:active{color:#999999;text-decoration:none}
  212. a:hover{color:#0099ff;text-decoration:none}
  213. height: 40px;
  214. padding: 40px 0;
  215. text-align: center;
  216. p{
  217. margin: 0 0 18px 0;
  218. line-height: 11px;
  219. &:last-child{
  220. margin:0;
  221. }
  222. }
  223. }
  224. }