ruoyi-react-front/app/(business)/home/page.tsx

"use client";

import React from "react";

const subsystems = [
  {
    name: "城市生命线驾驶舱",
    img: "/1.png",
  },
  {
    name: "生命线预警联动处置平台",
    img: "/2.png",
  },
  {
    name: "生命线物联网平台",
    img: "/3.png",
  },
  {
    name: "燃气管网安全运行监测子系统",
    img: "/4.png",
  },
  {
    name: "供水管网安全运行监测子系统",
    img: "/5.png",
  },
  {
    name: "排水管网安全运行监测子系统",
    img: "/6.png",
  },
  {
    name: "窨井盖安全运行监测子系统",
    img: "/7.png",
  },
];

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>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}