Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news
This commit is contained in:
commit
44cde52c94
|
|
@ -3,16 +3,19 @@ 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>
|
<div className="w-3/5 bg-blue-200 text-white p-6">
|
||||||
<List />
|
<List />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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} />
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue