diff --git a/apps/web/components/content/navbar/page.tsx b/apps/web/components/content/navbar/page.tsx new file mode 100644 index 0000000..55b5d58 --- /dev/null +++ b/apps/web/components/content/navbar/page.tsx @@ -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(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 ( +
+ {/* 顶部导航栏区域 */} +
+ {/* 左侧搜索框区域 */} +
+ + +
+ + {/* 右侧导航菜单 */} + +
+ + {/* 主要内容区域 */} +
+ {/* 左侧内容 */} +
+

1111

+
+ + {/* 右侧烽火要闻容器 */} +
+ {/* 标题栏 */} +
+

烽火要闻

+ +
+ + {/* 文章列表 */} +
+ {articles.map((article, index) => ( +
+ {/* 左侧竖线和日期 */} +
+
+
+
{article.date.month}
+
{article.date.day}
+
+
+ {/* 右侧文章内容 */} +
+

{article.title}【MORE】

+ +
+
+ ))} + +
+
+
+ {/*
+
+
+
+
+
+
*/} +
+ ); +}; + +export default Navbar; diff --git a/apps/web/components/content/navbar/scroll.css b/apps/web/components/content/navbar/scroll.css new file mode 100644 index 0000000..cde1b4f --- /dev/null +++ b/apps/web/components/content/navbar/scroll.css @@ -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); /* 鼠标悬停时的颜色 */ +} \ No newline at end of file diff --git a/apps/web/components/content/page.tsx b/apps/web/components/content/page.tsx index 26ca906..0087274 100644 --- a/apps/web/components/content/page.tsx +++ b/apps/web/components/content/page.tsx @@ -1,14 +1,19 @@ import React from 'react'; +import Navbar from './navbar/page'; +import NewPage from './qjsx/page'; const Content: React.FC = () => { - return ( -
-
-

内容区域

-
-
- ); + return ( +
+
+ + +
+
+ ); }; -export default Content; \ No newline at end of file +export default Content; diff --git a/apps/web/components/content/qjsx/page.tsx b/apps/web/components/content/qjsx/page.tsx new file mode 100644 index 0000000..692e9b0 --- /dev/null +++ b/apps/web/components/content/qjsx/page.tsx @@ -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 ( +
+
+ {/* 标题栏 */} +
+

时政新闻

+
+ {/* 查看更多标签 */} +
+ + 【查看更多】 + +
+ {/* 新闻列表 */} +
+ {politicalNews.map((item, index) => ( +
+ {/* 左侧圆点和标题 */} +
+
+

{item.title}

+
+ {/* 右侧日期 */} + {item.date} +
+ ))} +
+
+
+ {/* 标题栏 */} +
+

强军思想

+
+ {/* 查看更多标签 */} +
+ + 【查看更多】 + +
+ {/* 新闻列表 */} +
+ {militaryNews.map((item, index) => ( +
+ {/* 左侧圆点和标题 */} +
+
+

{item.title}

+
+ {/* 右侧日期 */} + {item.date} +
+ ))} +
+
+
+ ); +}; + +export default NewPage; diff --git a/apps/web/components/footer/footer.tsx b/apps/web/components/footer/footer.tsx index a7dc1f4..2119841 100644 --- a/apps/web/components/footer/footer.tsx +++ b/apps/web/components/footer/footer.tsx @@ -3,12 +3,12 @@ import React from 'react'; const Footer: React.FC = () => { return (
{/* 主标题 */}
-

+

春风拂面花开满园心OO情愉悦

diff --git a/apps/web/components/header/header.tsx b/apps/web/components/header/header.tsx index 7c15d66..8c4b817 100644 --- a/apps/web/components/header/header.tsx +++ b/apps/web/components/header/header.tsx @@ -3,12 +3,12 @@ import React from 'react'; const Header: React.FC = () => { return (
-
-

头部内容区域

-
+ {/*
+

+
*/}
); }; diff --git a/apps/web/public/footer.png b/apps/web/public/footer.png old mode 100644 new mode 100755 index 75a8636..c926d7b Binary files a/apps/web/public/footer.png and b/apps/web/public/footer.png differ diff --git a/apps/web/public/lanmu.png b/apps/web/public/lanmu.png new file mode 100644 index 0000000..75a8636 Binary files /dev/null and b/apps/web/public/lanmu.png differ diff --git a/apps/web/public/search.png b/apps/web/public/search.png new file mode 100755 index 0000000..acb9f9d Binary files /dev/null and b/apps/web/public/search.png differ