qiuchenfan
/
news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news

This commit is contained in:
jinsir 2025-11-19 12:39:50 +08:00
parent 0df78f08bd 99e86b2ff5
commit 8869d052a1
15 changed files with 455 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/components/Carousel.tsx
View File

@ -1,48 +1,53 @@
// src/components/CarouselDemo.tsx
import * as React from "react";
import Autoplay from "embla-carousel-autoplay";//实现轮播图的自动播放功能
import Autoplay from "embla-carousel-autoplay";
import { Card, CardContent } from "@/ui/card";
import {
Carousel,//主体
CarouselContent,//内容容器
CarouselItem,//单个轮播项
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
type CarouselApi,
} from "@/ui/carousel";
const imageUrls = [
"/images/carousel-1.jpg",
"/images/carousel-2.jpg",
"/images/carousel-3.jpg",
"/images/carousel-4.jpg",
"/images/carousel-5.jpg",
"/images/carousel-6.jpg",
];
export function CarouselDemo() {
const [api, setApi] = React.useState<CarouselApi>();
const [current, setCurrent] = React.useState(0);
const [count, setCount] = React.useState(0);
const totalSlides = 6;
const totalSlides = imageUrls.length;
React.useEffect(() => {
if (!api) return;
setCount(api.scrollSnapList().length);
setCurrent(api.selectedScrollSnap());//获取当前选中的轮播项的索引
setCurrent(api.selectedScrollSnap());
api.on("select", () => {
setCurrent(api.selectedScrollSnap());
});
}, [api]);//当api改变时，执行此函数 水平居中 循环 自动播放 回传状态
}, [api]);
return (
<div className="relative w-full max-w-4xl mx-auto">
<div className="relative w-full h-full">
<Carousel
opts={{
loop: true,
}}
opts={{ loop: true }}
plugins={[
Autoplay({
delay: 3000,
stopOnInteraction: false,
stopOnInteraction: false,
}),
]}
setApi={setApi}
className="w-full h-full"
>
<CarouselContent className="h-full w-full">
{Array.from({ length: totalSlides }).map((_, index) => (
@ -75,8 +80,9 @@ export function CarouselDemo() {
key={index}
onClick={() => api?.scrollTo(index)}
className={`h-2 w-2 rounded-full transition-colors ${
index === current ? "bg-black" : "bg-black/50"
index === current ? "bg-white" : "bg-white/50"
}`}
aria-label={`Go to slide ${index + 1}`}
/>
))}
</div>

82
app/components/body/AutoCarousel.tsx Normal file
View File

@ -0,0 +1,82 @@
// src/components/CarouselDemo.tsx
import * as React from "react";
import Autoplay from "embla-carousel-autoplay";
import { Card, CardContent } from "@/ui/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/ui/carousel";
const imageUrls = [
"/images/carousel-1.jpg",
"/images/carousel-2.jpg",
"/images/carousel-3.jpg",
"/images/carousel-4.jpg",
"/images/carousel-5.jpg",
"/images/carousel-6.jpg",
];
export function AutoCarouselDemo() {
return (
<div className="relative w-full mx-auto overflow-hidden">
{/* 相对定位 宽度100% 水平居中 隐藏溢出 */}
<div className="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black/70 via-transparent pointer-events-none z-10" />
<div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black/70 via-transparent pointer-events-none z-10" />
{/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */}
<Carousel
opts={{
loop: true,//循环
align: "start",
}}
plugins={[
Autoplay({
delay: 3000, // 自动播放
stopOnInteraction: false,//不因为鼠标交互停止
}),
]}
className="w-full"
>
<CarouselContent className="flex gap-4">
{imageUrls.map((src, index) => (
<CarouselItem
key={index}
className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
>
{/* 基宽 中屏 大屏 防止收缩 相对定位
内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型
隐藏溢出 移除边框 中等阴影
弹性布局 正方形 垂直居中 水平居中 内边距0 相对
*/}
<div
className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
style={{
transform: 'scale(1)',
transition: 'all 0.5s ease',
}}
>
<Card className="overflow-hidden border-none shadow-lg">
<CardContent className="flex aspect-square items-center justify-center p-0 relative">
<img
src={src}
alt={`Slide ${index + 1}`}
className="w-full h-full object-cover"
loading="lazy" // 启用懒加载
/>
</CardContent>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
{/* 左右箭头控制 */}
<CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-20" />
<CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-20" />
</Carousel>
</div>
);
}

63
app/components/body/FireNews/FireNewsList.tsx Normal file
View File

@ -0,0 +1,63 @@
import React from 'react';
interface NewsItem {
content: string;
}
export function FireNewsList() {
const newsItems: NewsItem[] = [
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
];
return (
<div className="bg-gray-200 p-4 rounded-lg h-full">
{/* 标题栏 */}
<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">
查看更多 {'>'}
</a>
</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]
</a>
</p>
</div>
</div>
))}
</div>
</div>
);
};

39
app/components/body/FireNews/fhjt.tsx Normal file
View File

@ -0,0 +1,39 @@
import { CarouselDemo } from "@/components/Carousel";
import {FireNewsList} from "./FireNewsList";
export function FhjtPage() {
return(
<div className=" w-full overflow-hidden flex justify-center">
{/* 轮播背景图 */}
<div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
<CarouselDemo />
</div>
<div className="w-100 h-full bg-white relative">
{/* 标题部分 */}
<div className="relative pt-6 pr-8">
<h2 className="text-right 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="mb-5 justify-end flex">
一等奖
</div>
<div className="mb-5 justify-end flex">
二等奖
</div>
<div className="mb-5 justify-end flex">
三等奖
</div>
</div>
</div>
</div>
)
}

39
app/components/body/FireNews/fhrx.tsx Normal file
View File

@ -0,0 +1,39 @@
import { CarouselDemo } from "@/components/Carousel";
import {FireNewsList} from "./FireNewsList";
export function FhrxPage() {
return(
<div className=" w-full overflow-hidden flex justify-center">
{/* 轮播背景图 */}
<div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
<CarouselDemo />
</div>
<div className="w-100 h-full bg-white relative">
{/* 标题部分 */}
<div className="relative pt-6 pr-8">
<h2 className="text-right 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="mb-5 justify-end flex">
信箱
</div>
<div className="mb-5 justify-end flex">
问答
</div>
<div className="mb-5 justify-end flex">
心灵
</div>
</div>
</div>
</div>
)
}

38
app/components/body/FireNews/fhws.tsx Normal file
View File

@ -0,0 +1,38 @@
import { CarouselDemo } from "@/components/Carousel";
import {FireNewsList} from "./FireNewsList";
export function FhwsPage() {
return(
<div className=" w-full overflow-hidden flex justify-center">
<div className="w-100 h-full bg-white relative" >
{/* 标题部分 */}
<div className="relative pt-6 pr-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="mb-5 justify-start flex">
一
</div>
<div className="mb-5 justify-start flex">
二
</div>
<div className="mb-5 justify-start flex">
三
</div>
</div>
</div>
{/* 轮播背景图 */}
<div className="w-200" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
<CarouselDemo />
</div>
</div>
)
}

21
app/components/body/FireNews/fhyw.tsx Normal file
View File

@ -0,0 +1,21 @@
import { CarouselDemo } from "@/components/Carousel";
import {FireNewsList} from "./FireNewsList";
export function FhywPage() {
return(
<div className="relative w-full max-w-4xl mx-auto overflow-hidden aspect-square">
{/* 轮播背景图 */}
<div className="absolute inset-0 z-0">
<CarouselDemo />
</div>
{/* 固定的烽火要闻 */}
<div className="absolute top-0 right-0 w-1/3 h-full p-1">
<FireNewsList />
</div>
</div>
)
}

2
app/components/news/body/FireNews/fhjt.tsx
View File

@ -4,7 +4,7 @@ import {FireNewsList} from "./FireNewsList";
export function FhjtPage() {
return(
<div className=" w-full overflow-hidden flex justify-center h-200">
<div className=" w-full overflow-hidden flex justify-center h-200 mb-10 mt-10">
<div className="relative">
{/* 轮播背景图 */}
<div className="w-200 absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>

13
app/components/news/body/FireNews/fhrx.tsx
View File

@ -4,11 +4,14 @@ import {FireNewsList} from "./FireNewsList";
export function FhrxPage() {
return(
<div className=" w-full overflow-hidden flex justify-center h-200">
{/* 轮播背景图 */}
<div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
<CarouselDemo />
</div>
<div className=" w-full overflow-hidden flex justify-center h-200 mb-10">
<div className="relative">
{/* 轮播背景图 */}
<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">
{/* 标题部分 */}

13
app/components/news/body/FireNews/fhws.tsx
View File

@ -4,7 +4,7 @@ import {FireNewsList} from "./FireNewsList";
export function FhwsPage() {
return(
<div className=" w-full overflow-hidden flex justify-center h-200">
<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 pl-8">
@ -28,10 +28,13 @@ export function FhwsPage() {
</div>
</div>
</div>
{/* 轮播背景图 */}
<div className="w-200" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
<CarouselDemo />
</div>
<div className="relative">
{/* 轮播背景图 */}
<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>
)
}

191
app/components/news/body/ImageGridSection.tsx
View File

@ -1,109 +1,102 @@
import { CarouselDemo } from "@/components/Carousel";
const ImageGridSection = () => {
const elements = [
"/images/carousel-1.jpg",
<CarouselDemo />,
"/images/carousel-2.jpg",
"/images/carousel-3.jpg"
];
{/* 最外 左右两列间 内边 内容最大宽 水平居 微软雅黑
2 列+ 2 行 格子间距 固定宽高
*/}
import { CarouselDemo } from '@/components/Carousel';
import React from 'react';
const listItems = [
'新闻标题一：重要政策发布',
'新闻标题二：经济数据稳步回升',
'新闻标题三：科技创新成果显著',
'新闻标题四：民生工程持续推进',
'新闻标题五：国际交流合作深化'
const LearnPage = () => {
const newsList = [
'中华人民共和国监察法',
'2024年国办印发意见部门工作人员党听全国两...',
'十四届全国人大二次会议闭幕贺词',
'7天人代会："小片段"折射民主"大全景"',
'全国政协十四届二次会议共收到提案5800多件',
'两会观察丨从两会八个高频词看中国',
'两会"清单"上新这些民生发展温度',
'"选择中国"——世界从中国两会读出心动机号',
'中国经济信心说丨新玛合信心从哪里来',
];
return (
<div style={{
display: 'flex',
gap: '24px',
padding: '20px',
maxWidth: '1200px',
margin: '0 auto',
fontFamily: 'Microsoft YaHei, sans-serif'
}}>
{/* 左侧：3张图片 + 1个轮播图 2x2 网格 圆 防溢 拉伸填满
保持比例填充 消除底部空白*/}
<div style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gridTemplateRows: '1fr 1fr',
gap: '16px',
width: '600px',
height: '450px',
boxSizing: 'border-box' // 确保padding和border不会增加元素的实际宽度和高度
}}>
<div className="w-4/5 mx-auto px-4 py-6">
{/* 顶部 Logo */}
<div className="flex justify-start mb-4">
<h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
</div>
{elements.map((element, index) => (
<div
key={index}
style={{
borderRadius: '8px',
overflow: 'hidden',
boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
display: 'flex',
alignItems: 'stretch'
}}
>
{typeof element === 'string' ? (
{/* 主内容区：固定高度，紧凑布局 */}
<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={element}
alt={`图片 ${index + 1}`}
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
display: 'block'
}}
src="/images/carousel-1.jpg"
alt="Image 1"
className="w-full h-full object-cover"
/>
) : (
element // 占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布
// 背景色、圆角、阴影、内边距 防撑大
)}
</div>
{/* 上右：轮播图 */}
<div className="col-span-2 row-span-1 rounded-lg shadow-sm overflow-hidden">
<CarouselDemo />
</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"
/>
</div>
))}
</div>
))}
</div>
<div style={{
flex: 1,
minWidth: '300px',
height: '450px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
background: '#f9f9f9',
borderRadius: '8px',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
padding: '16px',
boxSizing: 'border-box'
}}>
<ul style={{
listStyle: 'none',
padding: 0,
flexGrow: 1,
overflowY: 'auto' // 当 内 容超出时启用滚动条 填满剩余 文间
}}>
{listItems.map((item, index) => (
<li
key={index}
style={{
marginBottom: '12px',
color: '#333',
fontSize: '16px'
}}
>
<span style={{ color: '#c00', marginRight: '8px' }}>•</span>
{item}
</li>
))}
</ul>
</div>
</div>
{/* 右侧新闻列表 */}
<div className="lg:w-2/5 bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex items-center">
<ul className="space-y-8 w-full">
{newsList.map((item, index) => (
<li
key={index}
className="flex items-start text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group"
>
<span className="text-red-500 mr-2 mt-0.5">•</span>
<span className="group-hover:underline">{item}</span>
</li>
))}
</ul>
</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('/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-[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('/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>
);
};
export default ImageGridSection;
export default LearnPage;

74
app/components/news/header/TopNav.tsx
View File

@ -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,26 +63,42 @@ 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" />
</span>
</div>
</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}
@ -102,4 +110,4 @@ export function TopNav({
</div>
</div>
);
};
};

1
app/routes/news.tsx
View File

@ -12,6 +12,7 @@ import { FhjtPage } from "@/components/news/body/FireNews/fhjt";
import { FhwsPage } from "@/components/news/body/FireNews/fhws";
import { FhrxPage } from "@/components/news/body/FireNews/fhrx";
import { AutoCarouselDemo } from "@/components/AutoCarousel";
export function meta( ) {
return [
{ title: "New React Router App" },

BIN
public/images/book1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
public/images/book2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB