fix mobile display

package.json

@@ -16,6 +16,7 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.0.0",
     "react-icons": "^5.4.0",
+    "react-responsive": "^10.0.0",
     "react-scroll": "^1.9.0",
     "swiper": "^10.3.1"
   },

src/app/(home)/components/Services/index.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import styles from "./services.module.css";
 import { fetchServiceProducts } from "@/lib/cms";
 
-export default async function Services() {
+export default async function Service() {
   const { data: servicesList } = await fetchServiceProducts();
 
   return (
@@ -20,15 +20,15 @@ export default async function Services() {
             {servicesList?.records?.map((item, index) => {
               return (
                 <div className={styles["col-md-4"]} key={index}>
-                  <a href={item.fileUrl}>
-                    <div className={styles["card-item"]}>
-                      <div className={styles["flex-row"]}>
-                        <Image alt="product-image" width={80} height={80} src={item.icon} className={styles.icon} />
-                        <div className={styles.content3}>{item.title}</div>
-                      </div>
-                      <div className={styles.content4}>{item.desc}</div>
+                  {/* <a href={item.fileUrl}> */}
+                  <div className={styles["card-item"]}>
+                    <div className={styles["flex-row"]}>
+                      <Image alt="product-image" width={80} height={80} src={item.icon} className={styles.icon} />
+                      <div className={styles.content3}>{item.title}</div>
                     </div>
-                  </a>
+                    <div className={styles.content4}>{item.desc}</div>
+                  </div>
+                  {/* </a> */}
                 </div>
               );
             })}

src/app/(home)/components/Show/show.module.css

@@ -184,27 +184,27 @@
         }
       }
 
-      .video-wrapper {
+      .show-details {
         display: flex;
         flex-direction: row;
         align-items: center;
         width: 100%;
-      }
-
-      .video-nav {
-        margin-right: 0;
-        margin-left: 0;
-        font-size: 0;
-      }
 
-      .show-videos {
-        box-sizing: border-box;
-        width: 100%;
-        height: 145px;
+        .video-nav {
+          margin-right: 0;
+          margin-left: 0;
+          font-size: 0;
+        }
 
-        .video {
-          width: 100%;
+        .swiper-wrapper {
+          box-sizing: border-box;
+          width: 320px;
           height: 145px;
+
+          .video {
+            width: 100%;
+            height: 145px;
+          }
         }
       }
     }

src/app/(home)/page.tsx

@@ -1,7 +1,7 @@
 import styles from "./page.module.css";
-import Nav from "@/components/Header";
+import Header from "@/components/Header";
 import Footer from "@/components/Footer";
-import Services from "./components/Services";
+import Service from "./components/Services";
 import Customer from "./components/Customer";
 import Consultant from "./components/Consultant";
 import Contact from "./components/Contact";
@@ -11,10 +11,9 @@ export default function Home() {
   return (
     <>
       <div className={styles.main}>
-        <a id="home" />
-        <Nav />
+        <Header />
         <a id="service" />
-        <Services />
+        <Service />
         <Customer />
         <a id="consultant" />
         <Consultant />

src/components/Footer/footer.module.css

@@ -39,7 +39,7 @@
         gap: 30px;
         align-items: flex-start;
         order: 0;
-        width: 1000px;
+        /* width: 1000px; */
         height: 110px;
         padding: 0;
 
@@ -265,7 +265,7 @@
             flex-grow: 0;
             align-items: center;
             order: 0;
-            width: 100%;
+            /* width: 100%; */
             height: 110px;
             margin-left: 40px;
             padding: 0;

src/components/Header/header.module.css

@@ -294,7 +294,7 @@
     color: white;
     background: #252b42;
 
-    .header {
+    .nav-fixed-bar {
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -320,11 +320,38 @@
     }
 
     .hide {
+      overflow: "hidden";
+      height: 0;
+      z-index: 999;
       animation: hide-keyframes 200ms ease-in forwards;
+
+      .nav-sub {
+        display: none;
+      }
     }
 
     .show {
+      overflow: "hidden";
+      height: 450px;
       animation: show-keyframes 200ms ease-in forwards;
+
+      .nav-sub {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 450px;
+        padding-top: 25px;
+        padding-bottom: 25px;
+        text-align: center;
+
+        .item {
+          height: 50px;
+          color: white;
+          font-size: 20px;
+          font-family: "Montserrat";
+          font-style: normal;
+        }
+      }
     }
 
     @keyframes hide-keyframes {
@@ -346,21 +373,6 @@
         height: 450px;
       }
     }
-
-    .nav-sub {
-      height: 450px;
-      padding-top: 25px;
-      padding-bottom: 25px;
-      text-align: center;
-
-      .item {
-        height: 50px;
-        color: white;
-        font-size: 20px;
-        font-family: "Montserrat";
-        font-style: normal;
-      }
-    }
   }
 
   .nav {

src/components/Header/headerMobile.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import styles from "./header.module.css";
+
+const HeaderMobile: React.FC = () => {
+  const [showMenu, setShowMenu] = useState("");
+  return (
+    <>
+      <div className={styles["nav-fixed"]}>
+        <div
+          className={styles["nav-fixed-bar"]}
+          onClick={() => {
+            if (showMenu == "" || showMenu == "hide") {
+              setShowMenu("show");
+            } else {
+              setShowMenu("hide");
+            }
+          }}
+        >
+          <div className={styles.logo}>HIPO 高潜</div>
+          <Image alt="menu" width={24} height={15} src="/asset/ic_menu_light.png" className={styles.menu} />
+        </div>
+        <div className={showMenu === "show" ? styles.show : styles.hide}>
+          <div className={styles["nav-sub"]}>
+            <Link className={styles.item} href="#" scroll={true}>
+              首页
+            </Link>
+            <Link className={styles.item} href="/about" scroll={true}>
+              关于我们
+            </Link>
+            <Link className={styles.item} href="#service" scroll={true}>
+              业务介绍
+            </Link>
+            <Link className={styles.item} href="#consultant" scroll={true}>
+              顾问介绍
+            </Link>
+            <Link className={styles.item} href="/caseList" scroll={true}>
+              经典案例
+            </Link>
+            <Link className={styles.item} href="/contactUs" scroll={true}>
+              联系我们
+            </Link>
+            <Link className={styles.item} href={"https://hi-po.com.cn/user/login"}>
+              登录
+            </Link>
+            <Link className={styles.item} href={"https://hi-po.com.cn/user/register"}>
+              注册
+            </Link>
+          </div>
+        </div>
+      </div>
+      <div className={styles.nav}>
+        <div className={styles.content}>
+          <Image
+            alt="hero"
+            width={1080}
+            height={793}
+            priority={true}
+            src="https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/cover2.jpg"
+            className={styles["nav-cover"]}
+          />
+          <div className={styles["nav-bg"]}></div>
+          <div className={styles["text-content"]}>
+            <div className={styles.content1}>高潜咨询</div>
+            <div className={styles.content2}>助力中国高潜企业加速发展</div>
+            <div className={styles.content4}>
+              聚焦战略、组织、人才，提供定制化的、可落地的解决方案，帮助高潜力的企业及个人加速成长
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default HeaderMobile;

src/components/Header/headerPC.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import styles from "./header.module.css";
+
+const HeaderPC: React.FC = () => {
+  return (
+    <div className={styles.nav}>
+      <div className={styles["nav-bar"]}>
+        <div className={styles["navbar-brand"]}>
+          <div className={styles.logo}>HIPO 高潜</div>
+        </div>
+        <div className={styles["navbar-collapse"]}>
+          <div className={styles["navbar-content"]}>
+            <Link className={styles.link} href="#" scroll={true}>
+              首页
+            </Link>
+            <Link className={styles.link} href="/about" scroll={true}>
+              关于我们
+            </Link>
+            <Link className={styles.link} href="#service" scroll={true}>
+              业务介绍
+            </Link>
+            <Link className={styles.link} href="#consultant" scroll={true}>
+              顾问介绍
+            </Link>
+            <Link className={styles.link} href="/caseList" scroll={true}>
+              经典案例
+            </Link>
+            <Link className={styles.link} href="/contact" scroll={true}>
+              联系我们
+            </Link>
+          </div>
+          <div className={styles["navbar-login"]}>
+            <Link className={styles.link} href={"https://hi-po.com.cn/user/login"}>
+              登录
+            </Link>
+          </div>
+          <div className={styles["navbar-register"]}>
+            <Link className={styles.link} href={"https://hi-po.com.cn/user/register"}>
+              注册
+            </Link>
+          </div>
+        </div>
+      </div>
+      <div className={styles["nav-container"]}>
+        <div className={styles["main-content"]}>
+          <div className={styles.content1}>高潜咨询</div>
+          <div className={styles.content2}>助力中国高潜企业加速发展</div>
+          <div className={styles.line}></div>
+          <br />
+          <div className={styles.content4}>
+            聚焦战略、组织、人才，提供定制化的、可落地的解决方案，帮助高潜力的企业及个人加速成长
+          </div>
+        </div>
+      </div>
+      <div>
+        <div className={styles["nav-background"]}></div>
+        <Image
+          alt="hero"
+          width={400}
+          height={600}
+          src="https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/cover2.jpg"
+          className={styles["nav-cover"]}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HeaderPC;

src/components/Header/index.tsx

@@ -1,64 +1,23 @@
+"use client";
+
 import React from "react";
-import Link from "next/link";
-import Image from "next/image";
-import styles from "./header.module.css";
+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 (
-    <div className={styles.nav}>
-      <div className={styles["nav-bar"]}>
-        <div className={styles["navbar-brand"]}>
-          <div className={styles.logo}>HIPO 高潜</div>
-        </div>
-        <div className={styles["navbar-collapse"]}>
-          <div className={styles["navbar-content"]}>
-            <Link className={styles.link} href="#" scroll={true}>
-              首页
-            </Link>
-            <Link className={styles.link} href="/about" scroll={true}>
-              关于我们
-            </Link>
-            <Link className={styles.link} href="#service" scroll={true}>
-              业务介绍
-            </Link>
-            <Link className={styles.link} href="#consultant" scroll={true}>
-              顾问介绍
-            </Link>
-            <Link className={styles.link} href="/caseList" scroll={true}>
-              经典案例
-            </Link>
-            <Link className={styles.link} href="/contact" scroll={true}>
-              联系我们
-            </Link>
-          </div>
-          <div className={styles["navbar-login"]}>
-            <Link className={styles.link} href={"https://hi-po.com.cn/user/login"}>
-              登录
-            </Link>
-          </div>
-          <div className={styles["navbar-register"]}>
-            <Link className={styles.link} href={"https://hi-po.com.cn/user/register"}>
-              注册
-            </Link>
-          </div>
-        </div>
-      </div>
-      <div className={styles["nav-container"]}>
-        <div className={styles["main-content"]}>
-          <div className={styles.content1}>高潜咨询</div>
-          <div className={styles.content2}>助力中国高潜企业加速发展</div>
-          <div className={styles.line}></div>
-          <br />
-          <div className={styles.content4}>
-            聚焦战略、组织、人才，提供定制化的、可落地的解决方案，帮助高潜力的企业及个人加速成长
-          </div>
-        </div>
-      </div>
-      <div>
-        <div className={styles["nav-background"]}></div>
-        <img src="https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/cover2.jpg" className={styles["nav-cover"]} />
-      </div>
-    </div>
+    <>
+      <MediaQuery maxWidth={767}>
+        <HeaderMobile />
+      </MediaQuery>
+      <MediaQuery minWidth={768}>
+        <HeaderPC />
+      </MediaQuery>
+    </>
   );
 };
 

src/components/Nav/index.tsx

@@ -1,155 +1,23 @@
 "use client";
-import React, { useState } from "react";
-import { isMobile } from "react-device-detect";
-import styles from "./nav.module.css";
 
-const Nav: React.FC = (props) => {
-  const [showMenu, setShowMenu] = useState("");
+import React from "react";
+import dynamic from "next/dynamic";
+import NavPC from "./navPC";
+import NavMobile from "./navMobile";
 
-  const isCurrent = (title: string) => {
-    return title == props.title;
-  };
-
-  return isMobile ? (
-    <div className={styles["nav-fixed"]}>
-      <div
-        className={styles.header}
-        onClick={() => {
-          if (showMenu == "" || showMenu == "hide") {
-            setShowMenu("show");
-          } else {
-            setShowMenu("hide");
-          }
-        }}
-      >
-        <div className={styles.logo}>HIPO 高潜</div>
-        <img src="/asset/ic_menu_dark.png" className={styles.menu} />
-      </div>
-      <div className={styles["nav-line"]} />
-      <div className={showMenu} style={{ overflow: "hidden", height: 0 }}>
-        <div className={styles["nav-sub"]}>
-          <a href="/">
-            <div
-              className={styles.item}
-              onClick={() => {
-                setShowMenu("hide");
-              }}
-            >
-              首页
-            </div>
-          </a>
-          <a href="/about">
-            <div
-              className={styles.item}
-              onClick={() => {
-                setShowMenu("hide");
-              }}
-            >
-              关于我们
-            </div>
-          </a>
-          <a href="/#service">
-            <div
-              className={styles.item}
-              onClick={() => {
-                setShowMenu("hide");
-              }}
-            >
-              业务介绍
-            </div>
-          </a>
-          <a href="/#consultant">
-            <div
-              className={styles.item}
-              onClick={() => {
-                setShowMenu("hide");
-              }}
-            >
-              顾问介绍
-            </div>
-          </a>
-          <a href="/caseList">
-            <div
-              className={styles.item}
-              onClick={() => {
-                setShowMenu("hide");
-              }}
-            >
-              经典案例
-            </div>
-          </a>
-          <a href="/contactUs">
-            <div
-              className={styles.item}
-              onClick={() => {
-                setShowMenu("hide");
-              }}
-            >
-              联系我们
-            </div>
-          </a>
-          <a href={"/user/login"}>
-            <div
-              className={styles.item}
-              onClick={() => {
-                setShowMenu("hide");
-              }}
-            >
-              登录
-            </div>
-          </a>
-          <a href={"/user/register"}>
-            <div
-              className={styles.item}
-              onClick={() => {
-                setShowMenu("hide");
-              }}
-            >
-              注册
-            </div>
-          </a>
-        </div>
-      </div>
-    </div>
-  ) : (
-    <div className={styles.nav}>
-      <div className={styles["nav-bar"]}>
-        <div className={styles["navbar-brand"]}>
-          <a href={"/"}>
-            <div className={styles.logo}>HIPO 高潜</div>
-          </a>
-        </div>
-        <div className={styles["navbar-collapse"]}>
-          <div className={styles["navbar-content"]}>
-            <a className={styles.link} href="/">
-              首页
-            </a>
-            <a className={isCurrent("关于我们") ? styles.linkChecked : styles.link} href="/about">
-              关于我们
-            </a>
-            <a className={styles.link} href="/#service">
-              业务介绍
-            </a>
-            <a className={isCurrent("顾问介绍") ? styles.linkChecked : styles.link} href="/#consultant">
-              顾问介绍
-            </a>
-            <a className={isCurrent("经典案例") ? styles.linkChecked : styles.link} href="/caseList">
-              经典案例
-            </a>
-            <a className={isCurrent("联系我们") ? styles.linkChecked : styles.link} href="/contactUs">
-              联系我们
-            </a>
-            <a className={styles.link} href={"/user/login"}>
-              登录
-            </a>
-            <a className={styles.link} href={"/user/register"}>
-              注册
-            </a>
-          </div>
-        </div>
-      </div>
-      <div className={styles["nav-line"]} />
-    </div>
+const Nav: React.FC = () => {
+  const MediaQuery = dynamic(() => import("react-responsive"), {
+    ssr: false,
+  });
+  return (
+    <>
+      <MediaQuery maxWidth={767}>
+        <NavMobile />
+      </MediaQuery>
+      <MediaQuery minWidth={768}>
+        <NavPC />
+      </MediaQuery>
+    </>
   );
 };
 

src/components/Nav/nav.module.css

@@ -143,11 +143,34 @@
     }
 
     .hide {
+      overflow: "hidden";
+      height: 0;
+      z-index: 999;
       animation: hide-keyframes 200ms ease-in forwards;
+      .nav-sub {
+        display: none;
+      }
     }
 
     .show {
+      overflow: "hidden";
+      height: 450px;
       animation: show-keyframes 200ms ease-in forwards;
+
+      .nav-sub {
+        text-align: center;
+        height: 450px;
+        padding-top: 25px;
+        padding-bottom: 25px;
+
+        .item {
+          height: 50px;
+          font-family: "Montserrat";
+          font-style: normal;
+          font-size: 20px;
+          color: #333333;
+        }
+      }
     }
 
     @keyframes hide-keyframes {
@@ -169,20 +192,5 @@
         height: 450px;
       }
     }
-
-    .nav-sub {
-      text-align: center;
-      height: 450px;
-      padding-top: 25px;
-      padding-bottom: 25px;
-
-      .item {
-        height: 50px;
-        font-family: "Montserrat";
-        font-style: normal;
-        font-size: 20px;
-        color: #333333;
-      }
-    }
   }
 }

src/components/Nav/navMobile.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import styles from "./nav.module.css";
+
+const NavMobile: React.FC = () => {
+  const [showMenu, setShowMenu] = useState("");
+  return (
+    <>
+      <div className={styles["nav-fixed"]}>
+        <div
+          className={styles.header}
+          onClick={() => {
+            if (showMenu == "" || showMenu == "hide") {
+              setShowMenu("show");
+            } else {
+              setShowMenu("hide");
+            }
+          }}
+        >
+          <div className={styles.logo}>HIPO 高潜</div>
+          <img src="/asset/ic_menu_dark.png" className={styles.menu} />
+        </div>
+        <div className={styles["nav-line"]} />
+        <div className={showMenu === "show" ? styles.show : styles.hide}>
+          <div className={styles["nav-sub"]}>
+            <a href="/">
+              <div
+                className={styles.item}
+                onClick={() => {
+                  setShowMenu("hide");
+                }}
+              >
+                首页
+              </div>
+            </a>
+            <a href="/about">
+              <div
+                className={styles.item}
+                onClick={() => {
+                  setShowMenu("hide");
+                }}
+              >
+                关于我们
+              </div>
+            </a>
+            <a href="/#service">
+              <div
+                className={styles.item}
+                onClick={() => {
+                  setShowMenu("hide");
+                }}
+              >
+                业务介绍
+              </div>
+            </a>
+            <a href="/#consultant">
+              <div
+                className={styles.item}
+                onClick={() => {
+                  setShowMenu("hide");
+                }}
+              >
+                顾问介绍
+              </div>
+            </a>
+            <a href="/caseList">
+              <div
+                className={styles.item}
+                onClick={() => {
+                  setShowMenu("hide");
+                }}
+              >
+                经典案例
+              </div>
+            </a>
+            <a href="/contactUs">
+              <div
+                className={styles.item}
+                onClick={() => {
+                  setShowMenu("hide");
+                }}
+              >
+                联系我们
+              </div>
+            </a>
+            <a href={"https://hi-po.com.cn/user/login"}>
+              <div
+                className={styles.item}
+                onClick={() => {
+                  setShowMenu("hide");
+                }}
+              >
+                登录
+              </div>
+            </a>
+            <a href={"https://hi-po.com.cn/user/register"}>
+              <div
+                className={styles.item}
+                onClick={() => {
+                  setShowMenu("hide");
+                }}
+              >
+                注册
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default NavMobile;

src/components/Nav/navPC.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import styles from "./nav.module.css";
+
+const NavPC: React.FC = (props) => {
+  const isCurrent = (title: string) => {
+    return title == props.title;
+  };
+  return (
+    <div className={styles.nav}>
+      <div className={styles["nav-bar"]}>
+        <div className={styles["navbar-brand"]}>
+          <a href={"/"}>
+            <div className={styles.logo}>HIPO 高潜</div>
+          </a>
+        </div>
+        <div className={styles["navbar-collapse"]}>
+          <div className={styles["navbar-content"]}>
+            <a className={styles.link} href="/">
+              首页
+            </a>
+            <a className={isCurrent("关于我们") ? styles.linkChecked : styles.link} href="/about">
+              关于我们
+            </a>
+            <a className={styles.link} href="/#service">
+              业务介绍
+            </a>
+            <a className={isCurrent("顾问介绍") ? styles.linkChecked : styles.link} href="/#consultant">
+              顾问介绍
+            </a>
+            <a className={isCurrent("经典案例") ? styles.linkChecked : styles.link} href="/caseList">
+              经典案例
+            </a>
+            <a className={isCurrent("联系我们") ? styles.linkChecked : styles.link} href="/contactUs">
+              联系我们
+            </a>
+            <a className={styles.link} href={"https://hi-po.com.cn/user/login"}>
+              登录
+            </a>
+            <a className={styles.link} href={"https://hi-po.com.cn/user/register"}>
+              注册
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className={styles["nav-line"]} />
+    </div>
+  );
+};
+
+export default NavPC;