This commit is contained in:
Li1304553726 2025-11-18 21:20:43 +08:00
commit 44cde52c94
3 changed files with 20 additions and 17 deletions

View File

@ -3,18 +3,21 @@ import List from '../list/List';
export default function GrassrootsDynamics() { export default function GrassrootsDynamics() {
return ( return (
<div className="grid grid-cols-2 gap-6 bg-gray-50 p-6 rounded-2xl shadow-xl"> <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-auto rounded-lg shadow-md"> <div className="w-full h-64 flex items-center justify-center overflow-hidden rounded-lg">
<img <img
src="/images/carousel-1.jpg" src="/images/carousel-1.jpg"
alt="基层动态" alt="基层动态"
/> className="w-full h-full object-cover"
</div> />
{/* 右边列表 */} </div>
<div> </div>
<List />
</div> {/* 右边列表 */}
</div> <div className="w-3/5 bg-blue-200 text-white p-6">
<List />
</div>
</div>
); );
} }

View File

@ -29,9 +29,9 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
// 使用新闻数据渲染列表 // 使用新闻数据渲染列表
const List: React.FC = () => { const List: React.FC = () => {
return ( return (
<div className=" "> <div >
<div className="grid grid-cols-1 md:grid-cols-2 "> <div >
<div className=" p-6 rounded-lg "> <div className=" p-6 ">
<ul className="space-y-4"> <ul className="space-y-4">
{mockNewsData.map((news) => ( {mockNewsData.map((news) => (
<NewsItem title={news.title} time={news.time} url={news.url} /> <NewsItem title={news.title} time={news.time} url={news.url} />

View File

@ -32,7 +32,7 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
// 使用新闻数据渲染列表 // 使用新闻数据渲染列表
const NewsList: React.FC = () => { const NewsList: React.FC = () => {
return ( return (
<div className="bg-gray-100 p-6 rounded-lg shadow-md"> <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"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* 科技新闻 */} {/* 科技新闻 */}
<div className="bg-white p-6 rounded-lg shadow-sm"> <div className="bg-white p-6 rounded-lg shadow-sm">