修改导航栏

app/components/news/header/TopNav.tsx

@@ -1,6 +1,6 @@
 import { Search } from 'lucide-react';
 import React, { useState } from 'react';
-
+import { Button } from '@/ui/button';
 interface MenuItem {
   label: string;
   key: string;
@@ -60,45 +60,53 @@ export function TopNav({
   };
 
   return (
-    <div className="h-14 flex items-center justify-center px-8 bg-white">
+    // 将组件宽度调整为1514px，并保持居中
+    <div className="h-20 w-[1514px] mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#1f79bf]">
       {/* 搜索框与导航菜单组合 */}
-      <div className="flex items-center space-x-4">
+      <div className="flex items-center justify-start w-full gap-5">
         {/* 搜索框 */}
-        <form onSubmit={handleSearchSubmit} className="relative">
-          <div className="relative">
-            <input
-              type="text"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              placeholder="搜索..."
-              className="pl-10 pr-4 py-2 text-sm rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm"
-            />
-            <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
-              <Search className="w-5 h-5" />
-            </span>
-          </div>
-        </form>
         
-        {/* 导航菜单 */}
+        <div className="relative overflow-hidden bg-gray-100 ">
-        <ul className="flex space-x-2">
+          <Button variant="default" className="absolute rounded-none right-0 top-1/2 transform -translate-y-1/2 bg-[#1f79bf] hover:bg-[#1a68a0] text-white border-0 "
+                 onClick={handleSearchSubmit}
+                 
+                 >
+            <Search className="w-5 h-5" />
+          </Button>
+
+          <input type="text" 
+                 placeholder='请输入关键词'
+                 value={searchKeyword}
+                 onChange={(e) => setSearchKeyword(e.target.value)}
+                className="pl-5 pr-4 py-2 text-sm h-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm" />
+        </div>
+ 
+         
+          {/* 导航菜单 */}
+        <ul className="flex space-x-20 relative">
           {menuItems.map((item) => {
-            const isActive = currentActiveKey === item.key; // 判断当前项是否激活
+            const isActive = currentActiveKey === item.key;
             return (
-              <li key={item.key}>
+              <li key={item.key} className="relative">
                 <button
                   onClick={() => handleItemClick(item)}
-                  className={`px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
+                  className={`px-4 py-2 text-2xl font-extralight transition-all duration-500 relative z-10 ${
-                    isActive
+                    isActive ? 'text-white' : 'text-gray-600 hover:font-bold'
-                      ? 'bg-blue-600 text-white shadow-md' // 激活状态样式
-                      : 'text-gray-600 hover:bg-blue-100 hover:text-blue-700' // 非激活状态样式
                   }`}
                 >
-                  {item.label}
+                  {/* 激活状态背景层 */}
+                  {isActive && (
+                    <span className="absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-700 transform skew-x-12  rounded-none z-0"></span>
+                  )}
+                  <span className="relative z-20">{item.label}</span>
                 </button>
               </li>
             );
           })}
         </ul>
+
+
+
       </div>
     </div>
   );