diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx index da0724e..ebc7ad1 100755 --- a/app/components/Carousel.tsx +++ b/app/components/Carousel.tsx @@ -31,7 +31,7 @@ const imageUrls = [ export interface CarouselDemoProps { // 分页指示器位置：'left' 表示左下角，'right' 表示右下角，默认为 'right' paginationPosition?: 'left' | 'right'; - + // 分页指示器样式：'dot' 为圆形小点，'bar' 为横向小条，默认为 'dot' paginationStyle?: 'dot' | 'bar'; } @@ -73,7 +73,7 @@ export function CarouselDemo({ return ( // 外层容器：相对定位，占满父容器宽高
- + {/* 轮播主容器 */} {/* 轮播内容区域 */} - + {/* 遍历图片数组，为每张图创建一个轮播项 */} {imageUrls.map((src, index) => ( {/* 内部包裹层：无内边距，占满 */} -
+
{/* 使用 CardContent 包裹图片，移除默认间距 */} - + {/* 图片元素：自动填充容器，保持比例裁剪 */} - {`Slide +
{/* 可选：设置固定宽高比 */} + {`Slide +
@@ -123,9 +125,8 @@ export function CarouselDemo({ {/* 分页指示器容器：绝对定位在底部 */}
{/* 动态生成指示器按钮 */} {Array.from({ length: count }).map((_, index) => ( @@ -136,12 +137,11 @@ export function CarouselDemo({ // 根据 paginationStyle 决定形状 paginationStyle === 'dot' ? 'h-2 w-2 rounded-full' // 圆形：宽高相等 + 全圆角 - : 'h-2 w-8 rounded' // 块状：宽 2rem，高 0.5rem，带圆角 - } ${ - index === current + : 'h-1 w-6 rounded' // 块状 + } ${index === current ? 'bg-white' // 当前项为纯白色 : 'bg-white/50' // 非当前项为半透明白色 - }`} + }`} aria-label={`Go to slide ${index + 1}`} // 无障碍支持 /> ))} diff --git a/app/components/news/body/FireNews/ImportantNews.tsx b/app/components/news/body/FireNews/ImportantNews.tsx index b4a68a2..fec4d77 100644 --- a/app/components/news/body/FireNews/ImportantNews.tsx +++ b/app/components/news/body/FireNews/ImportantNews.tsx @@ -31,7 +31,7 @@ export function ImportantNews() { })); return( -
+
{/* 轮播背景图 - 确保有明确尺寸 */}
{/* 固定的烽火要闻 */} -
+
diff --git a/app/components/news/body/ImageGridSection.tsx b/app/components/news/body/ImageGridSection.tsx index bdb5ff5..1194639 100644 --- a/app/components/news/body/ImageGridSection.tsx +++ b/app/components/news/body/ImageGridSection.tsx @@ -1,113 +1,143 @@ -import { CarouselDemo } from '@/components/Carousel'; +import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件 import React from 'react'; -const LearnPage = () => { - const newsList = [ - '中华人民共和国监察法', - '2024年国办印发意见部门工作人员党听全国两...', - '十四届全国人大二次会议闭幕贺词', - '7天人代会："小片段"折射民主"大全景"', - '全国政协十四届二次会议共收到提案5800多件', - '两会观察丨从两会八个高频词看中国', - '两会"清单"上新这些民生发展温度', - '"选择中国"——世界从中国两会读出心动机号', - '中国经济信心说丨新玛合信心从哪里来', - ]; +interface NewsItem { + id:string; + content:string; + url:string; +} +// LearnPage 组件定义 +const LearnPage = () => { + // 新闻列表数据，用于显示在右侧新闻列表区 + const newsList:NewsItem[] = [ + { + id:'1', + content:'中华人民共和国监察法', + url:'https://www.baidu.com', + }, + { + id:'2', + content:'2024年国办印发意见部门工作人员党听全国两...', + url:'https://www.baidu.com', + }, + { + id:'3', + content:'十四届全国人大二次会议闭幕贺词', + url:'https://www.baidu.com', + }, + { + id:'4', + content:'7天人代会："小片段"折射民主"大全景"', + url:'https://www.baidu.com', + }, + { + id:'5', + content:'全国政协十四届二次会议共收到提案5800多件', + url:'https://www.baidu.com', + }, + { + id:'6', + content:'两会观察丨从两会八个高频词看中国', + url:'https://www.baidu.com', + }, + { + id:'7', + content:'两会"清单"上新这些民生发展温度', + url:'https://www.baidu.com', + }, + { + id:'8', + content:'"选择中国"——世界从中国两会读出心动机号', + url:'https://www.baidu.com', + }, + { + id:'9', + content:'中国经济信心说丨新玛合信心从哪里来', + url:'https://www.baidu.com', + }, + ]; + {/* 弹性 默认纵向 大屏横向 */} return (
+ {/* 页面主容器，宽度为页面的5/6，并且水平居中 */}
- {/* 顶部 Logo */} -
-

学习进行时

-
- - {/* 主内容区：固定高度，紧凑布局 */} -
- {/* 左侧图片区 */} -
-
- {/* 上左：第一张图 */} -
- Image 1 -
- - {/* 上右：轮播图 */} -
- -
- - {/* 下三图 */} - {[3, 4, 5].map((i) => ( -
- {`Image + {/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */} +
+ +
+ {/* 左侧图片区：占据屏幕3/5的宽度 */} +
+ {/* 使用grid布局来安排图片的位置 */} +
+ {/* 上左第一张图 */} +
+ Image 1
- ))} + + {/* 上右轮播图 */} +
+ +
+ + {/* 下三图：动态渲染 */} + {[3, 4, 6].map((i) => ( +
+ {`Image +
+ ))} +
+
+ + {/* 右侧新闻列表：占据屏幕剩余2/5的宽度 */} +
+
    + {newsList.map((item) => ( +
  • + • + window.open(item.url, '_blank')}>{item.content} +
    • + ))} +
- - {/* 右侧新闻列表 */} -
-
    - {newsList.map((item, index) => ( -
  • - • - {item} -
    • - ))} -
+ {/* 底部两个特色区域，分别展示书籍信息 */} +
+ {/* 左边书籍区域 */} +
+
+ {/* 左边容器内的文本内容 */} +
+

+ 习近平新时代中国特色社会主义思想专题数据库 +

+
+
+ + {/* 右边书籍区域 */} +
+
+ {/* 右边容器内的文本内容 */} +
+

习近平著作选读

+
+
-
-
-
-
- {/* 左边容器内容 */} -
-

- 习近平新时代中国特色社会 -
- 主义思想专题数据库 -

-
-
-
-
- {/* 右边容器内容 */} -
-

习近平著作选读

-
-
-
-
-
+
+ + + +
+
烽火动态
+
); }; -export default LearnPage; \ No newline at end of file +export default LearnPage; \ No newline at end of file diff --git a/app/components/news/body/Integrated.tsx b/app/components/news/body/Integrated.tsx index 1d292ca..80feb58 100644 --- a/app/components/news/body/Integrated.tsx +++ b/app/components/news/body/Integrated.tsx @@ -54,7 +54,9 @@ export default function Integrated() { {/* 装饰性蓝色竖条 */}
{/* 标题文字：深蓝色，加粗，4xl字号 */} -

综合服务

+
+

综合服务

+
{/* 服务项容器：使用flex布局排列三列，列间距45px，设置内边距 */} diff --git a/app/components/news/header/TopNav.tsx b/app/components/news/header/TopNav.tsx index d9791e5..38d95fe 100644 --- a/app/components/news/header/TopNav.tsx +++ b/app/components/news/header/TopNav.tsx @@ -1,9 +1,10 @@ import { Search } from 'lucide-react'; -import React, { useState,useEffect} from 'react'; +import React, { useState, useEffect } from 'react'; import { Button } from '@/ui/button'; interface MenuItem { label: string; key: string; + sectionId:string; } interface TopNavProps { @@ -15,31 +16,44 @@ 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, onItemClick, -}: TopNavProps){ +}: TopNavProps) { const [internalActiveKey, setInternalActiveKey] = useState('home'); const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey; const [searchKeyword, setSearchKeyword] = useState(''); - + 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); }; @@ -49,24 +63,24 @@ export function TopNav({ {/* 搜索框与导航菜单组合 */}
{/* 搜索框 */} - +
- setSearchKeyword(e.target.value)} - className="pl-5 pr-4 py-2 text-sm h-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm" /> + setSearchKeyword(e.target.value)} + className="pl-5 pr-4 py-2 text-sm h-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm" />
- - - {/* 导航菜单 */} + + + {/* 导航菜单 */}
    {menuItems.map((item) => { const isActive = currentActiveKey === item.key; @@ -74,9 +88,8 @@ export function TopNav({