100 lines
3.9 KiB
TypeScript
100 lines
3.9 KiB
TypeScript
import React from 'react';
|
||
|
||
export function FireNewsList() {
|
||
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,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<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>
|
||
|
||
{/* 文章列表 */}
|
||
<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>
|
||
);
|
||
};
|