潘钊 / bsth_control · Commits

Commit 5caed333fc39fabdf518259615f5be9ff0b3c051

Authored by zq
1 parent adfc1508
build: skipped

登陆页面修改

Inline Side-by-side
Showing 6 changed files with 70 additions and 273 deletions
src/main/resources/static/assets/img/button_login.png 0 → 100644
View file @5caed33

2.61 KB
src/main/resources/static/assets/img/button_pwd.png 0 → 100644
View file @5caed33

1.74 KB
src/main/resources/static/assets/img/button_user.png 0 → 100644
View file @5caed33

1.87 KB
src/main/resources/static/assets/img/login_bgbg.png 0 → 100644
View file @5caed33

1.41 KB
src/main/resources/static/assets/img/login_bgcenter.png 0 → 100644
View file @5caed33

37.4 KB
src/main/resources/static/login.html
  View file @5caed33
... ... @@ -4,7 +4,7 @@
4 4 <meta charset="utf-8" />
5 5 <title>登录</title>
6 6 <meta name=”renderer” content=”webkit”>
7   -<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″ >
  7 +<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″>
8 8 <meta content="width=device-width, initial-scale=1" name="viewport" />
9 9 <meta content="" name="description" />
10 10 <meta content="" name="author" />
... ... @@ -26,303 +26,100 @@ Login page
26 26 ***/
27 27 /* bg color */
28 28 .login {
29   - background-color: #364150 !important;
  29 + width: 100%;
  30 + height: 100%;
  31 + background-image: url(./assets/img/login_bgbg.png);
  32 + background-size: 100%
30 33 }
31 34  
32   -.login .logo {
33   - margin: 0 auto;
34   - margin-top: 60px;
35   - padding: 15px;
36   - text-align: center;
37   -}
38   -
39   -.login .content {
40   - background-color: #eceef1;
41   - -webkit-border-radius: 7px;
42   - -moz-border-radius: 7px;
43   - -ms-border-radius: 7px;
44   - -o-border-radius: 7px;
45   - border-radius: 7px;
46   - width: 400px;
47   - margin: 40px auto 10px auto;
48   - padding: 30px;
49   - padding-top: 10px;
50   - overflow: hidden;
51   - position: relative;
  35 +.loginCenter {
  36 + background-image: url(./assets/img/login_bgcenter.png);
  37 + background-repeat: no-repeat;
  38 + background-size: 100%;
  39 + position: absolute;
52 40 }
53 41  
54   -.login .content h3 {
55   - color: #4db3a5;
  42 +.loginInputDiv {
  43 + top: 48%;
  44 + width: 80%;
  45 + position: absolute;
  46 + vertical-align: middle;
56 47 text-align: center;
57   - font-size: 28px;
58   - font-weight: 400 !important;
59   -}
60   -
61   -.login .content h4 {
62   - color: #555;
63   -}
64   -
65   -.login .content .hint {
66   - color: #999;
67   - padding: 0;
68   - margin: 15px 0 7px 0;
69   -}
70   -
71   -.login .content .login-form, .login .content .forget-form {
72   - padding: 0px;
73   - margin: 0px;
74   -}
75   -
76   -.login .content .form-control {
77   - border: none;
78   - background-color: #dde3ec;
79   - height: 43px;
80   - color: #8290a3;
81   - border: 1px solid #dde3ec;
82   -}
83   -
84   -.login .content .form-control:focus, .login .content .form-control:active
85   - {
86   - border: 1px solid #c3ccda;
87   -}
88   -
89   -.login .content .form-control::-moz-placeholder {
90   - color: #8290a3;
91   - opacity: 1;
92   -}
93   -
94   -.login .content .form-control:-ms-input-placeholder {
95   - color: #8290a3;
96   -}
97   -
98   -.login .content .form-control::-webkit-input-placeholder {
99   - color: #8290a3;
100   -}
101   -
102   -.login .content select.form-control {
103   - padding-left: 9px;
104   - padding-right: 9px;
105   -}
106   -
107   -.login .content .forget-form {
108   - display: none;
109   -}
110   -
111   -.login .content .register-form {
112   - display: none;
113   -}
114   -
115   -.login .content .form-title {
116   - font-weight: 300;
117   - margin-bottom: 25px;
118   -}
119   -
120   -.login .content .form-actions {
121   - clear: both;
122   - border: 0px;
123   - border-bottom: 1px solid #eee;
124   - padding: 25px 30px 25px 30px;
125   - margin-left: -30px;
126   - margin-right: -30px;
127   -}
128   -
129   -.login-options {
130   - margin-bottom: 30px;
131   - overflow: hidden;
132   -}
133   -
134   -.login-options h4 {
135   - float: left;
136   - font-weight: 600;
137   - font-size: 15px;
138   - color: #7d91aa !important;
139   -}
140   -
141   -.login-options .social-icons {
142   - float: right;
143   - padding-top: 3px;
144   -}
145   -
146   -.login-options .social-icons li a {
147   - border-radius: 15px 15px 15px 15px !important;
148   - -moz-border-radius: 15px 15px 15px 15px !important;
149   - -webkit-border-radius: 15px 15px 15px 15px !important;
150 48 }
151 49  
152   -.login .content .form-actions .checkbox {
153   - margin-left: 0;
154   - padding-left: 0;
  50 +.loginInput {
  51 + padding: 6px 12px;
  52 + border: 1px solid #ffffff;
  53 + background-color: #FFFFFF;
  54 + vertical-align: middle;
155 55 }
156 56  
157   -.login .content .forget-form .form-actions {
158   - border: 0;
159   - margin-bottom: 0;
160   - padding-bottom: 20px;
161   -}
162   -
163   -.login .content .register-form .form-actions {
164   - border: 0;
165   - margin-bottom: 0;
166   - padding-bottom: 0px;
167   -}
168   -
169   -.login .content .form-actions .btn {
170   - margin-top: 1px;
171   -}
172   -
173   -.login .content .form-actions .btn {
174   - font-weight: 600;
175   - padding: 10px 20px !important;
176   -}
177   -
178   -.login .content .form-actions .btn-default {
179   - font-weight: 600;
180   - padding: 10px 25px !important;
181   - color: #6c7a8d;
182   - background-color: #ffffff;
183   - border: none;
184   -}
185   -
186   -.login .content .form-actions .btn-default:hover {
187   - background-color: #fafaff;
188   - color: #45b6af;
189   -}
190   -
191   -.login .content .forget-password {
192   - font-size: 14px;
193   - float: right;
194   - display: inline-block;
195   - margin-top: 10px;
196   -}
197   -
198   -.login .content .check {
199   - color: #8290a3;
200   -}
201   -
202   -.login .content .rememberme {
203   - margin-left: 8px;
204   - margin-top: 10px;
205   -}
206   -
207   -.login .content .create-account {
208   - margin: 0 -40px -30px -40px;
209   - padding: 15px 0 17px 0;
210   - text-align: center;
211   - background-color: #6c7a8d;
212   - -webkit-border-radius: 0 0 7px 7px;
213   - -moz-border-radius: 0 0 7px 7px;
214   - -ms-border-radius: 0 0 7px 7px;
215   - -o-border-radius: 0 0 7px 7px;
216   - border-radius: 0 0 7px 7px;
217   -}
218   -
219   -.login .content .create-account>p {
220   - margin: 0;
221   -}
222   -
223   -.login .content .create-account p a {
224   - font-weight: 600;
225   - font-size: 14px;
226   - color: #c3cedd;
227   -}
228   -
229   -.login .content .create-account a {
230   - display: inline-block;
231   - margin-top: 5px;
232   -}
233   -
234   -/* footer copyright */
235   -.login .copyright {
236   - text-align: center;
237   - margin: 0 auto 30px 0;
238   - padding: 10px;
239   - color: #7a8ca5;
240   - font-size: 13px;
241   -}
242   -
243   -@media ( max-width : 440px) {
244   - /***
245   - Login page
246   - ***/
247   - .login .logo {
248   - margin-top: 10px;
249   - }
250   - .login .content {
251   - width: 280px;
252   - margin-top: 10px;
253   - }
254   - .login .content h3 {
255   - font-size: 22px;
256   - }
257   - .forget-password {
258   - display: inline-block;
259   - margin-top: 20px;
260   - }
261   - .login-options .social-icons {
262   - float: left;
263   - padding-top: 3px;
264   - }
265   - .login .checkbox {
266   - font-size: 13px;
267   - }
  57 +.buttonLogin {
  58 + cursor: pointer;
268 59 }
269 60 </style>
270 61 </head>
271 62  
272   -<body class=" login">
273   - <!-- BEGIN LOGO -->
274   - <div class="logo">
275   - <a href="index.html"> <img src="metronic_v4.5.4/img/logo-big.png"
276   - alt="" />
277   - </a>
278   - </div>
279   - <!-- END LOGO -->
280   - <!-- BEGIN LOGIN -->
281   - <div class="content">
  63 +<body class="login">
  64 + <div class="loginCenter">
282 65 <form class="login-form" action="/login" method="post">
283   - <h3 class="form-title font-green">Sign In</h3>
284   - <div class="alert alert-danger display-hide">
285   - <button class="close" data-close="alert"></button>
286   - <span> Enter any username and password. </span>
287   - </div>
288   - <div class="form-group">
289   - <label class="control-label visible-ie8 visible-ie9">用户名</label> <input
290   - class="form-control form-control-solid placeholder-no-fix"
291   - type="text" autocomplete="off" placeholder="用户名" name="username" value="admin"/>
292   - </div>
293   - <div class="form-group">
294   - <label class="control-label visible-ie8 visible-ie9">密码</label> <input
295   - class="form-control form-control-solid placeholder-no-fix"
296   - type="password" autocomplete="off" placeholder="密码" name="password" value="admin"/>
297   - </div>
298   - <div class="form-actions">
299   - <button type="submit" class="btn green uppercase">登录</button>
300   - <a href="javascript:;" id="forget-password" class="forget-password">忘记密码
301   - ？</a>
  66 + <div class="col-md-12 loginInputDiv">
  67 + <img src="./assets/img/button_user.png" id="img_user">
  68 + <input class="loginInput" type="text" autocomplete="off"
  69 + placeholder="用户名" name="username" value="admin" />
  70 + <img src="./assets/img/button_pwd.png">
  71 + <input class="loginInput" type="password" autocomplete="off"
  72 + placeholder="密码" name="password" value="admin" />
  73 + <img src="./assets/img/button_login.png" class="buttonLogin">
302 74 </div>
303 75 </form>
304 76 </div>
305   -
306 77 <script src="metronic_v4.5.4/plugins/jquery.min.js"
307 78 type="text/javascript"></script>
308 79 <script src="metronic_v4.5.4/plugins/bootstrap/js/bootstrap.min.js"
309 80 type="text/javascript"></script>
310 81 <script src="metronic_v4.5.4/scripts/app.min.js" type="text/javascript"></script>
311   -
  82 +
312 83 <script src="assets/plugins/purl.js"></script>
313 84  
314   -<script type="text/javascript">
315   -$(function(){
316   - if($.url().param('error')){
317   - //去session里查一下失败信息
318   - $.get('/user/loginFailure', function(msg){
319   - if(msg && msg != '')
320   - alert(msg);
321   - location.href = '/login.html';
  85 + <script type="text/javascript">
  86 + $(function() {
  87 + setCenterCss();
  88 + if ($.url().param('error')) {
  89 + //去session里查一下失败信息
  90 + $.get('/user/loginFailure', function(msg) {
  91 + if (msg && msg != '')
  92 + alert(msg);
  93 + location.href = '/login.html';
  94 + });
  95 + }
  96 + $(window).resize(setCenterCss);
  97 + // 设置登录界面样式,让登陆框始终居中
  98 + function setCenterCss() {
  99 + $(".loginCenter").css({
  100 + width : $(window).width() * 0.4,
  101 + height : $(window).height() * 0.2,
  102 + });
  103 + $(".loginCenter").css({
  104 + left : ($(window).width() - $(".loginCenter") .outerWidth()) / 2,
  105 + top : ($(window).height() - $(".loginCenter") .outerHeight()) / 2
  106 + });
  107 + }
  108 + // 设置两个输入框的高度和左边图片高度一致，宽度为父DIV loginInputDiv减 去三个按钮的宽带度/2*0。8
  109 + $(".loginInput").css({
  110 + height : $("#img_user").height(),
  111 + width : ($(".loginInputDiv").width()- $("#img_user").width() * 2 -
  112 + $(".buttonLogin").width()) / 2 * 0.8
  113 + });
  114 + // 设置中间登陆框DIV左右居中
  115 + $(".loginInputDiv").css({
  116 + left : ($(".loginCenter").outerWidth() - $(".loginInputDiv").outerWidth()) / 2,
  117 + });
  118 + $(".buttonLogin").bind("click", function() {
  119 + $(".login-form").submit();
  120 + });
322 121 });
323   - }
324   -});
325   -</script>
  122 + </script>
326 123 </body>
327 124  
328 125 </html>
329 126 \ No newline at end of file
... ...