Jelajahi Sumber

refactor(business): 为城市生命线驾驶舱子系统添加链接功能

- 在每个子系统卡片上添加了点击进入的链接- 新增 Link 组件,实现子系统页面的跳转
- 为每个子系统添加了对应的 URL 地址
nahida 9 bulan lalu
induk
melakukan
b39baca482
1 mengubah file dengan 21 tambahan dan 12 penghapusan
  1. 21 12
      app/(business)/home/page.tsx

+ 21 - 12
app/(business)/home/page.tsx

@@ -1,56 +1,65 @@
 "use client";
 
 import React from "react";
+import Link from "next/link";
 
 const subsystems = [
   {
     name: "城市生命线驾驶舱",
     img: "/1.png",
+    url: '/test5',
   },
   {
     name: "生命线预警联动处置平台",
     img: "/2.png",
+    url: '/test6',
   },
   {
     name: "生命线物联网平台",
     img: "/3.png",
+    url: '/test7',
   },
   {
     name: "燃气管网安全运行监测子系统",
     img: "/4.png",
+    url: '/test8',
   },
   {
     name: "供水管网安全运行监测子系统",
     img: "/5.png",
+    url: '/test9',
   },
   {
     name: "排水管网安全运行监测子系统",
     img: "/6.png",
+    url: '/test10',
   },
   {
     name: "窨井盖安全运行监测子系统",
     img: "/7.png",
+    url: '/test11',
   },
 ];
 
 export default function CityLifelinePortal() {
+
   return (
     <div className="min-h-full w-full bg-slate-50 p-10 font-sans flex flex-col">
       <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
         {subsystems.map((s) => (
-          <div
-            key={s.name}
-            className="bg-white rounded-3xl shadow-xl cursor-pointer hover:shadow-2xl hover:bg-sky-50 transition transform hover:scale-110 flex flex-col overflow-hidden border-4 border-transparent hover:border-sky-200"
-            onClick={() => alert(`进入 ${s.name}`)}
-          >
-            <div className="w-full h-56 overflow-hidden">
-              <img src={s.img} alt={s.name} className="w-full h-full object-cover" />
-            </div>
-            <div className="p-6 flex flex-col items-center justify-center text-center">
-              <div className="text-xl font-semibold text-slate-800 mb-3">{s.name}</div>
-              <div className="text-slate-500 text-base">点击进入</div>
+          <Link key={s.name} href={s.url}>
+            <div
+              className="bg-white rounded-3xl shadow-xl cursor-pointer hover:shadow-2xl hover:bg-sky-50 transition transform hover:scale-110 flex flex-col overflow-hidden border-4 border-transparent hover:border-sky-200"
+            >
+              <div className="w-full h-56 overflow-hidden">
+                <img src={s.img} alt={s.name} className="w-full h-full object-cover"/>
+              </div>
+              <div className="p-6 flex flex-col items-center justify-center text-center">
+                <div className="text-xl font-semibold text-slate-800 mb-3">{s.name}</div>
+                <div className="text-slate-500 text-base">点击进入</div>
+              </div>
             </div>
-          </div>
+          </Link>
         ))}
       </div>
     </div>