app/components/AutoCarousel.tsx

@@ -23,19 +23,19 @@ const imageUrls = [
 export function AutoCarouselDemo() {
   return (
     <div className="relative w-full  mx-auto overflow-hidden">
-      {/* 相对定位 宽度100% 水平居中 隐藏溢出 */}
+      {/* 左右渐隐遮罩 */}
       <div className="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black/70 via-transparent pointer-events-none z-10" />
       <div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black/70 via-transparent pointer-events-none z-10" />
-      {/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */}
+
       <Carousel
         opts={{
-          loop: true,//循环
+          loop: true,
           align: "start",
         }}
         plugins={[
           Autoplay({
-            delay: 3000, // 自动播放
+            delay: 3000,
-            stopOnInteraction: false,//不因为鼠标交互停止
+            stopOnInteraction: false,
           }),
         ]}
         className="w-full"
@@ -46,11 +46,7 @@ export function AutoCarouselDemo() {
               key={index}
               className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
             >
-              {/* 基宽 中屏 大屏 防止收缩 相对定位 
+              {/* 悬停放大容器 */}
-              内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型
-              隐藏溢出 移除边框 中等阴影
-              弹性布局 正方形 垂直居中 水平居中 内边距0 相对
-              */}
               <div
                 className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
                 style={{

app/components/Carousel.tsx

@@ -1,12 +1,12 @@
 // src/components/CarouselDemo.tsx
 import * as React from "react";
-import Autoplay from "embla-carousel-autoplay";//实现轮播图的自动播放功能
+import Autoplay from "embla-carousel-autoplay";
 
 import { Card, CardContent } from "@/ui/card";
 import {
-  Carousel,//主体
+  Carousel,
-  CarouselContent,//内容容器
+  CarouselContent,
-  CarouselItem,//单个轮播项
+  CarouselItem,
   CarouselNext,
   CarouselPrevious,
   type CarouselApi,
@@ -24,11 +24,12 @@ export function CarouselDemo() {
     if (!api) return;
 
     setCount(api.scrollSnapList().length);
-    setCurrent(api.selectedScrollSnap());//获取当前选中的轮播项的索引
+    setCurrent(api.selectedScrollSnap());
+
     api.on("select", () => {
       setCurrent(api.selectedScrollSnap());
     });
-  }, [api]);//当api改变时，执行此函数 水平居中 循环 自动播放 回传状态
+  }, [api]);
 
   return (
     <div className="relative w-full max-w-4xl mx-auto">
@@ -53,7 +54,7 @@ export function CarouselDemo() {
                     <div 
                     className="w-full h-full"
                     style={{
-                      backgroundImage: "url('/app/images/header.png')",//背景图片可修改
+                      backgroundImage: "url('/app/images/header.png')",
                       backgroundSize: '100% 100%',
                     }}
                     >
@@ -77,6 +78,7 @@ export function CarouselDemo() {
             className={`h-2 w-2 rounded-full transition-colors ${
               index === current ? "bg-black" : "bg-black/50"
             }`}
+            aria-label={`Go to slide ${index + 1}`}
           />
         ))}
       </div>

app/components/body/ImageGridSection.tsx

@@ -1,16 +1,12 @@
 import { CarouselDemo } from "@/components/Carousel";
 const ImageGridSection = () => {
-    
+    // 替换为你自己的图片路径
     const elements = [
         "/images/carousel-1.jpg",
         <CarouselDemo />,
         "/images/carousel-2.jpg",
         "/images/carousel-3.jpg"
     ];
-     {/* 最外 左右两列间 内边 内容最大宽 水平居 微软雅黑
-        2 列+ 2 行 格子间距 固定宽高
-        */} 
-
     const listItems = [
         '新闻标题一：重要政策发布',
         '新闻标题二：经济数据稳步回升',
@@ -27,9 +23,8 @@ const ImageGridSection = () => {
             margin: '0 auto',
             fontFamily: 'Microsoft YaHei, sans-serif'
         }}>
-        
+
-            {/* 左侧：3张图片 + 1个轮播图 2x2 网格 圆 防溢 拉伸填满
+            {/* 左侧：3张图片 + 1个轮播图 2x2 网格 */}
-            保持比例填充 消除底部空白*/}
             <div style={{
                 display: 'grid',
                 gridTemplateColumns: '1fr 1fr',
@@ -37,9 +32,9 @@ const ImageGridSection = () => {
                 gap: '16px',
                 width: '600px',
                 height: '450px',
+                border: '1px solid #ddd', // 可选，用于调试边界
                 boxSizing: 'border-box'   // 确保padding和border不会增加元素的实际宽度和高度
             }}>
-
                 {elements.map((element, index) => (
                     <div
                         key={index}
@@ -48,7 +43,7 @@ const ImageGridSection = () => {
                             overflow: 'hidden',
                             boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
                             display: 'flex',
-                            alignItems: 'stretch' 
+                            alignItems: 'stretch' // 确保子元素拉伸填充容器
                         }}
                     >
                         {typeof element === 'string' ? (
@@ -63,8 +58,7 @@ const ImageGridSection = () => {
                                 }}
                             />
                         ) : (
-                            element //  占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布
+                            element // 如果是 React 元素，则直接渲染
-                            // 背景色、圆角、阴影、内边距 防撑大
                         )}
                     </div>
                 ))}
@@ -72,10 +66,10 @@ const ImageGridSection = () => {
             <div style={{
                 flex: 1,
                 minWidth: '300px',
-                height: '450px', 
+                height: '450px', // 设置与左侧相同的高度
                 display: 'flex',
                 flexDirection: 'column',
-                justifyContent: 'space-between', 
+                justifyContent: 'space-between', // 垂直方向均匀分布内容
                 background: '#f9f9f9',
                 borderRadius: '8px',
                 boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
@@ -85,8 +79,8 @@ const ImageGridSection = () => {
                 <ul style={{
                     listStyle: 'none',
                     padding: 0,
-                    flexGrow: 1, 
+                    flexGrow: 1, // 让列表尽可能填满可用空间
-                    overflowY: 'auto' // 当 内 容超出时启用滚动条 填满剩余 文间
+                    overflowY: 'auto' // 当内容超出时启用滚动条
                 }}>
                     {listItems.map((item, index) => (
                         <li

app/routes/news.tsx

@@ -11,7 +11,6 @@ import { FhywPage } from "@/components/FireNews/fhyw";
 import { FhjtPage } from "@/components/FireNews/fhjt";
 import { FhwsPage } from "@/components/FireNews/fhws";
 import { FhrxPage } from "@/components/FireNews/fhrx";
-import { AutoCarouselDemo } from "@/components/AutoCarousel";
 export function meta( ) {
   return [
     { title: "New React Router App" },
@@ -32,7 +31,6 @@ export default function Home() {
       <FhjtPage/>
       <FhwsPage/>
       <FhrxPage />  
-      <AutoCarouselDemo />
       <CultureBgPage />
       <Integrated />
     </div>