update: component(Header)

src/components/Footer.tsx

@@ -16,17 +16,19 @@ 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]">
-      <p className="mt-[18px] mb-[12px] text-[rgba(0,0,0,0.4)]">
-        粤ICP备2024190175号-1 深圳雀乐文化科技有限责任公司 Shenzhen QueYue Culture Technology Co., Ltd.
-      </p>
+      <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>
 
-      <p className="text-[rgba(0,0,0,0.7)]">
-        {agreementList.map(({ name, url }) => (
-          <a className="mx-[4px]" href={url} key={name}>
-            {name}
-          </a>
-        ))}
-      </p>
+        <p className="text-[rgba(0,0,0,0.7)]">
+          {agreementList.map(({ name, url }) => (
+            <a className="mx-[4px]" href={url} key={name}>
+              {name}
+            </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">
-      <Logo />
+    <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">
-        {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)]"
-          >
-            <a href={path}>{name}</a>
-          </li>
-        ))}
-      </ul>
+        <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={`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)]'}`}
+              >
+                <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" />;
 }