导航栏点击跳转,List去除圆滑边宽

This commit is contained in:
Li1304553726 2025-11-20 11:22:56 +08:00
parent 496b7fc8d7
commit 62a361076e
4 changed files with 28 additions and 10 deletions

View File

@ -100,12 +100,14 @@ const LearnPage = () => {
</div>
</div>
</div>
<section id="fireNews">
<div className='flex'>
<div className='w-4/5 bg-[#0082e9] h-20'
style={{clipPath: 'polygon(0 0, calc(100% - 150px) 0%, calc(100% - 20px) 100%, 0% 100%)'}}
></div>
<div className='items-center justify-center flex font-bold text-sky-900 text-5xl'></div>
</div>
</section>
</div>
);
};

View File

@ -54,7 +54,9 @@ export default function Integrated() {
{/* 装饰性蓝色竖条 */}
<div className="w-3 h-15 bg-[#005d93] mr-3" />
{/* 标题文字深蓝色加粗4xl字号 */}
<section id="service">
<h2 className="text-4xl font-bold text-[#005d93]"></h2>
</section>
</div>
{/* 服务项容器使用flex布局排列三列列间距45px设置内边距 */}

View File

@ -4,6 +4,7 @@ import { Button } from '@/ui/button';
interface MenuItem {
label: string;
key: string;
sectionId:string;
}
interface TopNavProps {
@ -15,12 +16,12 @@ interface TopNavProps {
export function TopNav({
menuItems = [
{ label: '首页', key: 'home' },
{ label: '烽火动态', key: 'news' },
{ label: '烽火铸魂', key: 'soul' },
{ label: '烽火训练', key: 'training' },
{ label: '联系热线', key: 'hotline' },
{ label: '综合服务', key: 'service' },
{ label: '首页', key: 'home', sectionId:'home' },
{ label: '烽火动态', key: 'news', sectionId:'fireNews' },
{ label: '烽火铸魂', key: 'soul', sectionId:'soul' },
{ label: '烽火训练', key: 'training', sectionId:'training' },
{ label: '联系热线', key: 'hotline', sectionId:'hotline' },
{ label: '综合服务', key: 'service', sectionId:'service' },
],
activeKey: externalActiveKey,
onSearch,
@ -34,12 +35,25 @@ export function TopNav({
const handleSearchSubmit = (e: React.FormEvent) => {
e.preventDefault();
onSearch?.(searchKeyword);
};
const handleItemClick = (item: MenuItem) => {
if (externalActiveKey === undefined) {
setInternalActiveKey(item.key);
}
// 如果有对应的 sectionId则滚动到该区域
if (item.sectionId) {
const element = document.getElementById(item.sectionId);
if (element) {
element.scrollIntoView({
behavior: 'smooth', // 平滑滚动
block: 'start' // 滚动到顶部对齐
});
}
}
onItemClick?.(item.key);
};

View File

@ -32,7 +32,7 @@ const NewsList: React.FC = () => {
{/* 使用 Flexbox 将两个列表放在一行 */}
<div className="flex gap-8">
{/* 科技新闻 */}
<div className="flex-1 bg-white rounded-lg shadow-md">
<div className="flex-1 bg-white shadow-md">
{/* 标题栏:独立于列表之外 */}
<div className="flex items-center justify-between mb-6">
<div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">
@ -57,7 +57,7 @@ const NewsList: React.FC = () => {
</div>
{/* 教育新闻 */}
<div className="flex-1 bg-white rounded-lg shadow-md">
<div className="flex-1 bg-white shadow-md">
{/* 标题栏:独立于列表之外 */}
<div className="flex items-center justify-between mb-6">
<div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">