// apps/web/components/content/qjsx/page.tsx
import React from 'react';

const NewPage = () => {
	const politicalNews = [
		{ title: '国务院办公厅印发《关于完善仲', date: '2018.06.21' },
		{ title: '国务院办公厅关于推进养老服务', date: '2016.11.03' },
		{ title: '《关于统筹推进自然资源资产产', date: '2018.11.27' },
		{ title: '中共中央印发《中国共产党党组工作条例》', date: '2018.01.31' },
		{ title: '国务院关于修改部分行政法规的决定', date: '2018.01.31' },
		{ title: '国务院关于落实《政府工作报告》', date: '2018.01.31' },
		{ title: '关于同意建立自然灾', date: '2018.01.31' },
		{ title: '国务院办公厅印发', date: '2018.01.31' },
	];

	// 强军思想数据
	const militaryNews = [
		{ title: '国务院办公厅印发《关于完善仲', date: '2018.06.21' },
		{ title: '国务院办公厅关于推进养老服务', date: '2016.11.03' },
		{ title: '《关于统筹推进自然资源资产产', date: '2018.11.27' },
		{ title: '中共中央印发《中国共产党党组工作条例》', date: '2018.01.31' },
		{ title: '国务院关于修改部分行政法规的决定', date: '2018.01.31' },
		{ title: '国务院关于落实《政府工作报告》', date: '2018.01.31' },
		{ title: '关于同意建立自然灾', date: '2018.01.31' },
		{ title: '国务院办公厅印发', date: '2018.01.31' },
	];

	return (
		<div className="flex h-[568px] w-[1514px] mt-15">
			<div className="w-[750px] h-[568px] bg-white mr-7 relative shadow-xl">
				{/* 标题栏 */}
				<div className="w-[228px] h-[62px] absolute top-[-30px] left-[0px]" style={{ backgroundColor: '#1c6cab' }}>
					<p className="text-white text-[38px] font-bold text-center justify-center">时政新闻</p>
				</div>
				{/* 查看更多标签 */}
				<div className="absolute right-0 mt-2 mr-2">
					<button className="text-[18px] text-[#6c6c6a] hover:text-[#005d93]">
						【查看更多】
					</button>
				</div>
				{/* 新闻列表 */}
				<div className="pt-12 px-6">
					{politicalNews.map((item, index) => (
						<div key={index} className="flex items-center justify-between py-3">
							{/* 左侧圆点和标题 */}
							<div className="flex items-center flex-1">
								<div className="w-3 h-3 bg-gray-400 mr-3 flex-shrink-0 " style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}></div>
								<a href="#" className="text-[20px]  flex-1 hover:text-[#005d93]">{item.title}</a>
							</div>
							{/* 右侧日期 */}
							<span className="text-[18px] text-gray-500 ml-4 ">{item.date}</span>
						</div>
					))}
				</div>
			</div>
			<div className="w-[750px] h-[568px] bg-white relative shadow-xl">
				{/* 标题栏 */}
				<div className="w-[228px] h-[62px] absolute top-[-30px] left-[0px]" style={{ backgroundColor: '#1c6cab' }}>
					<p className="text-white text-[38px] font-bold text-center justify-center">强X思想</p>
				</div>
				{/* 查看更多标签 */}
				<div className="absolute right-0 mt-2 mr-2">
					<button className="text-[18px] text-[#6c6c6a] hover:text-[#005d93] "  >
						【查看更多】
					</button>
				</div>
				{/* 新闻列表 */}
				<div className="pt-12 px-6">
					{militaryNews.map((item, index) => (
						<div key={index} className="flex items-center justify-between py-3">
							{/* 左侧圆点和标题 */}
							<div className="flex items-center flex-1">
							<div className="w-3 h-3 bg-gray-400 mr-3 flex-shrink-0" style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}></div>
								<a href="#" className="text-[20px]  flex-1 hover:text-[#005d93]">{item.title}</a>
							</div>
							{/* 右侧日期 */}
							<span className="text-[18px] text-gray-500 ml-4">{item.date}</span>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};

export default NewPage;