jcdt布局和背景图

apps/web/app/page.tsx

@@ -3,6 +3,7 @@
 import Content from "@/components/content/page";
 import Footer from "@/components/footer/footer";
 import Header from "@/components/header/header";
+import JcdtContainer from "@/components/content/jcdt/page";
 
 export default function HomePage() {
 	return (

apps/web/components/content/jcdt/page.tsx

@@ -0,0 +1,15 @@
+const JcdtContainer = () => {
+    return (
+        <>
+        <div className=" bg-[#0082e9] w-[1514px] h-[60px] ml-1">
+          
+         
+        </div>
+           <div className="bg-cover bg-center w-[1920px] h-[7250px] ml-1" style={{ backgroundImage: 'url(/jcdt.png)' }}>
+            
+           </div>
+           </>
+    );
+};
+
+export default JcdtContainer;

apps/web/components/content/navbar/page.tsx

@@ -134,13 +134,13 @@ const Navbar: React.FC = () => {
 			<div className="flex h-[870px] bg-cover bg-center " style={{ backgroundImage: 'url(/lanmu.png)' }}>
 				{/* 左侧内容 */}
 				<div className="flex-1 p-8 text-white">
-					<p>1111</p>
+					<p></p>
 				</div>
 
 				{/* 右侧烽火要闻容器 */}
 				<div className="w-[460px] h-[870px] bg-[rgba(0,0,0,0.5)] shadow-lg ml-4 mr-2 p-1">
 					{/* 标题栏 */}
-					<div className="flex justify-between items-center mb-6 border-b border-gray-400  ">
+					<div className="flex justify-between items-center mb-6  border-b-3 border-white" >
 						<h2 className="text-white text-3xl font-extrabold ml-6 mt-2 mb-2">烽火要闻</h2>
 						<button className="">
 							<a href="#" className="text-white text-sm flex items-center mt-2 hover:text-blue-500">
@@ -164,7 +164,7 @@ const Navbar: React.FC = () => {
 								</div>
 								{/* 右侧文章内容 */}
 								<div className="flex-1">
-									<p className="text-[13px]  text-white ">{article.title}<a href="#" className="text-red-600 text-sm hover:underline">【MORE】</a></p>
+									<p className="text-[13px]  text-white ">{article.title}<a href="#" className="text-red-600 text-sm hover:font-bold">【MORE】</a></p>
 									
 								</div>
 							</div>

apps/web/components/content/page.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import Navbar from './navbar/page';
 import NewPage from './qjsx/page';
-
+import LearnPage from './xxjxs/page';
+import JcdtContainer from './jcdt/page';
 const Content: React.FC = () => {
 	return (
+		// 	style={{ backgroundColor: '#e0dbdb' }}
 		<div
 			className="w-[1920px] min-h-[calc(100vh-704px-758px)]  relative left-1/2 transform -translate-x-1/2 bg-center flex justify-center items-center"
 			style={{ backgroundColor: '#e0dbdb' }}
@@ -11,6 +13,10 @@ const Content: React.FC = () => {
 			<div className="w-[1514px] h-[10000px]">
 				<Navbar />
 				<NewPage />
+				<LearnPage />
+				<div className="w-[1920px] ml-[35px] transform -translate-x-1/8 ">
+					<JcdtContainer />
+				</div>
 			</div>
 		</div>
 	);

apps/web/components/content/qjsx/page.tsx

@@ -26,7 +26,7 @@ const NewPage = () => {
 	];
 
 	return (
-		<div className="flex h-[568px] mt-15">
+		<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' }}>
@@ -34,9 +34,9 @@ const NewPage = () => {
 				</div>
 				{/* 查看更多标签 */}
 				<div className="absolute right-0 mt-2 mr-2">
-					<span className="text-[18px]" style={{ color: '#6c6c6a' }}>
+					<button className="text-[18px] hover:font-bold" style={{ color: '#6c6c6a' }} >
 						【查看更多】
-					</span>
+					</button>
 				</div>
 				{/* 新闻列表 */}
 				<div className="pt-12 px-6">
@@ -44,7 +44,7 @@ const NewPage = () => {
 						<div key={index} className="flex items-center justify-between py-3">
 							{/* 左侧圆点和标题 */}
 							<div className="flex items-center flex-1">
-								<div className="w-2 h-2 bg-gray-400 rounded-full mr-3 flex-shrink-0"></div>
+								<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>
 								<p className="text-[20px]  flex-1">{item.title}</p>
 							</div>
 							{/* 右侧日期 */}
@@ -60,9 +60,9 @@ const NewPage = () => {
 				</div>
 				{/* 查看更多标签 */}
 				<div className="absolute right-0 mt-2 mr-2">
-					<span className="text-[18px]" style={{ color: '#6c6c6a' }}>
+					<button className="text-[18px] hover:font-bold" style={{ color: '#6c6c6a' }} >
 						【查看更多】
-					</span>
+					</button>
 				</div>
 				{/* 新闻列表 */}
 				<div className="pt-12 px-6">
@@ -70,7 +70,7 @@ const NewPage = () => {
 						<div key={index} className="flex items-center justify-between py-3">
 							{/* 左侧圆点和标题 */}
 							<div className="flex items-center flex-1">
-								<div className="w-2 h-2 bg-gray-400 rounded-full mr-3 flex-shrink-0"></div>
+							<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>
 								<p className="text-[20px]  flex-1">{item.title}</p>
 							</div>
 							{/* 右侧日期 */}

apps/web/components/content/xxjxs/page.tsx

@@ -0,0 +1,70 @@
+const LearnPage = () => {
+	const newsList = [
+		{ title: '中华人民共和国监察法', id: 1 },
+		{ title: '2024年国办印发意见部门工作人员党听全国两...', id: 2 },
+		{ title: '十四届全国人大二次会议闭幕贺词', id: 3 },
+		{ title: '7天人代会："小片段"折射民主"大全景"', id: 4 },
+		{ title: '全国政协十四届二次会议共收到提案5800多件', id: 5 },
+		{ title: '两会观察丨从两会八个高频词看中国', id: 6 },
+		{ title: '两会"清单"上新这些民生发展温度', id: 7 },
+		{ title: '"选择中国"——世界从中国两会读出心动机号', id: 8 },
+		{ title: '中国经济信心说丨新玛合信心从哪里来', id: 9 },
+	];
+
+	return (
+		<div className="w-[1514px] h-[1086px]  bg-white mt-10 mb-10">
+			{/* 学习进行时图片 */}
+			<div className="w-[282px] h-[80px] bg-cover bg-center" style={{ backgroundImage: 'url(/learn.png)' }}></div>
+			{/* 轮播图 */}
+			<div className="w-[1514px] h-[700px] bg-black mt-5 flex ">
+				{/* 左边容器 */}
+				<div className="w-[1000px] h-[647px] bg-blue-500 ml-20">{/* 左边容器内容 */}</div>
+				{/* 新闻容器 */}
+				<div className="w-[483px] h-[647px] px-6 py-8" style={{ backgroundColor: '#F8F8F6' }}>
+					{/* 新闻列表 */}
+					<div className="space-y-10 mt-5">
+						{newsList.map((news, index) => (
+							<div key={news.id} className="flex items-start">
+								{/* 圆点 */}
+								<div className="w-1 h-1 bg-black rounded-full mt-2 mr-3 flex-shrink-0 "></div>
+								{/* 新闻标题 */}
+								<p className="text-[16px] text-[#7e2f2a] leading-relaxed hover:text-red-500 cursor-pointer">
+									{news.title}
+								</p>
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+			{/* 图书容器 */}
+			<div className="w-[1514px] h-[285px]    flex relative">
+				<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
+					<div
+						className="w-[169px] h-[240px]  absolute left-0 bottom-0 bg-cover bg-center"
+						style={{ backgroundImage: 'url(/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">
+							习近平新时代中国特色社会
+							<br />
+							主义思想专题数据库
+						</p>
+					</div>
+				</div>
+				<div className="w-[700px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
+					<div
+						className="w-[140px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center "
+						style={{ backgroundImage: 'url(/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">习近平著作选读</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default LearnPage;