Parcourir la source

feat(news): 新增新闻页面组件

- 创建 NewsPage 组件,展示新闻动态列表
- 添加顶部大新闻和下方小新闻卡片的布局结构
- 集成 Ant Design 分页器,实现新闻列表分页功能
- 优化页面样式,响应式布局适配不同屏幕尺寸
nahida il y a 8 mois
Parent
commit
7562d0cf78
1 fichiers modifiés avec 125 ajouts et 0 suppressions
  1. 125 0
      src/app/news/page.tsx

+ 125 - 0
src/app/news/page.tsx

@@ -0,0 +1,125 @@
+// app/news/page.tsx
+"use client"
+
+import React, { useState } from "react"
+import Link from "next/link"
+import { Pagination } from "antd"  // 引入 Ant Design 分页器
+import "antd/dist/reset.css"
+import MainTitle from "@/components/MainTitle";
+import Image from "next/image";       // 确保全局引入 antd 样式(一般在 layout.tsx 中引入一次即可)
+
+export default function NewsPage() {
+  const newsList = [
+    {
+      id: 1,
+      title: "喜讯|中科盛阳荣获长沙市人工智能应用示范 资金项目支持",
+      date: "2025-07-15",
+      desc: "近日,长沙市工业和信息化局正式公布2024年人工智能应用示范奖励资金项目名单,中科盛阳信息技术有限公司凭借“园区多源信息融合智慧管理平台研发及应用示范”项目成功入选,成为长沙市推动智慧园区建设的标杆企业。",
+      hasImage: true,
+    },
+    {
+      id: 2,
+      title: "中科盛阳信息技术有限公司博士后创新创业实践...",
+      date: "2024-09-03",
+    },
+    {
+      id: 3,
+      title: "人大代表聚力赋能,携手中科盛阳共绘发展新蓝图",
+      date: "2024-11-08",
+    },
+    {
+      id: 4,
+      title: "中科盛阳自主研发传感设备取得重大突破,荣获...",
+      date: "2023-11-18",
+    },
+    {
+      id: 5,
+      title: "创新引领安全新篇章——中科盛阳荣获“一种基...",
+      date: "2024-03-15",
+    },
+    {
+      id: 6,
+      title: "中科盛阳信息技术有限公司荣获“双软认定”,彰...",
+      date: "2024-03-20",
+    },
+    {
+      id: 7,
+      title: "标题:中科盛阳荣膺2024年湖南省“专精特新”...",
+      date: "2024-04-26",
+    },
+  ]
+
+  const [currentPage, setCurrentPage] = useState(1)
+  const pageSize = 6
+  const totalNews = newsList.length - 1
+
+  const pagedNews = newsList
+    .slice(1)
+    .slice((currentPage - 1) * pageSize, currentPage * pageSize)
+
+  return (
+    <>
+      <div>
+        <Image src={"/assets/news/1.png"} alt={"banner"} width={1920} height={1080}/>
+      </div>
+
+      <div className="py-6 sm:py-10">
+        <MainTitle title={"新闻动态"}/>
+      </div>
+
+      <div className="container sm:max-w-9/12 mx-auto p-4 space-y-6">
+        {/* 顶部大新闻 */}
+        <div className="bg-white rounded-2xl shadow p-6">
+          <div className="flex flex-col sm:flex-row gap-6">
+            {/* 模拟图片色块 */}
+            <div className="w-full sm:w-1/2 bg-gray-300 rounded-lg h-48 sm:h-auto flex items-center justify-center">
+              <span className="text-gray-600">图片占位</span>
+            </div>
+            {/* 右侧文字 */}
+            <div className="flex-1 flex flex-col justify-between">
+              <div>
+                <h2 className="text-lg sm:text-xl font-bold mb-2">{newsList[0].title}</h2>
+                <p className="text-gray-500 text-xs sm:text-sm mb-4">{newsList[0].date}</p>
+                <p className="text-gray-700 text-sm sm:text-base leading-relaxed line-clamp-4">
+                  {newsList[0].desc}
+                </p>
+              </div>
+              <Link href="#" className="text-blue-500 hover:underline mt-4 self-start text-sm sm:text-base">
+                了解更多 &gt;
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        {/* 下方小新闻卡片 */}
+        <div className="grid sm:grid-cols-2 gap-4">
+          {pagedNews.map((item) => (
+            <div
+              key={item.id}
+              className="bg-white rounded-2xl shadow p-4 flex flex-col justify-between"
+            >
+              <div>
+                <h3 className="text-sm sm:text-base font-semibold mb-2">{item.title}</h3>
+                <p className="text-gray-500 text-xs sm:text-sm">{item.date}</p>
+              </div>
+              <Link href="#" className="text-blue-500 hover:underline mt-2 self-end text-xs sm:text-sm">
+                了解更多 &gt;
+              </Link>
+            </div>
+          ))}
+        </div>
+
+        {/* 分页器 */}
+        <div className="flex justify-center mt-6">
+          <Pagination
+            current={currentPage}
+            pageSize={pageSize}
+            total={totalNews}
+            onChange={(page) => setCurrentPage(page)}
+            showSizeChanger={false}
+          />
+        </div>
+      </div>
+    </>
+  )
+}