login.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. html {
  2. height:100%
  3. }
  4. body{
  5. overflow:hidden;
  6. }
  7. body.signin {
  8. height:100%;
  9. background:url(../img/cw_login_bg.png) no-repeat center fixed;
  10. -webkit-background-size:cover;
  11. -moz-background-size:cover;
  12. -o-background-size:cover;
  13. background-size:cover;
  14. color:rgba(255,255,255,.95)
  15. }
  16. .btn-new {
  17. background-color:#fd5522;
  18. border-color: #fd5522;
  19. }
  20. .btn-new:hover{
  21. background-color: #fd5522;
  22. border-color: #fd5522;
  23. color: #FFFFFF;
  24. }
  25. .signinTop{
  26. height:10%;
  27. background-color: white;
  28. font-weight: bold;
  29. font-size: 3.3rem;
  30. color: #000000;
  31. top: 0px;
  32. width: 100%;
  33. position: absolute;
  34. }
  35. .signinTop div {
  36. height: 50px;
  37. margin-left: 15%;
  38. position: relative;
  39. top: 50%;
  40. transform: translateY(-50%);
  41. }
  42. .signinTop img {
  43. height: 100%;
  44. }
  45. .signinpanel {
  46. height: 85%;
  47. width:100%;
  48. position: absolute;
  49. top: 10%;
  50. display: flex;
  51. }
  52. .signinpanel .logopanel {
  53. float:none;
  54. width:auto;
  55. padding:0;
  56. background:0 0
  57. }
  58. .signinpanel .signin-info ul {
  59. list-style:none;
  60. padding:0;
  61. margin:20px 0
  62. }
  63. .signinpanel .form-control {
  64. display:block;
  65. margin-top:15px
  66. }
  67. .signinpanel .uname {
  68. background:#fff url(../img/user.png) no-repeat 95% center;
  69. color:#333
  70. }
  71. .signinpanel .pword {
  72. background:#fff url(../img/locked.png) no-repeat 95% center;
  73. color:#333
  74. }
  75. .signinpanel .code {
  76. background: #fff no-repeat 95% center;color:#333; margin:0 0 15px 0;
  77. }
  78. .signinpanel .btn {
  79. margin-top:15px
  80. }
  81. .signinpanel form {
  82. /**background:rgba(255,255,255,.2);**/
  83. background-color: white;
  84. border:1px solid rgba(255,255,255,.3);
  85. -moz-box-shadow:0 3px 0 rgba(12,12,12,.03);
  86. -webkit-box-shadow:0 3px 0 rgba(12,12,12,.03);
  87. box-shadow:0 3px 0 rgba(12,12,12,.03);
  88. -moz-border-radius:3px;
  89. -webkit-border-radius:3px;
  90. border-radius:3px;
  91. padding:30px
  92. }
  93. .signup-footer {
  94. height:5%;
  95. width: 100%;
  96. color:#000000;
  97. background-color: white;
  98. position: absolute;
  99. bottom: 0%;
  100. border-top:solid 1px rgba(255,255,255,.3);
  101. }
  102. .signup-footer .login-footer {
  103. font-size: 15px;
  104. margin-top: 8px;
  105. }
  106. .signup-footer,.signuppanel .form-control {
  107. /*margin-bottom:10px*/
  108. }
  109. .signup-footer .pull-left,.signup-footer .pull-right {
  110. float:none!important;
  111. text-align:center
  112. }
  113. @media screen and (max-width:768px) {
  114. .signinpanel,.signuppanel {
  115. margin:0 auto;
  116. width:420px!important;
  117. padding:20px
  118. }
  119. .signinpanel form {
  120. margin-top:20px
  121. }
  122. .signinpanel .signin-info ul {
  123. display:none
  124. }
  125. }@media screen and (max-width:320px) {
  126. .signinpanel,.signuppanel {
  127. margin:0 20px;
  128. width:auto
  129. }
  130. }
  131. /*
  132. 登录界面check样式
  133. */
  134. .checkbox-custom {
  135. position: relative;
  136. padding: 0 15px 0 25px;
  137. margin-bottom: 7px;
  138. display: inline-block;
  139. }
  140. /*
  141. 将初始的checkbox的样式改变
  142. */
  143. .checkbox-custom input[type="checkbox"] {
  144. opacity: 0; /*将初始的checkbox隐藏起来*/
  145. position: absolute;
  146. cursor: pointer;
  147. z-index: 2;
  148. margin: -6px 0 0 0;
  149. top: 50%;
  150. left: 3px;
  151. }
  152. /*
  153. 设计新的checkbox,位置
  154. */
  155. .checkbox-custom label:before {
  156. content: '';
  157. position: absolute;
  158. top: 50%;
  159. left: 0;
  160. margin-top: -9px;
  161. width: 18px;
  162. height: 17px;
  163. display: inline-block;
  164. border-radius: 2px;
  165. border: 1px solid #bbb;
  166. background: #fff;
  167. }
  168. /*
  169. 点击初始的checkbox,将新的checkbox关联起来
  170. */
  171. .checkbox-custom input[type="checkbox"]:checked +label:after {
  172. position: absolute;
  173. display: inline-block;
  174. font-family: 'Glyphicons Halflings';
  175. content: "\e013";
  176. top: 42%;
  177. left: 3px;
  178. margin-top: -5px;
  179. font-size: 11px;
  180. line-height: 1;
  181. width: 16px;
  182. height: 16px;
  183. color: #333;
  184. }
  185. .checkbox-custom label {
  186. color: black;
  187. cursor: pointer;
  188. line-height: 1.2;
  189. font-weight: normal; /*改变了rememberme的字体*/
  190. margin-bottom: 0;
  191. text-align: left;
  192. }