diff --git a/app/components/AutoCarousel.tsx b/app/components/AutoCarousel.tsx index f05bd47..e1fa593 100644 --- a/app/components/AutoCarousel.tsx +++ b/app/components/AutoCarousel.tsx @@ -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(); + 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）
@@ -51,28 +57,28 @@ export function AutoCarouselDemo() { className="w-full" // 轮播容器占满父级宽度 > {/* 轮播内容区域：添加 gap-4 实现卡片间 1rem（16px）间距 */} - + {/* 遍历所有图片 URL，为每张图生成一个轮播项 */} {imageUrls.map((src, index) => ( {/* 卡片外层：添加内边距、悬停缩放动效、鼠标指针样式 */} -
+
{/* 图片容器：固定高度 h-120（即 30rem = 480px），隐藏溢出内容 */}
{/* 使用 CardContent 包裹图片，确保与 UI 系统一致 */} - {/* p-0 移除默认内边距 */} + {/* p-0 移除默认内边距 */} {/* 实际图片元素 */} {`Slide @@ -82,8 +88,6 @@ export function AutoCarouselDemo() { ))} - {/* 注：此处未渲染 CarouselPrevious / CarouselNext，说明不提供手动左右箭头 */} - {/* 如需添加，可在此处插入： */}
diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx index 870ff86..334b57c 100755 --- a/app/components/Carousel.tsx +++ b/app/components/Carousel.tsx @@ -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(); const [current, setCurrent] = React.useState(0); const [count, setCount] = React.useState(0); @@ -89,7 +87,7 @@ export function CarouselDemo({ {/* 内部包裹层：无内边距，占满 移除默认间距 自动填充容器，保持比例裁剪*/} -
+
{/* 文章列表 */} -
+
{articles.map((article, index) => (
{/* 左侧竖线和日期 */} diff --git a/app/components/news/body/ImageGridSection.tsx b/app/components/news/body/ImageGridSection.tsx index e7934ad..7c0de31 100644 --- a/app/components/news/body/ImageGridSection.tsx +++ b/app/components/news/body/ImageGridSection.tsx @@ -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 (
- {/* 页面主容器，宽度为页面的5/6，并且水平居中 */}
- {/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */}
-
- {/* 左侧图片区：占据屏幕3/5的宽度 */}
{/* 使用grid布局来安排图片的位置 */}
@@ -89,13 +99,16 @@ const LearnPage = () => {
- {/* 右侧新闻列表：占据屏幕剩余2/5的宽度 */} + {/* 右侧新闻列表：灰色边框 小阴影 内边距 + 垂直方向上相邻子元素间距 + 组的概念*/} +
    {newsList.map((item) => (
  • • - window.open(item.url, '_blank')}>{item.content} + window.open(item.url, '_blank')}>{item.content}
    • ))}
@@ -103,14 +116,17 @@ const LearnPage = () => {
{/* 底部两个特色区域，分别展示书籍信息 */} -
+
{/* 左边书籍区域 */} -
+
{/* 左边容器内的文本内容 */} -
-

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

+

+ window.open('https://www.12371.cn/2025/01/10/ARTI1736473568068938.shtml', '_blank')}> + 习近平新时代中国特色社会主义 +
思想专题数据库 +

@@ -120,23 +136,13 @@ const LearnPage = () => {
{/* 右边容器内的文本内容 */}
-

习近平著作选读

+

window.open('https://www.12371.cn/special/zzxd/', '_blank')}>习近平著作选读

- - - -
-
-
-
烽火动态
-
-
); }; diff --git a/app/components/news/body/Train.tsx b/app/components/news/body/Train.tsx new file mode 100644 index 0000000..0f5c629 --- /dev/null +++ b/app/components/news/body/Train.tsx @@ -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 ( +
+ {/* 页面主容器，宽度为页面的5/6，并且水平居中 */} +
+ {/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */} +
+
+ {/* 使用grid布局来安排图片的位置 */} +
+ {/* 上左轮播图 */} +
+ +
+ {/* 上中轮播图 */} +
+ +
+ {/* 上右侧新闻列表*/} +
+
    + {newsList.map((item) => ( +
  • + • + window.open(item.url, '_blank')}>{item.content} +
    • + ))} +
+
+ + {/* 下四图：动态渲染 */} + {gridItems.map((item, index) => ( +
+ {`Image + {/* 如果 colSpan 大于 1 并且存在 link，则显示链接 */} + {item.colSpan > 1 && item.link && ( + { + e.preventDefault(); + window.open(item.link, '_blank'); + }} + > + 了解更多 + + )} +
+ ))} +
+
+
+ + + + +
+ ); +}; + +export default Train; \ No newline at end of file diff --git a/app/routes/news.tsx b/app/routes/news.tsx index d7032a4..c630a5f 100755 --- a/app/routes/news.tsx +++ b/app/routes/news.tsx @@ -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() {
); } diff --git a/package.json b/package.json index bfd31e6..aac4a68 100755 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d8d961f..e515520 100755 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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) diff --git a/public/culture.png b/public/logo/culture.png similarity index 100% rename from public/culture.png rename to public/logo/culture.png diff --git a/public/logo/logo1.png b/public/logo/logo1.png new file mode 100644 index 0000000..5371c1a Binary files /dev/null and b/public/logo/logo1.png differ diff --git a/public/logo/logo2.png b/public/logo/logo2.png new file mode 100644 index 0000000..efa54b4 Binary files /dev/null and b/public/logo/logo2.png differ