From 45df1f7409e8bed2e6823e94fb26cb733c1da659 Mon Sep 17 00:00:00 2001
From: wzhqwq <wzhii345@outlook.com>
Date: Sun, 1 Aug 2021 13:58:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=EF=BC=88=E8=A7=86=E8=A7=89=E6=B2=A1?=
 =?UTF-8?q?=E7=BB=99=E5=9B=BE=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/login/login.css | 39 +++++++++++++++++++++++++++++++++++++++
 src/login/login.js  | 32 ++++++++++++++++++--------------
 2 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/src/login/login.css b/src/login/login.css
index e69de29..311cd38 100644
--- a/src/login/login.css
+++ b/src/login/login.css
@@ -0,0 +1,39 @@
+.login-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 100px;
+}
+
+.form-group {
+  padding: 10px 0;
+}
+.form-group > input {
+  padding: .5em;
+  border: 1px solid #EEE;
+  border-radius: .2em;
+  font-size: 18px;
+  transition-duration: .3s;
+  transition-timing-function: ease-out;
+  transition-property: border-color, box-shadow, background-color, transform;
+  width: 300px;
+}
+.form-group > input:focus {
+  outline: none;
+  border-color: #FDFDFD;
+  background-color: #FDFDFD;
+  box-shadow: 1px 3px 6px #0001;
+  transform: translate(-2px, -2px);
+}
+.submit-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 30px;
+}
+
+.login-container .alert {
+  color: rgb(207, 17, 17);
+  margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/login/login.js b/src/login/login.js
index d3f5b7d..9569fef 100644
--- a/src/login/login.js
+++ b/src/login/login.js
@@ -44,7 +44,7 @@ export class LogInContainer extends Component {
   render() {
     const { error, errorMessage, processing } = this.state;
     return (
-      <div className="login">
+      <div className="login-container">
         <h1>登录</h1>
         <form onSubmit={this.handleSubmit.bind(this)}>
           <div className="form-group">
@@ -65,19 +65,23 @@ export class LogInContainer extends Component {
               onChange={this.handleChange.bind(this)}
             />
           </div>
-          <button type="submit" className="btn btn-straight btn-sdu" disabled={processing || !this.state.username || !this.state.password}>
-            {
-              processing
-              ? (
-                <Spinner />
-              )
-              : "登录"
-            }
-          </button>
-          {error &&
-            <div className={"alert"}>
-              {errorMessage}
-            </div>}
+          <div className="submit-btn-wrap">
+            <button type="submit" className="btn btn-straight btn-sdu" disabled={processing || !this.state.username || !this.state.password}>
+              {
+                processing
+                ? (
+                  <Spinner />
+                )
+                : "登录"
+              }
+            </button>
+          </div>
+          {
+            error &&
+              <div className="alert">
+                {errorMessage}
+              </div>
+          }
         </form>
       </div>
     );