|
|
@@ -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">
|
|
|
+ 了解更多 >
|
|
|
+ </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">
|
|
|
+ 了解更多 >
|
|
|
+ </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>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+}
|