diff --git a/app/components/news/body/FireNews/FireNewsList.tsx b/app/components/news/body/FireNews/FireNewsList.tsx index 5c29c71..dadf8e6 100644 --- a/app/components/news/body/FireNews/FireNewsList.tsx +++ b/app/components/news/body/FireNews/FireNewsList.tsx @@ -57,7 +57,7 @@ export function FireNewsList() { return (
{/* 文章列表 */} -
+
{/* 标题栏 */}

烽火要闻

@@ -71,7 +71,7 @@ export function FireNewsList() { {/* 文章列表 */}
{articles.map((article, index) => ( -
+
{/* 左侧竖线和日期 */}
diff --git a/app/components/news/body/FireNews/fhrx.tsx b/app/components/news/body/FireNews/Hotline.tsx similarity index 69% rename from app/components/news/body/FireNews/fhrx.tsx rename to app/components/news/body/FireNews/Hotline.tsx index 2834797..8c1e2ff 100644 --- a/app/components/news/body/FireNews/fhrx.tsx +++ b/app/components/news/body/FireNews/Hotline.tsx @@ -2,15 +2,15 @@ import { CarouselDemo } from "@/components/Carousel"; import {FireNewsList} from "./FireNewsList"; -export function FhrxPage() { +export function Hotline() { return( -
-
+
+
{/* 轮播背景图 */} -
+
-
+
diff --git a/app/components/news/body/FireNews/fhyw.tsx b/app/components/news/body/FireNews/ImportantNews.tsx similarity index 51% rename from app/components/news/body/FireNews/fhyw.tsx rename to app/components/news/body/FireNews/ImportantNews.tsx index 0ee6d49..9feff88 100644 --- a/app/components/news/body/FireNews/fhyw.tsx +++ b/app/components/news/body/FireNews/ImportantNews.tsx @@ -1,16 +1,17 @@ import { CarouselDemo } from "@/components/Carousel"; import {FireNewsList} from "./FireNewsList"; +import { CarouselPreset } from "@/components/untils/CarouselPreset"; -export function FhywPage() { +export function ImportantNews() { return( -
+
{/* 轮播背景图 - 确保有明确尺寸 */} -
+
{/* 固定的烽火要闻 */} -
+
diff --git a/app/components/news/body/FireNews/fhjt.tsx b/app/components/news/body/FireNews/LectureHall.tsx similarity index 69% rename from app/components/news/body/FireNews/fhjt.tsx rename to app/components/news/body/FireNews/LectureHall.tsx index 6d380ec..5c530d8 100644 --- a/app/components/news/body/FireNews/fhjt.tsx +++ b/app/components/news/body/FireNews/LectureHall.tsx @@ -2,15 +2,15 @@ import { CarouselDemo } from "@/components/Carousel"; import {FireNewsList} from "./FireNewsList"; -export function FhjtPage() { +export function LectureHall() { return( -
-
+
+
{/* 轮播背景图 */} -
+
-
+
{/* 标题部分 */} diff --git a/app/components/news/body/FireNews/fhws.tsx b/app/components/news/body/FireNews/MicroVision.tsx similarity index 70% rename from app/components/news/body/FireNews/fhws.tsx rename to app/components/news/body/FireNews/MicroVision.tsx index a3f0213..debd79b 100644 --- a/app/components/news/body/FireNews/fhws.tsx +++ b/app/components/news/body/FireNews/MicroVision.tsx @@ -2,9 +2,9 @@ import { CarouselDemo } from "@/components/Carousel"; import {FireNewsList} from "./FireNewsList"; -export function FhwsPage() { +export function MicroVision() { return( -
+
{/* 标题部分 */}
@@ -28,12 +28,12 @@ export function FhwsPage() {
-
+
{/* 轮播背景图 */} -
+
-
+
) diff --git a/app/components/news/body/GrassrootsDynamics.tsx b/app/components/news/body/GrassrootsDynamics.tsx index 79c5d45..6057022 100644 --- a/app/components/news/body/GrassrootsDynamics.tsx +++ b/app/components/news/body/GrassrootsDynamics.tsx @@ -5,9 +5,9 @@ import List from '@/components/news/list/List'; export default function GrassrootsDynamics() { return ( -
-
-
+
+
+
基层动态 {/* 右边列表 */} -
diff --git a/app/components/news/body/ImageGridSection.tsx b/app/components/news/body/ImageGridSection.tsx index 876fdf2..6ba4265 100644 --- a/app/components/news/body/ImageGridSection.tsx +++ b/app/components/news/body/ImageGridSection.tsx @@ -15,7 +15,8 @@ const LearnPage = () => { ]; return ( -
+
+
{/* 顶部 Logo */}

学习进行时

@@ -69,7 +70,7 @@ const LearnPage = () => {
-
+
{

-
+
{/* 右边容器内容 */} @@ -96,6 +97,13 @@ const LearnPage = () => {
+
+
+
烽火动态
+
+
); }; diff --git a/app/components/news/footer/footer.tsx b/app/components/news/footer/footer.tsx new file mode 100644 index 0000000..d009fb0 --- /dev/null +++ b/app/components/news/footer/footer.tsx @@ -0,0 +1,11 @@ +export function Footer() { + return ( +
+
+ 春风拂面花开满园心情愉悦 +
+
+ ) +} \ No newline at end of file diff --git a/app/components/news/header/TopNav.tsx b/app/components/news/header/TopNav.tsx index 8eaf5ed..d9791e5 100644 --- a/app/components/news/header/TopNav.tsx +++ b/app/components/news/header/TopNav.tsx @@ -45,7 +45,7 @@ export function TopNav({ return ( // 将组件宽度调整为1514px，并保持居中 -
+
{/* 搜索框与导航菜单组合 */}
{/* 搜索框 */} diff --git a/app/components/news/list/NewsList.tsx b/app/components/news/list/NewsList.tsx index 12a9606..0031a89 100644 --- a/app/components/news/list/NewsList.tsx +++ b/app/components/news/list/NewsList.tsx @@ -28,7 +28,7 @@ const NewsList: React.FC = () => { const educationNews = mockNewsData.filter((news) => news.type === "教育"); return ( -
+
{/* 使用 Flexbox 将两个列表放在一行 */}
{/* 科技新闻 */} diff --git a/app/components/untils/CarouselPreset.tsx b/app/components/untils/CarouselPreset.tsx new file mode 100644 index 0000000..a9a7c6f --- /dev/null +++ b/app/components/untils/CarouselPreset.tsx @@ -0,0 +1,96 @@ +import * as React from "react" +import Autoplay from "embla-carousel-autoplay" +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, + type CarouselApi, +} from "@/ui/carousel" +import { CardContent } from "@/ui/card" +import { cn } from "@/lib/utils" + +type Slide = { + key?: React.Key + content: React.ReactNode +} + +type CarouselPresetProps = { + slides: Slide[] + autoplayDelay?: number + showControls?: boolean + showIndicators?: boolean + indicatorVariant?: "dot" | "pill" + className?: string + contentClassName?: string + itemClassName?: string +} + +export function CarouselPreset({ + slides, + autoplayDelay = 3000, + showControls = true, + showIndicators = true, + indicatorVariant = "dot", + className, + contentClassName, + itemClassName, +}: CarouselPresetProps) { + const [api, setApi] = React.useState() + const [current, setCurrent] = React.useState(0) + const [count, setCount] = React.useState(0) + + React.useEffect(() => { + if (!api) return + setCount(api.scrollSnapList().length) + setCurrent(api.selectedScrollSnap()) + api.on("select", () => setCurrent(api.selectedScrollSnap())) + }, [api]) + + return ( +
+ + + {slides.map((slide, index) => ( + + {slide.content} + + ))} + + + {showControls && ( + <> + + + + )} + + + {showIndicators && ( +
+ {Array.from({ length: count }).map((_, index) => ( +
+ )} +
+ ) +} \ No newline at end of file diff --git a/app/routes/news.tsx b/app/routes/news.tsx index 2d529a2..88ec529 100755 --- a/app/routes/news.tsx +++ b/app/routes/news.tsx @@ -7,13 +7,12 @@ import {TopNav} from "@/components/news/header/TopNav"; import NewsList from "@/components/news/list/NewsList"; import ImageGridSection from "@/components/news/body/ImageGridSection"; import GrassrootsDynamics from "@/components/news/body/GrassrootsDynamics"; -import { FhywPage } from "@/components/news/body/FireNews/fhyw"; -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 { ImportantNews } from "@/components/news/body/FireNews/ImportantNews"; +import { LectureHall } from "@/components/news/body/FireNews/LectureHall"; +import { MicroVision } from "@/components/news/body/FireNews/MicroVision"; +import { Hotline } from "@/components/news/body/FireNews/Hotline"; import { AutoCarouselDemo } from "@/components/AutoCarousel"; -import { Carousel } from "@/ui/carousel"; -import { CarouselDemo } from "@/components/Carousel"; +import { Footer } from "@/components/news/footer/footer"; export function meta( ) { return [ @@ -28,21 +27,22 @@ export default function Home() {
- +
- - - + + +
+
); }