+
-
- {Array.from({ length: totalSlides }).map((_, index) => (
-
-
+
+ {imageUrls.map((src, index) => (
+
+
))}
@@ -75,8 +71,9 @@ export function CarouselDemo() {
key={index}
onClick={() => api?.scrollTo(index)}
className={`h-2 w-2 rounded-full transition-colors ${
- index === current ? "bg-black" : "bg-black/50"
+ index === current ? "bg-white" : "bg-white/50"
}`}
+ aria-label={`Go to slide ${index + 1}`}
/>
))}
diff --git a/app/components/body/AutoCarousel.tsx b/app/components/body/AutoCarousel.tsx
new file mode 100644
index 0000000..01a32b1
--- /dev/null
+++ b/app/components/body/AutoCarousel.tsx
@@ -0,0 +1,82 @@
+// src/components/CarouselDemo.tsx
+import * as React from "react";
+import Autoplay from "embla-carousel-autoplay";
+
+import { Card, CardContent } from "@/ui/card";
+import {
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselNext,
+ CarouselPrevious,
+} from "@/ui/carousel";
+
+const imageUrls = [
+ "/images/carousel-1.jpg",
+ "/images/carousel-2.jpg",
+ "/images/carousel-3.jpg",
+ "/images/carousel-4.jpg",
+ "/images/carousel-5.jpg",
+ "/images/carousel-6.jpg",
+];
+
+export function AutoCarouselDemo() {
+ return (
+
+ {/* 相对定位 宽度100% 水平居中 隐藏溢出 */}
+
+
+ {/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */}
+
+
+ {imageUrls.map((src, index) => (
+
+ {/* 基宽 中屏 大屏 防止收缩 相对定位
+ 内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型
+ 隐藏溢出 移除边框 中等阴影
+ 弹性布局 正方形 垂直居中 水平居中 内边距0 相对
+ */}
+
+
+
+
+
+
+
+
+ ))}
+
+
+ {/* 左右箭头控制 */}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/app/components/body/FireNews/FireNewsList.tsx b/app/components/body/FireNews/FireNewsList.tsx
new file mode 100644
index 0000000..77601c8
--- /dev/null
+++ b/app/components/body/FireNews/FireNewsList.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+interface NewsItem {
+ content: string;
+}
+
+export function FireNewsList() {
+ const newsItems: NewsItem[] = [
+ {
+ content: "记者从16日召开的海南省政府新闻发布会上获悉,2018年,海南旅游总收入达1,262万人次,支出达399.7亿元...",
+ },
+ {
+ content: "记者从16日召开的海南省政府新闻发布会上获悉,2018年,海南旅游总收入达1,262万人次,支出达399.7亿元...",
+ },
+ {
+ content: "记者从16日召开的海南省政府新闻发布会上获悉,2018年,海南旅游总收入达1,262万人次,支出达399.7亿元...",
+ },
+ {
+ content: "记者从16日召开的海南省政府新闻发布会上获悉,2018年,海南旅游总收入达1,262万人次,支出达399.7亿元...",
+ },
+ {
+ content: "记者从16日召开的海南省政府新闻发布会上获悉,2018年,海南旅游总收入达1,262万人次,支出达399.7亿元...",
+ },
+ {
+ content: "记者从16日召开的海南省政府新闻发布会上获悉,2018年,海南旅游总收入达1,262万人次,支出达399.7亿元...",
+ },
+ ];
+
+ return (
+
+ {/* 标题栏 */}
+
+
+ {/* 新闻列表 */}
+
+ {newsItems.map((item, index) => (
+
+ ))}
+
+
+ );
+};
diff --git a/app/components/body/FireNews/fhjt.tsx b/app/components/body/FireNews/fhjt.tsx
new file mode 100644
index 0000000..6ab127b
--- /dev/null
+++ b/app/components/body/FireNews/fhjt.tsx
@@ -0,0 +1,39 @@
+
+import { CarouselDemo } from "@/components/Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhjtPage() {
+ return(
+
+ {/* 轮播背景图 */}
+
+
+
+
+
+ {/* 标题部分 */}
+
+
烽火讲堂
+ {/* 蓝色装饰线 */}
+
+
+ {/* 列表 */}
+
+
+
+ 一等奖
+
+
+
+ 二等奖
+
+
+
+ 三等奖
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/app/components/body/FireNews/fhrx.tsx b/app/components/body/FireNews/fhrx.tsx
new file mode 100644
index 0000000..a9f9f4f
--- /dev/null
+++ b/app/components/body/FireNews/fhrx.tsx
@@ -0,0 +1,39 @@
+
+import { CarouselDemo } from "@/components/Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhrxPage() {
+ return(
+
+ {/* 轮播背景图 */}
+
+
+
+
+
+ {/* 标题部分 */}
+
+
烽火热线
+ {/* 蓝色装饰线 */}
+
+
+ {/* 列表 */}
+
+
+
+ 信箱
+
+
+
+ 问答
+
+
+
+ 心灵
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/app/components/body/FireNews/fhws.tsx b/app/components/body/FireNews/fhws.tsx
new file mode 100644
index 0000000..14f0832
--- /dev/null
+++ b/app/components/body/FireNews/fhws.tsx
@@ -0,0 +1,38 @@
+
+import { CarouselDemo } from "@/components/Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhwsPage() {
+ return(
+
+
+ {/* 标题部分 */}
+
+
烽火微视
+ {/* 蓝色装饰线 */}
+
+
+ {/* 列表 */}
+
+
+
+ 一
+
+
+
+ 二
+
+
+
+ 三
+
+
+
+ {/* 轮播背景图 */}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/app/components/body/FireNews/fhyw.tsx b/app/components/body/FireNews/fhyw.tsx
new file mode 100644
index 0000000..a160ee1
--- /dev/null
+++ b/app/components/body/FireNews/fhyw.tsx
@@ -0,0 +1,21 @@
+
+
+import { CarouselDemo } from "@/components/Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhywPage() {
+ return(
+
+ {/* 轮播背景图 */}
+
+
+
+
+ {/* 固定的烽火要闻 */}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/app/components/news/body/ImageGridSection.tsx b/app/components/news/body/ImageGridSection.tsx
index c71f167..d51fe73 100644
--- a/app/components/news/body/ImageGridSection.tsx
+++ b/app/components/news/body/ImageGridSection.tsx
@@ -1,109 +1,102 @@
-import { CarouselDemo } from "@/components/Carousel";
-const ImageGridSection = () => {
-
- const elements = [
- "/images/carousel-1.jpg",
-
,
- "/images/carousel-2.jpg",
- "/images/carousel-3.jpg"
- ];
- {/* 最外 左右两列间 内边 内容最大宽 水平居 微软雅黑
- 2 列+ 2 行 格子间距 固定宽高
- */}
+import { CarouselDemo } from '@/components/Carousel';
+import React from 'react';
- const listItems = [
- '新闻标题一:重要政策发布',
- '新闻标题二:经济数据稳步回升',
- '新闻标题三:科技创新成果显著',
- '新闻标题四:民生工程持续推进',
- '新闻标题五:国际交流合作深化'
+const LearnPage = () => {
+ const newsList = [
+ '中华人民共和国监察法',
+ '2024年国办印发意见部门工作人员党听全国两...',
+ '十四届全国人大二次会议闭幕贺词',
+ '7天人代会:"小片段"折射民主"大全景"',
+ '全国政协十四届二次会议共收到提案5800多件',
+ '两会观察丨从两会八个高频词看中国',
+ '两会"清单"上新这些民生发展温度',
+ '"选择中国"——世界从中国两会读出心动机号',
+ '中国经济信心说丨新玛合信心从哪里来',
];
+
return (
-
-
- {/* 左侧:3张图片 + 1个轮播图 2x2 网格 圆 防溢 拉伸填满
- 保持比例填充 消除底部空白*/}
-
+
+ {/* 顶部 Logo */}
+
+
学习进行时
+
- {elements.map((element, index) => (
-
- {typeof element === 'string' ? (
+ {/* 主内容区:固定高度,紧凑布局 */}
+
+ {/* 左侧图片区 */}
+
+
+ {/* 上左:第一张图 */}
+

- ) : (
- element // 占据剩余空间 最小宽度;与左侧高度对齐;垂直布局;内容在垂直方向均匀分布
- // 背景色、圆角、阴影、内边距 防撑大
- )}
+
+
+ {/* 上右:轮播图 */}
+
+
+
+
+ {/* 下三图 */}
+ {[3, 4, 5].map((i) => (
+
+

+
+ ))}
- ))}
-
-
-
- {listItems.map((item, index) => (
- -
- •
- {item}
-
- ))}
-
-
+
+
+
+ {/* 右侧新闻列表 */}
+
+
+ {newsList.map((item, index) => (
+ -
+ •
+ {item}
+
+ ))}
+
+
+
+
+
+
+ {/* 左边容器内容 */}
+
+
+ 习近平新时代中国特色社会
+
+ 主义思想专题数据库
+
+
+
+
+
);
};
-export default ImageGridSection;
\ No newline at end of file
+
+export default LearnPage;
\ No newline at end of file
diff --git a/app/routes/news.tsx b/app/routes/news.tsx
index dd4aa14..130413b 100755
--- a/app/routes/news.tsx
+++ b/app/routes/news.tsx
@@ -12,6 +12,7 @@ import { FhjtPage } from "@/components/news/body/FireNews/fhjt";
import { FhwsPage } from "@/components/news/body/FireNews/fhws";
import { FhrxPage } from "@/components/news/body/FireNews/fhrx";
import { AutoCarouselDemo } from "@/components/AutoCarousel";
+
export function meta( ) {
return [
{ title: "New React Router App" },
@@ -35,6 +36,7 @@ export default function Home() {
+
);
}
From a5481854fd02632c09d6426b0181b7d5eeecab73 Mon Sep 17 00:00:00 2001
From: qiuchenfan <2035024011@qq.com>
Date: Wed, 19 Nov 2025 11:46:30 +0800
Subject: [PATCH 5/6] 11191146
---
app/components/Carousel.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx
index e93a879..47bafc3 100755
--- a/app/components/Carousel.tsx
+++ b/app/components/Carousel.tsx
@@ -24,7 +24,7 @@ export function CarouselDemo() {
const [api, setApi] = React.useState
();
const [current, setCurrent] = React.useState(0);
const [count, setCount] = React.useState(0);
-
+ const totalSlides = imageUrls.length;
React.useEffect(() => {
if (!api) return;
From 99e86b2ff5f4383f0e1a817969f2142e1ad8a478 Mon Sep 17 00:00:00 2001
From: Li1304553726 <1304553726@qq.com>
Date: Wed, 19 Nov 2025 12:39:20 +0800
Subject: [PATCH 6/6] 1
---
app/components/news/body/ImageGridSection.tsx | 4 ++--
public/images/book1.png | Bin 0 -> 46039 bytes
public/images/book2.png | Bin 0 -> 58345 bytes
3 files changed, 2 insertions(+), 2 deletions(-)
create mode 100644 public/images/book1.png
create mode 100644 public/images/book2.png
diff --git a/app/components/news/body/ImageGridSection.tsx b/app/components/news/body/ImageGridSection.tsx
index d51fe73..8b92687 100644
--- a/app/components/news/body/ImageGridSection.tsx
+++ b/app/components/news/body/ImageGridSection.tsx
@@ -73,7 +73,7 @@ const LearnPage = () => {
{/* 左边容器内容 */}
@@ -87,7 +87,7 @@ const LearnPage = () => {