完成登录页面样式（视觉没给图）

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;
+}

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,6 +65,7 @@ export class LogInContainer extends Component {
               onChange={this.handleChange.bind(this)}
             />
           </div>
+          <div className="submit-btn-wrap">
             <button type="submit" className="btn btn-straight btn-sdu" disabled={processing || !this.state.username || !this.state.password}>
               {
                 processing
@@ -74,10 +75,13 @@ export class LogInContainer extends Component {
                 : "登录"
               }
             </button>
-          {error &&
+          </div>
-            <div className={"alert"}>
+          {
+            error &&
+              <div className="alert">
                 {errorMessage}
-            </div>}
+              </div>
+          }
         </form>
       </div>
     );