This commit is contained in:
jinsir 2025-11-20 16:51:49 +08:00
commit d67b67ee21
1 changed files with 22 additions and 21 deletions

View File

@ -59,29 +59,11 @@ export function TopNav({
return (
// 将组件宽度调整为1514px并保持居中
<div className="h-20 w-5/6 mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#1f79bf]">
<div className="h-full w-full mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#1f79bf]">
{/* 搜索框与导航菜单组合 */}
<div className="flex items-center justify-start w-full gap-5">
{/* 搜索框 */}
<div className="relative overflow-hidden bg-gray-100 ">
<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>
<div className="flex items-center justify-start gap-35 ml-45 ">
{/* 导航菜单 */}
<ul className="flex space-x-20 relative">
<ul className="flex space-x-20 relative mr-10">
{menuItems.map((item) => {
const isActive = currentActiveKey === item.key;
return (
@ -101,6 +83,25 @@ export function TopNav({
);
})}
</ul>
{/* 搜索框 */}
<div className="relative overflow-hidden bg-gray-100 ">
<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 w-10 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>