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

app/components/AutoCarousel.tsx

@@ -6,7 +6,7 @@ import {
   Carousel,
   CarouselContent,
   CarouselItem,
-} from "@/ui/carousel"; // 注意这里也移除了未使用的导入
+} from "@/ui/carousel"; 
 
 const imageUrls = [
   "/images/carousel-1.jpg",
@@ -22,7 +22,7 @@ const imageUrls = [
 
 export function AutoCarouselDemo() {
   return (
-    <div className="relative w-full mx-auto">
+    <div className="relative w-full mx-auto mt-30 mb-20">
 
       
       <Carousel
@@ -51,7 +51,7 @@ export function AutoCarouselDemo() {
                   transition: 'all 0.5s ease',
                 }}
               >
-                <div className="overflow-hidden border-none shadow-lg h-120">
+                <div className="overflow-hidden border-none  h-120">
                   <CardContent className="relative w-full h-full">
                     <img
                       src={src}

app/components/Carousel.tsx

@@ -1,16 +1,23 @@
+// 引入 React 核心库
 import * as React from "react";
+
+// 引入 Embla Carousel 的自动播放插件
 import Autoplay from "embla-carousel-autoplay";
 
+// 引入自定义 UI 组件：Card 和 CardContent（通常用于内容容器）
 import { Card, CardContent } from "@/ui/card";
+
+// 引入自定义轮播组件及其子组件和类型定义
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-  type CarouselApi,
+  type CarouselApi, // Embla 轮播实例的类型定义
 } from "@/ui/carousel";
 
+// 定义轮播图使用的图片资源路径数组
 const imageUrls = [
   "/images/carousel-1.jpg",
   "/images/carousel-2.jpg",
@@ -20,69 +27,122 @@ const imageUrls = [
   "/images/carousel-6.jpg",
 ];
 
-export function CarouselDemo() {
+// 定义组件接收的 props 接口，提供类型安全
+export interface CarouselDemoProps {
+  // 分页指示器位置：'left' 表示左下角，'right' 表示右下角，默认为 'right'
+  paginationPosition?: 'left' | 'right';
+  
+  // 分页指示器样式：'dot' 为圆形小点，'bar' 为横向小条，默认为 'dot'
+  paginationStyle?: 'dot' | 'bar';
+}
+
+// 导出 CarouselDemo 组件，接收两个可选 props，并设置默认值
+export function CarouselDemo({
+  paginationPosition = 'right', // 默认右下角
+  paginationStyle = 'dot',      // 默认圆形指示器
+}: CarouselDemoProps) {
+  // 存储 Embla 轮播实例的引用，用于控制滚动等操作
   const [api, setApi] = React.useState<CarouselApi>();
+
+  // 当前激活的幻灯片索引（从 0 开始）
   const [current, setCurrent] = React.useState(0);
+
+  // 总共的幻灯片数量（由 Embla API 动态获取）
   const [count, setCount] = React.useState(0);
+
+  // 图片总数（用于渲染轮播项）
   const totalSlides = imageUrls.length;
-  const [isDotPagination, setIsDotPagination] = React.useState(true); // 控制分页指示器类型
 
+  // 副作用：监听 api 变化，初始化轮播状态并绑定 select 事件
   React.useEffect(() => {
-    if (!api) return;
+    if (!api) return; // 如果 api 尚未就绪，直接返回
 
+    // 获取所有 snap 点的数量（即幻灯片总数）
     setCount(api.scrollSnapList().length);
+
+    // 设置当前选中的 snap 索引
     setCurrent(api.selectedScrollSnap());
 
+    // 监听轮播切换事件（用户手动滑动或自动播放时触发）
     api.on("select", () => {
-      setCurrent(api.selectedScrollSnap());
+      setCurrent(api.selectedScrollSnap()); // 更新当前激活项
     });
-  }, [api]);
+  }, [api]); // 仅当 api 发生变化时重新执行
 
+  // 渲染组件
   return (
+    // 外层容器：相对定位，占满父容器宽高
     <div className="relative w-full h-full">
+      
+      {/* 轮播主容器 */}
       <Carousel
-        opts={{ loop: true }}
+        opts={{
+          loop: true, // 启用循环播放（最后一张后回到第一张）
+        }}
         plugins={[
+          // 配置自动播放插件：每 3 秒切换一次，且用户交互时不暂停
           Autoplay({
             delay: 3000,
             stopOnInteraction: false,
           }),
         ]}
-        setApi={setApi}
+        setApi={setApi} // 将 Embla 实例保存到 state 中
-        className="w-full h-full"
+        className="w-full h-full" // 占满容器
       >
+        {/* 轮播内容区域 */}
         <CarouselContent className="h-full w-full -ml-0">
-          {Array.from({ length: totalSlides }).map((_, index) => (
+          {/* 遍历图片数组，为每张图创建一个轮播项 */}
-            <CarouselItem key={index} className="w-full h-full pl-0">
+          {imageUrls.map((src, index) => (
+            <CarouselItem
+              key={index}
+              className="w-full h-full pl-0" // 移除默认内边距
+            >
+              {/* 内部包裹层：无内边距，占满 */}
               <div className="p-0 w-full h-full">
-                <CardContent className="flex aspect-square items-center justify-center p-0 w-full h-full m-0">
+                {/* 使用 CardContent 包裹图片，移除默认间距 */}
-                  <div 
+                <CardContent className="flex items-center justify-center p-0 w-full h-full m-0">
-                    className="w-full h-full"
+                  {/* 图片元素：自动填充容器，保持比例裁剪 */}
-                    style={{
+                  <img
-                      backgroundImage: "url('/public/images/header.png')",//背景图片可修改
+                    src={src}
-                      backgroundSize: '100% 100%',
+                    alt={`Slide ${index + 1}`} // 无障碍访问描述
-                    }}
+                    className="w-full h-full object-fill" // 关键：使图片覆盖整个区域
-                  >
+                    loading="lazy" // 懒加载优化性能
-                  </div>
+                  />
                 </CardContent>
               </div>
             </CarouselItem>
           ))}
         </CarouselContent>
-        <CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-10" />
+
-        <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-10" />
+        {/* 上一张按钮（左箭头） */}
+        {/* <CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-10" /> */}
+
+        {/* 下一张按钮（右箭头） */}
+        {/* <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">
+      <div
+        className={`absolute bottom-4 ${
+          paginationPosition === 'left' ? 'left-4' : 'right-4' // 根据 prop 控制左右位置
+        } flex gap-2 z-10`} // 水平排列，间距 0.5rem，置于轮播图上方
+      >
+        {/* 动态生成指示器按钮 */}
         {Array.from({ length: count }).map((_, index) => (
           <button
             key={index}
-            onClick={() => api?.scrollTo(index)}
+            onClick={() => api?.scrollTo(index)} // 点击跳转到对应幻灯片
             className={`transition-colors ${
-              isDotPagination ? "h-2 w-2 rounded-full" : "h-2 w-8 rounded"
+              // 根据 paginationStyle 决定形状
-            } ${index === current ? "bg-white" : "bg-white/50"}`}
+              paginationStyle === 'dot'
-            aria-label={`Go to slide ${index + 1}`}
+                ? 'h-2 w-2 rounded-full'   // 圆形：宽高相等 + 全圆角
+                : 'h-2 w-8 rounded'         // 块状：宽 2rem，高 0.5rem，带圆角
+            } ${
+              index === current 
+                ? 'bg-white'       // 当前项为纯白色
+                : 'bg-white/50'    // 非当前项为半透明白色
+            }`}
+            aria-label={`Go to slide ${index + 1}`} // 无障碍支持
           />
         ))}
       </div>

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

@@ -7,8 +7,11 @@ export function Hotline() {
     <div className=" w-5/6 overflow-hidden flex justify-center h-148 mb-10 mx-auto">
         <div className="relative left-0 top-0 w-full h-full">
 			{/* 轮播背景图 */}
-			<div className="w-full absolute"  style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
+			<div className="w-full h-full absolute"  style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
-				<CarouselDemo />
+				<CarouselDemo 
+						paginationPosition="left"
+						paginationStyle="dot"
+				/>
 			</div>
 			<div className='top-0 right-0 bg-white h-full'></div>
 		</div>

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

@@ -33,8 +33,11 @@ export function ImportantNews() {
     return(
     <div className="relative w-5/6 h-225 mx-auto overflow-hidden ">
         {/* 轮播背景图 - 确保有明确尺寸 */}
-        <div className="absolute top-0 left-0 w-full h-225">
+        <div className="absolute top-0 left-0 w-full h-full">
-            <CarouselPreset slides={slides}  showControls={false}  autoplayDelay={2000}/> 
+            <CarouselDemo 
+                paginationPosition="left"
+                paginationStyle="dot"
+            />
         </div>
         
         {/* 固定的烽火要闻 */}

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

@@ -7,8 +7,11 @@ export function LectureHall() {
     <div className="w-5/6 overflow-hidden flex justify-center h-148 mb-10 mx-auto">
         <div className="relative left-0 top-0 w-full h-full">
 			{/* 轮播背景图 */}
-			<div className="w-full absolute"  style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
+			<div className="w-full h-full absolute"  style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
-				<CarouselDemo />
+				<CarouselDemo 
+						paginationPosition="left"
+						paginationStyle="dot"
+				/>
 			</div>
 			<div className='top-0 right-0 bg-white h-full'></div>
 		</div>

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

@@ -30,8 +30,11 @@ export function MicroVision() {
 		</div>
         <div className="relative w-full h-full">
 			{/* 轮播背景图 */}
-			<div className="w-full absolute" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
+			<div className="w-full h-full absolute" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
-				<CarouselDemo />
+				<CarouselDemo 
+						paginationPosition="right"
+						paginationStyle="dot"
+				/>
 			</div>
 			<div className='w-full bg-white h-full'></div>
 		</div>

app/components/news/body/ImageGridSection.tsx

@@ -38,7 +38,10 @@ const LearnPage = () => {
 
                         {/* 上右：轮播图 */}
                         <div className="col-span-2 row-span-1 rounded-lg shadow-sm overflow-hidden">
-                            <CarouselDemo />
+                            <CarouselDemo 
+                                paginationPosition="right"
+                                paginationStyle="bar"
+                            />
                         </div>
 
                         {/* 下三图 */}
@@ -98,7 +101,7 @@ const LearnPage = () => {
           </div>  
         </div>
         <div className='flex'>
-            <div className='w-5/6 bg-[#0082e9] h-20' 
+            <div className='w-4/5 bg-[#0082e9] h-20' 
                 style={{clipPath: 'polygon(0 0, calc(100% - 150px) 0%, calc(100% - 20px) 100%, 0% 100%)'}}
             ></div>
             <div className='items-center justify-center flex font-bold text-sky-900 text-5xl'>烽火动态</div>

app/components/news/footer/footer.tsx

@@ -1,11 +1,51 @@
-export function Footer() {
+import React from 'react';
+
+const Footer: React.FC = () => {
     return (
-        <div className='w-full h-190 bg-[#0082e9] flex items-center justify-center'
+        <div
-            style={{backgroundImage: "url('/public/images/carousel-4.jpg')"}}
+            className=" flex flex-col items-center justify-center relative bottom-0 overflow-y-auto overflow-x-auto left-1/2 transform -translate-x-1/2 w-[1920px] h-[758px] bg-cover bg-center"
+            style={{ backgroundImage: `url('/images/footer.png')` }}
         >
-            <div className='text-white text-2xl'>
+            {/* 主标题 */}
-                春风拂面花开满园心情愉悦
+            <div className="mb-8 mt-15">
+                <p className=" tracking-widest text-4xl text-white" >
+                    春风拂面花开满园心OO情愉悦
+                </p>
+            </div>
+
+            {/* 版权声明 */}
+            <div className="mb-8 text-center space-y-2 ">
+                <p className="text-sm opacity-80 text-[#818da3]">
+                    免责声明：免责条款的提出必须是明示的，不允许以默示方式作出，也不允许法官推定免责条款的存在。
+                </p>
+                <p className="text-sm opacity-80 mt-5 text-[#818da3]">
+                    版权所有：Copyright©2016-2019 包图网ibaotu.com 版权所有
+                </p>
+            </div>
+
+            {/* 导航链接 */}
+            <div className="flex space-x-12 mt-5">
+                <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
+                    首页
+                </a>
+                <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
+                    关于我们
+                </a>
+                <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
+                    新闻中心
+                </a>
+                <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
+                    政务公开
+                </a>
+                <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]" >
+                    交流互动
+                </a>
+                <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
+                    便民服务
+                </a>
             </div>
         </div>
-    )
+    );
-}
+};
+
+export default Footer;

app/routes/news.tsx

@@ -12,7 +12,8 @@ import { LectureHall } from "@/components/news/body/FireNews/LectureHall";
 import { MicroVision } from "@/components/news/body/FireNews/MicroVision";
 import { Hotline } from "@/components/news/body/FireNews/Hotline";
 import { AutoCarouselDemo } from "@/components/AutoCarousel";
-import { Footer } from "@/components/news/footer/footer";
+import  Footer  from "@/components/news/footer/footer";
+import { CarouselDemo } from "@/components/Carousel";
 
 export function meta( ) {
   return [