Merge branch 'main' of http://113.45.67.59:3003/liaohui/fenghuo
This commit is contained in:
commit
c5b63f3b2c
|
|
@ -14,7 +14,10 @@ node_modules
|
||||||
|
|
||||||
# Testing
|
# Testing
|
||||||
coverage
|
coverage
|
||||||
|
database-postgres.yml
|
||||||
|
cache-redis.yml
|
||||||
|
search-elasticsearch.yml
|
||||||
|
storage-minio.yml
|
||||||
# Turbo
|
# Turbo
|
||||||
.turbo
|
.turbo
|
||||||
|
|
||||||
|
|
@ -42,4 +45,5 @@ npm-debug.log*
|
||||||
|
|
||||||
packages/db/generated
|
packages/db/generated
|
||||||
volumes
|
volumes
|
||||||
uploads
|
uploads
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,15 @@ import Content from "@/components/content/page";
|
||||||
import Footer from "@/components/footer/footer";
|
import Footer from "@/components/footer/footer";
|
||||||
import Header from "@/components/header/header";
|
import Header from "@/components/header/header";
|
||||||
|
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<div className="w-[1920px] h-[1080px] mx-auto">
|
||||||
<Header />
|
<Header />
|
||||||
<Content />
|
<Content />
|
||||||
<Footer />
|
<Footer />
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const BqrxPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="w-[1514px] h-[573px] bg-white mx-auto mt-10 flex">
|
||||||
|
{/* 左侧图片容器 */}
|
||||||
|
<div
|
||||||
|
className="w-[1043px] h-full bg-cover bg-center relative"
|
||||||
|
style={{
|
||||||
|
clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',
|
||||||
|
backgroundImage: 'url(/header.png)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="absolute bottom-6 left-6 flex space-x-2">
|
||||||
|
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧烽火讲堂容器 */}
|
||||||
|
<div className="w-[471px] h-full bg-white relative">
|
||||||
|
{/* 标题部分 */}
|
||||||
|
<div className="relative pt-6 pr-8">
|
||||||
|
<h2 className="text-right text-[32px] font-bold text-[#005d93] mb-2">兵情热线</h2>
|
||||||
|
{/* 蓝色装饰线 */}
|
||||||
|
<div className="h-3 bg-[#005d93]"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 奖项列表 */}
|
||||||
|
<div className="mt-4 pr-8 space-y-10">
|
||||||
|
{/* 奖项1 */}
|
||||||
|
<div className="mt-15">
|
||||||
|
<div className="flex items-center justify-end mb-1">
|
||||||
|
<span className=" px-1 py-1 text-4xl font-bold ">首长信箱</span>
|
||||||
|
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 奖项2 */}
|
||||||
|
<div className="">
|
||||||
|
<div className="flex items-center justify-end mb-1">
|
||||||
|
<span className=" px-1 py-1 text-4xl font-bold ">有问必答</span>
|
||||||
|
<span className="w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 奖项3 */}
|
||||||
|
<div className="">
|
||||||
|
<div className="flex items-center justify-end mb-1">
|
||||||
|
<span className=" px-1 py-1 text-4xl font-bold">心灵树洞</span>
|
||||||
|
<span className="w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 更多授课按钮
|
||||||
|
<div className="absolute bottom-8 right-0 mr-10">
|
||||||
|
<button className="bg-gradient-to-b from-[#053E69] to-[#257BB6] text-white px-15 py-3 rounded-full text-lg font-medium hover:bg-[#357ABD] transition-colors">
|
||||||
|
更多授课
|
||||||
|
</button>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BqrxPage;
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const FhjtPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="w-[1514px] h-[573px] bg-white mx-auto mt-10 flex">
|
||||||
|
{/* 左侧图片容器 */}
|
||||||
|
<div
|
||||||
|
className="w-[1043px] h-full bg-red-500 bg-cover bg-center relative"
|
||||||
|
style={{
|
||||||
|
clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',
|
||||||
|
backgroundImage: 'url(/header.png)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="absolute bottom-6 left-6 flex space-x-2">
|
||||||
|
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧烽火讲堂容器 */}
|
||||||
|
<div className="w-[471px] h-full bg-white relative">
|
||||||
|
{/* 标题部分 */}
|
||||||
|
<div className="relative pt-6 pr-8">
|
||||||
|
<h2 className="text-right text-[32px] font-bold text-[#005d93] mb-2">烽火讲堂</h2>
|
||||||
|
{/* 蓝色装饰线 */}
|
||||||
|
<div className="h-3 bg-[#005d93]"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 奖项列表 */}
|
||||||
|
<div className="mt-4 pr-8">
|
||||||
|
{/* 奖项1 */}
|
||||||
|
<div className="mb-5">
|
||||||
|
<div className="flex items-center justify-end mb-1">
|
||||||
|
<span className=" px-1 py-1 text-3xl font-bold ">一等奖</span>
|
||||||
|
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||||
|
</div>
|
||||||
|
<p className="text-right text-lg leading-relaxed mr-5">
|
||||||
|
高级软件开发工程师王老八
|
||||||
|
<br />
|
||||||
|
王老八
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 奖项2 */}
|
||||||
|
<div className="mb-5">
|
||||||
|
<div className="flex items-center justify-end mb-1">
|
||||||
|
<span className=" px-1 py-1 text-3xl font-bold ">一等奖</span>
|
||||||
|
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||||
|
</div>
|
||||||
|
<p className="text-right text-lg leading-relaxed mr-5">
|
||||||
|
高级软件开发工程师王老八
|
||||||
|
<br />
|
||||||
|
王老八
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 奖项3 */}
|
||||||
|
<div className="mb-1">
|
||||||
|
<div className="flex items-center justify-end mb-1">
|
||||||
|
<span className=" px-1 py-1 text-3xl font-bold">一等奖</span>
|
||||||
|
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||||
|
</div>
|
||||||
|
<p className="text-right text-lg leading-relaxed mr-5">
|
||||||
|
高级软件开发工程师王老八
|
||||||
|
<br />
|
||||||
|
王老八
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 更多授课按钮 */}
|
||||||
|
<div className="absolute bottom-8 right-0 mr-10">
|
||||||
|
<button className="bg-gradient-to-b from-[#053E69] to-[#257BB6] text-white px-15 py-3 rounded-full text-2xl font-bold hover:bg-[#357ABD] transition-colors">
|
||||||
|
更多授课
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FhjtPage;
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const FhwsPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="w-[1514px] h-[573px] bg-white mx-auto mt-10 flex">
|
||||||
|
{/* 右侧烽火微视容器 */}
|
||||||
|
<div className="w-[471px] h-full bg-white relative">
|
||||||
|
{/* 标题部分 */}
|
||||||
|
<div className="relative pt-6 pl-8">
|
||||||
|
<h2 className="text-left text-[32px] font-bold text-[#005d93] mb-2">烽火微视</h2>
|
||||||
|
{/* 蓝色装饰线 */}
|
||||||
|
<div className="h-3 bg-[#005d93] w-full"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 视频列表 */}
|
||||||
|
<div className="mt-8 pl-8 ">
|
||||||
|
{/* 视频项1 */}
|
||||||
|
<div className="mb-6 flex items-center mt-10">
|
||||||
|
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||||
|
<p className="text-left text-3xl font-bold ">岗位尖兵比武视频</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 视频项2 */}
|
||||||
|
<div className="mb-6 flex items-center mt-10">
|
||||||
|
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||||
|
<p className="text-left text-3xl font-bold ">晚会视频</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 视频项3 */}
|
||||||
|
<div className="mb-6 flex items-center mt-10">
|
||||||
|
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||||
|
<p className="text-left text-3xl font-bold ">退伍视频</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 视频项4 */}
|
||||||
|
<div className="mb-6 flex items-center mt-10">
|
||||||
|
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||||
|
<p className="text-left text-3xl font-bold ">共同科目尖兵比武视频</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 更多精彩按钮 */}
|
||||||
|
<div className="absolute bottom-10 left-15">
|
||||||
|
<button className="bg-gradient-to-b from-[#053E69] to-[#257BB6] text-white px-15 py-3 rounded-full text-2xl font-bold hover:bg-[#357ABD] transition-colors">
|
||||||
|
更多精彩
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 左侧图片/视频容器 */}
|
||||||
|
<div
|
||||||
|
className="w-[1043px] h-full bg-red-500 bg-cover bg-center relative"
|
||||||
|
style={{
|
||||||
|
clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)',
|
||||||
|
backgroundImage: 'url(/header.png)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 右下角圆点指示器 */}
|
||||||
|
<div className="absolute bottom-6 right-6 flex space-x-2">
|
||||||
|
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FhwsPage;
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
// apps/web/components/content/jcdt/jcdt/jcdtlist.tsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const JcdtList: React.FC = () => {
|
||||||
|
const publicNews = [
|
||||||
|
{ 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' },
|
||||||
|
{ title: '国务院关于落实《政府工作报告》', date: '2018.01.31' },
|
||||||
|
{ title: '关于同意建立自然灾', date: '2018.01.31' },
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<div className="w-[1514px] h-[464px] mx-auto flex">
|
||||||
|
{/* 这里可以添加内容 */}
|
||||||
|
<div
|
||||||
|
className="w-[640px] h-[464px] mr-5 bg-cover bg-center"
|
||||||
|
style={{ backgroundImage: 'url(/header.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}
|
||||||
|
></div>
|
||||||
|
<div className="w-[854px] h-[464px] bg-[#0e93df] pt-8">
|
||||||
|
{publicNews.map((item, index) => (
|
||||||
|
<div key={index} className="flex items-center justify-between px-15 space-y-3">
|
||||||
|
{/* 左侧圆点和标题 */}
|
||||||
|
<div className="flex items-center flex-1">
|
||||||
|
<div
|
||||||
|
className="w-3 h-3 bg-white mr-1 flex-shrink-0"
|
||||||
|
style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}
|
||||||
|
></div>
|
||||||
|
<p className="text-[20px] text-white flex-1">{item.title}</p>
|
||||||
|
</div>
|
||||||
|
{/* 右侧日期 */}
|
||||||
|
<span className="text-[18px] text-white mr-5">{item.date}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default JcdtList;
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import JcdtList from './jcdtlist';
|
||||||
|
import FhjtPage from './fhjt';
|
||||||
|
import FhwsPage from './fhws';
|
||||||
|
import BqrxPage from './bqrx';
|
||||||
|
const JcdtContainer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="w-full h-[60px] ml-1 relative">
|
||||||
|
<p
|
||||||
|
className="text-center absolute right-0 "
|
||||||
|
style={{ color: '#005d93', fontSize: '32px', fontWeight: 'bold', marginRight: '255px' }}
|
||||||
|
>
|
||||||
|
基层动态
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
className="bg-[#0082e9] w-[1514px] h-[60px] flex justify-center items-center"
|
||||||
|
style={{
|
||||||
|
clipPath: 'polygon(0 0, calc(100% - 150px)1%, calc(100% - 30px) 100%, 0 100%)',
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="bg-cover bg-center w-[1920px] h-[6000px] ml-1 pt-10"
|
||||||
|
style={{ backgroundImage: 'url(/jcdt.png)' ,backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}}
|
||||||
|
>
|
||||||
|
<JcdtList />
|
||||||
|
<FhjtPage />
|
||||||
|
<FhwsPage />
|
||||||
|
<BqrxPage />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default JcdtContainer;
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
import { log } from 'console';
|
||||||
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
|
import './scroll.css';
|
||||||
|
|
||||||
|
const Navbar: React.FC = () => {
|
||||||
|
const [activeIndex, setActiveIndex] = useState(1); // 当前选中的导航项索引
|
||||||
|
const [parallelogramStyle, setParallelogramStyle] = useState({ left: 0, width: 0 });
|
||||||
|
const navRef = useRef<HTMLElement>(null);
|
||||||
|
const list = ['首页', '烽火动态', '烽火铸魂', '练兵备战', '兵情热线', '综合服务'];
|
||||||
|
|
||||||
|
// 文章数据
|
||||||
|
const articles = [
|
||||||
|
{
|
||||||
|
date: { month: '11', day: '2025-02' },
|
||||||
|
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||||
|
isHighlighted: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: { month: '11', day: '2025-02' },
|
||||||
|
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||||
|
isHighlighted: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: { month: '11', day: '2025-02' },
|
||||||
|
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||||
|
isHighlighted: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: { month: '11', day: '2025-02' },
|
||||||
|
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||||
|
isHighlighted: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: { month: '11', day: '2025-02' },
|
||||||
|
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||||
|
isHighlighted: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: { month: '11', day: '2025-02' },
|
||||||
|
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||||
|
isHighlighted: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: { month: '11', day: '2025-02' },
|
||||||
|
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||||
|
isHighlighted: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: { month: '11', day: '2025-02' },
|
||||||
|
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||||
|
isHighlighted: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: { month: '11', day: '2025-02' },
|
||||||
|
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||||
|
isHighlighted: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: { month: '11', day: '2025-02' },
|
||||||
|
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||||
|
isHighlighted: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleNavClick = (index: number) => {
|
||||||
|
setActiveIndex(index + 1); // 更新当前选中的索引
|
||||||
|
};
|
||||||
|
|
||||||
|
// 计算平行四边形的位置和宽度
|
||||||
|
useEffect(() => {
|
||||||
|
if (navRef.current) {
|
||||||
|
const navItems = navRef.current.children;
|
||||||
|
if (navItems[activeIndex]) {
|
||||||
|
const activeItem = navItems[activeIndex] as HTMLElement;
|
||||||
|
const navRect = navRef.current.getBoundingClientRect();
|
||||||
|
const itemRect = activeItem.getBoundingClientRect();
|
||||||
|
|
||||||
|
setParallelogramStyle({
|
||||||
|
left: itemRect.left - navRect.left,
|
||||||
|
width: itemRect.width,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [activeIndex]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className=" w-[1514px] h-[956px] relative " style={{ backgroundColor: '#1f79bf' }}>
|
||||||
|
{/* 顶部导航栏区域 */}
|
||||||
|
<div className="h-[80px] bg-white flex items-center px-6 relative overflow-hidden border-t-16 border-b-16 border-[#1f79bf]">
|
||||||
|
{/* 左侧搜索框区域 */}
|
||||||
|
<div className="flex items-center mr-3 ml-5">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入关键字"
|
||||||
|
className="w-[200px] h-[40px] px-4 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<button className="w-[55px] h-[40px]">
|
||||||
|
<img src="/search.png" alt="搜索" className="w-full h-full" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧导航菜单 */}
|
||||||
|
<nav ref={navRef} className="flex items-center relative ">
|
||||||
|
{/* 平行四边形背景 */}
|
||||||
|
<div
|
||||||
|
className="absolute top-0 h-full bg-gradient-to-b from-[#053E69] to-[#257BB6] z-0"
|
||||||
|
style={{
|
||||||
|
left: `${parallelogramStyle.left}px`,
|
||||||
|
width: `${parallelogramStyle.width}px`,
|
||||||
|
clipPath: 'polygon(0% 0%, 85% 0%, 100% 100%, 15% 100%)',
|
||||||
|
transition: 'left 0.3s ease, width 0.3s ease',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{list.map((item, index) => (
|
||||||
|
<a
|
||||||
|
key={index}
|
||||||
|
href="#"
|
||||||
|
className={`mr-15 ml-1 px-4 py-2 hover:font-bold transition-colors text-2xl relative z-10 ${
|
||||||
|
activeIndex === index + 1 ? 'font-bold text-white' : 'text-black'
|
||||||
|
}`}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
handleNavClick(index);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 主要内容区域 */}
|
||||||
|
<div className="flex h-[870px] bg-cover bg-center " style={{ backgroundImage: 'url(/lanmu.png)' }}>
|
||||||
|
{/* 左侧内容 */}
|
||||||
|
<div className="flex-1 p-8 text-white">
|
||||||
|
<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-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">
|
||||||
|
查看更多
|
||||||
|
<span className="ml-1 w-0 h-0 border-l-6 border-l-red-500 border-t-6 border-t-transparent border-r-6 border-r-transparent border-b-6 border-b-transparent"></span>
|
||||||
|
</a>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 文章列表 */}
|
||||||
|
<div className="space-y-2 max-h-[780px] overflow-hidden hover:overflow-auto scroll-container">
|
||||||
|
{articles.map((article, index) => (
|
||||||
|
<div key={index} className="flex items-center space-x-3 pb-4">
|
||||||
|
{/* 左侧竖线和日期 */}
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-[0.7px] h-13 bg-white ml-3"></div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-white text-3xl font-bold">{article.date.month}</div>
|
||||||
|
<div className="text-gray-300 text-sm">{article.date.day}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 右侧文章内容 */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-[13px] text-white ">{article.title}<a href="#" className="text-red-600 text-sm hover:font-bold">【MORE】</a></p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <div className="flex justify-center space-x-2 absolute bottom-4 left-4">
|
||||||
|
<div className="w-3 h-3 bg-blue-500 rounded-full cursor-pointer"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||||
|
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
/* 在您的 CSS 文件中添加以下样式 */
|
||||||
|
.scroll-container::-webkit-scrollbar {
|
||||||
|
width: 8px; /* 设置滚动条的宽度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-container::-webkit-scrollbar-track {
|
||||||
|
background: rgba(0, 0, 0, 0.5); /* 滚动条轨道的背景 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-container::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(224, 218, 218, 0.5); /* 滚动条的颜色 */
|
||||||
|
border-radius: 15px; /* 滚动条的圆角 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-container::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(230, 226, 226, 0.7); /* 鼠标悬停时的颜色 */
|
||||||
|
}
|
||||||
|
|
@ -1,14 +1,25 @@
|
||||||
import React from 'react';
|
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 = () => {
|
const Content: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<div className="w-[1920px] min-h-[calc(100vh-710px-758px)] relative left-1/2 transform -translate-x-1/2 bg-center flex justify-center items-center" style={{backgroundColor:'#000000'}}
|
// style={{ backgroundColor: '#e0dbdb' }}
|
||||||
>
|
<div
|
||||||
<div className="p-5">
|
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"
|
||||||
<p className="text-white">内容区域</p>
|
|
||||||
</div>
|
>
|
||||||
</div>
|
<div className="w-[1514px] h-full">
|
||||||
);
|
<Navbar />
|
||||||
|
<NewPage />
|
||||||
|
<LearnPage />
|
||||||
|
<div className="w-[1920px] ml-[35px] transform -translate-x-1/8 ">
|
||||||
|
<JcdtContainer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Content;
|
export default Content;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
// 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] hover:font-bold" style={{ color: '#6c6c6a' }} >
|
||||||
|
【查看更多】
|
||||||
|
</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>
|
||||||
|
<p className="text-[20px] flex-1">{item.title}</p>
|
||||||
|
</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] hover:font-bold" style={{ color: '#6c6c6a' }} >
|
||||||
|
【查看更多】
|
||||||
|
</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>
|
||||||
|
<p className="text-[20px] flex-1">{item.title}</p>
|
||||||
|
</div>
|
||||||
|
{/* 右侧日期 */}
|
||||||
|
<span className="text-[18px] text-gray-500 ml-4">{item.date}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NewPage;
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
'use client';
|
||||||
|
import React from 'react';
|
||||||
|
import { Carousel } from 'antd';
|
||||||
|
|
||||||
|
const CarouselDemo: React.FC = () => {
|
||||||
|
// 轮播图数据
|
||||||
|
const slides = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
image: '/header.png',
|
||||||
|
content: '两会闭幕 从春天出发',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
image: '/header.png',
|
||||||
|
content: '习近平主席重要讲话',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
image: '/header.png',
|
||||||
|
content: '全国人大代表步出人民大会堂',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Carousel autoplay style={{ height: '100%' }} className="h-full">
|
||||||
|
{slides.map((slide) => (
|
||||||
|
<div key={slide.id}>
|
||||||
|
<img
|
||||||
|
className="bg-cover bg-center"
|
||||||
|
src={slide.image}
|
||||||
|
alt={slide.content}
|
||||||
|
style={{ height: '540px', width: '100%', objectFit: 'fill' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</Carousel>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CarouselDemo;
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
import CarouselDemo from './carouselDemo';
|
||||||
|
|
||||||
|
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-[1031px] h-full bg-blue-500 ">
|
||||||
|
<div className="w-full h-[540px] bg-red-500 flex">
|
||||||
|
<div
|
||||||
|
className="w-[344px] h-[540px] bg-gray-500 bg-cover bg-center"
|
||||||
|
style={{ backgroundImage: 'url(/x4.png)' }}
|
||||||
|
></div>
|
||||||
|
<div className="w-[687px] h-[540px] bg-purple-500">
|
||||||
|
<CarouselDemo/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-[160px] bg-black flex">
|
||||||
|
<div className="flex-1 bg-red-500 bg-cover bg-center" style={{ backgroundImage: 'url(/x1.png)' }}></div>
|
||||||
|
<div className="flex-1 bg-green-500 bg-cover bg-center" style={{ backgroundImage: 'url(/x2.png)' }}></div>
|
||||||
|
<div className="flex-1 bg-blue-500 bg-cover bg-center" style={{ backgroundImage: 'url(/x3.png)' }}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 新闻容器 */}
|
||||||
|
<div className="w-[483px] h-full px-6 py-8" style={{ backgroundColor: '#F8F8F6' }}>
|
||||||
|
{/* 新闻列表 */}
|
||||||
|
<div className="space-y-11 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 mr-25">习近平著作选读</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LearnPage;
|
||||||
|
|
@ -3,12 +3,12 @@ import React from 'react';
|
||||||
const Footer: React.FC = () => {
|
const Footer: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="flex flex-col items-center justify-center relative bottom-0 left-1/2 transform -translate-x-1/2 w-[1920px] h-[758px] bg-cover bg-center"
|
className=" flex flex-col items-center justify-center relative bottom-0 overflow-y-auto overflow-x-auto left-1/2 transform -translate-x-1/2 w-[1920px] h-[758px] bg-cover bg-center"
|
||||||
style={{ backgroundImage: `url('/footer.png')` }}
|
style={{ backgroundImage: `url('/footer.png')` }}
|
||||||
>
|
>
|
||||||
{/* 主标题 */}
|
{/* 主标题 */}
|
||||||
<div className="mb-8 mt-15">
|
<div className="mb-8 mt-15">
|
||||||
<p className=" tracking-widest" style={{ fontSize: '32px' }}>
|
<p className=" tracking-widest" style={{ fontSize: '32px',color:'#ffffff' }} >
|
||||||
春风拂面花开满园心OO情愉悦
|
春风拂面花开满园心OO情愉悦
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,12 @@ import React from 'react';
|
||||||
const Header: React.FC = () => {
|
const Header: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="relative left-1/2 transform -translate-x-1/2 w-[1920px] min-h-[710px] bg-cover bg-center "
|
className="relative left-1/2 transform -translate-x-1/2 w-[1920px] min-h-[704px] bg-cover bg-center "
|
||||||
style={{ backgroundImage: `url('/header.png')` }}
|
style={{ backgroundImage: `url('/header.png')` }}
|
||||||
>
|
>
|
||||||
<div className="p-5">
|
{/* <div className="p-5">
|
||||||
<p className="text-white">头部内容区域</p>
|
<p className="text-white"></p>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@
|
||||||
"@trpc/react-query": "11.1.2",
|
"@trpc/react-query": "11.1.2",
|
||||||
"@trpc/server": "11.1.2",
|
"@trpc/server": "11.1.2",
|
||||||
"@trpc/tanstack-react-query": "11.1.2",
|
"@trpc/tanstack-react-query": "11.1.2",
|
||||||
|
"antd": "^5.25.4",
|
||||||
"axios": "^1.7.2",
|
"axios": "^1.7.2",
|
||||||
"dayjs": "^1.11.12",
|
"dayjs": "^1.11.12",
|
||||||
"lucide-react": "0.511.0",
|
"lucide-react": "0.511.0",
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 471 KiB After Width: | Height: | Size: 365 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 471 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
|
|
@ -22,3 +22,4 @@
|
||||||
"node": ">=20"
|
"node": ">=20"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,66 +1,49 @@
|
||||||
import * as React from "react"
|
import * as React from 'react';
|
||||||
import { cva, type VariantProps } from "class-variance-authority"
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
|
||||||
import { cn } from "@repo/ui/lib/utils"
|
import { cn } from '@repo/ui/lib/utils';
|
||||||
|
|
||||||
const alertVariants = cva(
|
const alertVariants = cva(
|
||||||
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: "bg-card text-card-foreground",
|
default: 'bg-card text-card-foreground',
|
||||||
destructive:
|
destructive:
|
||||||
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: "default",
|
variant: 'default',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
)
|
);
|
||||||
|
|
||||||
function Alert({
|
function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
|
||||||
className,
|
return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
|
||||||
variant,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="alert"
|
|
||||||
role="alert"
|
|
||||||
className={cn(alertVariants({ variant }), className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="alert-title"
|
data-slot="alert-title"
|
||||||
className={cn(
|
className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
|
||||||
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
{...props}
|
||||||
className
|
/>
|
||||||
)}
|
);
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function AlertDescription({
|
function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
className,
|
return (
|
||||||
...props
|
<div
|
||||||
}: React.ComponentProps<"div">) {
|
data-slot="alert-description"
|
||||||
return (
|
className={cn(
|
||||||
<div
|
'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
|
||||||
data-slot="alert-description"
|
className,
|
||||||
className={cn(
|
)}
|
||||||
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
{...props}
|
||||||
className
|
/>
|
||||||
)}
|
);
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Alert, AlertTitle, AlertDescription }
|
export { Alert, AlertTitle, AlertDescription };
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
{
|
{
|
||||||
"extends": "@repo/typescript-config/react-library.json",
|
"extends": "@repo/typescript-config/react-library.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@repo/ui/*": ["./src/*"]
|
"@repo/ui/*": ["./src/*"]
|
||||||
}
|
},
|
||||||
},
|
"module": "NodeNext",
|
||||||
"include": ["."],
|
"moduleResolution": "NodeNext"
|
||||||
"exclude": ["node_modules", "dist"]
|
},
|
||||||
|
"include": ["."],
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
894
pnpm-lock.yaml
894
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue