11200800

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/components/news/body/FireNews/fhyw.tsx

@@ -5,7 +5,7 @@ export function FhywPage() {
     return(
     <div className="relative w-350 h-225 mx-auto overflow-hidden bg-sky-700">
         {/* 轮播背景图 - 确保有明确尺寸 */}
-        <div className="absolute top-0 left-0 w-full h-200">
+        <div className="absolute top-0 left-0 w-full h-full">
             <CarouselDemo />
         </div>
         

app/components/news/body/ImageGridSection.tsx

@@ -15,7 +15,7 @@ const LearnPage = () => {
     ];
 
     return (
-        <div className="w-4/5 mx-auto px-4 py-6">
+        <div className="w-4/5 mx-auto px-4 py-6 mt-20 mb-20">
             {/* 顶部 Logo */}
             <div className="flex justify-start mb-4">
                 <h1 className="text-3xl font-bold text-red-600">学习进行时</h1>

app/routes/news.tsx

@@ -12,6 +12,8 @@ import { FhjtPage } from "@/components/news/body/FireNews/fhjt";
 import { FhwsPage } from "@/components/news/body/FireNews/fhws";
 import { FhrxPage } from "@/components/news/body/FireNews/fhrx";
 import { AutoCarouselDemo } from "@/components/AutoCarousel";
+import { Carousel } from "@/ui/carousel";
+import { CarouselDemo } from "@/components/Carousel";
 
 export function meta( ) {
   return [
@@ -39,6 +41,7 @@ export default function Home() {
         <AutoCarouselDemo />
         <CultureBgPage />
         <Integrated />
+        <CarouselDemo />
       </div>
     </div>
   );