update sytles

.gitignore

@@ -29,6 +29,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 yarn.lock
+package-lock.json
+pnpm-lock.yaml
 
 # env files (can opt-in for committing if needed)
 .env*

package.json

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

src/app/(home)/components/Consultant/consultant.module.css

@@ -102,6 +102,7 @@
         margin-left: 16px;
         color: grey;
         font-size: 28px;
+        cursor: pointer;
       }
 
       .swiper-wrapper {

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

@@ -10,13 +10,21 @@ import { GoChevronLeft, GoChevronRight } from "react-icons/go";
 import { fetchConsultants } from "@/lib/cms";
 
 const Consultant: React.FC = () => {
+  const [swiperRef, setSwiperRef] = useState(null);
   const [consulantList, setConsulantList] = useState(null);
   useEffect(() => {
     fetchConsultants().then(({ data: list }) => {
       setConsulantList(list);
     });
   }, []);
-  const [swiper, setSwiper] = useState<Swiper>();
+
+  const slideToNext = () => {
+    swiperRef.slideNext();
+  };
+
+  const slideToPrev = () => {
+    swiperRef.slidePrev();
+  };
 
   return (
     <div className={styles.consultant}>
@@ -25,12 +33,7 @@ const Consultant: React.FC = () => {
           <div className={styles.content1}>高潜顾问</div>
         </div>
         <div className={styles["consultant-details"]}>
-          <span
-            className={styles["content-nav"]}
-            onClick={() => {
-              swiper?.slidePrev();
-            }}
-          >
+          <span className={styles["content-nav"]} onClick={() => slideToPrev()}>
             <GoChevronLeft />
           </span>
           <div className={styles["swiper-wrapper"]}>
@@ -39,10 +42,7 @@ const Consultant: React.FC = () => {
               initialSlide={0}
               loop={true}
               slidesPerView={isMobile ? 1 : 4}
-              onSlideChange={() => console.log("slide change")}
-              onSwiper={(swiper) => {
-                setSwiper(swiper);
-              }}
+              onSwiper={setSwiperRef}
             >
               {consulantList?.records?.map((item, index) => {
                 return (
@@ -62,12 +62,7 @@ const Consultant: React.FC = () => {
               })}
             </Swiper>
           </div>
-          <span
-            className={styles["content-nav"]}
-            onClick={() => {
-              swiper?.slideNext();
-            }}
-          >
+          <span className={styles["content-nav"]} onClick={() => slideToNext()}>
             <GoChevronRight />
           </span>
         </div>

src/app/(home)/components/Customer/customer.module.css

@@ -107,7 +107,7 @@
         cursor: pointer;
       }
 
-      .content-nav-right {
+      .content-nav-next {
         width: 40px;
         height: 40px;
         font-size: 30px;
@@ -369,7 +369,7 @@
           margin-right: 0;
         }
 
-        .content-nav-right {
+        .content-nav-next {
           width: 0;
           height: 0;
           font-size: 0;

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

@@ -5,16 +5,24 @@ import Image from "next/image";
 import { isMobile } from "react-device-detect";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
-// import "swiper/css/navigation";
+import "swiper/css/navigation";
 import { Navigation } from "swiper/modules";
 import { GoChevronLeft, GoChevronRight } from "react-icons/go";
 import styles from "./customer.module.css";
 import { fetchCustomers } from "@/lib/cms";
 
 export default function Services() {
-  const [swiper, setSwiper] = useState();
+  const [swiperRef, setSwiperRef] = useState(null);
   const [customerList, setCustomerList] = useState(null);
 
+  const slideToNext = () => {
+    swiperRef.slideNext();
+  };
+
+  const slideToPrev = () => {
+    swiperRef.slidePrev();
+  };
+
   useEffect(() => {
     fetchCustomers().then(({ data: list }) => {
       setCustomerList(list);
@@ -29,25 +37,18 @@ export default function Services() {
           <div className={styles.content2}>10余年来，高潜服务并长期陪伴了多家大型集团及中小型企业，他们如是说...</div>
         </div>
         <div className={styles["main-details"]}>
-          {/* <span
-            className={styles["turn-left"]}
-            onClick={() => {
-              console.log("prev");
-              swiper?.slidePrev();
-            }}
-          >
+          <span className={styles["content-nav-left1"]} onClick={() => slideToPrev()}>
             <GoChevronLeft />
-          </span> */}
+          </span>
           <div className={styles["swiper-wrapper"]}>
             <Swiper
               spaceBetween={30}
               initialSlide={0}
               loop={true}
+              parallax={true}
               slidesPerGroup={isMobile ? 1 : 2}
               slidesPerView={isMobile ? 1 : 2}
-              onSwiper={(swiper) => {
-                setSwiper(swiper);
-              }}
+              onSwiper={setSwiperRef}
             >
               {customerList?.records?.map((item, index) => {
                 return (
@@ -71,14 +72,9 @@ export default function Services() {
               })}
             </Swiper>
           </div>
-          <span
-            className={styles["content-nav-right"]}
-            onClick={() => {
-              swiper?.slideNext();
-            }}
-          >
+          <div className={styles["content-nav-next"]} onClick={() => slideToNext()}>
             <GoChevronRight />
-          </span>
+          </div>
         </div>
       </div>
     </div>

src/app/(home)/components/Customer/styles.css

@@ -0,0 +1,17 @@
+.swiper-button-next {
+  --swiper-navigation-size: 20px;
+  --swiper-navigation-top-offset: 50%;
+  --swiper-navigation-sides-offset: 0px;
+  --swiper-navigation-color: red;
+  z-index: 1000;
+}
+
+.content-nav-left1 {
+  width: 40px;
+  height: 40px;
+  font-size: 30px;
+  margin-left: 16px;
+  margin-right: 16px;
+  color: grey;
+  cursor: pointer;
+}

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

@@ -1,8 +1,7 @@
 "use client";
 import React, { useRef, useState, useEffect } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
-import SwiperCore, { Controller, EffectCoverflow, Navigation } from "swiper";
-SwiperCore.use([EffectCoverflow]);
+import { Controller, EffectCoverflow, Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/effect-coverflow";
 import { LeftOutlined, RightOutlined } from "@ant-design/icons";
@@ -14,7 +13,6 @@ export default function Show() {
   const [videoUrlList, setVideoUrlList] = useState(null);
   useEffect(() => {
     fetchVideos().then(({ data: list }) => {
-      console.log(list);
       setCurrentIndex(list.total - 1);
       setVideoUrlList(list);
     });
@@ -64,6 +62,7 @@ export default function Show() {
               initialSlide={1}
               slidesPerView={1.5}
               centeredSlides={true}
+              modules={[EffectCoverflow]}
               onSlideChange={(swiper) => {
                 setCurrentIndex(swiper.realIndex);
                 pauseOtherVideos();

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

@@ -14,7 +14,7 @@
     gap: 50px;
     align-items: center;
     width: 1050px;
-    height: 400px;
+    height: 680px;
     margin: 0 auto;
     padding: 80px 0;
 

src/app/(home)/page.tsx

@@ -11,25 +11,17 @@ export default function Home() {
   return (
     <>
       <div className={styles.main}>
+        <a id="home" />
         <Nav />
+        <a id="service" />
         <Services />
         <Customer />
+        <a id="consultant" />
         <Consultant />
         <Contact />
         <Show />
-        {/* <a id="home" />
-
-        <Services />
-        <Customer />
-        <Consultant />
-        <Contact />
-        <Show />
-        <Footer /> */}
         <Footer />
       </div>
     </>
-    // <div className={styles.page}>
-
-    // </div>
   );
 }

src/app/about/page.tsx

@@ -31,9 +31,7 @@ const AboutDetail: React.FC = () => {
                 <div className={styles.text}>是中国优秀咨询公司的杰出代表，拥有全球视野、本土实践。</div>
               </div>
             </div>
-            <div className={styles.topContentRight}>
-              <Image alt="right" width={512} height={348} src={about} />
-            </div>
+            <Image alt="right" width={512} height={348} className={styles.topContentRight} src={about} />
           </div>
           <div className={styles.bottomContent}>
             <div className={styles.item}>

src/components/Footer/index.tsx

@@ -17,7 +17,7 @@ const Footer: React.FC = () => {
                   </a>
                 </div>
                 <div>
-                  <a className={styles.link2} href="/contact">
+                  <a className={styles.link2} href="/contactUs">
                     联系我们
                   </a>
                 </div>
@@ -54,6 +54,7 @@ const Footer: React.FC = () => {
                     alt="qrcode"
                     width={100}
                     height={100}
+                    priority={true}
                     className={styles.img}
                     src={"https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/qrcode2.jpg"}
                   ></Image>
@@ -61,6 +62,7 @@ const Footer: React.FC = () => {
                     alt="qrcode"
                     width={100}
                     height={100}
+                    priority={false}
                     className={styles.img}
                     src={"https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/qrcode.jpg"}
                   ></Image>

src/components/Header/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-// import {scroller} from "react-scroll";
+import Link from "next/link";
 import Image from "next/image";
 import styles from "./header.module.css";
 
@@ -12,41 +12,35 @@ const Header: React.FC = () => {
         </div>
         <div className={styles["navbar-collapse"]}>
           <div className={styles["navbar-content"]}>
-            <a className={styles.link}>首页</a>
-            <a className={styles.link} href="/about">
+            <Link className={styles.link} href="#" scroll={true}>
+              首页
+            </Link>
+            <Link className={styles.link} href="/about" scroll={true}>
               关于我们
-            </a>
-            {/* <a className={styles.link} onClick={() => {
-              scroller.scrollTo("service", {
-                smooth: false,
-              });
-            }}>
+            </Link>
+            <Link className={styles.link} href="#service" scroll={true}>
               业务介绍
-            </a>
-            <a className={styles.link} onClick={() => {
-              scroller.scrollTo("consultant", {
-                smooth: false,
-              });
-            }}>
+            </Link>
+            <Link className={styles.link} href="#consultant" scroll={true}>
               顾问介绍
-            </a> */}
-            <a className={styles.link} href="/caseList">
+            </Link>
+            <Link className={styles.link} href="/caseList" scroll={true}>
               经典案例
-            </a>
-            <a className={styles.link} href="/contact">
+            </Link>
+            <Link className={styles.link} href="/contact" scroll={true}>
               联系我们
-            </a>
+            </Link>
           </div>
-          {/* <div className={styles["navbar-login"]}>
-            <a className={styles.link} href={"/user/login"}>
+          <div className={styles["navbar-login"]}>
+            <Link className={styles.link} href={"https://hi-po.com.cn/user/login"}>
               登录
-            </a>
+            </Link>
           </div>
           <div className={styles["navbar-register"]}>
-            <a className={styles.link} href={"/user/register"}>
+            <Link className={styles.link} href={"https://hi-po.com.cn/user/register"}>
               注册
-            </a>
-          </div> */}
+            </Link>
+          </div>
         </div>
       </div>
       <div className={styles["nav-container"]}>

src/components/Nav/index.tsx

@@ -23,7 +23,7 @@ const Nav: React.FC = (props) => {
         }}
       >
         <div className={styles.logo}>HIPO 高潜</div>
-        <img src="/asset/ic_menu.png" className={styles.menu} />
+        <img src="/asset/ic_menu_dark.png" className={styles.menu} />
       </div>
       <div className={styles["nav-line"]} />
       <div className={showMenu} style={{ overflow: "hidden", height: 0 }}>