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"
    ];
    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;