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

app/components/AutoCarousel.tsx

@@ -1,14 +1,12 @@
 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";
+} from "@/ui/carousel"; // 注意这里也移除了未使用的导入
 
 const imageUrls = [
   "/images/carousel-1.jpg",
@@ -17,86 +15,58 @@ 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 px-4 py-12 overflow-visible">
-      <Carousel
-        opts={{ loop: true, align: "center" }}
-        plugins={[
-          Autoplay({ delay: 3000, stopOnInteraction: false }),
-        ]}
-        setApi={setApi}
-        className="w-full"
-        // ⚠️ 关键：覆盖 Embla 默认的 overflow:hidden
-        style={{ overflow: 'visible' }}
-      >
-        {/* 内容区域也要 visible */}
-        <CarouselContent className="py-6" style={{ overflow: 'visible' }}>
-          {imageUrls.map((src, index) => {
-            const scale = getScaleByDistance(index, current, totalSlides);
-            const isCurrent = scale > 1.2;
+    <div className="relative w-full mx-auto">
 
-            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' }}
+      
+      <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"
+            >
+              <div
+                className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
+                style={{
+                  transform: 'scale(1)',
+                  transition: 'all 0.5s ease',
+                }}
               >
-                {/* 这个 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 className="overflow-hidden border-none shadow-lg h-120">
+                  <CardContent className="relative w-full h-full">
+                    <img
+                      src={src}
+                      alt={`Slide ${index + 1}`}
+                      className="w-full h-full object-cover"
+                      loading="lazy"
+                    />
+                  </CardContent>
                 </div>
-              </CarouselItem>
-            );
-          })}
+              </div>
+            </CarouselItem>
+          ))}
         </CarouselContent>
 
-        <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/news/list/NewsList.tsx

@@ -28,7 +28,7 @@ const NewsList: React.FC = () => {
   const educationNews = mockNewsData.filter((news) => news.type === "教育");
 
   return (
-    <div className=" p-8 rounded-2xl  w-4/5 mx-auto">
+    <div className=" p-18  rounded-2xl  w-4/5 mx-auto">
       {/* 使用 Flexbox 将两个列表放在一行 */}
       <div className="flex gap-8">
         {/* 科技新闻 */}