11191630

app/components/AutoCarousel.tsx

@@ -1,14 +1,13 @@
-// 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,
+  type CarouselApi,
 } from "@/ui/carousel";
 
 const imageUrls = [
@@ -18,64 +17,86 @@ const imageUrls = [
   "/images/carousel-4.jpg",
   "/images/carousel-5.jpg",
   "/images/carousel-6.jpg",
+  "/images/carousel-7.jpg",
+  "/images/carousel-8.jpg",
+  "/images/carousel-9.jpg",
+  "/images/book1.png",
+  "/images/header.png",
+  "/images/jcdt.png",
 ];
 
 export function AutoCarouselDemo() {
+  const [api, setApi] = React.useState<CarouselApi>();
+  const [current, setCurrent] = React.useState(0);
+  const totalSlides = imageUrls.length;
+
+  React.useEffect(() => {
+    if (!api) return;
+    setCurrent(api.selectedScrollSnap());
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  const getScaleByDistance = (index: number, current: number, total: number): number => {
+    const directDist = Math.abs(index - current);
+    const wrapDist = total - directDist;
+    const minDist = Math.min(directDist, wrapDist);
+    return Math.max(0.5, 1.4 - minDist * 0.15);
+  };
+
   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%到透明 */}
+    // 最外层：允许内容溢出（关键！）
+    <div className="relative w-full mx-auto px-4 py-12 overflow-visible">
       <Carousel
-        opts={{
-          loop: true,//循环
-          align: "start",
-        }}
+        opts={{ loop: true, align: "center" }}
         plugins={[
-          Autoplay({
-            delay: 3000, // 自动播放
-            stopOnInteraction: false,//不因为鼠标交互停止
-          }),
+          Autoplay({ delay: 3000, stopOnInteraction: false }),
         ]}
+        setApi={setApi}
         className="w-full"
+        // ⚠️ 关键：覆盖 Embla 默认的 overflow:hidden
+        style={{ overflow: 'visible' }}
       >
-        <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',
-                }}
+        {/* 内容区域也要 visible */}
+        <CarouselContent className="py-6" style={{ overflow: 'visible' }}>
+          {imageUrls.map((src, index) => {
+            const scale = getScaleByDistance(index, current, totalSlides);
+            const isCurrent = scale > 1.2;
+
+            return (
+              <CarouselItem
+                key={index}
+                // 设置基础宽度比例，但不设高度
+                className="basis-1/3 sm:basis-1/4 md:basis-1/5 flex-shrink-0 flex justify-center"
+                // ⚠️ 关键：这里不加 transform！而是让子元素控制
+                style={{ overflow: 'visible' }}
               >
-                <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>
-          ))}
+                {/* 这个 div 是真正要缩放的整体卡片 */}
+                <div
+                  className="rounded-xl shadow-xl bg-white transition-all duration-300 ease-out w-full max-w-[180px]"
+                  style={{
+                    height: '240px', // 固定高宽比替代方案（更稳定）
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'center bottom',
+                    zIndex: isCurrent ? 20 : 1,
+                    willChange: 'transform',
+                  }}
+                >
+                  <img
+                    src={src}
+                    alt={`Slide ${index + 1}`}
+                    className="w-full h-full object-cover rounded-xl"
+                    loading="lazy"
+                  />
+                </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" />
+        <CarouselPrevious className="absolute left-0 top-1/2 -translate-y-1/2 z-30" />
+        <CarouselNext className="absolute right-0 top-1/2 -translate-y-1/2 z-30" />
       </Carousel>
     </div>
   );

app/components/Carousel.tsx

@@ -25,6 +25,8 @@ export function CarouselDemo() {
   const [current, setCurrent] = React.useState(0);
   const [count, setCount] = React.useState(0);
   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">
-                    <div 
+                <CardContent className="flex aspect-square items-center justify-center p-0 w-full h-full m-0">
+                  <div 
                     className="w-full h-full"
                     style={{
                       backgroundImage: "url('/public/images/header.png')",//背景图片可修改
                       backgroundSize: '100% 100%',
                     }}
-                    >
-                    </div>
-                  </CardContent>
-
+                  >
+                  </div>
+                </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 ${
-              index === current ? "bg-white" : "bg-white/50"
-            }`}
+            className={`transition-colors ${
+              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>
-    )
-}