Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news

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,7 +46,11 @@ 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,12 +24,11 @@ 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">
@@ -54,7 +53,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%',
                     }}
                     >
@@ -78,7 +77,6 @@ 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,12 +1,16 @@
 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 = [
         '新闻标题一：重要政策发布',
         '新闻标题二：经济数据稳步回升',
@@ -23,8 +27,9 @@ const ImageGridSection = () => {
             margin: '0 auto',
             fontFamily: 'Microsoft YaHei, sans-serif'
         }}>
-
+        
-            {/* 左侧：3张图片 + 1个轮播图 2x2 网格 */}
+            {/* 左侧：3张图片 + 1个轮播图 2x2 网格 圆 防溢 拉伸填满
+            保持比例填充 消除底部空白*/}
             <div style={{
                 display: 'grid',
                 gridTemplateColumns: '1fr 1fr',
@@ -32,9 +37,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}
@@ -43,7 +48,7 @@ const ImageGridSection = () => {
                             overflow: 'hidden',
                             boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
                             display: 'flex',
-                            alignItems: 'stretch' // 确保子元素拉伸填充容器
+                            alignItems: 'stretch' 
                         }}
                     >
                         {typeof element === 'string' ? (
@@ -58,7 +63,8 @@ const ImageGridSection = () => {
                                 }}
                             />
                         ) : (
-                            element // 如果是 React 元素，则直接渲染
+                            element //  占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布
+                            // 背景色、圆角、阴影、内边距 防撑大
                         )}
                     </div>
                 ))}
@@ -66,10 +72,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)',
@@ -79,8 +85,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

@@ -32,6 +32,7 @@ export default function Home() {
       <FhjtPage/>
       <FhwsPage/>
       <FhrxPage />  
+      <AutoCarouselDemo />
       <CultureBgPage />
       <AutoCarouselDemo />
       <Integrated />