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:
qiuchenfan 2025-11-19 08:13:34 +08:00
parent dd9d0a12a6 5dbde23e31
commit f57f678034
12 changed files with 267 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
app/components/AutoCarousel.tsx Normal file
View File

@ -0,0 +1,78 @@
// 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">
{/* 左右渐隐遮罩 */}
<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" />
<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"
>
{/* 悬停放大容器 */}
<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>
);
}

3
app/components/Carousel.tsx
View File

@ -1,3 +1,4 @@
// src/components/CarouselDemo.tsx
import * as React from "react";
import Autoplay from "embla-carousel-autoplay";
@ -10,7 +11,7 @@ import {
CarouselPrevious,
type CarouselApi,
} from "@/ui/carousel";
import FireNewsList from "./FireNewsList";
export function CarouselDemo() {
const [api, setApi] = React.useState<CarouselApi>();

10
app/components/FireNewsList.tsx → app/components/FireNews/FireNewsList.tsx
View File

@ -4,7 +4,7 @@ interface NewsItem {
content: string;
}
const FireNewsList: React.FC = () => {
export function FireNewsList() {
const newsItems: NewsItem[] = [
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
@ -21,11 +21,13 @@ const FireNewsList: React.FC = () => {
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
];
return (
<div className="bg-gray-200 p-4 rounded-lg">
<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>
@ -59,5 +61,3 @@ const FireNewsList: React.FC = () => {
</div>
);
};
export default FireNewsList;

38
app/components/FireNews/fhjt.tsx Normal file
View File

@ -0,0 +1,38 @@
import { CarouselDemo } from "../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>
)
}

38
app/components/FireNews/fhrx.tsx Normal file
View File

@ -0,0 +1,38 @@
import { CarouselDemo } from "../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>
)
}

37
app/components/FireNews/fhws.tsx Normal file
View File

@ -0,0 +1,37 @@
import { CarouselDemo } from "../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>
)
}

19
app/components/FireNews/fhyw.tsx Normal file
View File

@ -0,0 +1,19 @@
import { CarouselDemo } from "../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>
)
}

29
app/components/body/GrassrootsDynamics.tsx
View File

@ -3,18 +3,21 @@ import List from '../list/List';
export default function GrassrootsDynamics() {
return (
<div className="grid grid-cols-2 gap-6 bg-gray-50 p-6 rounded-2xl shadow-xl">
{/* 左边图片 */}
<div className="w-full h-auto rounded-lg shadow-md">
<img
src="/images/carousel-1.jpg"
alt="基层动态"
/>
</div>
{/* 右边列表 */}
<div>
<List />
</div>
</div>
<div className="flex bg-white rounded-2xl mx-auto w-4/5">
<div className="w-2/5 p-6 flex flex-col items-center justify-center relative">
<div >
<img
src="/images/carousel-1.jpg"
alt="基层动态"
className="w-full h-full "
/>
</div>
</div>
{/* 右边列表 */}
<div className="w-3/5 text-white p-6">
<List />
</div>
</div>
);
}

6
app/components/list/List.tsx
View File

@ -29,9 +29,9 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
// 使用新闻数据渲染列表
const List: React.FC = () => {
return (
<div className=" ">
<div className="grid grid-cols-1 md:grid-cols-2 ">
<div className=" p-6 rounded-lg ">
<div >
<div >
<div className=" p-6 ">
<ul className="space-y-4">
{mockNewsData.map((news) => (
<NewsItem title={news.title} time={news.time} url={news.url} />

31
app/components/list/NewsData.tsx
View File

@ -6,10 +6,7 @@ export interface News {
url?: string;
}
export interface NewsTitle {
id: string;
name: string;
}
// 导出生成的模拟新闻数据
export const NewsData = (): News[] => {
return [
@ -21,26 +18,20 @@ export const NewsData = (): News[] => {
{ id: "news-6", type: "科技", title: "数字货币监管政策逐步完善", time: "2023-11-06", url: "https://www.baidu.com" },
{ id: "news-7", type: "科技", title: "5G网络覆盖范围进一步扩大", 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-9", type: "科技", title: "电影《星际穿越》重映引发热潮", time: "2023-11-09", url: "https://www.baidu.com" }
{ id: "news-9", type: "科技", title: "电影《星际穿越》重映引发热潮", time: "2023-11-09", 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" },
{ id: "edu-3", type: "教育", title: "多地推进中小学编程教育普及", time: "2025-03-20", url: "https://www.example.com/edu-3" },
{ 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-22", 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-15", url: "https://www.example.com/edu-9" }
];
};
export const NewsTitleData = (): NewsTitle[] => {
return [
{ id: "news-1", name: "科技" },
{ id: "news-2", name: "财经" },
{ id: "news-3", name: "娱乐" },
{ id: "news-4", name: "体育" },
{ id: "news-5", name: "教育" },
{ id: "news-6", name: "军事" },
]
}
// 默认导出模拟新闻数据
export const mockNewsData = NewsData();
export const mockNewsTitleData = NewsTitleData();

28
app/components/list/NewsList.tsx
View File

@ -1,20 +1,12 @@
import React from 'react';
import { mockNewsData } from './NewsData'; // 导入新闻数据
import { mockNewsTitleData } from './NewsData'; // 导入新闻标题数据
interface NewsProps {
title?: string;
description?: string;
time?: string;
type?: string;
url?: string;
}
interface NewsTitle {
id: string;
name: string;
}
const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
return (
<div className="mb-4">
@ -31,8 +23,12 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
// 使用新闻数据渲染列表
const NewsList: React.FC = () => {
// 按类型过滤新闻
const techNews = mockNewsData.filter((news) => news.type === "科技");
const educationNews = mockNewsData.filter((news) => news.type === "教育");
return (
<div className="bg-gray-100 p-6 rounded-lg shadow-md">
<div className="bg-gray-100 p-6 rounded-lg shadow-md w-4/5 mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* 科技新闻 */}
<div className="bg-white p-6 rounded-lg shadow-sm">
@ -43,23 +39,23 @@ const NewsList: React.FC = () => {
</button>
</div>
<ul className="space-y-4">
{mockNewsData.map((news) => (
<NewsItem title={news.title} time={news.time} url={news.url} />
{techNews.map((news) => (
<NewsItem key={news.id} title={news.title} time={news.time} url={news.url} />
))}
</ul>
</div>
{/* 社会新闻 */}
{/* 教育新闻 */}
<div className="bg-white p-6 rounded-lg shadow-sm">
<div className="flex items-center justify-between mb-4">
<p className="text-xl font-bold text-gray-900">社会新闻</p>
<p className="text-xl font-bold text-gray-900">教育新闻</p>
<button className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md transition duration-300 ease-in-out">
更多社会新闻
更多教育新闻
</button>
</div>
<ul className="space-y-4">
{mockNewsData.map((news, index) => (
<NewsItem key={index} title={news.title} time={news.time} url={news.url} />
{educationNews.map((news) => (
<NewsItem key={news.id} title={news.title} time={news.time} url={news.url} />
))}
</ul>
</div>

10
app/routes/news.tsx
View File

@ -6,8 +6,11 @@ import {Header} from "@/components/news/header/Header";
import {TopNav} from "@/components/news/header/TopNav";
import NewsList from "@/components/list/NewsList";
import ImageGridSection from "@/components/body/ImageGridSection";
import { CarouselDemo } from "@/components/Carousel";
import GrassrootsDynamics from "@/components/body/GrassrootsDynamics";
import { FhywPage } from "@/components/FireNews/fhyw";
import { FhjtPage } from "@/components/FireNews/fhjt";
import { FhwsPage } from "@/components/FireNews/fhws";
import { FhrxPage } from "@/components/FireNews/fhrx";
export function meta( ) {
return [
{ title: "New React Router App" },
@ -21,9 +24,12 @@ export default function Home() {
<div>
<Header />
<TopNav />
<CarouselDemo />
<FhywPage />
<NewsList />
<ImageGridSection />
<FhjtPage/>
<FhwsPage/>
<FhrxPage />
<Integrated />
<CultureBgPage />
</div>