diff --git a/app/components/untils/Carousel.tsx b/app/components/Carousel.tsx similarity index 98% rename from app/components/untils/Carousel.tsx rename to app/components/Carousel.tsx index 0ea29e9..e0c744a 100755 --- a/app/components/untils/Carousel.tsx +++ b/app/components/Carousel.tsx @@ -1,4 +1,3 @@ -// src/components/CarouselDemo.tsx import * as React from "react"; import Autoplay from "embla-carousel-autoplay"; @@ -11,6 +10,7 @@ import { CarouselPrevious, type CarouselApi, } from "@/ui/carousel"; +import FireNewsList from "./FireNewsList"; const imageUrls = [ "/images/carousel-1.jpg", diff --git a/app/components/FireNewsList.tsx b/app/components/FireNewsList.tsx new file mode 100644 index 0000000..a4712ca --- /dev/null +++ b/app/components/FireNewsList.tsx @@ -0,0 +1,63 @@ +import React from 'react'; + +interface NewsItem { + content: string; +} + +const FireNewsList: React.FC = () => { + 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亿元...", + }, + + ]; + + return ( +
+ {/* 标题栏 */} +
+

烽火要闻

+ + 查看更多 {'>'} + +
+ + {/* 新闻列表 */} +
+ {newsItems.map((item, index) => ( +
+ + {/* 内容部分 */} +
+

+ {item.content} + + [MORE] + +

+
+
+ ))} +
+
+ ); +}; + +export default FireNewsList; \ No newline at end of file diff --git a/app/components/body/ImageGridSection.tsx b/app/components/body/ImageGridSection.tsx new file mode 100644 index 0000000..6625297 --- /dev/null +++ b/app/components/body/ImageGridSection.tsx @@ -0,0 +1,103 @@ +import { CarouselDemo } from "@/components/Carousel"; +const ImageGridSection = () => { + // 替换为你自己的图片路径 + const elements = [ + "/images/carousel-1.jpg", + , + "/images/carousel-2.jpg", + "/images/carousel-3.jpg" + ]; + const listItems = [ + '新闻标题一：重要政策发布', + '新闻标题二：经济数据稳步回升', + '新闻标题三：科技创新成果显著', + '新闻标题四：民生工程持续推进', + '新闻标题五：国际交流合作深化' + ]; + return ( +
+ + {/* 左侧：3张图片 + 1个轮播图 2x2 网格 */} +
+ {elements.map((element, index) => ( +
+ {typeof element === 'string' ? ( + {`图片 + ) : ( + element // 如果是 React 元素，则直接渲染 + )} +
+ ))} +
+
+
    + {listItems.map((item, index) => ( +
  • + • + {item} +
    • + ))} +
+
+
+ ); +}; +export default ImageGridSection; \ No newline at end of file diff --git a/app/components/body/learn.tsx b/app/components/body/learn.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/app/components/news/body/Culturebg.tsx b/app/components/news/body/Culturebg.tsx new file mode 100644 index 0000000..25a08c5 --- /dev/null +++ b/app/components/news/body/Culturebg.tsx @@ -0,0 +1,54 @@ +import React from 'react'; + +export default function CultureBgPage() { + // 定义logo数据 + const logos = [ + { id: 1, src: '/public/logo/1.png', alt: 'Logo 1' }, + { id: 2, src: '/public/logo/1.png', alt: 'Logo 2' }, + { id: 3, src: '/public/logo/1.png', alt: 'Logo 3' }, + { id: 4, src: '/public/logo/1.png', alt: 'Logo 4' }, + { id: 5, src: '/public/logo/1.png', alt: 'Logo 5' }, + { id: 6, src: '/public/logo/1.png', alt: 'Logo 6' }, + { id: 7, src: '/public/logo/1.png', alt: 'Logo 7' }, + { id: 8, src: '/public/logo/1.png', alt: 'Logo 8' }, + { id: 9, src: '/public/logo/1.png', alt: 'Logo 9' }, + { id: 10, src: '/public/logo/1.png', alt: 'Logo 10' }, + { id: 11, src: '/public/logo/1.png', alt: 'Logo 11' }, + { id: 12, src: '/public/logo/1.png', alt: 'Logo 12' }, + { id: 13, src: '/public/logo/1.png', alt: 'Logo 13' }, + { id: 14, src: '/public/logo/1.png', alt: 'Logo 14' }, + { id: 15, src: '/public/logo/1.png', alt: 'Logo 15' }, + { id: 16, src: '/public/logo/1.png', alt: 'Logo 16' }, + ]; + + return ( +
+
+ +
+
+ {/* 两行八列：flex + wrap */} +
+ {logos.map((logo) => ( + {logo.alt} + ))} +
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/components/news/body/Integrated.tsx b/app/components/news/body/Integrated.tsx new file mode 100644 index 0000000..96817c3 --- /dev/null +++ b/app/components/news/body/Integrated.tsx @@ -0,0 +1,72 @@ +import type { IconType } from 'react-icons'; +import { + FaUserGraduate, + FaUserShield, + FaLaptopCode, + FaMicrophoneLines, + FaEnvelopeOpenText, + FaWrench, + FaRegFileLines, + FaSpellCheck, + FaChartPie, + FaGlobe, + FaBookOpenReader, + FaPenRuler, +} from 'react-icons/fa6'; + +type ServiceItem = { + icon: IconType; + label: string; + href: string; +}; + +const services: ServiceItem[] = [ + { icon: FaUserGraduate, label: '警队自考', href: '/study' }, + { icon: FaUserShield, label: '警队教育', href: '/scholarship' }, + { icon: FaLaptopCode, label: '常用软件', href: '/software' }, + { icon: FaMicrophoneLines, label: '智能语音', href: '/voice' }, + { icon: FaEnvelopeOpenText, label: '蓝天邮局', href: '/mail' }, + { icon: FaWrench, label: '策划工具', href: '/plan' }, + { icon: FaRegFileLines, label: '办公模板', href: '/office' }, + { icon: FaSpellCheck, label: '智能校对', href: '/ai-check' }, + { icon: FaChartPie, label: '警情调研', href: '/survey' }, + { icon: FaGlobe, label: '上网助手', href: '/net' }, + { icon: FaBookOpenReader, label: '考试平台', href: '/exam' }, + { icon: FaPenRuler, label: '学习平台', href: '/study' }, +]; + +const columns = Array.from({ length: 3 }, (_, colIndex) => + services.slice(colIndex * 4, colIndex * 4 + 4) +); + +export default function Integrated() { + return ( +
+
+
+
+

综合服务

+
+ +
+ {columns.map((group, colIdx) => ( +
+ {group.map((service) => ( + +
+ +
+ {service.label} + + ))} +
+ ))} +
+
+
+ ); +} \ No newline at end of file diff --git a/app/routes/news.tsx b/app/routes/news.tsx index ce5816f..816c526 100755 --- a/app/routes/news.tsx +++ b/app/routes/news.tsx @@ -1,5 +1,7 @@ -import { CarouselDemo } from "@/components/untils/Carousel"; +import { CarouselDemo } from "@/components/Carousel"; import type { Route } from "./+types/news"; +import Integrated from "@/components/news/body/Integrated"; +import CultureBgPage from "@/components/news/body/Culturebg"; import {Header} from "@/components/header/Header"; import {TopNav} from "@/components/header/TopNav"; import NewsList from "@/components/list/NewsList"; @@ -12,13 +14,13 @@ export function meta( ) { } export default function Home() { + return (
-
); } diff --git a/package.json b/package.json index a6398ff..bfd31e6 100755 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "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-router": "^7.9.2", "shadcn": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8313dcb..d8d961f 100755 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -65,6 +65,9 @@ importers: react-dom: specifier: ^19.1.1 version: 19.2.0(react@19.2.0) + react-icons: + specifier: ^5.5.0 + version: 5.5.0(react@19.2.0) react-router: specifier: ^7.9.2 version: 7.9.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0) @@ -2382,6 +2385,11 @@ packages: peerDependencies: react: ^19.2.0 + react-icons@5.5.0: + resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==} + peerDependencies: + react: '*' + react-refresh@0.14.2: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} @@ -5082,6 +5090,10 @@ snapshots: react: 19.2.0 scheduler: 0.27.0 + react-icons@5.5.0(react@19.2.0): + dependencies: + react: 19.2.0 + react-refresh@0.14.2: {} react-remove-scroll-bar@2.3.8(@types/react@19.2.6)(react@19.2.0): diff --git a/public/culture.png b/public/culture.png new file mode 100644 index 0000000..48c95bf Binary files /dev/null and b/public/culture.png differ diff --git a/public/logo/1.png b/public/logo/1.png new file mode 100644 index 0000000..7bd99b9 Binary files /dev/null and b/public/logo/1.png differ