+
+ );
+};
diff --git a/src/index.scss b/src/index.scss
index 2c3fac6..38e2d6b 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,7 @@
+@import "./assets/iconfont/iconfont.css";
+
+$primaryColor: #ff4d4f;
+
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
@@ -67,3 +71,184 @@ button:focus-visible {
background-color: #f9f9f9;
}
}
+
+.w-250px {
+ width: 250px;
+}
+
+.w-300px {
+ width: 300px;
+}
+
+.w-350px {
+ width: 350px;
+}
+
+.w-400px {
+ width: 200px;
+}
+
+.w-450px {
+ width: 200px;
+}
+
+.w-500px {
+ width: 200px;
+}
+
+.mr-5 {
+ margin-right: 5px;
+}
+
+.ml-5 {
+ margin-left: 5px;
+}
+
+.ml-8 {
+ margin-left: 8px;
+}
+
+.mt-10 {
+ margin-top: 10px;
+}
+
+.ml-15 {
+ margin-left: 15px;
+}
+
+.ml-120 {
+ margin-left: 120px;
+}
+
+.ml-16 {
+ margin-left: 16px;
+}
+
+.mr-16 {
+ margin-right: 16px;
+}
+
+.mb-8 {
+ margin-bottom: 8px;
+}
+
+.mb-10 {
+ margin-bottom: 10px;
+}
+
+.mt-24 {
+ margin-top: 24px;
+}
+
+.mb-24 {
+ margin-bottom: 24px;
+}
+
+.mr-24 {
+ margin-right: 24px;
+}
+
+.mb-28 {
+ margin-bottom: 28px;
+}
+
+.mt-50 {
+ margin-top: 50px;
+}
+
+.mb-50 {
+ margin-bottom: 50px;
+}
+
+.helper-text {
+ height: 24px;
+ font-size: 12px;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.45);
+ line-height: 24px;
+}
+
+.float-left {
+ width: 100%;
+ height: auto;
+ float: left;
+}
+
+.d-flex {
+ display: flex;
+ align-items: center;
+}
+
+.j-flex {
+ display: flex;
+ justify-content: center;
+}
+
+.d-j-flex {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.j-r-flex {
+ display: flex;
+ justify-content: right;
+}
+
+.j-b-flex {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.c-flex {
+ display: flex;
+ flex-direction: column;
+}
+
+.c-a-flex {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.flex-1 {
+ flex: 1;
+}
+
+.primary {
+ color: $primaryColor;
+}
+
+.c-yellow {
+ color: #e1a500;
+}
+
+.c-success {
+ color: #04c877;
+}
+
+.c-green {
+ color: #00cc66;
+}
+
+.c-red {
+ color: $primaryColor;
+}
+
+.login-box {
+ .ant-btn {
+ font-size: 18px !important;
+ font-weight: 500 !important;
+ }
+
+ .ant-input,
+ .ant-input-password {
+ font-weight: 400;
+ font-size: 18px !important;
+ background-color: #f6f6f6;
+ &::placeholder {
+ color: rgba(0, 0, 0, 0.45);
+ }
+ }
+}
diff --git a/src/pages/login/index.module.scss b/src/pages/login/index.module.scss
index e69de29..7da7581 100644
--- a/src/pages/login/index.module.scss
+++ b/src/pages/login/index.module.scss
@@ -0,0 +1,73 @@
+.login-content {
+ width: 100%;
+ float: left;
+ height: 100vh;
+ background-color: #fff;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ .title {
+ width: 120px;
+ height: auto;
+ font-size: 30px;
+ font-weight: 600;
+ color: #333333;
+ line-height: 30px;
+ border-bottom: 4px solid #ff4d4f;
+ box-sizing: border-box;
+ padding-bottom: 10px;
+ margin: 0 auto;
+ margin-top: 100px;
+ }
+ .login-box {
+ width: 1200px;
+ height: 366px;
+ background: #ffffff;
+ display: flex;
+ margin: 0 auto;
+ margin-top: 80px;
+ .left-box {
+ width: 595px;
+ height: 100%;
+ box-sizing: border-box;
+ padding: 33px 60px;
+ .icon {
+ width: 475px;
+ height: 300px;
+ }
+ }
+ .right-box {
+ width: 520px;
+ height: 100%;
+ box-sizing: border-box;
+ border-left: 1px solid #d8d8d8;
+ padding: 0px 60px;
+ display: flex;
+ flex-direction: column;
+ .captcha-box {
+ width: 125px;
+ height: 54px;
+ margin-left: 15px;
+ border-radius: 8px;
+ background-color: rgba(#ff4d4f, 0.1);
+ display: flex;
+
+ .catpcha-loading-box {
+ width: 125px;
+ height: 54px;
+ line-height: 54px;
+ text-align: center;
+ }
+
+ .captcha {
+ width: 125px;
+ height: 54px;
+ border: none;
+ cursor: pointer;
+ border-radius: 8px;
+ }
+ }
+ }
+ }
+}
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index efffc50..c9d5698 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -1,40 +1,166 @@
-import { Button } from "antd";
+import { Spin, Input, Button, message } from "antd";
+import React, { useState, useEffect } from "react";
+import styles from "./index.module.scss";
+import banner from "../../assets/images/login/banner.png";
import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
+import { login, system, user } from "../../api/index";
+import { setToken } from "../../utils/index";
+import { Footer, NoHeader } from "../../compenents";
-const LoginPage = () => {
+const LoginPage: React.FC = () => {
const dispatch = useDispatch();
- const loginState = useSelector((state: any) => {
- return state.loginUser.value;
- });
-
- return (
- <>
-
+ const navigate = useNavigate();
+ const [loading, setLoading] = useState
+ 
+
+
+
);
};
-export default LoginPage;
\ No newline at end of file
+export default LoginPage;
+
+ 学员登录
+
+
+
+ 
+
+
+
+
+ {
+ setEmail(e.target.value);
+ }}
+ style={{ width: 400, height: 54 }}
+ placeholder="请输入学员邮箱账号"
+ onKeyUp={(e) => keyUp(e)}
+ />
+
+
+ {
+ setPassword(e.target.value);
+ }}
+ style={{ width: 400, height: 54 }}
+ placeholder="请输入密码"
+ />
+
+
+ {
+ setCaptchaVal(e.target.value);
+ }}
+ onKeyUp={(e) => keyUp(e)}
+ />
+
+
+ {captchaLoading && (
+ 
+ )}
+
+
+
+ )}
+
+ {!captchaLoading && (
+
+
+
+
+
+
+