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

11211139

This commit is contained in:
qiuchenfan 2025-11-21 11:39:58 +08:00
parent 4e377d4e8b
commit df23847507
10 changed files with 214 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/components/AutoCarousel.tsx
View File

@ -1,19 +1,15 @@
// 引入 React 核心库，用于构建组件
import * as React from "react";
// 引入 Embla Carousel 的自动播放插件，实现轮播图自动切换
// 引入 Embla Carousel 的自动播放插件
import Autoplay from "embla-carousel-autoplay";
// 引入自定义 UI 组件：Card 和 CardContent（通常用于内容容器封装）
// 引入自定义 UI 组件：Card 和 CardContent（通常用于内容容器）
import { Card, CardContent } from "@/ui/card";
// 引入自定义轮播组件及其核心子组件
// 注意：这里没有使用 CarouselNext/Previous，说明该轮播为纯自动播放、无手动导航按钮
// 引入自定义轮播组件及其子组件和类型定义
import {
Carousel,
CarouselContent,
CarouselItem,
type CarouselApi, // Embla 轮播实例的类型定义
} from "@/ui/carousel";
import * as React from "react";
// 定义轮播图中要展示的图片资源路径数组
// 包含轮播主图（carousel-*.jpg）以及额外的静态资源（如 book1.png、header.png 等）
@ -31,6 +27,16 @@ const imageUrls = [
// 导出名为 AutoCarouselDemo 的函数式组件
export function AutoCarouselDemo() {
const [api, setApi] = React.useState<CarouselApi>();
const [selectedIndex, setSelectedIndex] = React.useState(0);
const [current, setCurrent] = React.useState(0);
React.useEffect(() => {
if (!api) return;
setCurrent(api.selectedScrollSnap());
api.on("select", () => {
setCurrent(api.selectedScrollSnap());
});
}, [api]);
return (
// 外层容器：相对定位，水平居中，上下留有足够间距（mt-30 ≈ 120px, mb-20 ≈ 80px）
<div className="relative w-full mx-auto mt-30 mb-20">
@ -51,28 +57,28 @@ export function AutoCarouselDemo() {
className="w-full" // 轮播容器占满父级宽度
>
{/* 轮播内容区域：添加 gap-4 实现卡片间 1rem（16px）间距 */}
<CarouselContent className="flex gap-4">
<CarouselContent className="flex gap-16 h-full ">
{/* 遍历所有图片 URL，为每张图生成一个轮播项 */}
{imageUrls.map((src, index) => (
<CarouselItem
key={index}
// 响应式宽度控制：
// - 默认（小屏）：每个项占 1/4 宽度（basis-1/4）
// - 默认（小屏）：每个项占 1/4 宽度（basis-1/4）中屏（md）：占 1/3
// - 中屏（md）：占 1/3
// - 大屏（lg）：回到 1/4，适合展示 4 列
className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative "
>
{/* 卡片外层：添加内边距、悬停缩放动效、鼠标指针样式 */}
<div className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer">
<div className="p-1 transition-transform duration-500 cursor-pointer">
{/* 图片容器：固定高度 h-120（即 30rem = 480px），隐藏溢出内容 */}
<div className="overflow-hidden border-none h-120">
{/* 使用 CardContent 包裹图片，确保与 UI 系统一致 */}
<CardContent className="relative w-full h-full p-0"> {/* p-0 移除默认内边距 */}
<CardContent className="relative w-full h-full p-0 "> {/* p-0 移除默认内边距 */}
{/* 实际图片元素 */}
<img
src={src}
alt={`Slide ${index + 1}`} // 无障碍访问：描述当前幻灯片
className="w-full h-full object-cover" // 宽高填满容器，保持比例裁剪
className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" // 宽高填满容器，保持比例裁剪
loading="lazy" // 懒加载：提升页面初始加载性能
/>
</CardContent>
@ -82,8 +88,6 @@ export function AutoCarouselDemo() {
))}
</CarouselContent>
{/* 注：此处未渲染 CarouselPrevious / CarouselNext，说明不提供手动左右箭头 */}
{/* 如需添加，可在此处插入：<CarouselPrevious /> <CarouselNext /> */}
</Carousel>
</div>

6
app/components/Carousel.tsx
View File

@ -12,8 +12,6 @@ import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
type CarouselApi, // Embla 轮播实例的类型定义
} from "@/ui/carousel";
@ -41,7 +39,7 @@ export function CarouselDemo({
paginationPosition = 'right', // 默认右下角
paginationStyle = 'dot', // 默认圆形指示器
}: CarouselDemoProps) {
// 存储 Embla 轮播实例的引用 当前激活的幻灯片索引 总共的幻灯片数量 图片总数
// 轮播实例的引用 当前激活的幻灯片索引 总共的幻灯片数量 图片总数
const [api, setApi] = React.useState<CarouselApi>();
const [current, setCurrent] = React.useState(0);
const [count, setCount] = React.useState(0);
@ -89,7 +87,7 @@ export function CarouselDemo({
{/* 内部包裹层：无内边距，占满
移除默认间距
自动填充容器，保持比例裁剪*/}
<div className="p-0 w-full">
<div className={`p-0 w-full `}>
<CardContent className=" p-0 w-full m-0">
<div className="relative w-full aspect-video ">
<img

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

@ -2,71 +2,81 @@ import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
import React from 'react';
interface NewsItem {
id:string;
content:string;
url:string;
id: string;
content: string;
url: string;
}
// LearnPage 组件定义
const LearnPage = () => {
// 新闻列表数据，用于显示在右侧新闻列表区
const newsList:NewsItem[] = [
const newsList: NewsItem[] = [
{
id:'1',
content:'中华人民共和国监察法',
url:'https://www.baidu.com',
id: '1',
content: '中华人民共和国监察法',
url: 'https://www.baidu.com',
},
{
id:'2',
content:'2024年国办印发意见部门工作人员党听全国两...',
url:'https://www.baidu.com',
id: '2',
content: '2024年国办印发意见部门工作人员党听全国两...',
url: 'https://www.baidu.com',
},
{
id:'3',
content:'十四届全国人大二次会议闭幕贺词',
url:'https://www.baidu.com',
id: '3',
content: '十四届全国人大二次会议闭幕贺词',
url: 'https://www.baidu.com',
},
{
id:'4',
content:'7天人代会："小片段"折射民主"大全景"',
url:'https://www.baidu.com',
id: '4',
content: '7天人代会："小片段"折射民主"大全景"',
url: 'https://www.baidu.com',
},
{
id:'5',
content:'全国政协十四届二次会议共收到提案5800多件',
url:'https://www.baidu.com',
id: '5',
content: '全国政协十四届二次会议共收到提案5800多件',
url: 'https://www.baidu.com',
},
{
id:'6',
content:'两会观察丨从两会八个高频词看中国',
url:'https://www.baidu.com',
id: '6',
content: '两会观察丨从两会八个高频词看中国',
url: 'https://www.baidu.com',
},
{
id:'7',
content:'两会"清单"上新这些民生发展温度',
url:'https://www.baidu.com',
id: '7',
content: '两会"清单"上新这些民生发展温度',
url: 'https://www.baidu.com',
},
{
id:'8',
content:'"选择中国"——世界从中国两会读出心动机号',
url:'https://www.baidu.com',
id: '8',
content: '"选择中国"——世界从中国两会读出心动机号',
url: 'https://www.baidu.com',
},
{
id:'9',
content:'中国经济信心说丨新玛合信心从哪里来',
url:'https://www.baidu.com',
id: '9',
content: '中国经济信心说丨新玛合信心从哪里来',
url: 'https://www.baidu.com',
},
];
{/* 弹性 默认纵向 大屏横向 */}
const booksList: NewsItem[] = [
{
id: 'book1',
content: '习近平新时代中国特色社会主义思想专题数据库',
url: 'https://www.baidu.com',
},
{
id: 'book2',
content: '习近平著作选读',
url: 'https://www.baidu.com',
},
];
{/* 水平居中
使用背景图片方式展示logo 覆盖 只显示1 外边距
弹性 默认纵向 大屏子元素横向 */ }
return (
<div>
{/* 页面主容器，宽度为页面的5/6，并且水平居中 */}
<div className="w-5/6 mx-auto ">
{/* 顶部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">
{/* 左侧图片区：占据屏幕3/5的宽度 */}
<div className="lg:w-3/5 overflow-hidden">
{/* 使用grid布局来安排图片的位置 */}
<div className="grid grid-cols-3 grid-rows-2 w-full">
@ -89,13 +99,16 @@ const LearnPage = () => {
</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>
<span onClick={() => window.open(item.url, '_blank')}>{item.content}</span>
</li>
))}
</ul>
@ -103,14 +116,17 @@ const LearnPage = () => {
</div>
{/* 底部两个特色区域，分别展示书籍信息 */}
<div className="w-[1590px] h-[285px] flex relative mb-10">
<div className="w-[1500px] h-[285px] flex relative mb-10">
{/* 左边书籍区域 */}
<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
<div className="w-[700px] 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">
习近平新时代中国特色社会主义思想专题数据库
<div className="absolute left-[150px] top-1/2 transform -translate-y-1/2 w-[520px]">
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight cursor-pointer hover:text-blue-700 transition-colors duration-200">
<span onClick={() => window.open('https://www.12371.cn/2025/01/10/ARTI1736473568068938.shtml', '_blank')}>
习近平新时代中国特色社会主义
<br/>思想专题数据库
</span>
</p>
</div>
</div>
@ -120,23 +136,13 @@ const LearnPage = () => {
<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>
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25 cursor-pointer hover:text-blue-700 transition-colors duration-200"
onClick={() => window.open('https://www.12371.cn/special/zzxd/', '_blank')}>习近平著作选读</p>
</div>
</div>
</div>
</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>
);
};

123
app/components/news/body/Train.tsx Normal file
View File

@ -0,0 +1,123 @@
import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
import React from 'react';
interface NewsItem {
id: string;
content: string;
url: string;
}
// LearnPage 组件定义
const Train = () => {
// 新闻列表数据，用于显示在右侧新闻列表区
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',
},
];
const gridItems = [
{ src: '/logo/logo1.png', colSpan: 1, link: '' },
{ src: '/images/carousel-3.jpg', colSpan: 2, link: 'https://www.baidu.com' },
{ src: '/images/carousel-4.jpg', colSpan: 2, link: 'https://www.baidu.com' },
{ src: '/logo/logo2.png', colSpan: 1, link: '' },
{ src: '/images/carousel-5.jpg', colSpan: 2, link: 'https://www.baidu.com' },
{ src: '/images/carousel-7.jpg', colSpan: 2, link: 'https://www.baidu.com' },
];
{/* 弹性 默认纵向 大屏横向 */ }
return (
<div>
{/* 页面主容器，宽度为页面的5/6，并且水平居中 */}
<div className="w-5/6 mx-auto">
{/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */}
<div className="w-70 h-20 bg-cover bg-no-repeat mb-5 mt-20" style={{ backgroundImage: "url('images/learn.png')" }}></div>
<div className="flex flex-col lg:flex-row">
{/* 使用grid布局来安排图片的位置 */}
<div className="grid grid-cols-12 grid-rows-2 w-full h-130 ">
{/* 上左轮播图 */}
<div className="col-span-4 row-span-1 shadow-sm overflow-hidden ">
<CarouselDemo paginationPosition="right" paginationStyle="bar" />
</div>
{/* 上中轮播图 */}
<div className="col-span-4 row-span-1 shadow-sm overflow-hidden">
<CarouselDemo paginationPosition="right" paginationStyle="bar" />
</div>
{/* 上右侧新闻列表*/}
<div className="col-span-4 row-span-1 bg-white border border-gray-200 shadow-sm p-8 flex items-center">
<ul className="space-y-3 w-full">
{newsList.map((item) => (
<li key={item.id} className="flex items-center text-sm text-[#7e2f2a] hover:text-red-600 cursor-pointer group">
<span className="text-red-500 mr-2 ">•</span>
<span onClick={() => window.open(item.url, '_blank')}>{item.content}</span>
</li>
))}
</ul>
</div>
{/* 下四图：动态渲染 */}
{gridItems.map((item, index) => (
<div key={index} className={`relative shadow-sm overflow-hidden col-span-${item.colSpan} row-span-2`}>
<img
src={item.src}
alt={`Image ${index + 1}`}
className="w-full h-full object-cover"
loading="lazy"
/>
{/* 如果 colSpan 大于 1 并且存在 link，则显示链接 */}
{item.colSpan > 1 && item.link && (
<a
href={item.link}
className="absolute bottom-0 left-0 right-0 bg-white bg-opacity-75 text-center text-blue-600 underline p-2"
onClick={(e) => {
e.preventDefault();
window.open(item.link, '_blank');
}}
>
了解更多
</a>
)}
</div>
))}
</div>
</div>
</div>
</div >
);
};
export default Train;

3
app/routes/news.tsx
View File

@ -13,7 +13,7 @@ import { MicroVision } from "@/components/news/body/FireNews/MicroVision";
import { Hotline } from "@/components/news/body/FireNews/Hotline";
import { AutoCarouselDemo } from "@/components/AutoCarousel";
import Footer from "@/components/news/footer/footer";
import { CarouselDemo } from "@/components/Carousel";
import Train from "@/components/news/body/Train";
export function meta( ) {
return [
@ -43,6 +43,7 @@ export default function Home() {
<Integrated />
</div>
<Footer />
<Train />
</div>
);
}

3
package.json
View File

@ -20,6 +20,7 @@
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"dayjs": "^1.11.19",
"embla-carousel": "^8.6.0",
"embla-carousel-autoplay": "^8.6.0",
"embla-carousel-react": "^8.6.0",
"immer": "^10.2.0",
@ -27,8 +28,8 @@
"lucide-react": "^0.553.0",
"next-themes": "^0.4.6",
"react": "^19.1.1",
"react-icons": "^5.5.0",
"react-dom": "^19.1.1",
"react-icons": "^5.5.0",
"react-router": "^7.9.2",
"shadcn": "^3.5.0",
"sonner": "^2.0.7",

3
pnpm-lock.yaml
View File

@ -41,6 +41,9 @@ importers:
dayjs:
specifier: ^1.11.19
version: 1.11.19
embla-carousel:
specifier: ^8.6.0
version: 8.6.0
embla-carousel-autoplay:
specifier: ^8.6.0
version: 8.6.0(embla-carousel@8.6.0)

0
public/culture.png → public/logo/culture.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
public/logo/logo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
public/logo/logo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB