Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news
This commit is contained in:
commit
8aba8c10d4
|
|
@ -49,14 +49,23 @@ export function CarouselDemo() {
|
|||
setApi={setApi}
|
||||
className="w-full h-full"
|
||||
>
|
||||
<CarouselContent className="h-full">
|
||||
{imageUrls.map((src, index) => (
|
||||
<CarouselItem key={index} className="flex items-center justify-center h-full">
|
||||
<img
|
||||
src={src}
|
||||
alt={`Slide ${index + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<CarouselContent className="h-full w-full">
|
||||
{Array.from({ length: totalSlides }).map((_, index) => (
|
||||
<CarouselItem key={index} className="w-full h-full">
|
||||
<div className="p-1">
|
||||
<Card>
|
||||
<CardContent className="flex aspect-square items-center justify-center ">
|
||||
<div
|
||||
className="w-full h-full"
|
||||
style={{
|
||||
backgroundImage: "url('/public/images/header.png')",//背景图片可修改
|
||||
backgroundSize: '100% 100%',
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import React from 'react';
|
||||
import { mockNewsData } from './NewsData'; // 导入新闻数据
|
||||
|
||||
|
||||
import { grassNewsData } from './NewsData'; // 引入基层新闻数据
|
||||
|
||||
interface NewsProps {
|
||||
title?: string;
|
||||
|
|
@ -11,7 +9,6 @@ interface NewsProps {
|
|||
url?: string;
|
||||
}
|
||||
|
||||
|
||||
const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
|
||||
return (
|
||||
<div className="mb-4">
|
||||
|
|
@ -26,15 +23,18 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
|
|||
);
|
||||
};
|
||||
|
||||
// 使用新闻数据渲染列表
|
||||
// 使用基层新闻数据渲染列表
|
||||
const List: React.FC = () => {
|
||||
// 调用 grassNewsData 函数获取基层新闻数据
|
||||
const baseNews = grassNewsData();
|
||||
|
||||
return (
|
||||
<div >
|
||||
<div >
|
||||
<div className=" p-6 ">
|
||||
<div>
|
||||
<div>
|
||||
<div className="p-6">
|
||||
<ul className="space-y-4">
|
||||
{mockNewsData.map((news) => (
|
||||
<NewsItem title={news.title} time={news.time} url={news.url} />
|
||||
{baseNews.map((news) => (
|
||||
<NewsItem key={news.id} title={news.title} time={news.time} url={news.url} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ export const NewsData = (): News[] => {
|
|||
{ id: "news-4", type: "科技", title: "量子计算研究取得突破性进展", time: "2023-11-04", url: "https://www.baidu.com" },
|
||||
{ id: "news-5", type: "科技", title: "国际空间站完成新一轮科学实验", time: "2023-11-05", url: "https://www.baidu.com" },
|
||||
{ id: "news-6", type: "科技", title: "数字货币监管政策逐步完善", time: "2023-11-06", url: "https://www.baidu.com" },
|
||||
{ id: "news-7", type: "科技", title: "区块链技术在金融领域应用前景广阔", time: "2023-11-07", url: "https://www.baidu.com" },
|
||||
{ id: "news-8", type: "科技", title: "物联网技术在工业自动化领域应用广泛", time: "2023-11-08", url: "https://www.baidu.com" },
|
||||
{ id: "news-8", type: "科技", title: "物联网技术在工业自动化领域应用广泛", time: "2023-11-08", url: "https://www.baidu.com" },
|
||||
|
||||
|
||||
{ id: "edu-1", type: "教育", title: "在线教育平台助力偏远地区学生学习", time: "2025-01-10", url: "https://www.example.com/edu-1" },
|
||||
{ id: "edu-2", type: "教育", title: "人工智能技术推动个性化教学发展", time: "2025-02-15", url: "https://www.example.com/edu-2" },
|
||||
|
|
@ -23,11 +27,27 @@ export const NewsData = (): News[] => {
|
|||
{ id: "edu-4", type: "教育", title: "高校联合企业开展产学研合作新模式", time: "2025-04-05", url: "https://www.example.com/edu-4" },
|
||||
{ id: "edu-5", type: "教育", title: "教育部发布新政策支持职业教育发展", time: "2025-05-12", url: "https://www.example.com/edu-5" },
|
||||
{ id: "edu-6", type: "教育", title: "全球教育公平问题引发广泛讨论", time: "2025-06-18", url: "https://www.example.com/edu-6" },
|
||||
{ id: "edu-7", type: "教育", title: "国际教育标准制定与落地", time: "2025-07-25", url: "https://www.example.com/edu-7" },
|
||||
{ id: "edu-8", type: "教育", title: "在线教育平台助力偏远地区学生学习", time: "2025-08-30", url: "https://www.example.com/edu-8" },
|
||||
{ id: "edu-9", type: "教育", title: "人工智能技术推动个性化教学发展", time: "2025-09-04", url: "https://www.example.com/edu-9" },
|
||||
|
||||
];
|
||||
};
|
||||
export const grassNewsData = (): News[] => {
|
||||
return [
|
||||
{ id: "grass-1", type: "基层", title: "社区志愿者服务队开展环保活动", time: "2025-01-10", url: "https://www.example.com/grass-1" },
|
||||
{ id: "grass-2", type: "基层", title: "乡镇企业助力乡村振兴计划", time: "2025-01-15", url: "https://www.example.com/grass-2" },
|
||||
{ id: "grass-3", type: "基层", title: "村级文化活动中心正式开放", time: "2025-02-01", url: "https://www.example.com/grass-3" },
|
||||
{ id: "grass-4", type: "基层", title: "基层医疗站新增远程诊疗服务", time: "2025-02-18", url: "https://www.example.com/grass-4" },
|
||||
{ id: "grass-5", type: "基层", title: "农村电商培训帮助农民增收", time: "2025-03-05", url: "https://www.example.com/grass-5" },
|
||||
{ id: "grass-6", type: "基层", title: "社区图书馆举办亲子阅读活动", time: "2025-03-22", url: "https://www.example.com/grass-6" },
|
||||
{ id: "grass-7", type: "基层", title: "街道办组织居民参与垃圾分类宣传", time: "2025-04-10", url: "https://www.example.com/grass-7" },
|
||||
{ id: "grass-8", type: "基层", title: "乡村小学引入智能教学设备", time: "2025-04-25", url: "https://www.example.com/grass-8" },
|
||||
{ id: "grass-9", type: "基层", title: "基层干部走访调研解决民生问题", time: "2025-05-12", url: "https://www.example.com/grass-9" }
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 默认导出模拟新闻数据
|
||||
export const mockNewsData = NewsData();
|
||||
export const mockGrassNewsData = grassNewsData();
|
||||
|
|
|
|||
|
|
@ -1,57 +1,91 @@
|
|||
import React from 'react';
|
||||
|
||||
interface NewsItem {
|
||||
content: string;
|
||||
}
|
||||
|
||||
export function FireNewsList() {
|
||||
const newsItems: NewsItem[] = [
|
||||
const articles = [
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
date: { month: '11', day: '2025-02' },
|
||||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
date: { month: '11', day: '2025-02' },
|
||||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
date: { month: '11', day: '2025-02' },
|
||||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
date: { month: '11', day: '2025-02' },
|
||||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||
isHighlighted: true,
|
||||
},
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
date: { month: '11', day: '2025-02' },
|
||||
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
|
||||
isHighlighted: true,
|
||||
},
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
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,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-gray-200 p-4 rounded-lg h-full">
|
||||
<div>
|
||||
{/* 文章列表 */}
|
||||
<div className=" bg-[rgba(0,0,0,0.51)] shadow-lg ml-4 mr-2 p-1 absolute right-0 ">
|
||||
{/* 标题栏 */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold text-gray-800">烽火要闻</h2>
|
||||
<a className="text-blue-600 hover:text-blue-800 font-medium">
|
||||
查看更多 {'>'}
|
||||
<div className="flex justify-between items-center mb-6 border-b-3 border-white">
|
||||
<h2 className="text-white text-3xl font-bold 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">
|
||||
查看更多
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 新闻列表 */}
|
||||
<div className="space-y-4">
|
||||
{newsItems.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex p-3 bg-white rounded-md shadow-sm hover:shadow-md transition-shadow duration-200"
|
||||
>
|
||||
|
||||
{/* 内容部分 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-gray-700 text-sm ">
|
||||
{item.content}
|
||||
<a
|
||||
className="text-red-600 ml-1 font-medium hover:text-red-800"
|
||||
>
|
||||
[MORE]
|
||||
{/* 文章列表 */}
|
||||
<div className="space-y-1 h-200 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-1 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-white ">
|
||||
{article.title}
|
||||
<a href="#" className="text-red-600 text-sm hover:font-bold">
|
||||
【MORE】
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -59,5 +93,6 @@ export function FireNewsList() {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,12 +4,14 @@ import {FireNewsList} from "./FireNewsList";
|
|||
|
||||
export function FhjtPage() {
|
||||
return(
|
||||
<div className=" w-full overflow-hidden flex justify-center">
|
||||
<div className=" w-full overflow-hidden flex justify-center h-200 mb-10 mt-10">
|
||||
<div className="relative">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<div className="w-200 absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
|
||||
<div className='w-200 bg-white h-full'></div>
|
||||
</div>
|
||||
<div className="w-100 h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-8">
|
||||
|
|
|
|||
|
|
@ -4,11 +4,14 @@ import {FireNewsList} from "./FireNewsList";
|
|||
|
||||
export function FhrxPage() {
|
||||
return(
|
||||
<div className=" w-full overflow-hidden flex justify-center">
|
||||
<div className=" w-full overflow-hidden flex justify-center h-200 mb-10">
|
||||
<div className="relative">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<div className="w-200 absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
<div className='w-200 bg-white h-full'></div>
|
||||
</div>
|
||||
|
||||
<div className="w-100 h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@ import {FireNewsList} from "./FireNewsList";
|
|||
|
||||
export function FhwsPage() {
|
||||
return(
|
||||
<div className=" w-full overflow-hidden flex justify-center">
|
||||
<div className=" w-full overflow-hidden flex justify-center h-200 mb-10">
|
||||
<div className="w-100 h-full bg-white relative" >
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-8">
|
||||
<div className="relative pt-6 pl-8">
|
||||
<h2 className=" text-4xl font-bold text-[#005d93] mb-2">烽火微视</h2>
|
||||
{/* 蓝色装饰线 */}
|
||||
<div className="h-3 bg-[#005d93]"></div>
|
||||
</div>
|
||||
{/* 列表 */}
|
||||
<div className="mt-4 pr-8 ">
|
||||
<div className="mt-4 pl-8 ">
|
||||
|
||||
<div className="mb-5 justify-start flex">
|
||||
一
|
||||
|
|
@ -28,10 +28,13 @@ export function FhwsPage() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
|
||||
<div className="w-200 absolute" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
<div className='w-200 bg-white h-full'></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ export function Header(){
|
|||
// setInterval是 JavaScript 中的一个全局函数，用于重复执行代码
|
||||
const timer = setInterval(() => {
|
||||
setCurrentTime(new Date());
|
||||
}, 1000); // 每秒更新一次
|
||||
}, 24*60*1000); // 每天更新一次
|
||||
|
||||
// 清理定时器
|
||||
return () => clearInterval(timer);// 只在组件卸载时清理定时器
|
||||
|
|
@ -15,8 +15,8 @@ export function Header(){
|
|||
|
||||
return (
|
||||
<div
|
||||
className="relative w-full h-180 bg-cover bg-center left-1/2 transform -translate-x-1/2"
|
||||
style={{ backgroundImage: "url('/app/images/header.png')" }}
|
||||
className="relative w-full h-180 bg-cover bg-center"
|
||||
style={{ backgroundImage: "url('/public/images/header.png')" }}
|
||||
>
|
||||
{/* 时间显示 只显示日期: "2025/3/15"*/}
|
||||
<div className="absolute top-4 right-4 mr-40">
|
||||
|
|
|
|||
|
|
@ -1,16 +1,11 @@
|
|||
import { Search } from 'lucide-react';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
interface MenuItem {
|
||||
label: string;
|
||||
key: string;
|
||||
}
|
||||
|
||||
// 定义 TopNavProps 接口，描述组件的 props 类型
|
||||
// menuItems? 菜单项数组
|
||||
// activeKey: 当前激活的菜单项
|
||||
// onSearch: 搜索回调函数
|
||||
// onItemClick: 菜单点击回调函数
|
||||
interface TopNavProps {
|
||||
menuItems?: MenuItem[];
|
||||
activeKey?: string;
|
||||
|
|
@ -18,11 +13,6 @@ interface TopNavProps {
|
|||
onItemClick?: (key: string) => void;
|
||||
}
|
||||
|
||||
//定义 TopNav 组件，类型为 React 函数组件，接收 TopNavProps 类型的 props
|
||||
//解构并设置 menuItems 默认值，如果父组件没有传入则使用默认的6个菜单项
|
||||
// activeKey: 当前激活的菜单项
|
||||
// onSearch: 搜索回调函数
|
||||
// onItemClick: 菜单点击回调函数
|
||||
export function TopNav({
|
||||
menuItems = [
|
||||
{ label: '首页', key: 'home' },
|
||||
|
|
@ -32,35 +22,37 @@ export function TopNav({
|
|||
{ label: '联系热线', key: 'hotline' },
|
||||
{ label: '综合服务', key: 'service' },
|
||||
],
|
||||
activeKey: externalActiveKey, // 从外部传入的 activeKey
|
||||
activeKey: externalActiveKey,
|
||||
onSearch,
|
||||
onItemClick,
|
||||
}: TopNavProps){
|
||||
// 使用外部传入的 activeKey，如果没有则使用内部状态
|
||||
// 创建内部状态 internalActiveKey，默认值为 'home'，用于内部管理激活状态
|
||||
const [internalActiveKey, setInternalActiveKey] = useState('home');
|
||||
// 如果外部传入了 activeKey 则使用外部的，否则使用内部状态（支持受控和非受控模式）
|
||||
const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
|
||||
// 创建搜索关键词状态，初始为空字符串
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
// 处理搜索提交事件, 阻止默认表单提交行为，调用搜索回调函数
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [prevIndex, setPrevIndex] = useState(0);
|
||||
|
||||
// 监听激活项变化，更新索引和动画方向
|
||||
useEffect(() => {
|
||||
const currentIndex = menuItems.findIndex(item => item.key === currentActiveKey);
|
||||
setPrevIndex(activeIndex);
|
||||
setActiveIndex(currentIndex);
|
||||
}, [currentActiveKey, menuItems, activeIndex]);
|
||||
|
||||
const handleSearchSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSearch?.(searchKeyword); // .? 可选链操作符，确保 onSearch 存在时才调用
|
||||
onSearch?.(searchKeyword);
|
||||
};
|
||||
|
||||
// 定义菜单项点击处理函数，如果外部没有传入 activeKey 则更新内部状态，调用点击回调函数
|
||||
const handleItemClick = (item: MenuItem) => {
|
||||
// 更新内部状态（如果使用内部状态）
|
||||
if (externalActiveKey === undefined) {
|
||||
setInternalActiveKey(item.key);
|
||||
}
|
||||
// 调用外部回调函数
|
||||
onItemClick?.(item.key); // .? 可选链操作符，确保 onItemClick 存在时才调用
|
||||
onItemClick?.(item.key);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-14 flex items-center justify-center px-8 bg-white">
|
||||
<div className="h-20 flex items-center justify-center px-8 bg-white">
|
||||
{/* 搜索框与导航菜单组合 */}
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* 搜索框 */}
|
||||
|
|
@ -71,7 +63,7 @@ export function TopNav({
|
|||
value={searchKeyword}
|
||||
onChange={(e) => setSearchKeyword(e.target.value)}
|
||||
placeholder="搜索..."
|
||||
className="pl-10 pr-4 py-2 text-sm rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm"
|
||||
className="pl-10 pr-4 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm"
|
||||
/>
|
||||
<span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
|
||||
<Search className="w-5 h-5" />
|
||||
|
|
@ -80,17 +72,33 @@ export function TopNav({
|
|||
</form>
|
||||
|
||||
{/* 导航菜单 */}
|
||||
<ul className="flex space-x-2">
|
||||
{menuItems.map((item) => {
|
||||
const isActive = currentActiveKey === item.key; // 判断当前项是否激活
|
||||
<ul className="flex space-x-8 relative">
|
||||
{/* 滑动背景层 */}
|
||||
<div
|
||||
className="absolute inset-y-0 z-0 transition-all duration-500 ease-out"
|
||||
style={{
|
||||
left: `${activeIndex * (100 / menuItems.length)}%`,
|
||||
width: `${100 / menuItems.length}%`,
|
||||
clipPath: 'polygon(0% 0%, 80% 0%, 100% 100%, 20% 100%)', // 向左倾斜的平行四边形
|
||||
background: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
|
||||
transform: `translateX(${(prevIndex - activeIndex) * 100}%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{menuItems.map((item, index) => {
|
||||
const isActive = currentActiveKey === item.key;
|
||||
return (
|
||||
<li key={item.key}>
|
||||
<li
|
||||
key={item.key}
|
||||
className="relative z-10"
|
||||
style={{ width: `${100 / menuItems.length}%` }}
|
||||
>
|
||||
<button
|
||||
onClick={() => handleItemClick(item)}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
|
||||
className={`w-full h-full px-4 py-2 text-2xl transition-all duration-300 ${
|
||||
isActive
|
||||
? 'bg-blue-600 text-white shadow-md' // 激活状态样式
|
||||
: 'text-gray-600 hover:bg-blue-100 hover:text-blue-700' // 非激活状态样式
|
||||
? 'text-white' // 激活状态文字颜色
|
||||
: 'text-gray-600 hover:text-black cursor-pointer' // 非激活状态样式
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,9 @@ export default function Home() {
|
|||
<FhywPage />
|
||||
<NewsList />
|
||||
<ImageGridSection />
|
||||
<div
|
||||
style={{backgroundImage: "url('/public/images/jcdt.png')"}}
|
||||
>
|
||||
<GrassrootsDynamics />
|
||||
<FhjtPage/>
|
||||
<FhwsPage/>
|
||||
|
|
@ -36,7 +39,7 @@ export default function Home() {
|
|||
<AutoCarouselDemo />
|
||||
<CultureBgPage />
|
||||
<Integrated />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 471 KiB After Width: | Height: | Size: 471 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 MiB |
Loading…
Reference in New Issue