安装less

src/compenents/header/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./index.less";
+import styles from "./index.module.less";
 import { Layout, Button, Dropdown, MenuProps } from "antd";
 import { useSelector } from "../../store/hooks";
 import { useDispatch } from "react-redux";

src/compenents/leftMenu/index.less

@@ -1,13 +0,0 @@
-.left-menu {
-  width: 200px;
-  height: 100%;
-  background-color: #fff;
-}
-
-.App-logo {
-  width: 124px;
-  height: 40px;
-  margin-top: 16px;
-  margin-left: 38px;
-  margin-bottom: 20px;
-}

src/compenents/leftMenu/index.module.less

@@ -0,0 +1,12 @@
+.left-menu {
+  width: 200px;
+  height: 100%;
+  background-color: #fff;
+  .App-logo {
+    width: 124px;
+    height: 40px;
+    margin-top: 16px;
+    margin-left: 38px;
+    margin-bottom: 20px;
+  }
+}

src/compenents/leftMenu/index.tsx

@@ -7,7 +7,7 @@ import {
 import { Menu } from "antd";
 //导出路由跳转hooks函数
 import { useNavigate, Link } from "react-router-dom";
-import styles from "./index.less";
+import styles from "./index.module.less";
 import logo from "../../assets/logo.png";
 import "../../utils/index.less";
 

src/pages/course/index.ts

@@ -1 +0,0 @@
-export * from "./vod";

src/pages/course/vod/index.ts

@@ -1 +0,0 @@
-export * from "./Vod"

src/pages/course/vod/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { Typography, Input, Select, Button, Space, Table } from "antd";
 import type { ColumnsType } from "antd/es/table";
-import styles from "./Vod.module.less";
+import styles from "./index.module.less";
 import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import { login } from "../../../api/index";
 

src/pages/dashboard/index.ts

@@ -1 +0,0 @@
-export * from "./Dashboard";

src/pages/dashboard/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./Dashboard.module.less";
+import styles from "./index.module.less";
 
 export const Dashboard: React.FC<any> = () => {
   return (

src/pages/error/index.ts

@@ -1 +0,0 @@
-export * from "./Error";

src/pages/error/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./Error.module.less";
+import styles from "./index.module.less";
 
 export const ErrorPage: React.FC<any> = () => {
   return (

src/pages/home/index.ts

@@ -1 +0,0 @@
-export * from "./HomePage";

src/pages/home/index.tsx

@@ -1,14 +1,10 @@
 import React, { useEffect } from "react";
-import styles from "./HomePage.module.less";
+import styles from "./index.module.less";
 import { Outlet, useNavigate } from "react-router-dom";
 import { Header, LeftMenu, Footer } from "../../compenents";
-import { login } from "../../api/index";
-
 
 export const HomePage: React.FC = () => {
-  useEffect(() => {
+  useEffect(() => {}, []);
-   
-  }, []);
 
   return (
     <>

src/pages/index.ts

@@ -2,5 +2,5 @@ export * from "./home";
 export * from "./login";
 export * from "./dashboard";
 export * from "./error";
-export * from "./course";
 export * from "./test";
+export * from "./course/vod";

src/pages/login/Login.module.less

@@ -1,20 +0,0 @@
-.login-content {
-  width: 100%;
-  float: left;
-  height: 100%;
-  background-color: #fff;
-  .login-box {
-    width: 1200px;
-    height: 500px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 150px;
-    .captcha {
-      width: 120px;
-      height: 48px;
-      margin-left: 10px;
-      cursor: pointer;
-      cursor: pointer;
-    }
-  }
-}

src/pages/login/index.module.less

@@ -0,0 +1,47 @@
+.login-content {
+  width: 100%;
+  float: left;
+  height: 100vh;
+  background-color: #fff;
+  position: relative;
+  .banner-box {
+    width: 100%;
+    float: left;
+    height: 640px;
+    .banner {
+      width: 100%;
+      height: 640px;
+    }
+  }
+  .login-box {
+    width: 880px;
+    height: 560px;
+    background: #ffffff;
+    box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 30px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -440px;
+    margin-top: -280px;
+    display: flex;
+    .left-box {
+      width: 440px;
+      height: 100%;
+      .icon{
+        
+      }
+    }
+    .right-box {
+      width: 440px;
+      height: 100%;
+      .captcha {
+        width: 120px;
+        height: 48px;
+        margin-left: 10px;
+        cursor: pointer;
+        cursor: pointer;
+      }
+    }
+  }
+}

src/pages/login/index.ts

@@ -1 +0,0 @@
-export * from "./Login";

src/pages/login/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import styles from "./Login.module.less";
+import styles from "./index.module.less";
 import { Typography, Spin, Input, Button, message } from "antd";
 import { login, system } from "../../api/index";
 import { setToken } from "../../utils/index";
@@ -10,6 +10,8 @@ import {
   SetPermisssionsActionCreator,
 } from "../../store/user/userActions";
 import { useNavigate } from "react-router-dom";
+import banner from "../../assets/images/login/banner.png";
+import icon from "../../assets/images/login/icon.png";
 
 export const Login: React.FC = () => {
   const dispatch = useDispatch();
@@ -81,8 +83,14 @@ export const Login: React.FC = () => {
 
   return (
     <div className={styles["login-content"]}>
+      <div className={styles["banner-box"]}>
+        <img className={styles["banner"]} src={banner} alt="" />
+      </div>
       <div className={styles["login-box"]}>
-        <div className="float-left c-flex">
+        <div className={styles["left-box"]}>
+          <img className={styles["icon"]} src={icon} alt="" />
+        </div>
+        <div className={styles["right-box"]}>
           <div className="d-flex mr-24">
             <Typography.Title>登录后台</Typography.Title>
           </div>