news/app/components/FireNews/FireNewsList.tsx

100 lines
3.9 KiB
TypeScript
Raw Normal View History

2025-11-18 17:01:45 +08:00
import React from 'react';
2025-11-18 19:47:03 +08:00
export function FireNewsList() {
2025-11-19 10:39:02 +08:00
const articles = [
{
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,
},
{
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: 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: 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,
},
];
2025-11-18 17:01:45 +08:00
return (
2025-11-19 10:39:02 +08:00
<div>
{/* 文章列表 */}
<div className=" bg-[rgba(0,0,0,0.5)] shadow-lg ml-4 mr-2 p-1 absolute right-0 ">
{/* 标题栏 */}
<div className="flex justify-between items-center mb-6 border-b-3 border-white">
<h2 className="text-white text-3xl font-extrabold 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">
<span className="ml-1 w-0 h-0 border-l-6 border-l-red-500 border-t-6 border-t-transparent border-r-6 border-r-transparent border-b-6 border-b-transparent"></span>
</a>
</button>
</div>
2025-11-18 17:01:45 +08:00
2025-11-19 10:39:02 +08:00
{/* 文章列表 */}
<div className="space-y-1 h-[750px] 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-[0.7px] 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-[13px] text-white ">
{article.title}
<a href="#" className="text-red-600 text-sm hover:font-bold">
MORE
</a>
</p>
</div>
</div>
))}
</div>
</div>
</div>
2025-11-18 17:01:45 +08:00
);
};