孙向锦 / SunvoteEducation

Commit 7fbab65d6172f5edeeb7c3916a017dcf4a983d07

Authored by 孙向锦
1 parent 731a0e6e

记住密码，清除记录。

Inline Side-by-side
Showing 1 changed file with 272 additions and 187 deletions
WebRoot/WEB-INF/jsp/system/index/login.jsp
  View file @7fbab65
@@ -27,166 +27,218 @@ @@ -27,166 +27,218 @@
27 <script type="text/javascript" src="static/js/jquery.tips.js"></script> 27 <script type="text/javascript" src="static/js/jquery.tips.js"></script>
28 <script type="text/javascript" src="static/js/lang.js"></script> 28 <script type="text/javascript" src="static/js/lang.js"></script>
29 <script type="text/javascript" src="static/js/remove.js"></script> 29 <script type="text/javascript" src="static/js/remove.js"></script>
30 -<script type="text/javascript" > 30 +<script type="text/javascript">
31 if(lang() != 'zh'){ 31 if(lang() != 'zh'){
32 32
33 } 33 }
34 </script> 34 </script>
35 <style type="text/css"> 35 <style type="text/css">
36 -html,body{  
37 - width:100%;  
38 - height:100%;  
39 - margin:0;  
40 - padding:0; 36 +html,body {
  37 + width: 100%;
  38 + height: 100%;
  39 + margin: 0;
  40 + padding: 0;
41 } 41 }
42 -img{  
43 - width:100%;  
44 - display: inherit; 42 +
  43 +img {
  44 + width: 100%;
  45 + display: inherit;
45 } 46 }
46 -p{  
47 - margin:0; 47 +
  48 +p {
  49 + margin: 0;
48 } 50 }
49 -.login{  
50 - width:100%;  
51 - min-width: 1200px;  
52 - height:100%;  
53 - background: #EFEEF5; 51 +
  52 +.login {
  53 + width: 100%;
  54 + min-width: 1200px;
  55 + height: 100%;
  56 + background: #EFEEF5;
54 } 57 }
55 -.login_box{  
56 - width:82.3%;  
57 - min-width: 987.6px;  
58 - max-width: 1581px;  
59 - height:77.87%;  
60 - background: #fff;  
61 - position: absolute;  
62 - top:0;  
63 - bottom:0;  
64 - left:0;  
65 - right:0;  
66 - margin: auto;  
67 - z-index: 9;  
68 - box-shadow:0px 18px 33px 10px rgba(89,89,89,0.2); 58 +
  59 +.login_box {
  60 + width: 82.3%;
  61 + min-width: 987.6px;
  62 + max-width: 1581px;
  63 + height: 77.87%;
  64 + background: #fff;
  65 + position: absolute;
  66 + top: 0;
  67 + bottom: 0;
  68 + left: 0;
  69 + right: 0;
  70 + margin: auto;
  71 + z-index: 9;
  72 + box-shadow: 0px 18px 33px 10px rgba(89, 89, 89, 0.2);
69 } 73 }
70 -.error{  
71 - font-size: 12px;  
72 - color:#F25F62;  
73 - float: left; 74 +
  75 +.error {
  76 + font-size: 12px;
  77 + color: #F25F62;
  78 + float: left;
74 } 79 }
75 -.error img{  
76 - width: 12px;  
77 - float:left;  
78 - margin-top:3px;  
79 - margin-left:10px; 80 +
  81 +.error img {
  82 + width: 12px;
  83 + float: left;
  84 + margin-top: 3px;
  85 + margin-left: 10px;
80 } 86 }
81 -.error_info{  
82 - margin-left: 5px; 87 +
  88 +.error_info {
  89 + margin-left: 5px;
83 } 90 }
84 -input:focus-within{  
85 - border-style:solid;  
86 - border-color: #48A3A5; 91 +
  92 +input:focus-within {
  93 + border-style: solid;
  94 + border-color: #48A3A5;
87 box-shadow: 0 0 5px #48A3A5; 95 box-shadow: 0 0 5px #48A3A5;
88 } 96 }
89 -.login_box .login_box_left_box{  
90 - width:40%;  
91 - float: left; 97 +
  98 +.login_box .login_box_left_box {
  99 + width: 40%;
  100 + float: left;
  101 +}
  102 +
  103 +.login_box .login_box_left_box .login_logo {
  104 + width: 140px;
  105 + margin-top: 80px;
  106 + margin-left: 60px;
92 } 107 }
93 -.login_box .login_box_left_box .login_logo{  
94 - width:140px;  
95 - margin-top:80px;  
96 - margin-left: 60px; 108 +
  109 +.login_box .login_box_left_box .login_box_contianer {
  110 + margin-top: 60px;
97 } 111 }
98 -.login_box .login_box_left_box .login_box_contianer{  
99 - margin-top:60px; 112 +
  113 +.login_box .login_box_left_box .login_box_contianer h3 {
  114 + text-align: center;
  115 +}
  116 +
  117 +.login_box .login_box_left_box .login_box_contianer .form_item {
  118 + width: 70%;
  119 + margin: 0 auto;
  120 + margin-bottom: 20px;
  121 + text-align: center;
  122 + position: relative;
100 } 123 }
101 -.login_box .login_box_left_box .login_box_contianer h3{  
102 - text-align: center; 124 +
  125 +.login_box .login_box_left_box .login_box_contianer .form_item input {
  126 + width: 90%;
  127 + height: 50px;
  128 + line-height: 50px;
  129 + padding: 0 10px;
  130 + border-radius: 5px;
  131 + border: 1px solid #ccc;
  132 + outline: none;
  133 + background: #ECECEC
103 } 134 }
104 -.login_box .login_box_left_box .login_box_contianer .form_item{  
105 - width:70%;  
106 - margin:0 auto;  
107 - margin-bottom:20px;  
108 - text-align: center; 135 +
  136 +.login_box .login_box_left_box .login_box_contianer .form_item .icon_down
  137 + {
  138 + position: absolute;
  139 + right: 10px;
  140 + top: 9px;
  141 + width: 20px;
  142 + padding: 0 10px;
109 } 143 }
110 -.login_box .login_box_left_box .login_box_contianer .form_item input{  
111 - width: 90%;  
112 - height: 50px;  
113 - line-height: 50px;  
114 - padding:0 10px;  
115 - border-radius: 5px;  
116 - border:1px solid #ccc;  
117 - outline: none;  
118 - background: #ECECEC 144 +
  145 +.login_box .login_box_left_box .login_box_contianer .history {
  146 + width: 90%;
  147 + position : absolute;
  148 + left:10px;
  149 + top: 50px;
  150 + padding: 0 10px;
  151 + height: auto;
  152 + max-height: 240px;
  153 + background: #fff;
  154 + overflow: auto;
  155 + border: 1px solid #ccc;
  156 + z-index: 999;
  157 + position: absolute;
119 } 158 }
120 -.login_btn{  
121 - outline-style: none;  
122 - border: none;  
123 - color: #fff;  
124 - width:90%;  
125 - height:50px;  
126 - line-height: 50px;  
127 - border-radius:8px;  
128 - background: #48A3A5; 159 +
  160 +.login_btn {
  161 + outline-style: none;
  162 + border: none;
  163 + color: #fff;
  164 + width: 90%;
  165 + height: 50px;
  166 + line-height: 50px;
  167 + border-radius: 8px;
  168 + background: #48A3A5;
129 } 169 }
130 -.login_box .login_box_right_box{  
131 - height:100%;  
132 - overflow: hidden;  
133 - margin-left: 40%;  
134 - position: relative;  
135 - background: #48A3A6; 170 +
  171 +.login_box .login_box_right_box {
  172 + height: 100%;
  173 + overflow: hidden;
  174 + margin-left: 40%;
  175 + position: relative;
  176 + background: #48A3A6;
136 } 177 }
137 -.login_box .login_box_right_box .dec{  
138 - position: absolute;  
139 - bottom:100px;  
140 - left:100px; 178 +
  179 +.login_box .login_box_right_box .dec {
  180 + position: absolute;
  181 + bottom: 100px;
  182 + left: 100px;
141 } 183 }
142 -.login_box .login_box_right_box .dec_big{  
143 - font-size: 40px;  
144 - color: #ECECEC; 184 +
  185 +.login_box .login_box_right_box .dec_big {
  186 + font-size: 40px;
  187 + color: #ECECEC;
145 } 188 }
146 -.login_box .login_box_right_box .dec_mini{  
147 - font-size: 24px;  
148 - color: #ECECEC; 189 +
  190 +.login_box .login_box_right_box .dec_mini {
  191 + font-size: 24px;
  192 + color: #ECECEC;
149 } 193 }
150 -.login_box .login_box_right_box .right_box_img{  
151 - width: 400px;  
152 - position: absolute;  
153 - right:-23px;  
154 - top:-25px; 194 +
  195 +.login_box .login_box_right_box .right_box_img {
  196 + width: 400px;
  197 + position: absolute;
  198 + right: -23px;
  199 + top: -25px;
155 } 200 }
156 -.right_box_bottom_img{  
157 - width: 200px;  
158 - height:200px;  
159 - background: #fff;  
160 - border-radius: 100px;  
161 - position: absolute;  
162 - bottom:-100px;  
163 - right:-100px; 201 +
  202 +.right_box_bottom_img {
  203 + width: 200px;
  204 + height: 200px;
  205 + background: #fff;
  206 + border-radius: 100px;
  207 + position: absolute;
  208 + bottom: -100px;
  209 + right: -100px;
164 } 210 }
165 -.right_box_bottom_img img{  
166 - width:25%;  
167 - margin:30px 0 0 30px; 211 +
  212 +.right_box_bottom_img img {
  213 + width: 25%;
  214 + margin: 30px 0 0 30px;
168 } 215 }
169 -.login .left_bottom_img{  
170 - position: absolute;  
171 - bottom:0;  
172 - left:0;  
173 - width:19%; 216 +
  217 +.login .left_bottom_img {
  218 + position: absolute;
  219 + bottom: 0;
  220 + left: 0;
  221 + width: 19%;
174 } 222 }
175 -.login .right_bottom_img{  
176 - width:6.25%;  
177 - position: absolute;  
178 - right:5%;  
179 - bottom:3%; 223 +
  224 +.login .right_bottom_img {
  225 + width: 6.25%;
  226 + position: absolute;
  227 + right: 5%;
  228 + bottom: 3%;
180 } 229 }
181 -.text_right{  
182 - text-align: right !important; 230 +
  231 +.text_right {
  232 + text-align: right !important;
183 } 233 }
184 -.text_right input{  
185 - display: inline;  
186 - vertical-align: middle; 234 +
  235 +.text_right input {
  236 + display: inline;
  237 + vertical-align: middle;
187 } 238 }
188 -.text_right span{  
189 - vertical-align: middle; 239 +
  240 +.text_right span {
  241 + vertical-align: middle;
190 } 242 }
191 </style> 243 </style>
192 244
@@ -199,55 +251,74 @@ input:focus-within{ @@ -199,55 +251,74 @@ input:focus-within{
199 </head> 251 </head>
200 <body> 252 <body>
201 <div class="login"> 253 <div class="login">
202 - <div class="login_box">  
203 - <div class="login_box_left_box">  
204 - <div class="login_logo">  
205 - <img src="static/login/login_logo.png" alt="">  
206 - </div>  
207 - <div class="login_box_contianer">  
208 - <h3>登录账号</h3>  
209 -  
210 - <div class="form_item">  
211 - <input id="loginname" type="text" value="" placeholder="请输入用户名" />  
212 - </div>  
213 - <div class="form_item">  
214 - <input id="password" type="password" value="" placeholder="请输入密码" />  
215 - </div>  
216 - <div class="form_item text_right">  
217 - <!-- <div class="error"> 254 + <div class="login_box">
  255 + <div class="login_box_left_box">
  256 + <div class="login_logo">
  257 + <img src="static/login/login_logo.png" alt="">
  258 + </div>
  259 + <div class="login_box_contianer">
  260 + <h3>登录账号</h3>
  261 +
  262 + <div class="form_item">
  263 + <input id="loginname" type="text" value="" autoComplete="off"
  264 + placeholder="请输入用户名" />
  265 + <svg t="1554790328236" class="icon_down" style=""
  266 + viewBox="0 0 1024 1024" version="1.1"
  267 + xmlns="http://www.w3.org/2000/svg" p-id="2161"
  268 + xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
  269 + <defs>
  270 + <style type="text/css"></style></defs>
  271 + <path
  272 + d="M863.321996 251.674996 194.108395 251.674996 528.677333 621.186771Z"
  273 + p-id="2162" fill="#333333"></path></svg>
  274 + <div class="history">
  275 + <ul>
  276 + </ul>
  277 + <p class="clear_history">
  278 + <a onclick="clear_history()">清除记录</a>
  279 + </p>
  280 + </div>
  281 + </div>
  282 +
  283 + <div class="form_item">
  284 + <input id="password" type="password" value="" placeholder="请输入密码" />
  285 + </div>
  286 + <div class="form_item text_right">
  287 + <!-- <div class="error">
218 <img src="static/login/login_5.png" alt=""> 288 <img src="static/login/login_5.png" alt="">
219 <span class="error_info">密码输入不正确</span> 289 <span class="error_info">密码输入不正确</span>
220 </div> --> 290 </div> -->
221 - <input id="rem_flag" style="width:17px;height:17px;" type="checkbox">  
222 - <span >记住密码</span>  
223 - </div>  
224 - <div class="form_item">  
225 - <button href="#" type="submit" onclick="severCheck();" class="login_btn">登录</button>  
226 - </div>  
227 -  
228 - </div>  
229 - </div>  
230 - <div class="login_box_right_box">  
231 - <div class="dec">  
232 - <p class="dec_big">南昊考试作业管理平台</p>  
233 - <p class="dec_mini">让天下师生减负提分！</p>  
234 - </div>  
235 - <div class="right_box_img">  
236 - <img src="static/login/login_11.png" alt="">  
237 - </div>  
238 - <div class="right_box_bottom_img">  
239 - <img src="static/login/login_7.png" alt="">  
240 - </div>  
241 - </div>  
242 - </div>  
243 - <div class="left_bottom_img">  
244 - <img src="static/login/login_10.png" alt="">  
245 - </div>  
246 - <div class="right_bottom_img">  
247 - <img src="static/login/cycle.png" alt="">  
248 - </div>  
249 - </div>  
250 - <script type="text/javascript"> 291 + <input id="rem_flag" style="width:17px;height:17px;"
  292 + type="checkbox"> <span>记住密码</span>
  293 + </div>
  294 + <div class="form_item">
  295 + <button href="#" type="submit" onclick="severCheck();"
  296 + class="login_btn">登录</button>
  297 + </div>
  298 +
  299 + </div>
  300 + </div>
  301 + <div class="login_box_right_box">
  302 + <div class="dec">
  303 + <p class="dec_big">南昊考试作业管理平台</p>
  304 + <p class="dec_mini">让天下师生减负提分！</p>
  305 + </div>
  306 + <div class="right_box_img">
  307 + <img src="static/login/login_11.png" alt="">
  308 + </div>
  309 + <div class="right_box_bottom_img">
  310 + <img src="static/login/login_7.png" alt="">
  311 + </div>
  312 + </div>
  313 + </div>
  314 + <div class="left_bottom_img">
  315 + <img src="static/login/login_10.png" alt="">
  316 + </div>
  317 + <div class="right_bottom_img">
  318 + <img src="static/login/cycle.png" alt="">
  319 + </div>
  320 + </div>
  321 + <script type="text/javascript">
251 322
252 if(window.top != window.self){ 323 if(window.top != window.self){
253 window.top.location.href = "<%=basePath%>"; 324 window.top.location.href = "<%=basePath%>";
@@ -262,6 +333,11 @@ input:focus-within{ @@ -262,6 +333,11 @@ input:focus-within{
262 } 333 }
263 } 334 }
264 335
  336 + $(".icon_down").click(function(){
  337 + $("#loginname").focus();
  338 +
  339 + });
  340 +
265 //客户端校验 341 //客户端校验
266 function check() { 342 function check() {
267 343
@@ -369,20 +445,27 @@ input:focus-within{ @@ -369,20 +445,27 @@ input:focus-within{
369 $(".history").show(); 445 $(".history").show();
370 } 446 }
371 }); 447 });
  448 +
  449 + $('.history').hover(function(){ //鼠标悬停下拉框时，解绑blur事件
  450 + $("#loginname").unbind("blur");
  451 + },function(){
  452 + $("#loginname").blur(function(){ //鼠标移出下拉框时，添加blur事件
  453 + $(".history").hide();
  454 + })
  455 + });
  456 +
  457 + $(document).on('click','.history li',function(){
  458 + var p_list=JSON.parse(storage.getItem('passWordList'));
  459 + $("#loginname").val($(this).text());
  460 + $("#password").val(p_list[$(this).index()]);
  461 + $(".history").hide();
  462 + })
372 463
373 //清除历史记录 464 //清除历史记录
374 function clear_history(){ 465 function clear_history(){
375 - window.top.remove.init({"title":"确定清除历史记录吗？","func":function(success){  
376 - if(success){  
377 - storage.clear();  
378 - $(".history").hide();  
379 - }else{  
380 - console.log("false");  
381 - }  
382 - }});  
383 - window.top.remove.show();  
384 - $(".mb_head .close img").css("display","none");  
385 - } 466 + storage.clear();
  467 + $(".history").hide();
  468 + }
386 //保存登录记录 469 //保存登录记录
387 function saveCookie() { 470 function saveCookie() {
388 if(!window.localStorage){ 471 if(!window.localStorage){
@@ -419,8 +502,10 @@ input:focus-within{ @@ -419,8 +502,10 @@ input:focus-within{
419 502
420 } 503 }
421 </script> 504 </script>
422 - <!-- 软键盘控件start -->  
423 - <script type="text/javascript" src="static/login/keypad/js/form/keypad.js"></script>  
424 - <script type="text/javascript" src="static/login/keypad/js/framework.js"></script> 505 + <!-- 软键盘控件start -->
  506 + <script type="text/javascript"
  507 + src="static/login/keypad/js/form/keypad.js"></script>
  508 + <script type="text/javascript"
  509 + src="static/login/keypad/js/framework.js"></script>
425 </body> 510 </body>
426 </html> 511 </html>
427 \ No newline at end of file 512 \ No newline at end of file