导航栏和新闻列表
This commit is contained in:
parent
97be3889fc
commit
46c7e18e70
|
|
@ -0,0 +1,187 @@
|
|||
import { log } from 'console';
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import './scroll.css';
|
||||
|
||||
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]);
|
||||
|
||||
return (
|
||||
<div className=" w-[1514px] h-[956px] 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 h-[870px] bg-cover bg-center " style={{ backgroundImage: 'url(/lanmu.png)' }}>
|
||||
{/* 左侧内容 */}
|
||||
<div className="flex-1 p-8 text-white">
|
||||
<p>1111</p>
|
||||
</div>
|
||||
|
||||
{/* 右侧烽火要闻容器 */}
|
||||
<div className="w-[460px] h-[870px] bg-[rgba(0,0,0,0.5)] shadow-lg ml-4 mr-2 p-1">
|
||||
{/* 标题栏 */}
|
||||
<div className="flex justify-between items-center mb-6 border-b border-gray-400 ">
|
||||
<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-2 max-h-[780px] 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:underline">【MORE】</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="flex justify-center space-x-2 absolute bottom-4 left-4">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full cursor-pointer"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/* 在您的 CSS 文件中添加以下样式 */
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
width: 8px; /* 设置滚动条的宽度 */
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.5); /* 滚动条轨道的背景 */
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(224, 218, 218, 0.5); /* 滚动条的颜色 */
|
||||
border-radius: 15px; /* 滚动条的圆角 */
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(230, 226, 226, 0.7); /* 鼠标悬停时的颜色 */
|
||||
}
|
||||
|
|
@ -1,11 +1,16 @@
|
|||
import React from 'react';
|
||||
import Navbar from './navbar/page';
|
||||
import NewPage from './qjsx/page';
|
||||
|
||||
const Content: React.FC = () => {
|
||||
return (
|
||||
<div className="w-[1920px] min-h-[calc(100vh-710px-758px)] relative left-1/2 transform -translate-x-1/2 bg-center flex justify-center items-center" style={{backgroundColor:'#000000'}}
|
||||
<div
|
||||
className="w-[1920px] min-h-[calc(100vh-704px-758px)] relative left-1/2 transform -translate-x-1/2 bg-center flex justify-center items-center"
|
||||
style={{ backgroundColor: '#e0dbdb' }}
|
||||
>
|
||||
<div className="p-5">
|
||||
<p className="text-white">内容区域</p>
|
||||
<div className="w-[1514px] h-[10000px]">
|
||||
<Navbar />
|
||||
<NewPage />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
// apps/web/components/content/qjsx/page.tsx
|
||||
import React from 'react';
|
||||
|
||||
const NewPage = () => {
|
||||
const politicalNews = [
|
||||
{ title: '国务院办公厅印发《关于完善仲', date: '2018.06.21' },
|
||||
{ title: '国务院办公厅关于推进养老服务', date: '2016.11.03' },
|
||||
{ title: '《关于统筹推进自然资源资产产', date: '2018.11.27' },
|
||||
{ title: '中共中央印发《中国共产党党组工作条例》', date: '2018.01.31' },
|
||||
{ title: '国务院关于修改部分行政法规的决定', date: '2018.01.31' },
|
||||
{ title: '国务院关于落实《政府工作报告》', date: '2018.01.31' },
|
||||
{ title: '关于同意建立自然灾', date: '2018.01.31' },
|
||||
{ title: '国务院办公厅印发', date: '2018.01.31' },
|
||||
];
|
||||
|
||||
// 强军思想数据
|
||||
const militaryNews = [
|
||||
{ title: '国务院办公厅印发《关于完善仲', date: '2018.06.21' },
|
||||
{ title: '国务院办公厅关于推进养老服务', date: '2016.11.03' },
|
||||
{ title: '《关于统筹推进自然资源资产产', date: '2018.11.27' },
|
||||
{ title: '中共中央印发《中国共产党党组工作条例》', date: '2018.01.31' },
|
||||
{ title: '国务院关于修改部分行政法规的决定', date: '2018.01.31' },
|
||||
{ title: '国务院关于落实《政府工作报告》', date: '2018.01.31' },
|
||||
{ title: '关于同意建立自然灾', date: '2018.01.31' },
|
||||
{ title: '国务院办公厅印发', date: '2018.01.31' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex h-[568px] mt-15">
|
||||
<div className="w-[750px] h-[568px] bg-white mr-7 relative shadow-xl">
|
||||
{/* 标题栏 */}
|
||||
<div className="w-[228px] h-[62px] absolute top-[-30px] left-[0px]" style={{ backgroundColor: '#1c6cab' }}>
|
||||
<p className="text-white text-[38px] font-bold text-center justify-center">时政新闻</p>
|
||||
</div>
|
||||
{/* 查看更多标签 */}
|
||||
<div className="absolute right-0 mt-2 mr-2">
|
||||
<span className="text-[18px]" style={{ color: '#6c6c6a' }}>
|
||||
【查看更多】
|
||||
</span>
|
||||
</div>
|
||||
{/* 新闻列表 */}
|
||||
<div className="pt-12 px-6">
|
||||
{politicalNews.map((item, index) => (
|
||||
<div key={index} className="flex items-center justify-between py-3">
|
||||
{/* 左侧圆点和标题 */}
|
||||
<div className="flex items-center flex-1">
|
||||
<div className="w-2 h-2 bg-gray-400 rounded-full mr-3 flex-shrink-0"></div>
|
||||
<p className="text-[20px] flex-1">{item.title}</p>
|
||||
</div>
|
||||
{/* 右侧日期 */}
|
||||
<span className="text-[18px] text-gray-500 ml-4 ">{item.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[750px] h-[568px] bg-white relative shadow-xl">
|
||||
{/* 标题栏 */}
|
||||
<div className="w-[228px] h-[62px] absolute top-[-30px] left-[0px]" style={{ backgroundColor: '#1c6cab' }}>
|
||||
<p className="text-white text-[38px] font-bold text-center justify-center">强军思想</p>
|
||||
</div>
|
||||
{/* 查看更多标签 */}
|
||||
<div className="absolute right-0 mt-2 mr-2">
|
||||
<span className="text-[18px]" style={{ color: '#6c6c6a' }}>
|
||||
【查看更多】
|
||||
</span>
|
||||
</div>
|
||||
{/* 新闻列表 */}
|
||||
<div className="pt-12 px-6">
|
||||
{militaryNews.map((item, index) => (
|
||||
<div key={index} className="flex items-center justify-between py-3">
|
||||
{/* 左侧圆点和标题 */}
|
||||
<div className="flex items-center flex-1">
|
||||
<div className="w-2 h-2 bg-gray-400 rounded-full mr-3 flex-shrink-0"></div>
|
||||
<p className="text-[20px] flex-1">{item.title}</p>
|
||||
</div>
|
||||
{/* 右侧日期 */}
|
||||
<span className="text-[18px] text-gray-500 ml-4">{item.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewPage;
|
||||
|
|
@ -3,12 +3,12 @@ import React from 'react';
|
|||
const Footer: React.FC = () => {
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center relative bottom-0 left-1/2 transform -translate-x-1/2 w-[1920px] h-[758px] bg-cover bg-center"
|
||||
className="flex flex-col items-center justify-center relative bottom-0 overflow-y-auto overflow-x-auto left-1/2 transform -translate-x-1/2 w-[1920px] h-[758px] bg-cover bg-center"
|
||||
style={{ backgroundImage: `url('/footer.png')` }}
|
||||
>
|
||||
{/* 主标题 */}
|
||||
<div className="mb-8 mt-15">
|
||||
<p className=" tracking-widest" style={{ fontSize: '32px' }}>
|
||||
<p className=" tracking-widest" style={{ fontSize: '32px',color:'#ffffff' }} >
|
||||
春风拂面花开满园心OO情愉悦
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import React from 'react';
|
|||
const Header: React.FC = () => {
|
||||
return (
|
||||
<div
|
||||
className="relative left-1/2 transform -translate-x-1/2 w-[1920px] min-h-[710px] bg-cover bg-center "
|
||||
className="relative left-1/2 transform -translate-x-1/2 w-[1920px] min-h-[704px] bg-cover bg-center "
|
||||
style={{ backgroundImage: `url('/header.png')` }}
|
||||
>
|
||||
<div className="p-5">
|
||||
<p className="text-white">头部内容区域</p>
|
||||
</div>
|
||||
{/* <div className="p-5">
|
||||
<p className="text-white"></p>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 471 KiB After Width: | Height: | Size: 365 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 471 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in New Issue