BJ_web_developers / gateway

Commit 133eca7cd89b9b96d2bccbd3f212f0cb9f53f01e

Authored by liuqimichale
1 parent 47c63167

登录页面

Inline Side-by-side
Showing 5 changed files with 85 additions and 65 deletions
css/login.css
  View file @133eca7
... ... @@ -21,31 +21,56 @@ html,body{
21 21 width: 90.5px;
22 22 }
23 23 .login-cont{
24   - height: 380px;
25   - width:678px;
  24 + width:372px;
  25 + height:360px;
26 26 position: absolute;
27 27 top:50%;
28 28 left: 50%;
29   - margin-top: -190px;
30   - margin-left: -339px;
31   - background-color: rgba(255,255,255,.1);
32   - border-radius: 30px!important;
33   -}
34   -
35   -.login .content {
  29 + margin-top: -186px;
  30 + margin-left: -180px;
36 31  
37   - /*background-color:#fff;*/
38   - /*-webkit-border-radius:7px;*/
39   - /*-moz-border-radius:7px;*/
40   - /*-ms-border-radius:7px;*/
41   - /*-o-border-radius:7px;*/
42   - /*border-radius:7px;*/
43   - margin: 0 auto;
44   - width:328px;
45   - /*height: 440px;*/
46   - /*padding:46px 30px 30px;*/
47   - overflow:hidden;
48   - /*position:relative*/
  32 +}
  33 +.login-title{
  34 + height: 48px;
  35 + border-bottom: 2px solid #fff;
  36 + line-height: 48px;
  37 + padding-left: 40px;
  38 + font-size:18px;
  39 + font-weight:400;
  40 + color:rgba(55,168,247,1);
  41 + background:rgba(26,29,41,.6);
  42 + position: relative;
  43 +}
  44 +.login-title:after{
  45 + content: '';
  46 + position: absolute;
  47 + left: 0;
  48 + bottom: -2px;
  49 + width:159px;
  50 + height:2px;
  51 + background:rgba(55,168,247,1);
  52 +}
  53 +.login-main{
  54 + width: 372px;
  55 + padding:32px 40px;
  56 + background:rgba(26,29,41,.6);
  57 +}
  58 +.login-user-bg{
  59 + display: inline-block;
  60 + vertical-align: middle;
  61 + width: 40px;
  62 + height: 40px;
  63 + background:rgba(170,171,171,.8) url("../img/login-user-bg.png") no-repeat center center;
  64 +}
  65 +.login-pwd-bg{
  66 + display: inline-block;
  67 + vertical-align: middle;
  68 + width: 40px;
  69 + height: 40px;
  70 + background:rgba(170,171,171,.8) url("../img/login-pwd-bg.png") no-repeat center center;
  71 +}
  72 +.form-control{
  73 + border-radius: 0;
49 74 }
50 75 .login .content h3 {
51 76 color:#4db3a5;
... ... @@ -66,8 +91,9 @@ html,body{
66 91 margin:0
67 92 }
68 93 .login .content .form-control {
69   - height: 36px;
70   - width: 328px;
  94 + height: 40px;
  95 + width: 251px;
  96 + display: inline-block;
71 97 }
72 98 .login .content .form-control:active, .login .content .form-control:focus {
73 99 border:1px solid #c3ccda
... ... @@ -96,8 +122,6 @@ html,body{
96 122 .login .content .form-actions {
97 123 clear:both;
98 124 border:0;
99   - margin-left:-30px;
100   - margin-right:-30px
101 125 }
102 126 .login-options {
103 127 margin-bottom:30px;
... ... @@ -133,11 +157,11 @@ html,body{
133 157 padding-bottom:0
134 158 }
135 159 .login .content .form-actions .btn {
136   - margin-top:1px;
  160 + height: 40px;
137 161 font-size: 18px;
138 162 color: #fff;
139   - border:1px solid #c90000;
140   - background-color: #de3a41;
  163 + border:1px solid #37A8F7;
  164 + background-color: #37A8F7;
141 165  
142 166 width: 100%;
143 167 }
... ... @@ -258,7 +282,7 @@ html,body{
258 282 left: 0;
259 283 }
260 284 .form-group{
261   - margin-bottom: 9px;
  285 + margin-bottom: 12px;
262 286 }
263 287 .form-control{
264 288 color:#000;
... ... @@ -291,19 +315,19 @@ input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
291 315  
292 316  
293 317 #slide_box {
294   - height: 36px;
  318 + height: 40px;
295 319 text-align: center;
296   - line-height: 36px;
  320 + line-height: 40px;
297 321 font-size: 14px;
298 322 background-color: rgba(255,255,255,.75);
299 323 border: none;
300 324 }
301 325  
302 326 #slide_xbox {
303   - width: 56px;
304   - height: 36px;
  327 + width: 40px;
  328 + height: 40px;
305 329 text-align: center;
306   - line-height: 36px;
  330 + line-height:40px;
307 331 font-size: 14px;
308 332 position: absolute;
309 333 background: #35b34a;
... ... @@ -311,8 +335,8 @@ input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
311 335  
312 336 #btn {
313 337 cursor: pointer;
314   - width: 56px;
315   - height: 36px;
  338 + width: 40px;
  339 + height: 40px;
316 340 background: #fff url(../img/handler_bg.png);
317 341 float: right;
318 342 /*-webkit-box-shadow: 0px 0px 15px 0px #ddd;*/
... ...
img/handler_bg.png 100755 → 100644
View file @133eca7

949 Bytes | W: | H:

1.21 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
img/login-pwd-bg.png 0 → 100644
View file @133eca7

412 Bytes
img/login-user-bg.png 0 → 100644
View file @133eca7

444 Bytes
login.html
  View file @133eca7
... ... @@ -32,45 +32,41 @@
32 32  
33 33 <div class="content">
34 34 <!-- BEGIN LOGIN FORM -->
35   - <div class="text-center" style="margin: 36px 0">
36   - <img src="img/login-logo-icon.png">
  35 + <div class=" login-title">
  36 + 账户登录
37 37 </div>
38   - <div class="form-group">
39   - <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
  38 + <div class="login-main">
  39 + <div class="form-group">
  40 + <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
40 41  
41   - <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="请输入用户名" name="username" id="userName" maxlength="25">
42   - <div class="alert-danger display-hide error_ifo">
43   - <span>请输入正确的邮箱 </span>
  42 + <span class="login-user-bg"></span><input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="请输入用户名" name="username" id="userName" maxlength="25">
  43 + <div class="alert-danger display-hide error_ifo">
  44 + <span>请输入正确的邮箱 </span>
  45 + </div>
44 46 </div>
45   - </div>
46 47  
47   - <div class="form-group">
  48 + <div class="form-group">
48 49  
49   - <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="请输入6-20位字母和数字组成的密码" name="password" maxlength="20" id="password">
50   - <div class="alert-danger display-hide error_ifo">
51   - <span>请输入正确密码</span>
  50 + <span class=" login-pwd-bg"></span><input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="请输入6-20位字母和数字组成的密码" name="password" maxlength="20" id="password">
  51 + <div class="alert-danger display-hide error_ifo">
  52 + <span>请输入正确密码</span>
  53 + </div>
52 54 </div>
53   - </div>
54   - <div id="slide_box">
55   - <div id="slide_xbox">
56   - <div id="btn"></div>
  55 + <div id="slide_box">
  56 + <div id="slide_xbox">
  57 + <div id="btn"></div>
  58 + </div>
  59 + 拖动滑块验证
57 60 </div>
58   - 拖动滑块验证
59   - </div>
60 61  
61   - <!--<div class="form-group" style="position: relative">-->
62   - <!--<i class="verification-logo"></i>-->
63   - <!--<input class="form-control form-control-solid placeholder-no-fix verification-input" type="text" autocomplete="off" placeholder="请输入验证码" name="" maxlength="4" id="login_imgCode_value"/><div class="imgWrap"><img src="" id="login_imgCode">&nbsp;</div>-->
64   - <!--&lt;!&ndash;<div class="alert-danger display-hide error_ifo">&ndash;&gt;-->
65   - <!--&lt;!&ndash;<span>请输入正确验证码 </span>&ndash;&gt;-->
66   - <!--&lt;!&ndash;</div>&ndash;&gt;-->
67   - <!--</div>-->
68   - <div id="login_error_ifo" class="login_error_ifo">
  62 + <div id="login_error_ifo" class="login_error_ifo">
69 63  
  64 + </div>
  65 + <div class="form-actions">
  66 + <button type="button" class="btn uppercase" id="login-btn">登录</button>
  67 + </div>
70 68 </div>
71   - <div class="form-actions">
72   - <button type="button" class="btn uppercase" id="login-btn">登录</button>
73   - </div>
  69 +
74 70  
75 71  
76 72  
... ...