qiuchenfan
/
news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news

This commit is contained in:
jinsir 2025-11-20 15:24:53 +08:00
parent ffe555078e def56cd861
commit 2af7b182c8
8 changed files with 187 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/components/Carousel.tsx
View File

@ -87,27 +87,29 @@ export function CarouselDemo({
}),
]}
setApi={setApi} // 将 Embla 实例保存到 state 中
className="w-full h-full" // 占满容器
className="w-full" // 占满容器
>
{/* 轮播内容区域 */}
<CarouselContent className="h-full w-full -ml-0">
<CarouselContent className=" w-full -ml-0">
{/* 遍历图片数组，为每张图创建一个轮播项 */}
{imageUrls.map((src, index) => (
<CarouselItem
key={index}
className="w-full h-full pl-0" // 移除默认内边距
className="w-full pl-0" // 移除默认内边距
>
{/* 内部包裹层：无内边距，占满 */}
<div className="p-0 w-full h-full">
<div className="p-0 w-full">
{/* 使用 CardContent 包裹图片，移除默认间距 */}
<CardContent className="flex items-center justify-center p-0 w-full h-full m-0">
<CardContent className=" p-0 w-full m-0">
{/* 图片元素：自动填充容器，保持比例裁剪 */}
<img
src={src}
alt={`Slide ${index + 1}`} // 无障碍访问描述
className="w-full h-full object-fill" // 关键：使图片覆盖整个区域
loading="lazy" // 懒加载优化性能
/>
<div className="relative w-full aspect-video"> {/* 可选：设置固定宽高比 */}
<img
src={src}
alt={`Slide ${index + 1}`} // 无障碍访问描述
className="absolute inset-0 w-full h-full object-fill" // 使用 object-fill 拉伸填充
loading="lazy" // 懒加载优化性能
/>
</div>
</CardContent>
</div>
</CarouselItem>
@ -123,9 +125,8 @@ export function CarouselDemo({
{/* 分页指示器容器：绝对定位在底部 */}
<div
className={`absolute bottom-4 ${
paginationPosition === 'left' ? 'left-4' : 'right-4' // 根据 prop 控制左右位置
} flex gap-2 z-10`} // 水平排列，间距 0.5rem，置于轮播图上方
className={`absolute bottom-4 ${paginationPosition === 'left' ? 'left-4' : 'right-4' // 根据 prop 控制左右位置
} flex gap-2 z-10`} // 水平排列，间距 0.5rem，置于轮播图上方
>
{/* 动态生成指示器按钮 */}
{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}`} // 无障碍支持
/>
))}

4
app/components/news/body/FireNews/ImportantNews.tsx
View File

@ -31,7 +31,7 @@ export function ImportantNews() {
}));
return(
<div className="relative w-5/6 h-225 mx-auto overflow-hidden ">
<div className="relative w-5/6 h-220 mx-auto overflow-hidden ">
{/* 轮播背景图 - 确保有明确尺寸 */}
<div className="absolute top-0 left-0 w-full h-full">
<CarouselDemo
@ -41,7 +41,7 @@ export function ImportantNews() {
</div>
{/* 固定的烽火要闻 */}
<div className="absolute top-0 right-0 w-1/3 h-225 p-1">
<div className="absolute top-0 right-0 w-1/3 h-220 p-1">
<FireNewsList />
</div>
</div>

210
app/components/news/body/ImageGridSection.tsx
View File

@ -1,111 +1,141 @@
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 (
<div>
{/* 页面主容器，宽度为页面的5/6，并且水平居中 */}
<div className="w-5/6 mx-auto ">
{/* 顶部 Logo */}
<div className="flex justify-start mb-4">
<h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
</div>
{/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */}
<div className="w-70 h-20 bg-cover bg-no-repeat mb-5" style={{ backgroundImage: "url('images/learn.png')" }}></div>
{/* 主内容区：固定高度，紧凑布局 */}
<div className="flex flex-col lg:flex-row gap-4 h-[740px]">
{/* 左侧图片区 */}
<div className="lg:w-3/5 rounded-lg overflow-hidden">
<div className="grid grid-cols-3 grid-rows-2 gap-3 h-full w-full">
{/* 上左：第一张图 */}
<div className="row-span-1 col-span-1 rounded-lg shadow-sm overflow-hidden">
<img
src="/images/carousel-1.jpg"
alt="Image 1"
className="w-full h-full object-cover"
/>
</div>
{/* 上右：轮播图 */}
<div className="col-span-2 row-span-1 rounded-lg shadow-sm overflow-hidden">
<CarouselDemo
paginationPosition="right"
paginationStyle="bar"
/>
</div>
{/* 下三图 */}
{[3, 4, 5].map((i) => (
<div key={i} className="rounded-lg shadow-sm overflow-hidden">
<img
src={`/images/carousel-${i}.jpg`}
alt={`Image ${i}`}
className="w-full h-full object-cover"
/>
<div className="flex flex-col lg:flex-row h-[740px]">
{/* 左侧图片区：占据屏幕3/5的宽度 */}
<div className="lg:w-3/5 overflow-hidden">
{/* 使用grid布局来安排图片的位置 */}
<div className="grid grid-cols-3 grid-rows-2 h-full w-full">
{/* 上左第一张图 */}
<div className="row-span-1 col-span-1 shadow-sm overflow-hidden">
<img src="/images/carousel-1.jpg" alt="Image 1" className="w-full h-full object-cover" />
</div>
))}
{/* 上右轮播图 */}
<div className="col-span-2 row-span-1 shadow-sm overflow-hidden">
<CarouselDemo paginationPosition="right" paginationStyle="bar" />
</div>
{/* 下三图：动态渲染 */}
{[3, 4, 6].map((i) => (
<div key={i} className="shadow-sm overflow-hidden">
<img src={`/images/carousel-${i}.jpg`} alt={`Image ${i}`} className="w-full h-full object-cover" />
</div>
))}
</div>
</div>
{/* 右侧新闻列表：占据屏幕剩余2/5的宽度 */}
<div className="lg:w-2/5 bg-white border border-gray-200 shadow-sm p-8 flex items-center">
<ul className="space-y-8 w-full">
{newsList.map((item) => (
<li key={item.id} className="flex items-center text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group">
<span className="text-red-500 mr-2 mt-0.5">•</span>
<span onClick={()=>window.open(item.url, '_blank')}>{item.content}</span>
</li>
))}
</ul>
</div>
</div>
{/* 底部两个特色区域，分别展示书籍信息 */}
<div className="w-[1590px] h-[285px] flex relative mb-10">
{/* 左边书籍区域 */}
<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
<div className="w-[140px] h-[220px] absolute left-4 bottom-3 bg-cover bg-center" style={{ backgroundImage: "url('/public/images/book1.png')" }}></div>
{/* 左边容器内的文本内容 */}
<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight">
习近平新时代中国特色社会主义思想专题数据库
</p>
</div>
</div>
{/* 右侧新闻列表 */}
<div className="lg:w-2/5 bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex items-center">
<ul className="space-y-8 w-full">
{newsList.map((item, index) => (
<li
key={index}
className="flex items-center text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group"
>
<span className="text-red-500 mr-2 mt-0.5">•</span>
<span >{item}</span>
</li>
))}
</ul>
{/* 右边书籍区域 */}
<div className="w-[750px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
<div className="w-[150px] h-[240px] absolute left-5 bottom-0 bg-cover bg-center" style={{ backgroundImage: "url('/public/images/book2.png')" }}></div>
{/* 右边容器内的文本内容 */}
<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
</div>
</div>
</div>
</div>
<div className="w-[1590px] h-[285px] flex relative mb-10">
<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
<div
className="w-[169px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center"
style={{ backgroundImage: "url('/public/images/book1.png')"}}
></div>
{/* 左边容器内容 */}
<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight">
习近平新时代中国特色社会
<br />
主义思想专题数据库
</p>
</div>
</div>
<div className="w-[750px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
<div
className="w-[169px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center "
style={{ backgroundImage: "url('/public/images/book2.png')"}}
></div>
{/* 右边容器内容 */}
<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px] ">
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
</div>
</div>
</div>
</div>
<div className='flex'>
</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>
);
};

4
app/components/news/body/Integrated.tsx
View File

@ -54,7 +54,9 @@ export default function Integrated() {
{/* 装饰性蓝色竖条 */}
<div className="w-3 h-15 bg-[#005d93] mr-3" />
{/* 标题文字：深蓝色，加粗，4xl字号 */}
<h2 className="text-4xl font-bold text-[#005d93]">综合服务</h2>
<section id="service">
<h2 className="text-4xl font-bold text-[#005d93]">综合服务</h2>
</section>
</div>
{/* 服务项容器：使用flex布局排列三列，列间距45px，设置内边距 */}

49
app/components/news/header/TopNav.tsx
View File

@ -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,17 +16,17 @@ 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('');
@ -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);
};
@ -52,21 +66,21 @@ export function TopNav({
<div className="relative overflow-hidden bg-gray-100 ">
<Button variant="default" className="absolute rounded-none right-0 top-1/2 transform -translate-y-1/2 bg-[#1f79bf] hover:bg-[#1a68a0] text-white border-0 "
onClick={handleSearchSubmit}
onClick={handleSearchSubmit}
>
>
<Search className="w-5 h-5" />
</Button>
<input type="text"
placeholder='请输入关键词'
value={searchKeyword}
onChange={(e) => 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" />
placeholder='请输入关键词'
value={searchKeyword}
onChange={(e) => 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" />
</div>
{/* 导航菜单 */}
{/* 导航菜单 */}
<ul className="flex space-x-20 relative">
{menuItems.map((item) => {
const isActive = currentActiveKey === item.key;
@ -74,9 +88,8 @@ export function TopNav({
<li key={item.key} className="relative">
<button
onClick={() => handleItemClick(item)}
className={`px-4 py-2 text-2xl font-extralight transition-all duration-500 relative z-10 ${
isActive ? 'text-white' : 'text-gray-600 hover:font-bold'
}`}
className={`px-4 py-2 text-2xl transition-all duration-500 relative z-10 ${isActive ? 'text-white font-bold' : 'text-gray-600 hover:font-bold cursor-pointer'
}`}
>
{/* 激活状态背景层 */}
{isActive && (

4
app/components/news/list/NewsList.tsx
View File

@ -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">

BIN
public/images/book2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 141 KiB

BIN
public/images/learn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB