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

app/components/AutoCarousel.tsx

@@ -1,4 +1,3 @@
-// src/components/CarouselDemo.tsx
 import * as React from "react";
 import Autoplay from "embla-carousel-autoplay";
 
@@ -7,9 +6,7 @@ import {
   Carousel,
   CarouselContent,
   CarouselItem,
-  CarouselNext,
+} from "@/ui/carousel"; // 注意这里也移除了未使用的导入
-  CarouselPrevious,
-} from "@/ui/carousel";
 
 const imageUrls = [
   "/images/carousel-1.jpg",
@@ -18,24 +15,25 @@ const imageUrls = [
   "/images/carousel-4.jpg",
   "/images/carousel-5.jpg",
   "/images/carousel-6.jpg",
+  "/images/book1.png",
+  "/images/header.png",
+  "/images/jcdt.png",
 ];
 
 export function AutoCarouselDemo() {
   return (
-    <div className="relative w-full  mx-auto overflow-hidden">
+    <div className="relative w-full mx-auto">
-      {/* 相对定位 宽度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,//循环
+          loop: true,
           align: "start",
         }}
         plugins={[
           Autoplay({
-            delay: 3000, // 自动播放
+            delay: 3000,
-            stopOnInteraction: false,//不因为鼠标交互停止
+            stopOnInteraction: false,
           }),
         ]}
         className="w-full"
@@ -46,11 +44,6 @@ export function AutoCarouselDemo() {
               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={{
@@ -58,24 +51,22 @@ export function AutoCarouselDemo() {
                   transition: 'all 0.5s ease',
                 }}
               >
-                <Card className="overflow-hidden border-none shadow-lg">
+                <div className="overflow-hidden border-none shadow-lg h-120">
-                  <CardContent className="flex aspect-square items-center justify-center p-0 relative">
+                  <CardContent className="relative w-full h-full">
                     <img
                       src={src}
                       alt={`Slide ${index + 1}`}
                       className="w-full h-full object-cover"
-                      loading="lazy" // 启用懒加载
+                      loading="lazy"
                     />
                   </CardContent>
-                </Card>
+                </div>
               </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/Carousel.tsx

@@ -24,7 +24,9 @@ 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 = imageUrls.length;
+  const [isDotPagination, setIsDotPagination] = React.useState(true); // 控制分页指示器类型
+
   React.useEffect(() => {
     if (!api) return;
 
@@ -53,18 +55,16 @@ export function CarouselDemo() {
           {Array.from({ length: totalSlides }).map((_, 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 className="flex aspect-square items-center justify-center p-0 w-full h-full m-0">
+                  <div 
-                    <div 
                     className="w-full h-full"
                     style={{
                       backgroundImage: "url('/public/images/header.png')",//背景图片可修改
                       backgroundSize: '100% 100%',
                     }}
-                    >
+                  >
-                    </div>
+                  </div>
-                  </CardContent>
+                </CardContent>
-
               </div>
             </CarouselItem>
           ))}
@@ -79,9 +79,9 @@ export function CarouselDemo() {
           <button
             key={index}
             onClick={() => api?.scrollTo(index)}
-            className={`h-2 w-2 rounded-full transition-colors ${
+            className={`transition-colors ${
-              index === current ? "bg-white" : "bg-white/50"
+              isDotPagination ? "h-2 w-2 rounded-full" : "h-2 w-8 rounded"
-            }`}
+            } ${index === current ? "bg-white" : "bg-white/50"}`}
             aria-label={`Go to slide ${index + 1}`}
           />
         ))}

app/components/body/AutoCarousel.tsx

@@ -1,82 +0,0 @@
-// 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

@@ -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/body/FireNews/fhjt.tsx

@@ -1,39 +0,0 @@
-
-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

@@ -1,39 +0,0 @@
-
-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

@@ -1,38 +0,0 @@
-
-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

@@ -1,21 +0,0 @@
-
-
-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>
-    )
-}