diff --git a/app/components/news/body/Culturebg.tsx b/app/components/news/body/Culturebg.tsx new file mode 100644 index 0000000..cd5f0c4 --- /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..0401737 --- /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 6820291..d3c019b 100755 --- a/app/routes/news.tsx +++ b/app/routes/news.tsx @@ -1,7 +1,7 @@ import { Carousel } from "@/components/ui/carousel"; import type { Route } from "./+types/news"; - - +import Integrated from "@/components/news/body/Integrated"; +import CultureBgPage from "@/components/news/body/Culturebg"; export function meta({}: Route.MetaArgs) { return [ { title: "New React Router App" }, @@ -10,5 +10,9 @@ export function meta({}: Route.MetaArgs) { } export default function Home() { - return ; + return ( +
+ +
+ ); } diff --git a/package.json b/package.json index 1daccf6..53024e8 100755 --- a/package.json +++ b/package.json @@ -26,6 +26,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 ee43459..58cc337 100755 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,6 +62,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) @@ -2374,6 +2377,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'} @@ -5070,6 +5078,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