news/app/components/body/ImageGridSection.tsx

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 = [
        '新闻标题一：重要政策发布',
        '新闻标题二：经济数据稳步回升',
        '新闻标题三：科技创新成果显著',
        '新闻标题四：民生工程持续推进',
        '新闻标题五：国际交流合作深化'
    ];
    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',
                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 //  占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布
                            // 背景色、圆角、阴影、内边距 防撑大
                        )}
                    </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;