news/app/components/news/body/ImageGridSection.tsx

import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
import React from 'react';

interface NewsItem {
    id:string;
    content:string;
    url:string;
}

// LearnPage 组件定义
const LearnPage = () => {
    // 新闻列表数据，用于显示在右侧新闻列表区
    const newsList:NewsItem[] = [
        {
            id:'1',
            content:'中华人民共和国监察法',
            url:'https://www.baidu.com',
        },
        {
            id:'2',
            content:'2024年国办印发意见部门工作人员党听全国两...',
            url:'https://www.baidu.com',
        },
        {
            id:'3',
            content:'十四届全国人大二次会议闭幕贺词',
            url:'https://www.baidu.com',
        },
        {
            id:'4',
            content:'7天人代会："小片段"折射民主"大全景"',
            url:'https://www.baidu.com',
        },
        {
            id:'5',
            content:'全国政协十四届二次会议共收到提案5800多件',
            url:'https://www.baidu.com',    
        },
        {
            id:'6',
            content:'两会观察丨从两会八个高频词看中国',
            url:'https://www.baidu.com',    
        },
        {
            id:'7',
            content:'两会"清单"上新这些民生发展温度',
            url:'https://www.baidu.com',
        },
        {
            id:'8',
            content:'"选择中国"——世界从中国两会读出心动机号',
            url:'https://www.baidu.com',
        },
        {
            id:'9',
            content:'中国经济信心说丨新玛合信心从哪里来',
            url:'https://www.baidu.com',
        },
    ];
    {/* 弹性 默认纵向 大屏横向  */}
    return (
        <div>
            {/* 页面主容器，宽度为页面的5/6，并且水平居中 */}
            <div className="w-5/6 mx-auto ">
                {/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */}
                <div className="w-70 h-20 bg-cover bg-no-repeat mb-5" style={{ backgroundImage: "url('images/learn.png')" }}></div>
                
                <div className="flex flex-col lg:flex-row h-[740px]">
                    {/* 左侧图片区：占据屏幕3/5的宽度 */}
                    <div className="lg:w-3/5 overflow-hidden">
                        {/* 使用grid布局来安排图片的位置 */}
                        <div className="grid grid-cols-3 grid-rows-2 h-full w-full">
                            {/* 上左第一张图 */}
                            <div className="row-span-1 col-span-1 shadow-sm overflow-hidden">
                                <img src="/images/carousel-1.jpg" alt="Image 1" className="w-full h-full object-cover" />
                            </div>

                            {/* 上右轮播图 */}
                            <div className="col-span-2 row-span-1 shadow-sm overflow-hidden">
                                <CarouselDemo paginationPosition="right" paginationStyle="bar" />
                            </div>

                            {/* 下三图：动态渲染 */}
                            {[3, 4, 6].map((i) => (
                                <div key={i} className="shadow-sm overflow-hidden">
                                    <img src={`/images/carousel-${i}.jpg`} alt={`Image ${i}`} className="w-full h-full object-cover" />
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* 右侧新闻列表：占据屏幕剩余2/5的宽度 */}
                    <div className="lg:w-2/5 bg-white border border-gray-200 shadow-sm p-8 flex items-center">
                        <ul className="space-y-8 w-full">
                            {newsList.map((item) => (
                                <li key={item.id} className="flex items-center text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group">
                                    <span className="text-red-500 mr-2 mt-0.5">•</span>
                                    <span onClick={()=>window.open(item.url, '_blank')}>{item.content}</span>
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>

                {/* 底部两个特色区域，分别展示书籍信息 */}
                <div className="w-[1590px] h-[285px] flex relative mb-10">
                    {/* 左边书籍区域 */}
                    <div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
                        <div className="w-[140px] h-[220px] absolute left-4 bottom-3 bg-cover bg-center" style={{ backgroundImage: "url('/public/images/book1.png')" }}></div>
                        {/* 左边容器内的文本内容 */}
                        <div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
                            <p className="text-[#005d93] text-[32px] font-bold text-center leading-tight">
                                习近平新时代中国特色社会主义思想专题数据库
                            </p>
                        </div>
                    </div>

                    {/* 右边书籍区域 */}
                    <div className="w-[750px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
                        <div className="w-[150px] h-[240px] absolute left-5 bottom-0 bg-cover bg-center" style={{ backgroundImage: "url('/public/images/book2.png')" }}></div>
                        {/* 右边容器内的文本内容 */}
                        <div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
                            <p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
                        </div>
                    </div>
                </div>
            </div>

         
        
        <section id="fireNews">
            <div className='flex'>
            <div className='w-4/5 bg-[#0082e9] h-20' 
                style={{clipPath: 'polygon(0 0, calc(100% - 150px) 0%, calc(100% - 20px) 100%, 0% 100%)'}}
            ></div>
            <div className='items-center justify-center flex font-bold text-sky-900 text-5xl'>烽火动态</div>
        </div>
        </section>
    </div>
    );
};

export default LearnPage;