1

app/components/Carousel.tsx

@@ -11,14 +11,25 @@ import {
   CarouselPrevious,
   type CarouselApi,
 } from "@/ui/carousel";
+<<<<<<< HEAD:app/components/untils/Carousel.tsx
 import FireNewsList from "./FireNewsList";
+=======
+  const imageUrls = [
+>>>>>>> 1d49f000efd9f3e6ac13da4e459b8e1e600c3335:app/components/Carousel.tsx
 
+  "/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 = 6; 
+  const totalSlides = imageUrls.length; 
 
   React.useEffect(() => {
     if (!api) return;
@@ -32,7 +43,7 @@ export function CarouselDemo() {
   }, [api]);
 
   return (
-    <div className="relative w-full max-w-4xl mx-auto">
+    <div className="relative w-full max-w-xs">
       <Carousel
         opts={{
           loop: true,
@@ -44,12 +55,14 @@ export function CarouselDemo() {
           }),
         ]}
         setApi={setApi}
+        className="w-full"
       >
-        <CarouselContent className="h-full w-full">
-          {Array.from({ length: totalSlides }).map((_, index) => (
-            <CarouselItem key={index} className="w-full h-full">
+        <CarouselContent>
+          {imageUrls.map((src, index) => (
+            <CarouselItem key={index}>
               <div className="p-1">
                 <Card>
+<<<<<<< HEAD:app/components/untils/Carousel.tsx
                   <CardContent className="flex aspect-square items-center justify-center ">
                     <div 
                     className="w-full h-full"
@@ -59,6 +72,14 @@ export function CarouselDemo() {
                     }}
                     >
                     </div>
+=======
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                     <img
+                      src={src}
+                      alt={`Slide ${index + 1}`}
+                      className="w-full h-full object-cover"
+                    />
+>>>>>>> 1d49f000efd9f3e6ac13da4e459b8e1e600c3335:app/components/Carousel.tsx
                   </CardContent>
                 </Card>
               </div>

app/components/body/ImageGridSection.tsx

@@ -0,0 +1,103 @@
+import { CarouselDemo } from "@/components/Carousel";
+const ImageGridSection = () => {
+    // 替换为你自己的图片路径
+    const elements = [
+        "/images/carousel-1.jpg",
+        <CarouselDemo />,
+        "/images/carousel-2.jpg",
+        "/images/carousel-3.jpg"
+    ];
+    const listItems = [
+        '新闻标题一：重要政策发布',
+        '新闻标题二：经济数据稳步回升',
+        '新闻标题三：科技创新成果显著',
+        '新闻标题四：民生工程持续推进',
+        '新闻标题五：国际交流合作深化'
+    ];
+    return (
+        <div style={{
+            display: 'flex',
+            gap: '24px',
+            padding: '20px',
+            maxWidth: '1200px',
+            margin: '0 auto',
+            fontFamily: 'Microsoft YaHei, sans-serif'
+        }}>
+
+            {/* 左侧：3张图片 + 1个轮播图 2x2 网格 */}
+            <div style={{
+                display: 'grid',
+                gridTemplateColumns: '1fr 1fr',
+                gridTemplateRows: '1fr 1fr',
+                gap: '16px',
+                width: '600px',
+                height: '450px',
+                border: '1px solid #ddd', // 可选，用于调试边界
+                boxSizing: 'border-box'   // 确保padding和border不会增加元素的实际宽度和高度
+            }}>
+                {elements.map((element, index) => (
+                    <div
+                        key={index}
+                        style={{
+                            borderRadius: '8px',
+                            overflow: 'hidden',
+                            boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
+                            display: 'flex',
+                            alignItems: 'stretch' // 确保子元素拉伸填充容器
+                        }}
+                    >
+                        {typeof element === 'string' ? (
+                            <img
+                                src={element}
+                                alt={`图片 ${index + 1}`}
+                                style={{
+                                    width: '100%',
+                                    height: '100%',
+                                    objectFit: 'cover',
+                                    display: 'block'
+                                }}
+                            />
+                        ) : (
+                            element // 如果是 React 元素，则直接渲染
+                        )}
+                    </div>
+                ))}
+            </div>
+            <div style={{
+                flex: 1,
+                minWidth: '300px',
+                height: '450px', // 设置与左侧相同的高度
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between', // 垂直方向均匀分布内容
+                background: '#f9f9f9',
+                borderRadius: '8px',
+                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                padding: '16px',
+                boxSizing: 'border-box'
+            }}>
+                <ul style={{
+                    listStyle: 'none',
+                    padding: 0,
+                    flexGrow: 1, // 让列表尽可能填满可用空间
+                    overflowY: 'auto' // 当内容超出时启用滚动条
+                }}>
+                    {listItems.map((item, index) => (
+                        <li
+                            key={index}
+                            style={{
+                                marginBottom: '12px',
+                                color: '#333',
+                                fontSize: '16px'
+                            }}
+                        >
+                            <span style={{ color: '#c00', marginRight: '8px' }}>•</span>
+                            {item}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    );
+};
+export default ImageGridSection;

app/components/list/NewsList.tsx

@@ -11,12 +11,13 @@ interface NewsProps {
 
 const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
   return (
-    <div>
-      <div onClick={() => url && window.open(url)} 
-      className="flex items-center justify-between  hover:text-blue-500 
-      cursor-pointer  w-96">
-        <h3 >{title}</h3>
-        <p >{time}</p>
+    <div className="mb-4">
+      <div
+        onClick={() => url && window.open(url)}
+        className="flex items-center justify-between hover:text-blue-600 cursor-pointer transition duration-300 ease-in-out"
+      >
+        <h3 className="text-lg font-semibold text-gray-800">{title}</h3>
+        <p className="text-sm text-gray-500">{time}</p>
       </div>
     </div>
   );
@@ -25,16 +26,40 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
 // 使用新闻数据渲染列表
 const NewsList: React.FC = () => {
   return (
-    <div>
-      <ul className="flex flex-col justify-center items-center h-screen">
-        {mockNewsData.map((news) => (
-          <NewsItem  title={news.title} time={news.time} url={news.url} />
+    <div className="bg-gray-100 p-6 rounded-lg shadow-md">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        {/* 科技新闻 */}
+        <div className="bg-white p-6 rounded-lg shadow-sm">
+          <div className="flex items-center justify-between mb-4">
+            <p className="text-xl font-bold text-gray-900">科技新闻</p>
+            <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300 ease-in-out">
+              更多科技新闻
+            </button>
+          </div>
+          <ul className="space-y-4">
+            {mockNewsData.map((news, index) => (
+              <NewsItem key={index} title={news.title} time={news.time} url={news.url} />
             ))}
           </ul>
         </div>
+
+        {/* 社会新闻 */}
+        <div className="bg-white p-6 rounded-lg shadow-sm">
+          <div className="flex items-center justify-between mb-4">
+            <p className="text-xl font-bold text-gray-900">社会新闻</p>
+            <button className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md transition duration-300 ease-in-out">
+              更多社会新闻
+            </button>
+          </div>
+          <ul className="space-y-4">
+            {mockNewsData.map((news, index) => (
+              <NewsItem key={index} title={news.title} time={news.time} url={news.url} />
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
   );
 };
 
-
-
 export default NewsList;

app/routes/news.tsx

@@ -1,10 +1,9 @@
-import { CarouselDemo } from "@/components/untils/Carousel";
+import { CarouselDemo } from "@/components/Carousel";
 import type { Route } from "./+types/news";
-import { Header } from "@/components/header/Header";
-import { TopNav } from "@/components/header/TopNav";
+import {Header} from "@/components/header/Header";
+import {TopNav} from "@/components/header/TopNav";
 import NewsList from "@/components/list/NewsList";
-
-
+import ImageGridSection from "@/components/body/ImageGridSection";
 export function meta( ) {
   return [
     { title: "New React Router App" },
@@ -17,8 +16,8 @@ export default function Home() {
     <div>
       <Header />
       <TopNav />
-      <CarouselDemo />
-      <NewsList/>
+      <NewsList />
+      <ImageGridSection />
     </div>
   );
 }