list修改
This commit is contained in:
parent
44cde52c94
commit
5dbde23e31
|
|
@ -3,19 +3,19 @@ import List from '../list/List';
|
|||
|
||||
export default function GrassrootsDynamics() {
|
||||
return (
|
||||
<div className="flex bg-white rounded-2xl shadow-xl overflow-hidden mx-auto w-4/5">
|
||||
<div className="w-2/5 bg-pink-50 p-6 flex flex-col items-center justify-center relative">
|
||||
<div className="w-full h-64 flex items-center justify-center overflow-hidden rounded-lg">
|
||||
<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 object-cover"
|
||||
className="w-full h-full "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右边列表 */}
|
||||
<div className="w-3/5 bg-blue-200 text-white p-6">
|
||||
<div className="w-3/5 text-white p-6">
|
||||
<List />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
@ -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,6 +23,10 @@ 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 w-4/5 mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue