Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news

app/components/Carousel.tsx

@@ -11,21 +11,14 @@ import {
   CarouselPrevious,
   type CarouselApi,
 } from "@/ui/carousel";
-  const imageUrls = [
+import FireNewsList from "./FireNewsList";
 
-  "/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 CarouselDemo() {
   const [api, setApi] = React.useState<CarouselApi>();
   const [current, setCurrent] = React.useState(0);
   const [count, setCount] = React.useState(0);
 
-  const totalSlides = imageUrls.length; 
+  const totalSlides = 6; 
 
   React.useEffect(() => {
     if (!api) return;
@@ -39,7 +32,7 @@ export function CarouselDemo() {
   }, [api]);
 
   return (
-    <div className="relative w-full max-w-xs">
+    <div className="relative w-full max-w-4xl mx-auto">
       <Carousel
         opts={{
           loop: true,
@@ -51,19 +44,21 @@ export function CarouselDemo() {
           }),
         ]}
         setApi={setApi}
-        className="w-full"
       >
-        <CarouselContent>
+        <CarouselContent className="h-full w-full">
-          {imageUrls.map((src, index) => (
+          {Array.from({ length: totalSlides }).map((_, index) => (
-            <CarouselItem key={index}>
+            <CarouselItem key={index} className="w-full h-full">
               <div className="p-1">
                 <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <CardContent className="flex aspect-square items-center justify-center ">
-                     <img
+                    <div 
-                      src={src}
+                    className="w-full h-full"
-                      alt={`Slide ${index + 1}`}
+                    style={{
-                      className="w-full h-full object-cover"
+                      backgroundImage: "url('/app/images/header.png')",
-                    />
+                      backgroundSize: '100% 100%',
+                    }}
+                    >
+                    </div>
                   </CardContent>
                 </Card>
               </div>
@@ -74,6 +69,7 @@ export function CarouselDemo() {
         <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-10" />
       </Carousel>
 
+
       {/* 分页指示器 - 右下角 */}
       <div className="absolute bottom-4 right-4 flex gap-2 z-10">
         {Array.from({ length: count }).map((_, index) => (

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 (
+    <div className="bg-gray-200 p-4 rounded-lg">
+      {/* 标题栏 */}
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-bold text-gray-800">烽火要闻</h2>
+        <a className="text-blue-600 hover:text-blue-800 font-medium">
+          查看更多 {'>'}
+        </a>
+      </div>
+
+      {/* 新闻列表 */}
+      <div className="space-y-4">
+        {newsItems.map((item, index) => (
+          <div 
+            key={index} 
+            className="flex p-3 bg-white rounded-md shadow-sm hover:shadow-md transition-shadow duration-200"
+          >
+
+            {/* 内容部分 */}
+            <div className="flex-1 min-w-0">
+              <p className="text-gray-700 text-sm ">
+                {item.content}
+                <a 
+                  className="text-red-600 ml-1 font-medium hover:text-red-800"
+                >
+                  [MORE]
+                </a>
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FireNewsList;

app/components/body/GrassrootsDynamics.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import List from '../list/List';
+
+export default function GrassrootsDynamics() {
+  return (
+ <div className="grid grid-cols-2 gap-6 bg-gray-50 p-6 rounded-2xl shadow-xl">
+  {/* 左边图片 */}
+  <div className="w-full h-auto rounded-lg shadow-md">
+    <img
+      src="/images/carousel-1.jpg"
+      alt="基层动态"
+    />
+  </div>
+  {/* 右边列表 */}
+  <div>
+    <List />
+  </div>
+</div>
+  );
+}

app/components/list/List.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { mockNewsData } from './NewsData'; // 导入新闻数据
+
+
+
+interface NewsProps {
+  title?: string;
+  description?: string;
+  time?: string;
+  type?: string;
+  url?: string;
+}
+
+
+const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
+  return (
+    <div className="mb-4">
+      <div
+        onClick={() => url && window.open(url)}
+        className="flex items-center justify-between hover:text-blue-600 cursor-pointer transition duration-300 ease-in-out"
+      >
+        <h3 className="text-lg font-semibold text-gray-800">{title}</h3>
+        <p className="text-sm text-gray-500">{time}</p>
+      </div>
+    </div>
+  );
+};
+
+// 使用新闻数据渲染列表
+const List: React.FC = () => {
+  return (
+    <div className=" ">
+      <div className="grid grid-cols-1 md:grid-cols-2 ">
+        <div className=" p-6 rounded-lg ">
+          <ul className="space-y-4">
+            {mockNewsData.map((news) => (
+              <NewsItem  title={news.title} time={news.time} url={news.url} />
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default List;

app/components/list/NewsData.tsx

@@ -6,6 +6,10 @@ export interface News {
   url?: string;
 }  
 
+export interface NewsTitle {
+   id: string;
+   name: string;
+}
 // 导出生成的模拟新闻数据
 export const NewsData = (): News[] => {
   return [
@@ -25,5 +29,18 @@ export const NewsData = (): News[] => {
   ];
 };
 
+export const NewsTitleData = (): NewsTitle[] => {
+  return [
+    { id: "news-1", name: "科技" },
+    { id: "news-2", name: "财经" },
+    { id: "news-3", name: "娱乐" },
+    { id: "news-4", name: "体育" },
+    { id: "news-5", name: "教育" },
+    { id: "news-6", name: "军事" },
+  ]
+}
+
+
 // 默认导出模拟新闻数据
 export const mockNewsData = NewsData();
+export const mockNewsTitleData = NewsTitleData();

app/components/list/NewsList.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { mockNewsData } from './NewsData'; // 导入新闻数据
+import { mockNewsTitleData } from './NewsData'; // 导入新闻标题数据
+
 
 interface NewsProps {
   title?: string;
@@ -9,6 +11,10 @@ interface NewsProps {
   url?: string;
 }
 
+interface NewsTitle {
+  id: string;
+  name: string;
+}
 const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
   return (
     <div className="mb-4">
@@ -37,8 +43,8 @@ const NewsList: React.FC = () => {
             </button>
           </div>
           <ul className="space-y-4">
-            {mockNewsData.map((news, index) => (
+            {mockNewsData.map((news) => (
-              <NewsItem key={index} title={news.title} time={news.time} url={news.url} />
+              <NewsItem  title={news.title} time={news.time} url={news.url} />
             ))}
           </ul>
         </div>

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 (
+    <div className="h-[700px] w-[1550px] mx-auto relative ">
+      <div
+        className="h-[200px] w-full bg-cover"
+        style={{
+          backgroundImage: 'url(/culture.png)',
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+        }}
+      />
+
+      <div className="h-[500px] w-full absolute top-30 flex items-center justify-center p-8">
+        <div className="w-full h-full flex items-center justify-center mb-10">
+          {/* 两行八列：flex + wrap */}
+          <div className="flex flex-wrap justify-center gap-x-15 gap-y-16">
+            {logos.map((logo) => (
+              <img
+                key={logo.id}
+                src={logo.src}
+                alt={logo.alt}
+                className="w-[130px] h-[130px] rounded-full object-contain hover:scale-[1.85] transition-transform duration-200 cursor-pointer"
+                style={{ transformOrigin: 'center' }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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 (
+    <div className="w-[1514px] h-[573px] mx-auto ">
+      <div className="w-full h-[488px]">
+        <div className="w-full h-[82px] flex items-center pt-30 ml-10">
+          <div className="w-3 h-15 bg-[#005d93] mr-3" />
+          <h2 className="text-4xl font-bold text-[#005d93]">综合服务</h2>
+        </div>
+
+        <div className="flex gap-45 h-full px-8 py-6 pb-20 pt-15">
+          {columns.map((group, colIdx) => (
+            <div key={colIdx} className="flex-1 grid grid-cols-2 gap-x-8 gap-y-6">
+              {group.map((service) => (
+                <a
+                  key={service.label}
+                  href={service.href}
+                  className="flex flex-col items-center text-[#0f172a] transition hover:text-[#005d93]"
+                >
+                  <div className="w-16 h-16 flex items-center justify-center rounded-full bg-[#005d93]/10 text-[#005d93] mb-2">
+                    <service.icon className="w-8 h-8" aria-hidden />
+                  </div>
+                  <span className="text-base font-semibold text-center">{service.label}</span>
+                </a>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/news/header/Header.tsx

@@ -15,7 +15,7 @@ export function Header(){
 
     return (
         <div 
-            className="relative w-[1280px] h-[704px] bg-cover bg-center left-1/2 transform -translate-x-1/2"
+            className="relative w-full h-180 bg-cover bg-center left-1/2 transform -translate-x-1/2"
             style={{ backgroundImage: "url('/app/images/header.png')" }} 
         >
             {/* 时间显示  只显示日期: "2025/3/15"*/}

app/routes/news.tsx

@@ -1,9 +1,13 @@
-import { CarouselDemo } from "@/components/Carousel";
+
 import type { Route } from "./+types/news";
-import {Header} from "@/components/header/Header";
+import Integrated from "@/components/news/body/Integrated";
-import {TopNav} from "@/components/header/TopNav";
+import CultureBgPage from "@/components/news/body/Culturebg";
+import {Header} from "@/components/news/header/Header";
+import {TopNav} from "@/components/news/header/TopNav";
 import NewsList from "@/components/list/NewsList";
 import ImageGridSection from "@/components/body/ImageGridSection";
+import { CarouselDemo } from "@/components/Carousel";
+import GrassrootsDynamics from "@/components/body/GrassrootsDynamics";
 export function meta( ) {
   return [
     { title: "New React Router App" },
@@ -12,12 +16,16 @@ export function meta( ) {
 }
 
 export default function Home() {
+  
   return (
     <div>
       <Header />
       <TopNav />
+      <CarouselDemo />
       <NewsList />
       <ImageGridSection />
+      <Integrated />
+      <CultureBgPage />
     </div>
   );
 }

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",

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):