feat: 文件名修改

src/component/Drawer/Drawer.css

@@ -1,51 +0,0 @@
-/* Drawer.css */
-.drawer-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 999;
-}
-
-.drawer {
-    position: fixed;
-    top: 0;
-    left: -300px; /* 默认隐藏在左侧 */
-    width: 300px;
-    height: 100vh;
-    background: white;
-    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-    transition: left 0.3s ease;
-}
-
-.drawer-open {
-    left: 0; /* 打开时显示 */
-}
-
-.drawer-content {
-    padding: 2rem;
-    position: relative;
-    height: 100%;
-    overflow-y: auto;
-}
-
-.drawer-close {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-}
-
-/* 手机端样式 */
-@media (max-width: 768px) {
-    .drawer {
-        width: 80%; /* 手机端占满大部分屏幕 */
-        left: -80%;
-    }
-}

src/component/Drawer/Drawer.jsx

@@ -1,19 +1,46 @@
-const Drawer = ({isOpen, onClose, children}) => {
-    console.log(isOpen);
-    return (
-        <>
-            {/* 遮罩层 */}
-            {isOpen && <div className="drawer-overlay" onClick={onClose}/>}
+import React, {useEffect, useState} from "react";
+import styles from "./Drawer.module.css";
+import eventBus from "../../uitls/EventBus";
 
-            {/* 抽屉导航 */}
-            <div className={`drawer ${isOpen ? 'drawer-open' : ''}`}>
-                <div className="drawer-content">
-                    <button className="drawer-close" onClick={onClose}>×</button>
-                    {children}
-                </div>
-            </div>
-        </>
-    );
+const Drawer = () => {
+    const [drawerOpen, setDrawerOpen] = useState(false);
+
+    useEffect(() => {
+        eventBus.on("drawerState", (state) => {
+            setDrawerOpen(state);
+        });
+        return () => {
+            eventBus.off("drawerState");
+        };
+    }, []);
+
+    return (<div className={styles.container}>
+        {/* 手机端菜单按钮 */}
+        {/*<button*/}
+        {/*    className={styles.menuButton}*/}
+        {/*    onClick={() => setDrawerOpen(true)}*/}
+        {/*>*/}
+        {/*    ☰*/}
+        {/*</button>*/}
+
+        {/* 左侧抽屉菜单 */}
+        <div
+            className={`${styles.drawer} ${drawerOpen ? styles.open : ""}`}
+        >
+            <button
+                className={styles.closeButton}
+                onClick={() => setDrawerOpen(false)}
+            >
+                ✕
+            </button>
+            <ul className={styles.menuList}>
+                <li>首页</li>
+                <li>关于我们</li>
+                <li>服务</li>
+                <li>联系</li>
+            </ul>
+        </div>
+    </div>);
 };
 
 export default Drawer;

src/component/Drawer/Drawer.module.css

@@ -0,0 +1,82 @@
+/* 容器 */
+.container {
+}
+
+/* 桌面端布局：左边菜单，右边内容 */
+@media (min-width: 768px) {
+    .drawer {
+        position: relative;
+        width: 200px;
+        background: #333;
+        color: white;
+        transform: none !important;
+    }
+
+    .menuButton {
+        display: none; /* 桌面端不显示菜单按钮 */
+    }
+
+    .content {
+        flex: 1;
+        padding: 20px;
+    }
+}
+
+/* 移动端布局：抽屉菜单隐藏在左边 */
+@media (max-width: 768px) {
+    .drawer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 220px;
+        background: #333;
+        color: white;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+        z-index: 1000;
+        padding: 20px;
+    }
+
+    .drawer.open {
+        transform: translateX(0);
+    }
+
+    .menuButton {
+        position: fixed;
+        top: 10px;
+        left: 10px;
+        background: #333;
+        color: white;
+        border: none;
+        padding: 10px 15px;
+        cursor: pointer;
+        z-index: 1100;
+        border-radius: 4px;
+    }
+
+    .closeButton {
+        background: none;
+        border: none;
+        color: white;
+        font-size: 20px;
+        cursor: pointer;
+        margin-bottom: 20px;
+    }
+
+    .menuList {
+        list-style: none;
+        padding: 0;
+    }
+
+    .menuList li {
+        margin: 15px 0;
+        cursor: pointer;
+    }
+
+    .content {
+        flex: 1;
+        padding: 20px;
+        margin-left: 0; /* 移动端不预留空间 */
+    }
+}

src/component/Header/Header.js → src/component/Header/Header.jsx

@@ -22,10 +22,18 @@ const Header = () => {
     };
     return (
         <header className={Styles.root}>
+            <button
+                className={Styles.menuBtn}
+                // onClick={() => setDrawerOpen(false)}
+            >
+                ☰
+            </button>
             <Link to={HOME} className={Styles.link} onClick={() => eventBus.emit('changeTabEvent', HOME)}>
                 <img className={Styles.logoImg} src={logo} alt="logo"/>
             </Link>
-            <Navigation/>
+            <div className={Styles.navigationState}>
+                <Navigation/>
+            </div>
         </header>
     );
 };

src/component/Header/Header.module.css

@@ -26,3 +26,38 @@ a {
     width: 127px;
     height: 25px;
 }
+
+.navigationState {
+    display: flex;
+}
+
+.menuBtn {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .root {
+        display: flex;
+        justify-content: center;
+        width: 375px;
+        height: 64px;
+    }
+
+    .navigationState {
+        display: none !important;
+    }
+
+    .menuBtn {
+        display: flex;
+        position: absolute;
+        font-size: 24px;
+        left: 20px;
+        border: none;
+        background-color: transparent;
+    }
+    .logoImg {
+        object-fit: contain;
+        width: 127px;
+        height: 25px;
+    }
+}

src/pages/Home/Home.js → src/pages/Home/Home.jsx

@@ -5,6 +5,7 @@ import img1 from '../../assets/images/home/img1.png';
 import {useTranslation} from "react-i18next";
 import {HOME} from "../../uitls/Constants";
 import eventBus from "../../uitls/EventBus";
+import Drawer from "../../component/Drawer/Drawer";
 // 首页内容组件
 const Home = () => {
     const {t} = useTranslation();
@@ -124,6 +125,7 @@ const Home = () => {
                 </div>
             </div>
             <div className={Styles.rootPhone}>
+                <Drawer/>
             </div>
         </main>
 

src/uitls/Utils.js

@@ -0,0 +1,3 @@
+export const px2vw = (px) => {
+    return px / 375 * 100;
+}