nav & header bug fix

ecosystem.config.js

@@ -7,6 +7,9 @@ module.exports = {
       instances: 1,
       autorestart: true,
       watch: false,
+      log_date_format: "YYYY-MM-DD HH:mm:ss Z",
+      error_file: "./logs/error.log",
+      out_file: "./logs/out.log",
       max_memory_restart: "1G",
       env: {
         NODE_ENV: "development",
@@ -19,6 +22,9 @@ module.exports = {
       instances: 1,
       autorestart: true,
       watch: false,
+      log_date_format: "YYYY-MM-DD HH:mm:ss Z",
+      error_file: "./logs/error.log",
+      out_file: "./logs/out.log",
       max_memory_restart: "1G",
       env: {
         NODE_ENV: "producation",

src/app/contactUs/contact.module.css

@@ -18,7 +18,8 @@
 
   .form {
     width: 700px;
-    margin-top: 52px;
+    margin-top: 50px;
+    margin-bottom: 30px;
 
     .formItemInput {
       box-sizing: border-box;

src/app/layout.tsx

@@ -1,17 +1,13 @@
 import type { Metadata } from "next";
-// import localFont from "next/font/local";
+import type { Viewport } from "next";
 import "./globals.css";
 
-// const geistSans = localFont({
-//   src: "./fonts/GeistVF.woff",
-//   variable: "--font-geist-sans",
-//   weight: "100 900",
-// });
-// const geistMono = localFont({
-//   src: "./fonts/GeistMonoVF.woff",
-//   variable: "--font-geist-mono",
-//   weight: "100 900",
-// });
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
 
 export const metadata: Metadata = {
   title: "高潜咨询-战略闭环管理-公司战略咨询-助力中国高潜企业加速发展",

src/components/Header/header.module.css

@@ -286,8 +286,17 @@
   }
 }
 
+.nav-fixed {
+  display: none;
+}
+
 @media screen and (max-width: 767px) {
+  .nav {
+    display: none;
+  }
+
   .nav-fixed {
+    display: block;
     position: fixed;
     z-index: 999;
     width: 100%;
@@ -375,7 +384,7 @@
     }
   }
 
-  .nav {
+  .nav-content {
     display: flex;
     flex-direction: column;
     width: 100%;

src/components/Header/headerMobile.tsx

@@ -7,6 +7,11 @@ import styles from "./header.module.css";
 
 const HeaderMobile: React.FC = () => {
   const [showMenu, setShowMenu] = useState("");
+
+  const hideMenu = () => {
+    setShowMenu("hide");
+  };
+
   return (
     <>
       <div className={styles["nav-fixed"]}>
@@ -25,22 +30,22 @@ const HeaderMobile: React.FC = () => {
         </div>
         <div className={showMenu === "show" ? styles.show : styles.hide}>
           <div className={styles["nav-sub"]}>
-            <Link className={styles.item} href="#" scroll={true}>
+            <Link className={styles.item} href="#" onClick={() => hideMenu()}>
               首页
             </Link>
-            <Link className={styles.item} href="/about" scroll={true}>
+            <Link className={styles.item} href="/about">
               关于我们
             </Link>
-            <Link className={styles.item} href="#service" scroll={true}>
+            <Link className={styles.item} href="#service" scroll={true} onClick={() => hideMenu()}>
               业务介绍
             </Link>
-            <Link className={styles.item} href="#consultant" scroll={true}>
+            <Link className={styles.item} href="#consultant" scroll={true} onClick={() => hideMenu()}>
               顾问介绍
             </Link>
-            <Link className={styles.item} href="/caseList" scroll={true}>
+            <Link className={styles.item} href="/caseList">
               经典案例
             </Link>
-            <Link className={styles.item} href="/contactUs" scroll={true}>
+            <Link className={styles.item} href="/contactUs">
               联系我们
             </Link>
             <Link className={styles.item} href={"https://hi-po.com.cn/user/login"}>
@@ -52,7 +57,7 @@ const HeaderMobile: React.FC = () => {
           </div>
         </div>
       </div>
-      <div className={styles.nav}>
+      <div className={styles["nav-content"]}>
         <div className={styles.content}>
           <Image
             alt="hero"

src/components/Header/headerPC.tsx

@@ -17,7 +17,7 @@ const HeaderPC: React.FC = () => {
             <Link className={styles.link} href="#" scroll={true}>
               首页
             </Link>
-            <Link className={styles.link} href="/about" scroll={true}>
+            <Link className={styles.link} href="/about">
               关于我们
             </Link>
             <Link className={styles.link} href="#service" scroll={true}>
@@ -26,10 +26,10 @@ const HeaderPC: React.FC = () => {
             <Link className={styles.link} href="#consultant" scroll={true}>
               顾问介绍
             </Link>
-            <Link className={styles.link} href="/caseList" scroll={true}>
+            <Link className={styles.link} href="/caseList">
               经典案例
             </Link>
-            <Link className={styles.link} href="/contact" scroll={true}>
+            <Link className={styles.link} href="/contact">
               联系我们
             </Link>
           </div>

src/components/Header/index.tsx

@@ -1,22 +1,12 @@
-"use client";
-
 import React from "react";
-import dynamic from "next/dynamic";
 import HeaderPC from "./headerPC";
 import HeaderMobile from "./headerMobile";
 
 const Header: React.FC = () => {
-  const MediaQuery = dynamic(() => import("react-responsive"), {
-    ssr: false,
-  });
   return (
     <>
-      <MediaQuery maxWidth={767}>
-        <HeaderMobile />
-      </MediaQuery>
-      <MediaQuery minWidth={768}>
-        <HeaderPC />
-      </MediaQuery>
+      <HeaderMobile />
+      <HeaderPC />
     </>
   );
 };

src/components/Nav/index.tsx

@@ -1,22 +1,12 @@
-"use client";
-
 import React from "react";
-import dynamic from "next/dynamic";
 import NavPC from "./navPC";
 import NavMobile from "./navMobile";
 
 const Nav: React.FC = () => {
-  const MediaQuery = dynamic(() => import("react-responsive"), {
-    ssr: false,
-  });
   return (
     <>
-      <MediaQuery maxWidth={767}>
-        <NavMobile />
-      </MediaQuery>
-      <MediaQuery minWidth={768}>
-        <NavPC />
-      </MediaQuery>
+      <NavMobile />
+      <NavPC />
     </>
   );
 };

src/components/Nav/nav.module.css

@@ -101,8 +101,17 @@
   }
 }
 
+.nav-fixed {
+  display: none;
+}
+
 @media screen and (max-width: 767px) {
+  .nav {
+    display: none;
+  }
+
   .nav-fixed {
+    display: block;
     position: fixed;
     background: white;
     width: 100%;
@@ -158,6 +167,8 @@
       animation: show-keyframes 200ms ease-in forwards;
 
       .nav-sub {
+        display: flex;
+        flex-direction: column;
         text-align: center;
         height: 450px;
         padding-top: 25px;

src/components/Nav/navMobile.tsx

@@ -7,6 +7,11 @@ import styles from "./nav.module.css";
 
 const NavMobile: React.FC = () => {
   const [showMenu, setShowMenu] = useState("");
+
+  const hideMenu = () => {
+    setShowMenu("hide");
+  };
+
   return (
     <>
       <div className={styles["nav-fixed"]}>
@@ -32,10 +37,10 @@ const NavMobile: React.FC = () => {
             <Link className={styles.item} href="/about">
               关于我们
             </Link>
-            <Link className={styles.item} href="/#service" scroll={true}>
+            <Link className={styles.item} href="/#service" scroll={true} onClick={() => hideMenu()}>
               业务介绍
             </Link>
-            <Link className={styles.item} href="/#consultant" scroll={true}>
+            <Link className={styles.item} href="/#consultant" scroll={true} onClick={() => hideMenu()}>
               顾问介绍
             </Link>
             <Link className={styles.item} href="/caseList">