1

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

app/components/FireNews/fhjt.tsx

@@ -1,16 +1,17 @@
 import { CarouselDemo } from "../Carousel";
-import {FireNewsList} from "./FireNewsList";
+
 
 
 export function FhjtPage() {
     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 />
         </div>
-        
+		{/* 白色遮罩层 - 覆盖被裁剪的部分 */}
-        <div className="w-100 h-full bg-white relative">
+
+        <div className="w-100 h-full bg-white relative" style={{}}>
 			{/* 标题部分 */}
 			<div className="relative pt-6 pr-8">
 				<h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火讲堂</h2>

app/components/FireNews/fhrx.tsx

@@ -4,7 +4,7 @@ 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/FireNews/fhws.tsx

@@ -4,16 +4,16 @@ 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/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"
+            className="relative w-full h-180 bg-cover bg-center"
-            style={{ backgroundImage: "url('/app/images/header.png')" }} 
+            style={{ backgroundImage: "url('/public/images/header.png')" }} 
         >
             {/* 时间显示  只显示日期: "2025/3/15"*/}
             <div className="absolute top-4 right-4 mr-40">

app/routes/news.tsx

@@ -28,13 +28,17 @@ export default function Home() {
       <FhywPage />
       <NewsList />
       <ImageGridSection />
-      <GrassrootsDynamics />
+      <div
-      <FhjtPage/>
+        style={{backgroundImage: "url('/public/images/jcdt.png')"}}
-      <FhwsPage/>
+      >
-      <FhrxPage />  
+        <GrassrootsDynamics />
-      <AutoCarouselDemo />
+        <FhjtPage/>
-      <CultureBgPage />
+        <FhwsPage/>
-      <Integrated />
+        <FhrxPage />  
+        <AutoCarouselDemo />
+        <CultureBgPage />
+        <Integrated />
+      </div>
     </div>
   );
 }