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

app/components/Carousel.tsx

@@ -1,48 +1,53 @@
-// src/components/CarouselDemo.tsx
 import * as React from "react";
-import Autoplay from "embla-carousel-autoplay";//实现轮播图的自动播放功能
+import Autoplay from "embla-carousel-autoplay";
 
 import { Card, CardContent } from "@/ui/card";
 import {
-  Carousel,//主体
+  Carousel,
-  CarouselContent,//内容容器
+  CarouselContent,
-  CarouselItem,//单个轮播项
+  CarouselItem,
   CarouselNext,
   CarouselPrevious,
   type CarouselApi,
 } from "@/ui/carousel";
 
+const imageUrls = [
+  "/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 = 6; 
-
   React.useEffect(() => {
     if (!api) return;
 
     setCount(api.scrollSnapList().length);
-    setCurrent(api.selectedScrollSnap());//获取当前选中的轮播项的索引
+    setCurrent(api.selectedScrollSnap());
+
     api.on("select", () => {
       setCurrent(api.selectedScrollSnap());
     });
-  }, [api]);//当api改变时，执行此函数 水平居中 循环 自动播放 回传状态
+  }, [api]);
 
   return (
-    <div className="relative w-full max-w-4xl mx-auto">
+    <div className="relative w-full h-full">
       <Carousel
-        opts={{
+        opts={{ loop: true }}
-          loop: true,
-        }}
         plugins={[
           Autoplay({
             delay: 3000,
-            stopOnInteraction: false, 
+            stopOnInteraction: false,
           }),
         ]}
         setApi={setApi}
+        className="w-full h-full"
       >
         <CarouselContent className="h-full w-full">
           {Array.from({ length: totalSlides }).map((_, index) => (
@@ -75,8 +80,9 @@ export function CarouselDemo() {
             key={index}
             onClick={() => api?.scrollTo(index)}
             className={`h-2 w-2 rounded-full transition-colors ${
-              index === current ? "bg-black" : "bg-black/50"
+              index === current ? "bg-white" : "bg-white/50"
             }`}
+            aria-label={`Go to slide ${index + 1}`}
           />
         ))}
       </div>

app/components/body/AutoCarousel.tsx

@@ -0,0 +1,82 @@
+// src/components/CarouselDemo.tsx
+import * as React from "react";
+import Autoplay from "embla-carousel-autoplay";
+
+import { Card, CardContent } from "@/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/ui/carousel";
+
+const imageUrls = [
+  "/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 AutoCarouselDemo() {
+  return (
+    <div className="relative w-full  mx-auto overflow-hidden">
+      {/* 相对定位 宽度100% 水平居中 隐藏溢出 */}
+      <div className="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black/70 via-transparent pointer-events-none z-10" />
+      <div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black/70 via-transparent pointer-events-none z-10" />
+      {/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */}
+      <Carousel
+        opts={{
+          loop: true,//循环
+          align: "start",
+        }}
+        plugins={[
+          Autoplay({
+            delay: 3000, // 自动播放
+            stopOnInteraction: false,//不因为鼠标交互停止
+          }),
+        ]}
+        className="w-full"
+      >
+        <CarouselContent className="flex gap-4">
+          {imageUrls.map((src, index) => (
+            <CarouselItem
+              key={index}
+              className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
+            >
+              {/* 基宽 中屏 大屏 防止收缩 相对定位 
+              内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型
+              隐藏溢出 移除边框 中等阴影
+              弹性布局 正方形 垂直居中 水平居中 内边距0 相对
+              */}
+              <div
+                className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
+                style={{
+                  transform: 'scale(1)',
+                  transition: 'all 0.5s ease',
+                }}
+              >
+                <Card className="overflow-hidden border-none shadow-lg">
+                  <CardContent className="flex aspect-square items-center justify-center p-0 relative">
+                    <img
+                      src={src}
+                      alt={`Slide ${index + 1}`}
+                      className="w-full h-full object-cover"
+                      loading="lazy" // 启用懒加载
+                    />
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+
+        {/* 左右箭头控制 */}
+        <CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-20" />
+        <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-20" />
+      </Carousel>
+    </div>
+  );
+}

app/components/body/FireNews/FireNewsList.tsx

@@ -0,0 +1,63 @@
+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/body/FireNews/fhjt.tsx

@@ -0,0 +1,39 @@
+
+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-100 h-full bg-white relative">
+			{/* 标题部分 */}
+			<div className="relative pt-6 pr-8">
+				<h2 className="text-right 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="mb-5 justify-end flex">
+                        一等奖
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        二等奖
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        三等奖
+				</div>
+			</div>
+		</div>
+    </div>
+    )
+}

app/components/body/FireNews/fhrx.tsx

@@ -0,0 +1,39 @@
+
+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-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="relative pt-6 pr-8">
+				<h2 className="text-right 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="mb-5 justify-end flex">
+                        信箱
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        问答
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        心灵
+				</div>
+			</div>
+		</div>
+    </div>
+    )
+}

app/components/body/FireNews/fhws.tsx

@@ -0,0 +1,38 @@
+
+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-100 h-full bg-white relative" >
+			{/* 标题部分 */}
+			<div className="relative pt-6 pr-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="mb-5 justify-start flex">
+                        一
+				</div>
+
+				<div className="mb-5 justify-start flex">
+                        二
+				</div>
+
+				<div className="mb-5 justify-start flex">
+                        三
+				</div>
+			</div>
+		</div>
+        {/* 轮播背景图 */}
+        <div className="w-200" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
+            <CarouselDemo />
+        </div>
+    </div>
+    )
+}

app/components/body/FireNews/fhyw.tsx

@@ -0,0 +1,21 @@
+
+
+import { CarouselDemo } from "@/components/Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhywPage() {
+    return(
+    <div className="relative w-full max-w-4xl mx-auto overflow-hidden aspect-square">
+        {/* 轮播背景图 */}
+        <div className="absolute inset-0 z-0">
+            <CarouselDemo />
+        </div>
+        
+        {/* 固定的烽火要闻 */}
+        <div className="absolute top-0 right-0 w-1/3 h-full p-1">
+            <FireNewsList />
+        </div>
+    </div>
+    )
+}

app/components/news/body/ImageGridSection.tsx

@@ -1,109 +1,102 @@
-import { CarouselDemo } from "@/components/Carousel";
+import { CarouselDemo } from '@/components/Carousel';
-const ImageGridSection = () => {
+import React from 'react';
-    
-    const elements = [
-        "/images/carousel-1.jpg",
-        <CarouselDemo />,
-        "/images/carousel-2.jpg",
-        "/images/carousel-3.jpg"
-    ];
-     {/* 最外 左右两列间 内边 内容最大宽 水平居 微软雅黑
-        2 列+ 2 行 格子间距 固定宽高
-        */} 
 
-    const listItems = [
+const LearnPage = () => {
-        '新闻标题一：重要政策发布',
+    const newsList = [
-        '新闻标题二：经济数据稳步回升',
+        '中华人民共和国监察法',
-        '新闻标题三：科技创新成果显著',
+        '2024年国办印发意见部门工作人员党听全国两...',
-        '新闻标题四：民生工程持续推进',
+        '十四届全国人大二次会议闭幕贺词',
-        '新闻标题五：国际交流合作深化'
+        '7天人代会："小片段"折射民主"大全景"',
+        '全国政协十四届二次会议共收到提案5800多件',
+        '两会观察丨从两会八个高频词看中国',
+        '两会"清单"上新这些民生发展温度',
+        '"选择中国"——世界从中国两会读出心动机号',
+        '中国经济信心说丨新玛合信心从哪里来',
     ];
+
     return (
-        <div style={{
+        <div className="w-4/5 mx-auto px-4 py-6">
-            display: 'flex',
+            {/* 顶部 Logo */}
-            gap: '24px',
+            <div className="flex justify-start mb-4">
-            padding: '20px',
+                <h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
-            maxWidth: '1200px',
+            </div>
-            margin: '0 auto',
-            fontFamily: 'Microsoft YaHei, sans-serif'
-        }}>
-        
-            {/* 左侧：3张图片 + 1个轮播图 2x2 网格 圆 防溢 拉伸填满
-            保持比例填充 消除底部空白*/}
-            <div style={{
-                display: 'grid',
-                gridTemplateColumns: '1fr 1fr',
-                gridTemplateRows: '1fr 1fr',
-                gap: '16px',
-                width: '600px',
-                height: '450px',
-                boxSizing: 'border-box'   // 确保padding和border不会增加元素的实际宽度和高度
-            }}>
 
-                {elements.map((element, index) => (
+            {/* 主内容区：固定高度，紧凑布局 */}
-                    <div
+            <div className="flex flex-col lg:flex-row gap-4 h-[740px]">
-                        key={index}
+                {/* 左侧图片区 */}
-                        style={{
+                <div className="lg:w-3/5 rounded-lg overflow-hidden">
-                            borderRadius: '8px',
+                    <div className="grid grid-cols-3 grid-rows-2 gap-3 h-full w-full">
-                            overflow: 'hidden',
+                        {/* 上左：第一张图 */}
-                            boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
+                        <div className="row-span-1 col-span-1 rounded-lg shadow-sm overflow-hidden">
-                            display: 'flex',
-                            alignItems: 'stretch' 
-                        }}
-                    >
-                        {typeof element === 'string' ? (
                             <img
-                                src={element}
+                                src="/images/carousel-1.jpg"
-                                alt={`图片 ${index + 1}`}
+                                alt="Image 1"
-                                style={{
+                                className="w-full h-full object-cover"
-                                    width: '100%',
-                                    height: '100%',
-                                    objectFit: 'cover',
-                                    display: 'block'
-                                }}
                             />
-                        ) : (
+                        </div>
-                            element //  占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布
+
-                            // 背景色、圆角、阴影、内边距 防撑大
+                        {/* 上右：轮播图 */}
-                        )}
+                        <div className="col-span-2 row-span-1 rounded-lg shadow-sm overflow-hidden">
+                            <CarouselDemo />
+                        </div>
+
+                        {/* 下三图 */}
+                        {[3, 4, 5].map((i) => (
+                            <div key={i} className="rounded-lg shadow-sm overflow-hidden">
+                                <img
+                                    src={`/images/carousel-${i}.jpg`}
+                                    alt={`Image ${i}`}
+                                    className="w-full h-full object-cover"
+                                />
+                            </div>
+                        ))}
                     </div>
-                ))}
+                </div>
-            </div>
+            
-            <div style={{
+
-                flex: 1,
+                {/* 右侧新闻列表 */}
-                minWidth: '300px',
+                <div className="lg:w-2/5 bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex items-center">
-                height: '450px', 
+                    <ul className="space-y-8 w-full">
-                display: 'flex',
+                        {newsList.map((item, index) => (
-                flexDirection: 'column',
+                            <li
-                justifyContent: 'space-between', 
+                                key={index}
-                background: '#f9f9f9',
+                                className="flex items-start text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group"
-                borderRadius: '8px',
+                            >
-                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                                <span className="text-red-500 mr-2 mt-0.5">•</span>
-                padding: '16px',
+                                <span className="group-hover:underline">{item}</span>
-                boxSizing: 'border-box'
+                            </li>
-            }}>
+                        ))}
-                <ul style={{
+                    </ul>
-                    listStyle: 'none',
+                </div>
-                    padding: 0,
+                </div>
-                    flexGrow: 1, 
+                <div className="w-[1514px] h-[285px]    flex relative">
-                    overflowY: 'auto' // 当 内 容超出时启用滚动条 填满剩余 文间
+				<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
-                }}>
+					<div
-                    {listItems.map((item, index) => (
+						className="w-[169px] h-[240px]  absolute left-0 bottom-0 bg-cover bg-center"
-                        <li
+						style={{ backgroundImage: 'url(/book1.png)' }}
-                            key={index}
+					></div>
-                            style={{
+					{/* 左边容器内容 */}
-                                marginBottom: '12px',
+					<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
-                                color: '#333',
+						<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight">
-                                fontSize: '16px'
+							习近平新时代中国特色社会
-                            }}
+							<br />
-                        >
+							主义思想专题数据库
-                            <span style={{ color: '#c00', marginRight: '8px' }}>•</span>
+						</p>
-                            {item}
+					</div>
-                        </li>
+				</div>
-                    ))}
+				<div className="w-[700px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
-                </ul>
+					<div
-            </div>
+						className="w-[140px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center "
+						style={{ backgroundImage: 'url(/book2.png)' }}
+					></div>
+					{/* 右边容器内容 */}
+					<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px] ">
+						<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
+					</div>
+				</div>			                        
+          </div>  
         </div>
     );
 };
-export default ImageGridSection;
+
+export default LearnPage;

app/routes/news.tsx

@@ -12,6 +12,7 @@ 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 [
     { title: "New React Router App" },