登录页修正

app/public/css/main.css

@@ -1889,4 +1889,23 @@ overflow-y: auto;
 .chaosong{
   margin: 0 0 0 70px;
   height: 300px;
+}
+.inputErrow{
+-webkit-animation:shake 1s .2s ease both;
+-moz-animation:shake 1s .2s ease both;
+animation:shake 1s .2s ease both;}
+@-webkit-keyframes shake{
+0%,100%{-webkit-transform:translateX(0);}
+10%,30%,50%,70%, 90%{-webkit-transform:translateX(-10px);}
+20%,40%,60%,80%{-webkit-transform:translateX(10px);}
+}
+@-moz-keyframes shake{
+0%,100%{-moz-transform:translateX(0);}
+10%,30%,50%,70%, 90%{-moz-transform:translateX(-10px);}
+20%,40%,60%,80%{-moz-transform:translateX(10px);}
+}
+@keyframes shake{
+0%,100%{transform:translateX(0);}
+10%,30%,50%,70%, 90%{transform:translateX(-10px);}
+20%,40%,60%,80%{transform:translateX(10px);}
 }

app/view/login/login.ejs

@@ -42,7 +42,7 @@
         </form>
         <% } else { %>
         <form method="post" action="/login" id="normal-form" class="right-login position-relative text-center" style="min-width: 360px;">
-            <h3 class="mt-5 mb-5">欢迎登录</h3>
+            <h3 class="mt-5 mb-4">欢迎登录</h3>
             <div class="position-absolute"><a href="javascript:void(0);" class="change-form" data-toggle="tooltip" data-placement="left" title="微信登录"><img alt="微信扫码登录" src="/public/images/icon_login_qr.png"></a></div>
             <div class="mx-4">
                 <div class="input-group mb-4 <% if (errorMessage !== undefined && errorMessage !== null) { %>has-danger<% } %>">
@@ -68,12 +68,10 @@
                         <label class="form-check-label" for="exampleCheck1"><a href="#fg-password" data-toggle="modal" data-target="#fg-password">忘记密码？</a></label>
                     </div>
                 </div>
-                <div class="form-group mb-4">
-                    <div class="alert alert-danger" <% if(errorMessage === undefined || errorMessage === null) { %>style="display: none"<% } %> role="alert" id="error-msg">
-                        <% if(errorMessage !== undefined && errorMessage !== null) { %><strong>登录失败</strong> <%= errorMessage %><% } %>
-                    </div>
-                </div>
                 <button type="submit" class="btn btn-primary btn-block">登&nbsp;&nbsp;录</button>
+                <div class="alert alert-danger mt-1 py-2 inputErrow" <% if(errorMessage === undefined || errorMessage === null) { %>style="display: none"<% } %> role="alert" id="error-msg">
+                    <% if(errorMessage !== undefined && errorMessage !== null) { %><b>登录失败</b> <%= errorMessage %><% } %>
+                </div>
                 <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>" />
                 <input type="hidden" name="type" value="2" />
             </div>