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

app/components/Carousel.tsx

@@ -53,7 +53,7 @@ export function CarouselDemo() {
                     <div 
                     className="w-full h-full"
                     style={{
-                      backgroundImage: "url('/app/images/header.png')",//背景图片可修改
+                      backgroundImage: "url('/public/images/header.png')",//背景图片可修改
                       backgroundSize: '100% 100%',
                     }}
                     >

app/components/FireNews/FireNewsList.tsx

@@ -1,63 +0,0 @@
-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 (
-    <div className="bg-gray-200 p-4 rounded-lg h-full">
-      {/* 标题栏 */}
-      <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>
-  );
-};

app/components/news/body/FireNews/FireNewsList.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+
+export function FireNewsList() {
+  const articles = [
+		{
+			date: { month: '11', day: '2025-02' },
+			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
+			isHighlighted: false,
+		},
+		{
+			date: { month: '11', day: '2025-02' },
+			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
+			isHighlighted: false,
+		},
+		{
+			date: { month: '11', day: '2025-02' },
+			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
+			isHighlighted: false,
+		},
+		{
+			date: { month: '11', day: '2025-02' },
+			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
+			isHighlighted: true,
+		},
+		{
+			date: { month: '11', day: '2025-02' },
+			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
+			isHighlighted: true,
+		},
+		{
+			date: { month: '11', day: '2025-02' },
+			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
+			isHighlighted: false,
+		},
+		{
+			date: { month: '11', day: '2025-02' },
+			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
+			isHighlighted: true,
+		},
+		{
+			date: { month: '11', day: '2025-02' },
+			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
+			isHighlighted: false,
+		},
+		{
+			date: { month: '11', day: '2025-02' },
+			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
+			isHighlighted: false,
+		},
+		{
+			date: { month: '11', day: '2025-02' },
+			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
+			isHighlighted: false,
+		},
+	];
+
+  return (
+    <div>
+				{/* 文章列表 */}
+				<div className=" bg-[rgba(0,0,0,0.51)] shadow-lg ml-4 mr-2 p-1 absolute right-0 ">
+				{/* 标题栏 */}
+				<div className="flex justify-between items-center mb-6  border-b-3 border-white">
+					<h2 className="text-white text-3xl font-bold ml-6 mt-2 mb-2">烽火要闻</h2>
+					<button className="">
+						<a href="#" className="text-white text-sm flex items-center mt-2 hover:text-blue-500">
+							查看更多
+						</a>
+					</button>
+				</div>
+
+				{/* 文章列表 */}
+				<div className="space-y-1  h-200 overflow-hidden hover:overflow-auto scroll-container">
+					{articles.map((article, index) => (
+						<div key={index} className="flex items-center space-x-3 pb-4">
+							{/* 左侧竖线和日期 */}
+							<div className="flex items-center space-x-3">
+								<div className="w-1 h-13 bg-white ml-3"></div>
+								<div className="text-center">
+									<div className="text-white text-3xl font-bold">{article.date.month}</div>
+									<div className="text-gray-300 text-sm">{article.date.day}</div>
+								</div>
+							</div>
+							{/* 右侧文章内容 */}
+							<div className="flex-1">
+								<p className="  text-white ">
+									{article.title}
+									<a href="#" className="text-red-600 text-sm hover:font-bold">
+										【MORE】
+									</a>
+								</p>
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+  );
+};

app/components/news/body/FireNews/fhjt.tsx

@@ -1,15 +1,17 @@
-import { CarouselDemo } from "../Carousel";
+import { CarouselDemo } from "@/components/Carousel";
 import {FireNewsList} from "./FireNewsList";
 
 
 export function FhjtPage() {
     return(
-    <div className=" w-full overflow-hidden flex justify-center">
-        {/* 轮播背景图 */}
-        <div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
-            <CarouselDemo />
-        </div>
-        
+    <div className=" w-full overflow-hidden flex justify-center h-200">
+        <div className="relative">
+			{/* 轮播背景图 */}
+			<div className="w-200 absolute"  style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
+				<CarouselDemo />
+			</div>
+			<div className='w-200 bg-white h-full'></div>
+		</div>
         <div className="w-100 h-full bg-white relative">
 			{/* 标题部分 */}
 			<div className="relative pt-6 pr-8">

app/components/news/body/FireNews/fhrx.tsx

@@ -1,10 +1,10 @@
-import { CarouselDemo } from "../Carousel";
+import { CarouselDemo } from "@/components/Carousel";
 import {FireNewsList} from "./FireNewsList";
 
 
 export function FhrxPage() {
     return(
-    <div className=" w-full overflow-hidden flex justify-center">
+    <div className=" w-full overflow-hidden flex justify-center h-200">
         {/* 轮播背景图 */}
         <div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
             <CarouselDemo />

app/components/news/body/FireNews/fhws.tsx

@@ -1,19 +1,19 @@
-import { CarouselDemo } from "../Carousel";
+import { CarouselDemo } from "@/components/Carousel";
 import {FireNewsList} from "./FireNewsList";
 
 
 export function FhwsPage() {
     return(
-    <div className=" w-full overflow-hidden flex justify-center">
+    <div className=" w-full overflow-hidden flex justify-center h-200">
         <div className="w-100 h-full bg-white relative" >
 			{/* 标题部分 */}
-			<div className="relative pt-6 pr-8">
+			<div className="relative pt-6 pl-8">
 				<h2 className=" text-4xl font-bold text-[#005d93] mb-2">烽火微视</h2>
 				{/* 蓝色装饰线 */}
 				<div className="h-3 bg-[#005d93]"></div>
 			</div>
 			{/* 列表 */}
-			<div className="mt-4 pr-8 ">
+			<div className="mt-4 pl-8 ">
 
 				<div className="mb-5 justify-start flex">
                         一

app/components/news/body/FireNews/fhyw.tsx

@@ -1,4 +1,4 @@
-import { CarouselDemo } from "../Carousel";
+import { CarouselDemo } from "@/components/Carousel";
 import {FireNewsList} from "./FireNewsList";
 
 

app/components/news/body/GrassrootsDynamics.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import List from '../list/List';
+import List from '@/components/list/List';
 
 export default function GrassrootsDynamics() {
   return (

app/components/news/header/Header.tsx

@@ -7,7 +7,7 @@ export function Header(){
         // setInterval是 JavaScript 中的一个全局函数，用于重复执行代码
         const timer = setInterval(() => {
             setCurrentTime(new Date());
-        }, 1000); // 每秒更新一次
+        }, 24*60*1000); // 每天更新一次
 
         // 清理定时器
         return () => clearInterval(timer);// 只在组件卸载时清理定时器
@@ -15,8 +15,8 @@ export function Header(){
 
     return (
         <div 
-            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')" }} 
+            className="relative w-full h-180 bg-cover bg-center"
+            style={{ backgroundImage: "url('/public/images/header.png')" }} 
         >
             {/* 时间显示  只显示日期: "2025/3/15"*/}
             <div className="absolute top-4 right-4 mr-40">

app/routes/news.tsx

@@ -5,12 +5,12 @@ 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 GrassrootsDynamics from "@/components/body/GrassrootsDynamics";
-import { FhywPage } from "@/components/FireNews/fhyw";
-import { FhjtPage } from "@/components/FireNews/fhjt";
-import { FhwsPage } from "@/components/FireNews/fhws";
-import { FhrxPage } from "@/components/FireNews/fhrx";
+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 { AutoCarouselDemo } from "@/components/AutoCarousel";
 export function meta( ) {
   return [
@@ -28,13 +28,17 @@ export default function Home() {
       <FhywPage />
       <NewsList />
       <ImageGridSection />
-      <GrassrootsDynamics />
-      <FhjtPage/>
-      <FhwsPage/>
-      <FhrxPage />  
-      <AutoCarouselDemo />
-      <CultureBgPage />
-      <Integrated />
+      <div
+        style={{backgroundImage: "url('/public/images/jcdt.png')"}}
+      >
+        <GrassrootsDynamics />
+        <FhjtPage/>
+        <FhwsPage/>
+        <FhrxPage />  
+        <AutoCarouselDemo />
+        <CultureBgPage />
+        <Integrated />
+      </div>
     </div>
   );
 }