200 lines
6.9 KiB
TypeScript
200 lines
6.9 KiB
TypeScript
import { log } from 'console';
|
||
import React, { useState, useRef, useEffect } from 'react';
|
||
import './scroll.css';
|
||
import JtCarousel from '../jcdt/fhjt/jtCarousel';
|
||
|
||
const Navbar: React.FC = () => {
|
||
const [activeIndex, setActiveIndex] = useState(1); // 当前选中的导航项索引
|
||
const [parallelogramStyle, setParallelogramStyle] = useState({ left: 0, width: 0 });
|
||
const navRef = useRef<HTMLElement>(null);
|
||
const list = ['首页', '烽火动态', '烽火铸魂', '练兵备战', '兵情热线', '综合服务'];
|
||
|
||
// 文章数据
|
||
const articles = [
|
||
{
|
||
date: { month: '11', day: '2025-02' },
|
||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||
isHighlighted: false,
|
||
},
|
||
{
|
||
date: { month: '11', day: '2025-02' },
|
||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||
isHighlighted: false,
|
||
},
|
||
{
|
||
date: { month: '11', day: '2025-02' },
|
||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||
isHighlighted: false,
|
||
},
|
||
{
|
||
date: { month: '11', day: '2025-02' },
|
||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||
isHighlighted: true,
|
||
},
|
||
{
|
||
date: { month: '11', day: '2025-02' },
|
||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||
isHighlighted: true,
|
||
},
|
||
{
|
||
date: { month: '11', day: '2025-02' },
|
||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||
isHighlighted: false,
|
||
},
|
||
{
|
||
date: { month: '11', day: '2025-02' },
|
||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||
isHighlighted: true,
|
||
},
|
||
{
|
||
date: { month: '11', day: '2025-02' },
|
||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||
isHighlighted: false,
|
||
},
|
||
{
|
||
date: { month: '11', day: '2025-02' },
|
||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||
isHighlighted: false,
|
||
},
|
||
{
|
||
date: { month: '11', day: '2025-02' },
|
||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||
isHighlighted: false,
|
||
},
|
||
];
|
||
|
||
const handleNavClick = (index: number) => {
|
||
setActiveIndex(index + 1); // 更新当前选中的索引
|
||
};
|
||
|
||
// 计算平行四边形的位置和宽度
|
||
useEffect(() => {
|
||
if (navRef.current) {
|
||
const navItems = navRef.current.children;
|
||
if (navItems[activeIndex]) {
|
||
const activeItem = navItems[activeIndex] as HTMLElement;
|
||
const navRect = navRef.current.getBoundingClientRect();
|
||
const itemRect = activeItem.getBoundingClientRect();
|
||
|
||
setParallelogramStyle({
|
||
left: itemRect.left - navRect.left,
|
||
width: itemRect.width,
|
||
});
|
||
}
|
||
}
|
||
}, [activeIndex]);
|
||
|
||
const carouselData = [
|
||
{
|
||
id: 1,
|
||
image: '/header.png',
|
||
title: '军事风云第一期',
|
||
},
|
||
{
|
||
id: 2,
|
||
image: '/header.png',
|
||
title: '军事风云第二期',
|
||
},
|
||
{
|
||
id: 3,
|
||
image: '/lanmu.png',
|
||
title: '军事风云第三期',
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className=" w-[1514px] h-[960px] relative " style={{ backgroundColor: '#1f79bf' }}>
|
||
{/* 顶部导航栏区域 */}
|
||
<div className="h-[80px] bg-white flex items-center px-6 relative overflow-hidden border-t-16 border-b-16 border-[#1f79bf]">
|
||
{/* 左侧搜索框区域 */}
|
||
<div className="flex items-center mr-3 ml-5">
|
||
<input
|
||
type="text"
|
||
placeholder="请输入关键字"
|
||
className="w-[200px] h-[40px] px-4 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
<button className="w-[55px] h-[40px]">
|
||
<img src="/search.png" alt="搜索" className="w-full h-full" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* 右侧导航菜单 */}
|
||
<nav ref={navRef} className="flex items-center relative ">
|
||
{/* 平行四边形背景 */}
|
||
<div
|
||
className="absolute top-0 h-full bg-gradient-to-b from-[#053E69] to-[#257BB6] z-0"
|
||
style={{
|
||
left: `${parallelogramStyle.left}px`,
|
||
width: `${parallelogramStyle.width}px`,
|
||
clipPath: 'polygon(0% 0%, 85% 0%, 100% 100%, 15% 100%)',
|
||
transition: 'left 0.3s ease, width 0.3s ease',
|
||
}}
|
||
/>
|
||
|
||
{list.map((item, index) => (
|
||
<a
|
||
key={index}
|
||
href="#"
|
||
className={`mr-15 ml-1 px-4 py-2 hover:font-bold transition-colors text-2xl relative z-10 ${
|
||
activeIndex === index + 1 ? 'font-bold text-white' : 'text-black'
|
||
}`}
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
handleNavClick(index);
|
||
}}
|
||
>
|
||
{item}
|
||
</a>
|
||
))}
|
||
</nav>
|
||
</div>
|
||
|
||
{/* 主要内容区域 */}
|
||
<div className="flex bg-cover bg-center relative ">
|
||
<JtCarousel carouselData={carouselData} />
|
||
</div>
|
||
|
||
{/* 右侧烽火要闻容器 */}
|
||
<div className="w-[460px] h-[872px] bg-[rgba(0,0,0,0.5)] shadow-lg ml-4 mr-2 p-1 absolute right-0 top-20">
|
||
{/* 标题栏 */}
|
||
<div className="flex justify-between items-center mb-6 border-b-3 border-white">
|
||
<h2 className="text-white text-3xl font-extrabold ml-6 mt-2 mb-2">烽火要闻</h2>
|
||
<button className="">
|
||
<a href="#" className="text-white text-sm flex items-center mt-2 hover:text-blue-500">
|
||
查看更多
|
||
<span className="ml-1 w-0 h-0 border-l-6 border-l-red-500 border-t-6 border-t-transparent border-r-6 border-r-transparent border-b-6 border-b-transparent"></span>
|
||
</a>
|
||
</button>
|
||
</div>
|
||
|
||
{/* 文章列表 */}
|
||
<div className="space-y-1 h-[750px] overflow-hidden hover:overflow-auto scroll-container">
|
||
{articles.map((article, index) => (
|
||
<div key={index} className="flex items-center space-x-3 pb-4">
|
||
{/* 左侧竖线和日期 */}
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-[0.7px] h-13 bg-white ml-3"></div>
|
||
<div className="text-center">
|
||
<div className="text-white text-3xl font-bold">{article.date.month}</div>
|
||
<div className="text-gray-300 text-sm">{article.date.day}</div>
|
||
</div>
|
||
</div>
|
||
{/* 右侧文章内容 */}
|
||
<div className="flex-1">
|
||
<p className="text-[13px] text-white ">
|
||
{article.title}
|
||
<a href="#" className="text-red-600 text-sm hover:font-bold">
|
||
【MORE】
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Navbar;
|