63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
|
|||
|
|
interface NewsItem {
|
|||
|
|
content: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const FireNewsList: React.FC = () => {
|
|||
|
|
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亿元...",
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="bg-gray-200 p-4 rounded-lg">
|
|||
|
|
{/* 标题栏 */}
|
|||
|
|
<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>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default FireNewsList;
|