diff --git a/src/App.module.css b/src/App.module.css index ba4c396..5d4abfd 100644 --- a/src/App.module.css +++ b/src/App.module.css @@ -1,3 +1,3 @@ .App { background-color: #f6f6f6; -} \ No newline at end of file +} diff --git a/src/App.tsx b/src/App.tsx index d974715..b5bc094 100644 --- a/src/App.tsx +++ b/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
{element}
; + const Views = () => useRoutes(routes); + return ( +
+ +
+ ); } export default App; diff --git a/src/compenents/header/Header.module.css b/src/compenents/header/Header.module.css index b327abe..a7044a8 100644 --- a/src/compenents/header/Header.module.css +++ b/src/compenents/header/Header.module.css @@ -1,46 +1,31 @@ .app-header { - 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; - background-color: white !important; - height: 70px; - line-height: 70px; - width: 1200px; - margin-left: auto; - margin-right: auto; - display: flex; - align-items: center; - justify-content: space-between; - } - - .App-logo { - width: 151px; - height: 40px; - float: left; - } - - .top-main { - display: flex; - align-items: center; - } - - .title { - line-height: 64px !important; - display: inline; - color: #03a9f4 !important; - } - - \ No newline at end of file + background-color: white !important; +} + + +.main-header { + width: 100%; + background-color: white !important; + height: 48px; + line-height: 48px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.App-logo { + width: 151px; + height: 40px; + float: left; +} + +.top-main { + display: flex; + align-items: center; +} + +.title { + line-height: 64px !important; + display: inline; + color: #03a9f4 !important; +} diff --git a/src/compenents/leftMenu/LeftMenu.module.css b/src/compenents/leftMenu/LeftMenu.module.css index 99a69fd..f3b31d1 100644 --- a/src/compenents/leftMenu/LeftMenu.module.css +++ b/src/compenents/leftMenu/LeftMenu.module.css @@ -9,4 +9,5 @@ height: 40px; margin-top: 16px; margin-left: 38px; + margin-bottom: 20px; } diff --git a/src/compenents/leftMenu/LeftMenu.tsx b/src/compenents/leftMenu/LeftMenu.tsx index ce5bd49..2005058 100644 --- a/src/compenents/leftMenu/LeftMenu.tsx +++ b/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("首页概览", "/", , null, null), - getItem("网校装修", "/", , null, null), + getItem("网校装修", "/decoration", , null, null), getItem( "课程内容", "2", @@ -61,10 +62,7 @@ export const LeftMenu: React.FC = () => { }; return (
- + = () => { + return ( +
+

首頁概況

+
+ ); +}; diff --git a/src/pages/dashboard/index.ts b/src/pages/dashboard/index.ts new file mode 100644 index 0000000..faa6636 --- /dev/null +++ b/src/pages/dashboard/index.ts @@ -0,0 +1 @@ +export * from "./Dashboard"; \ No newline at end of file diff --git a/src/pages/home/HomePage.module.css b/src/pages/home/HomePage.module.css index 5c94656..42bbe50 100644 --- a/src/pages/home/HomePage.module.css +++ b/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; +} diff --git a/src/pages/index.ts b/src/pages/index.ts index cd5866d..324e145 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1,2 +1,3 @@ export * from "./home"; -export * from "./login"; \ No newline at end of file +export * from "./login"; +export * from "./dashboard"; \ No newline at end of file diff --git a/src/router/routes.tsx b/src/router/routes.tsx index 0905afc..a3681d4 100644 --- a/src/router/routes.tsx +++ b/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: , + children: [ + { + path: "/", + element: , + }, + ], }, { path: "/login", diff --git a/src/utils/index.css b/src/utils/index.css new file mode 100644 index 0000000..93e0082 --- /dev/null +++ b/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; +}