Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news
This commit is contained in:
commit
2af7b182c8
|
|
@ -87,27 +87,29 @@ export function CarouselDemo({
|
|||
}),
|
||||
]}
|
||||
setApi={setApi} // 将 Embla 实例保存到 state 中
|
||||
className="w-full h-full" // 占满容器
|
||||
className="w-full" // 占满容器
|
||||
>
|
||||
{/* 轮播内容区域 */}
|
||||
<CarouselContent className="h-full w-full -ml-0">
|
||||
<CarouselContent className=" w-full -ml-0">
|
||||
{/* 遍历图片数组，为每张图创建一个轮播项 */}
|
||||
{imageUrls.map((src, index) => (
|
||||
<CarouselItem
|
||||
key={index}
|
||||
className="w-full h-full pl-0" // 移除默认内边距
|
||||
className="w-full pl-0" // 移除默认内边距
|
||||
>
|
||||
{/* 内部包裹层：无内边距，占满 */}
|
||||
<div className="p-0 w-full h-full">
|
||||
<div className="p-0 w-full">
|
||||
{/* 使用 CardContent 包裹图片，移除默认间距 */}
|
||||
<CardContent className="flex items-center justify-center p-0 w-full h-full m-0">
|
||||
<CardContent className=" p-0 w-full m-0">
|
||||
{/* 图片元素：自动填充容器，保持比例裁剪 */}
|
||||
<div className="relative w-full aspect-video"> {/* 可选：设置固定宽高比 */}
|
||||
<img
|
||||
src={src}
|
||||
alt={`Slide ${index + 1}`} // 无障碍访问描述
|
||||
className="w-full h-full object-fill" // 关键：使图片覆盖整个区域
|
||||
className="absolute inset-0 w-full h-full object-fill" // 使用 object-fill 拉伸填充
|
||||
loading="lazy" // 懒加载优化性能
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
|
|
@ -123,8 +125,7 @@ export function CarouselDemo({
|
|||
|
||||
{/* 分页指示器容器：绝对定位在底部 */}
|
||||
<div
|
||||
className={`absolute bottom-4 ${
|
||||
paginationPosition === 'left' ? 'left-4' : 'right-4' // 根据 prop 控制左右位置
|
||||
className={`absolute bottom-4 ${paginationPosition === 'left' ? 'left-4' : 'right-4' // 根据 prop 控制左右位置
|
||||
} flex gap-2 z-10`} // 水平排列，间距 0.5rem，置于轮播图上方
|
||||
>
|
||||
{/* 动态生成指示器按钮 */}
|
||||
|
|
@ -136,9 +137,8 @@ export function CarouselDemo({
|
|||
// 根据 paginationStyle 决定形状
|
||||
paginationStyle === 'dot'
|
||||
? 'h-2 w-2 rounded-full' // 圆形：宽高相等 + 全圆角
|
||||
: 'h-2 w-8 rounded' // 块状：宽 2rem，高 0.5rem，带圆角
|
||||
} ${
|
||||
index === current
|
||||
: 'h-1 w-6 rounded' // 块状
|
||||
} ${index === current
|
||||
? 'bg-white' // 当前项为纯白色
|
||||
: 'bg-white/50' // 非当前项为半透明白色
|
||||
}`}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export function ImportantNews() {
|
|||
}));
|
||||
|
||||
return(
|
||||
<div className="relative w-5/6 h-225 mx-auto overflow-hidden ">
|
||||
<div className="relative w-5/6 h-220 mx-auto overflow-hidden ">
|
||||
{/* 轮播背景图 - 确保有明确尺寸 */}
|
||||
<div className="absolute top-0 left-0 w-full h-full">
|
||||
<CarouselDemo
|
||||
|
|
@ -41,7 +41,7 @@ export function ImportantNews() {
|
|||
</div>
|
||||
|
||||
{/* 固定的烽火要闻 */}
|
||||
<div className="absolute top-0 right-0 w-1/3 h-225 p-1">
|
||||
<div className="absolute top-0 right-0 w-1/3 h-220 p-1">
|
||||
<FireNewsList />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,111 +1,141 @@
|
|||
import { CarouselDemo } from '@/components/Carousel';
|
||||
import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
|
||||
import React from 'react';
|
||||
|
||||
const LearnPage = () => {
|
||||
const newsList = [
|
||||
'中华人民共和国监察法',
|
||||
'2024年国办印发意见部门工作人员党听全国两...',
|
||||
'十四届全国人大二次会议闭幕贺词',
|
||||
'7天人代会："小片段"折射民主"大全景"',
|
||||
'全国政协十四届二次会议共收到提案5800多件',
|
||||
'两会观察丨从两会八个高频词看中国',
|
||||
'两会"清单"上新这些民生发展温度',
|
||||
'"选择中国"——世界从中国两会读出心动机号',
|
||||
'中国经济信心说丨新玛合信心从哪里来',
|
||||
];
|
||||
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 */}
|
||||
<div className="flex justify-start mb-4">
|
||||
<h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
|
||||
{/* 顶部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="flex flex-col lg:flex-row gap-4 h-[740px]">
|
||||
{/* 左侧图片区 */}
|
||||
<div className="lg:w-3/5 rounded-lg overflow-hidden">
|
||||
<div className="grid grid-cols-3 grid-rows-2 gap-3 h-full w-full">
|
||||
{/* 上左：第一张图 */}
|
||||
<div className="row-span-1 col-span-1 rounded-lg shadow-sm overflow-hidden">
|
||||
<img
|
||||
src="/images/carousel-1.jpg"
|
||||
alt="Image 1"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{/* 上右轮播图 */}
|
||||
<div className="col-span-2 row-span-1 shadow-sm overflow-hidden">
|
||||
<CarouselDemo paginationPosition="right" paginationStyle="bar" />
|
||||
</div>
|
||||
|
||||
{/* 上右：轮播图 */}
|
||||
<div className="col-span-2 row-span-1 rounded-lg shadow-sm overflow-hidden">
|
||||
<CarouselDemo
|
||||
paginationPosition="right"
|
||||
paginationStyle="bar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 下三图 */}
|
||||
{[3, 4, 5].map((i) => (
|
||||
<div key={i} className="rounded-lg shadow-sm overflow-hidden">
|
||||
<img
|
||||
src={`/images/carousel-${i}.jpg`}
|
||||
alt={`Image ${i}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{/* 下三图：动态渲染 */}
|
||||
{[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>
|
||||
|
||||
|
||||
{/* 右侧新闻列表 */}
|
||||
<div className="lg:w-2/5 bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex items-center">
|
||||
{/* 右侧新闻列表：占据屏幕剩余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, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-center text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group"
|
||||
>
|
||||
{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 >{item}</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-[169px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: "url('/public/images/book1.png')"}}
|
||||
></div>
|
||||
{/* 左边容器内容 */}
|
||||
<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">
|
||||
习近平新时代中国特色社会
|
||||
<br />
|
||||
主义思想专题数据库
|
||||
习近平新时代中国特色社会主义思想专题数据库
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右边书籍区域 */}
|
||||
<div className="w-[750px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
||||
<div
|
||||
className="w-[169px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center "
|
||||
style={{ backgroundImage: "url('/public/images/book2.png')"}}
|
||||
></div>
|
||||
{/* 右边容器内容 */}
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -54,7 +54,9 @@ export default function Integrated() {
|
|||
{/* 装饰性蓝色竖条 */}
|
||||
<div className="w-3 h-15 bg-[#005d93] mr-3" />
|
||||
{/* 标题文字：深蓝色，加粗，4xl字号 */}
|
||||
<section id="service">
|
||||
<h2 className="text-4xl font-bold text-[#005d93]">综合服务</h2>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* 服务项容器：使用flex布局排列三列，列间距45px，设置内边距 */}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { Button } from '@/ui/button';
|
|||
interface MenuItem {
|
||||
label: string;
|
||||
key: string;
|
||||
sectionId:string;
|
||||
}
|
||||
|
||||
interface TopNavProps {
|
||||
|
|
@ -15,12 +16,12 @@ interface TopNavProps {
|
|||
|
||||
export function TopNav({
|
||||
menuItems = [
|
||||
{ label: '首页', key: 'home' },
|
||||
{ label: '烽火动态', key: 'news' },
|
||||
{ label: '烽火铸魂', key: 'soul' },
|
||||
{ label: '烽火训练', key: 'training' },
|
||||
{ label: '联系热线', key: 'hotline' },
|
||||
{ label: '综合服务', key: 'service' },
|
||||
{ label: '首页', key: 'home', sectionId:'home' },
|
||||
{ label: '烽火动态', key: 'news', sectionId:'fireNews' },
|
||||
{ label: '烽火铸魂', key: 'soul', sectionId:'soul' },
|
||||
{ label: '烽火训练', key: 'training', sectionId:'training' },
|
||||
{ label: '联系热线', key: 'hotline', sectionId:'hotline' },
|
||||
{ label: '综合服务', key: 'service', sectionId:'service' },
|
||||
],
|
||||
activeKey: externalActiveKey,
|
||||
onSearch,
|
||||
|
|
@ -34,12 +35,25 @@ export function TopNav({
|
|||
const handleSearchSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSearch?.(searchKeyword);
|
||||
|
||||
};
|
||||
|
||||
const handleItemClick = (item: MenuItem) => {
|
||||
if (externalActiveKey === undefined) {
|
||||
setInternalActiveKey(item.key);
|
||||
}
|
||||
|
||||
// 如果有对应的 sectionId，则滚动到该区域
|
||||
// if (item.sectionId) {
|
||||
// const element = document.getElementById(item.sectionId);
|
||||
// if (element) {
|
||||
// element.scrollIntoView({
|
||||
// behavior: 'smooth', // 平滑滚动
|
||||
// block: 'start' // 滚动到顶部对齐
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
onItemClick?.(item.key);
|
||||
};
|
||||
|
||||
|
|
@ -74,8 +88,7 @@ export function TopNav({
|
|||
<li key={item.key} className="relative">
|
||||
<button
|
||||
onClick={() => handleItemClick(item)}
|
||||
className={`px-4 py-2 text-2xl font-extralight transition-all duration-500 relative z-10 ${
|
||||
isActive ? 'text-white' : 'text-gray-600 hover:font-bold'
|
||||
className={`px-4 py-2 text-2xl transition-all duration-500 relative z-10 ${isActive ? 'text-white font-bold' : 'text-gray-600 hover:font-bold cursor-pointer'
|
||||
}`}
|
||||
>
|
||||
{/* 激活状态背景层 */}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const NewsList: React.FC = () => {
|
|||
{/* 使用 Flexbox 将两个列表放在一行 */}
|
||||
<div className="flex gap-8">
|
||||
{/* 科技新闻 */}
|
||||
<div className="flex-1 bg-white rounded-lg shadow-md">
|
||||
<div className="flex-1 bg-white shadow-md">
|
||||
{/* 标题栏：独立于列表之外 */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">
|
||||
|
|
@ -57,7 +57,7 @@ const NewsList: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* 教育新闻 */}
|
||||
<div className="flex-1 bg-white rounded-lg shadow-md">
|
||||
<div className="flex-1 bg-white shadow-md">
|
||||
{/* 标题栏：独立于列表之外 */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Loading…
Reference in New Issue