导航栏点击跳转,List去除圆滑边宽
This commit is contained in:
parent
496b7fc8d7
commit
62a361076e
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,设置内边距 */}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue