孙向锦 / 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 27 <script type="text/javascript" src="static/js/jquery.tips.js"></script>
28 28 <script type="text/javascript" src="static/js/lang.js"></script>
29 29 <script type="text/javascript" src="static/js/remove.js"></script>
30   -<script type="text/javascript" >
  30 +<script type="text/javascript">
31 31 if(lang() != 'zh'){
32 32  
33 33 }
34 34 </script>
35 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 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 243 </style>
192 244  
... ... @@ -199,55 +251,74 @@ input:focus-within{
199 251 </head>
200 252 <body>
201 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 288 <img src="static/login/login_5.png" alt="">
219 289 <span class="error_info">密码输入不正确</span>
220 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 323 if(window.top != window.self){
253 324 window.top.location.href = "<%=basePath%>";
... ... @@ -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 342 function check() {
267 343  
... ... @@ -369,20 +445,27 @@ input:focus-within{
369 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 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 470 function saveCookie() {
388 471 if(!window.localStorage){
... ... @@ -419,8 +502,10 @@ input:focus-within{
419 502  
420 503 }
421 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 510 </body>
426 511 </html>
427 512 \ No newline at end of file
... ...