liaohui
/
fenghuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

jcdt布局和背景图

This commit is contained in:
Li1304553726 2025-06-09 21:40:05 +08:00
parent 46c7e18e70
commit 5fdea3a1fd
10 changed files with 103 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/app/page.tsx
View File

@ -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 (

15
apps/web/components/content/jcdt/page.tsx Normal file
View File

@ -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;

6
apps/web/components/content/navbar/page.tsx
View File

@ -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>

8
apps/web/components/content/page.tsx
View File

@ -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>
);

14
apps/web/components/content/qjsx/page.tsx
View File

@ -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>
{/* 右侧日期 */}

70
apps/web/components/content/xxjxs/page.tsx Normal file
View File

@ -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;

BIN
apps/web/public/book1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
apps/web/public/book2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
apps/web/public/jcdt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 MiB

BIN
apps/web/public/learn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB