From 932b3925f3dfe988ed6754097a9de48ac28fe408 Mon Sep 17 00:00:00 2001 From: qiuchenfan <2035024011@qq.com> Date: Wed, 19 Nov 2025 16:30:50 +0800 Subject: [PATCH] 11191630 --- app/components/AutoCarousel.tsx | 117 +++++++++++------- app/components/Carousel.tsx | 22 ++-- app/components/body/AutoCarousel.tsx | 82 ------------ app/components/body/FireNews/FireNewsList.tsx | 63 ---------- app/components/body/FireNews/fhjt.tsx | 39 ------ app/components/body/FireNews/fhrx.tsx | 39 ------ app/components/body/FireNews/fhws.tsx | 38 ------ app/components/body/FireNews/fhyw.tsx | 21 ---- public/images/carousel-7.jpg | Bin 0 -> 85074 bytes public/images/carousel-8.jpg | Bin 0 -> 32508 bytes public/images/carousel-9.jpg | Bin 0 -> 292348 bytes 11 files changed, 80 insertions(+), 341 deletions(-) delete mode 100644 app/components/body/AutoCarousel.tsx delete mode 100644 app/components/body/FireNews/FireNewsList.tsx delete mode 100644 app/components/body/FireNews/fhjt.tsx delete mode 100644 app/components/body/FireNews/fhrx.tsx delete mode 100644 app/components/body/FireNews/fhws.tsx delete mode 100644 app/components/body/FireNews/fhyw.tsx create mode 100644 public/images/carousel-7.jpg create mode 100644 public/images/carousel-8.jpg create mode 100644 public/images/carousel-9.jpg diff --git a/app/components/AutoCarousel.tsx b/app/components/AutoCarousel.tsx index 01a32b1..0ab7c5f 100644 --- a/app/components/AutoCarousel.tsx +++ b/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(); + 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 ( -
- {/* 相对定位 宽度100% 水平居中 隐藏溢出 */} -
-
- {/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */} + // 最外层：允许内容溢出（关键！） +
- - {imageUrls.map((src, index) => ( - - {/* 基宽 中屏 大屏 防止收缩 相对定位 - 内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型 - 隐藏溢出 移除边框 中等阴影 - 弹性布局 正方形 垂直居中 水平居中 内边距0 相对 - */} -
+ {imageUrls.map((src, index) => { + const scale = getScaleByDistance(index, current, totalSlides); + const isCurrent = scale > 1.2; + + return ( + - - - {`Slide - - -
- - ))} + {/* 这个 div 是真正要缩放的整体卡片 */} +
+ {`Slide +
+ + ); + })} - {/* 左右箭头控制 */} - - + +
); diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx index ee00eb0..95212db 100755 --- a/app/components/Carousel.tsx +++ b/app/components/Carousel.tsx @@ -24,7 +24,9 @@ export function CarouselDemo() { const [api, setApi] = React.useState(); 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) => (
- - -
+
-
- - + > +
+
))} @@ -79,9 +79,9 @@ export function CarouselDemo() {