|
|
@@ -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>
|