创建登陆页(结束)

1. 创建登陆页 src\pages\Login\Login.tsx

   import React from "react";
   import { LockOutlined, UserOutlined } from "@ant-design/icons";
   import { Button, Space, Form, Input } from "antd";

   import styles from "./Login.module.scss";

   const Login = () => {
     const onFinish = (values: any) => {
       console.log(values);
     };

     return (
       <div className={styles.loginPage}>
         <div className={styles.loginBox}>
           <Form
             name="normal_login"
             className="login-form"
             initialValues={{ remember: true }}
             onFinish={onFinish}
           >
             <Form.Item
               name="username"
               rules={[{ required: true, message: "请输入用户名!" }]}
               style={{ marginBottom: 10 }}
             >
               <Input prefix={<UserOutlined />} placeholder="用户名" />
             </Form.Item>

             <Form.Item
               name="password"
               rules={[{ required: true, message: "请输入密码!" }]}
               style={{ marginBottom: 10 }}
             >
               <Input.Password
                 prefix={<LockOutlined />}
                 type="password"
                 placeholder="密码"
               />
             </Form.Item>

             <Form.Item>
               <Button
                 block
                 type="primary"
                 htmlType="submit"
                 className="login-form-button"
               >
                 登录
               </Button>
               <Button type="link" style={{ paddingLeft: 5 }}>
                 去注册
               </Button>
             </Form.Item>
           </Form>
         </div>
       </div>
     );
   };

   export default Login;

1. 样式 src\pages\Login\Login.module.scss

   .loginPage {
     min-height: 100vh;
     position: relative;

     .loginBox {
       width: 400px;
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
     }
   }

1. 路由中引入

    {
        path: "/login",
        element: <Login />,
    },

1. 课程地址

https://www.bilibili.com/video/BV1FV4y157Zx?p=1&vd_source=777d17e43452e29f6c42c05c67119ebb