左侧栏初步

src/App.tsx

@@ -4,8 +4,12 @@ import { useRoutes } from "react-router-dom";
 import routes from "./router/routes";
 
 function App() {
-  const element = useRoutes(routes);
-  return <div className={styles.App}>{element}</div>;
+  const Views = () => useRoutes(routes);
+  return (
+    <div className={styles.App}>
+      <Views />
+    </div>
+  );
 }
 
 export default App;

src/compenents/header/Header.module.css

@@ -2,25 +2,12 @@
   background-color: white !important;
 }
 
-  .main-menu {
-    padding-left: 6% !important;
-    padding-right: 6% !important;
-    background-color: #1976d2 !important;
-    color: #f5f5f5 !important;
-  }
-  
-  .button-group {
-    float: right;
-  }
 
 .main-header {
-    width: 1200px;
+  width: 100%;
   background-color: white !important;
-    height: 70px;
-    line-height: 70px;
-    width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
+  height: 48px;
+  line-height: 48px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -42,5 +29,3 @@
   display: inline;
   color: #03a9f4 !important;
 }
-  
-  

src/compenents/leftMenu/LeftMenu.module.css

@@ -9,4 +9,5 @@
   height: 40px;
   margin-top: 16px;
   margin-left: 38px;
+  margin-bottom: 20px;
 }

src/compenents/leftMenu/LeftMenu.tsx

@@ -9,6 +9,7 @@ import { Menu } from "antd";
 import { useNavigate, Link } from "react-router-dom";
 import styles from "./LeftMenu.module.css";
 import logo from "../../assets/logo.png";
+import "../../utils/index.css";
 
 function getItem(label: any, key: any, icon: any, children: any, type: any) {
   return {
@@ -21,7 +22,7 @@ function getItem(label: any, key: any, icon: any, children: any, type: any) {
 }
 const items = [
   getItem("首页概览", "/", <SettingOutlined />, null, null),
-  getItem("网校装修", "/", <SettingOutlined />, null, null),
+  getItem("网校装修", "/decoration", <SettingOutlined />, null, null),
   getItem(
     "课程内容",
     "2",
@@ -61,10 +62,7 @@ export const LeftMenu: React.FC = () => {
   };
   return (
     <div className={styles["left-menu"]}>
-      <Link
-        style={{ textDecoration: "none" }}
-        to={`/`}
-      >
+      <Link style={{ textDecoration: "none" }} to={`/`}>
         <img src={logo} alt="" className={styles["App-logo"]} />
       </Link>
       <Menu

src/pages/dashboard/Dashboard.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import styles from "./Dashboard.module.css";
+
+export const Dashboard: React.FC<any> = () => {
+  return (
+    <div>
+      <p>首頁概況</p>
+    </div>
+  );
+};

src/pages/dashboard/index.ts

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

src/pages/home/HomePage.module.css

@@ -1,14 +1,6 @@
-.page-content {
-  width: 1200px;
-  min-height: calc(100vh - 173px);
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 30px;
-  margin-bottom: 100px;
-}
-
 .layout-wrap {
   width: 100%;
+  height: 100vh;
   display: flex;
 }
 
@@ -21,3 +13,16 @@
   display: flex;
   flex-direction: column;
 }
+
+.right-top {
+  width: 100%;
+  height: 48px;
+}
+
+.right-main {
+  flex: 1;
+  box-sizing: border-box;
+  padding: 24px;
+  overflow-y: auto;
+  background-color: #f1f2f9;
+}

src/pages/index.ts

@@ -1,2 +1,3 @@
 export * from "./home";
 export * from "./login";
+export * from "./dashboard";

src/router/routes.tsx

@@ -1,11 +1,17 @@
 import React from "react";
 import { RouteObject } from "react-router-dom";
-import { Login, HomePage } from "../pages";
+import { Login, HomePage, Dashboard } from "../pages";
 
 const routes: RouteObject[] = [
   {
     path: "/",
     element: <HomePage />,
+    children: [
+      {
+        path: "/",
+        element: <Dashboard />,
+      },
+    ],
   },
   {
     path: "/login",

src/utils/index.css

@@ -0,0 +1,27 @@
+.ant-menu-item {
+  width: calc(100% - 32px) !important;
+  margin-left: 16px !important;
+  margin-right: 16px !important;
+}
+
+.ant-menu-submenu {
+  width: calc(100% - 24px) !important;
+  margin-left: 12px !important;
+  margin-right: 12px !important;
+}
+
+.ant-menu,
+.ant-menu-sub,
+.ant-menu-inline {
+  background-color: #ffffff !important;
+}
+
+.ant-menu-item-selected {
+  background-color: #ff4d4f !important;
+  color: white !important;
+}
+
+.ant-menu-item-active {
+  background-color: #ff4d4f !important;
+  color: white !important;
+}