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

@@ -20,12 +20,19 @@ const imageUrls = [
   "/images/carousel-6.jpg",
 ];
 
-export function CarouselDemo() {
+export interface CarouselDemoProps {
+  paginationPosition?: 'left' | 'right'; // 默认右下角
+  paginationStyle?: 'dot' | 'bar';       // 默认圆形
+}
+
+export function CarouselDemo({
+  paginationPosition = 'right',
+  paginationStyle = 'dot',
+}: CarouselDemoProps) {
   const [api, setApi] = React.useState<CarouselApi>();
   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;
@@ -52,18 +59,16 @@ export function CarouselDemo() {
         className="w-full h-full"
       >
         <CarouselContent className="h-full w-full -ml-0">
-          {Array.from({ length: totalSlides }).map((_, index) => (
+          {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 className="flex items-center justify-center p-0 w-full h-full m-0">
-                  <div 
+                  <img
-                    className="w-full h-full"
+                    src={src}
-                    style={{
+                    alt={`Slide ${index + 1}`}
-                      backgroundImage: "url('/public/images/header.png')",//背景图片可修改
+                    className="w-full h-full object-cover"
-                      backgroundSize: '100% 100%',
+                    loading="lazy"
-                    }}
+                  />
-                  >
-                  </div>
                 </CardContent>
               </div>
             </CarouselItem>
@@ -73,15 +78,21 @@ export function CarouselDemo() {
         <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'
+        } flex gap-2 z-10`}
+      >
         {Array.from({ length: count }).map((_, index) => (
           <button
             key={index}
             onClick={() => api?.scrollTo(index)}
             className={`transition-colors ${
-              isDotPagination ? "h-2 w-2 rounded-full" : "h-2 w-8 rounded"
+              paginationStyle === 'dot'
-            } ${index === current ? "bg-white" : "bg-white/50"}`}
+                ? '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/routes/news.tsx

@@ -40,6 +40,7 @@ export default function Home() {
         <AutoCarouselDemo />
         <CultureBgPage />
         <Integrated />
+        <CarouselDemo />
       </div>
       <Footer />
     </div>