diff --git a/front/public/img/login_bg.jpg b/front/public/img/login_bg.jpg
new file mode 100644
index 0000000..996657c
Binary files /dev/null and b/front/public/img/login_bg.jpg differ
diff --git a/front/src/layout/LoginLayout/index.jsx b/front/src/layout/LoginLayout/index.jsx
new file mode 100644
index 0000000..0156862
--- /dev/null
+++ b/front/src/layout/LoginLayout/index.jsx
@@ -0,0 +1,40 @@
+import React from "react";
+import styles from "./index.module.less";
+import { Link } from "react-router-dom";
+
+export const LOGIN_TYPE = "login";
+export const REGISTER_TYPE = "register";
+export const RESET_PASSWORD_TYPE = "reset_password";
+
+/**
+ * 纯UI组件，使用单函数形式
+ * @param type 当前类别：上面的三个常亮
+ * @param children 子组件
+ */
+const LoginOrRegister = ({ type }) => {
+  console.log(type);
+  return (
+    <div className={styles.head}>
+      <Link to="/public/login" className={`${styles.item} ${type === LOGIN_TYPE ? styles.active : ""}`}>
+        登录
+      </Link>
+      <div className={styles.dot} />
+      <Link to="/public/register" className={`${styles.item} ${type === REGISTER_TYPE ? styles.active : ""}`}>
+        注册
+      </Link>
+    </div>
+  );
+};
+
+export function LoginLayout({ type, children }) {
+  return (
+    <div className={"fullScreen " + styles.main}>
+      <div className={styles.LOGO}>CR</div>
+      <div className={styles.content}>
+        {type === RESET_PASSWORD_TYPE ? <div>重置密码</div> : <LoginOrRegister type={type} />}
+        {children}
+        {type === RESET_PASSWORD_TYPE ? <Link to="/public/login">返回登录注册</Link> : null}
+      </div>
+    </div>
+  );
+}
diff --git a/front/src/layout/LoginLayout/index.module.less b/front/src/layout/LoginLayout/index.module.less
new file mode 100644
index 0000000..ef1fbd6
--- /dev/null
+++ b/front/src/layout/LoginLayout/index.module.less
@@ -0,0 +1,58 @@
+.main {
+  //   background-image: url("/img/login_bg.jpg");
+  background-color: #f1f1f1;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  .LOGO {
+    position: absolute;
+    left: 5%;
+    top: 5%;
+    font-size: 4em;
+    font-weight: 700;
+    color: #1890ff;
+  }
+
+  .content {
+    color: #969696 !important;
+    background: white;
+    padding: 2em;
+
+    .head {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 1.7em;
+
+      .dot {
+        width: 0.2em;
+        height: 0.2em;
+        margin: 0 1em;
+        border-radius: 50%;
+        background: #969696;
+      }
+
+      .item {
+        cursor: pointer;
+        color: #969696 !important;
+        padding-bottom: 2px;
+      }
+
+      .item.active {
+        border-bottom: 2px solid #1890ff;
+        padding-bottom: 0;
+        color: #1890ff !important;
+      }
+
+      .item:hover {
+        border-bottom: 2px solid #1890ff;
+        padding-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/front/src/pages/public/Login/index.jsx b/front/src/pages/public/Login/index.jsx
index 12e61d2..edbf7fc 100644
--- a/front/src/pages/public/Login/index.jsx
+++ b/front/src/pages/public/Login/index.jsx
@@ -6,6 +6,7 @@ import styles from "./index.module.less";
 import { connect } from "react-redux";
 import { changeLoginInfo, DATA_NAME } from "../../../redux/action/loginInfoAction";
 import axios from "../../../util/httpUtil";
+import { LoginLayout, LOGIN_TYPE } from "../../../layout/LoginLayout";
 
 function mapStateToProps(state) {
   return state[DATA_NAME];
@@ -52,33 +53,12 @@ class Login extends Component {
 
   render() {
     return (
-      <div className="fullScreen flex main-center across-center">
+      <LoginLayout type={LOGIN_TYPE}>
         <div className={styles.main}>
-          <div className={styles.top}>
-            <IconFont type="icon-LC_icon_chat_fill" />
-            <span>FIM</span>
-          </div>
-          <div className={styles.bottom}>
-            <div className={styles.inputArea}>
-              <IconFont type="icon-head" style={{ fontSize: "3em" }} />
-              {/* 用户名密码输入框 */}
-              <div>
-                <div>
-                  <Input placeholder="用户名" onChange={this.usernameInput} />
-                  注册账户
-                </div>
-                <div>
-                  <Input type="password" placeholder="密码" onChange={this.passwordInput} />
-                  找回密码
-                </div>
-              </div>
-            </div>
-            <Button type="primary" onClick={this.submit}>
-              登录
-            </Button>
-          </div>
+          <Input type="text" placeholder="输入邮箱" />
+          <Input type="text" placeholder="验证码" addonAfter={<span className={styles.getCode}>获取验证码</span>} />
         </div>
-      </div>
+      </LoginLayout>
     );
   }
 }
diff --git a/front/src/pages/public/Login/index.module.less b/front/src/pages/public/Login/index.module.less
index c50082e..98e34a8 100644
--- a/front/src/pages/public/Login/index.module.less
+++ b/front/src/pages/public/Login/index.module.less
@@ -1,37 +1,21 @@
 .main {
   text-align: center;
-  width: 600px;
-  height: 400px;
-  box-shadow: #ccc 0px 0px 20px;
+  padding: 2em;
+  width: 30em;
   border-radius: 5px;
 
-  .top {
-    height: 50%;
-    border-radius: 5px 5px 0 0;
-    background: #3d4fae;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 0.8rem;
-    color: white;
+  .getCode {
+    cursor: pointer;
   }
 
-  .bottom {
-    height: 50%;
-    background: #ebf2f9;
-    border-radius: 0 0 5px 5px;
-
-    .inputArea {
-      padding: 0.2rem 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      :global {
-        .ant-input {
-          width: 20em;
-        }
-      }
+  :global {
+    .ant-input {
+      border-top: 0;
+      border-left: 0;
+      border-right: 0;
+      border-bottom: 1px solid black !important;
+      border-radius: 0;
+      margin-bottom: 1em;
     }
   }
 }
diff --git a/多人聊天室.ndm b/多人聊天室.ndm
index 097b2cc..058e5f8 100644
Binary files a/多人聊天室.ndm and b/多人聊天室.ndm differ