update: component(Header)

src/components/Footer.tsx

@@ -16,6 +16,7 @@ export default function Footer() {
 
   return (
     <footer className="absolute bottom-[40px] flex flex-col items-center w-full justify-center  text-center text-[12px] leading-[16.8px]">
+      <div className="w-[1200px] mx-auto">
         <p className="mt-[18px] mb-[12px] text-[rgba(0,0,0,0.4)]">
           粤ICP备2024190175号-1 深圳雀乐文化科技有限责任公司 Shenzhen QueYue Culture Technology Co., Ltd.
         </p>
@@ -27,6 +28,7 @@ export default function Footer() {
             </a>
           ))}
         </p>
+      </div>
     </footer>
   );
 }

src/components/Header/index.tsx

@@ -1,6 +1,13 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
 import Logo from '@/components/Logo';
 
 export default function Header() {
+  const pathName = usePathname();
+
   const menuList = [
     {
       name: '首页',
@@ -17,23 +24,25 @@ export default function Header() {
   ];
 
   return (
-    <header className="absolute top-0 w-full h-[80px] flex items-center">
+    <header className="absolute top-0 w-full h-[80px]">
+      <div className="w-[1200px] h-full mx-auto flex items-center justify-between">
         <Logo />
 
-      <ul className="absolute right-[377px] flex flex-row items-center">
+        <div className="h-full flex flex-row items-center">
+          <ul className="mr-[40px] flex flex-row items-center space-x-[40px]">
             {menuList.map(({ name, path }) => (
               <li
                 key={path}
-            className="px-[25px] text-[18px] leading-[25.2px] text-[rgba(0,0,0,0.4)] hover:text-[rgba(0,0,0,0.95)]"
+                className={`text-[18px] leading-[25.2px]  hover:text-[rgba(0,0,0,0.95)] ${pathName === path ? 'text-[rgba(0,0,0,0.95)]' : 'text-[rgba(0,0,0,0.4)]'}`}
               >
-            <a href={path}>{name}</a>
+                <Link href={path}>{name}</Link>
               </li>
             ))}
           </ul>
 
-      <button className="absolute right-[263px] w-[74px] h-[36px] border-[#000] border-[1.5px] rounded-[60px] text-[17px]">
-        登录
-      </button>
+          <button className="w-[74px] h-[36px] border-[#000] border-[1.5px] rounded-[60px] text-[17px]">登录</button>
+        </div>
+      </div>
     </header>
   );
 }

src/components/Logo.tsx

@@ -1,5 +1,3 @@
 export default function AppLogo() {
-  return (
-    <h1 className="absolute top-[20px] left-[264px] w-[104px] h-[40px] pl-[52px] bg-[url(/img/logo.svg)] bg-left  bg-no-repeat cursor-pointer" />
-  );
+  return <h1 className="w-[104px] h-[40px] pl-[52px] bg-[url(/img/logo.svg)] bg-left  bg-no-repeat cursor-pointer" />;
 }