56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
interface NewsItem {
|
|
date: string;
|
|
year: string;
|
|
title: string;
|
|
desc: string;
|
|
}
|
|
|
|
interface NewsSectionProps {
|
|
title: string;
|
|
items: NewsItem[];
|
|
}
|
|
|
|
export default function NewsSection({ title, items }: NewsSectionProps) {
|
|
return (
|
|
<section className="py-8 sm:py-12 md:py-16">
|
|
<div className="max-w-6xl mx-auto px-4">
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-center mb-8 sm:mb-12">
|
|
{title}
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
|
|
<div className="lg:col-span-1">
|
|
<img
|
|
src="/images/news/news-bg.webp"
|
|
alt="News"
|
|
className="w-full h-40 sm:h-48 object-cover rounded-lg"
|
|
/>
|
|
|
|
<p className="text-center mt-3 sm:mt-4 text-gray-600 text-sm sm:text-base">
|
|
“云端智能 智领未来”
|
|
</p>
|
|
</div>
|
|
|
|
<div className="lg:col-span-2 space-y-4 sm:space-y-6">
|
|
{items.map((item, index) => (
|
|
<div key={index} className="flex flex-col sm:flex-row">
|
|
<div className="text-orange-500 font-bold mb-2 sm:mb-0 sm:mr-4 md:mr-6 text-center sm:text-left flex-shrink-0">
|
|
<div className="text-xl sm:text-2xl">{item.date}</div>
|
|
<div className="text-xs sm:text-sm">{item.year}</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-bold text-base sm:text-lg mb-2 leading-tight">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-gray-600 text-xs sm:text-sm leading-relaxed">
|
|
{item.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|