1

app/components/Carousel.tsx

@@ -11,21 +11,13 @@ import {
   type CarouselApi,
 } from "@/ui/carousel";
 import FireNewsList from "./FireNewsList";
-  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 CarouselDemo() {
   const [api, setApi] = React.useState<CarouselApi>();
   const [current, setCurrent] = React.useState(0);
   const [count, setCount] = React.useState(0);
 
-  const totalSlides = imageUrls.length; 
+  const totalSlides = 6; 
 
   React.useEffect(() => {
     if (!api) return;
@@ -39,7 +31,7 @@ export function CarouselDemo() {
   }, [api]);
 
   return (
-    <div className="relative w-full max-w-xs">
+    <div className="relative w-full max-w-4xl mx-auto">
       <Carousel
         opts={{
           loop: true,
@@ -51,19 +43,21 @@ export function CarouselDemo() {
           }),
         ]}
         setApi={setApi}
-        className="w-full"
       >
-        <CarouselContent>
+        <CarouselContent className="h-full w-full">
-          {imageUrls.map((src, index) => (
+          {Array.from({ length: totalSlides }).map((_, index) => (
-            <CarouselItem key={index}>
+            <CarouselItem key={index} className="w-full h-full">
               <div className="p-1">
                 <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <CardContent className="flex aspect-square items-center justify-center ">
-                     <img
+                    <div 
-                      src={src}
+                    className="w-full h-full"
-                      alt={`Slide ${index + 1}`}
+                    style={{
-                      className="w-full h-full object-cover"
+                      backgroundImage: "url('/app/images/header.png')",
-                    />
+                      backgroundSize: '100% 100%',
+                    }}
+                    >
+                    </div>
                   </CardContent>
                 </Card>
               </div>

app/components/header/Header.tsx

@@ -15,7 +15,7 @@ export function Header(){
 
     return (
         <div 
-            className="relative w-[1280px] h-[704px] bg-cover bg-center left-1/2 transform -translate-x-1/2"
+            className="relative w-full h-180 bg-cover bg-center left-1/2 transform -translate-x-1/2"
             style={{ backgroundImage: "url('/app/images/header.png')" }} 
         >
             {/* 时间显示  只显示日期: "2025/3/15"*/}

app/routes/news.tsx

@@ -1,11 +1,16 @@
-import { CarouselDemo } from "@/components/Carousel";
+
 import type { Route } from "./+types/news";
 import Integrated from "@/components/news/body/Integrated";
 import CultureBgPage from "@/components/news/body/Culturebg";
 import {Header} from "@/components/header/Header";
 import {TopNav} from "@/components/header/TopNav";
 import NewsList from "@/components/list/NewsList";
+<<<<<<< HEAD
+import ImageGridSection from "@/components/body/ImageGridSection";
+import { CarouselDemo } from "@/components/Carousel";
+=======
 import GrassrootsDynamics from "@/components/body/GrassrootsDynamics";
+>>>>>>> 858176d3dcd4442d093f13eeca279711b756adb8
 export function meta( ) {
   return [
     { title: "New React Router App" },
@@ -21,6 +26,12 @@ export default function Home() {
       <TopNav />
       <CarouselDemo />
       <NewsList />
+<<<<<<< HEAD
+      <ImageGridSection />
+      {/* <Integrated /> */}
+      <CultureBgPage />
+=======
+>>>>>>> 858176d3dcd4442d093f13eeca279711b756adb8
     </div>
   );
 }