101 lines
2.7 KiB
React
101 lines
2.7 KiB
React
|
import {
|
||
|
|
ArrowRight,
|
||
|
|
ArrowSquareOut,
|
||
|
|
ShieldCheck,
|
||
|
|
} from "@phosphor-icons/react";
|
||
|
|
|
||
|
|
const portals = [
|
||
|
|
{
|
||
|
|
number: "01",
|
||
|
|
title: "平台总后台",
|
||
|
|
description: "全局治理 · 安全运营 · 数据协同",
|
||
|
|
href: "http://p.heqiapp.com",
|
||
|
|
tone: "platform",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
number: "02",
|
||
|
|
title: "气站管理后台",
|
||
|
|
description: "站点经营 · 履约管理 · 安全服务",
|
||
|
|
href: "http://z.heqiapp.com",
|
||
|
|
tone: "station",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
number: "03",
|
||
|
|
title: "配送点管理后台",
|
||
|
|
description: "智能调度 · 高效配送 · 全程可追溯",
|
||
|
|
href: "http://d.heqiapp.com",
|
||
|
|
tone: "delivery",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
function PortalLink({ portal }) {
|
||
|
|
return (
|
||
|
|
<a
|
||
|
|
className={`portal portal--${portal.tone}`}
|
||
|
|
href={portal.href}
|
||
|
|
target="_blank"
|
||
|
|
rel="noreferrer"
|
||
|
|
aria-label={`进入${portal.title}，将在新标签页打开`}
|
||
|
|
>
|
||
|
|
<div className="portal__heading">
|
||
|
|
<span className="portal__number" aria-hidden="true">
|
||
|
|
{portal.number}
|
||
|
|
</span>
|
||
|
|
<span className="portal__divider" aria-hidden="true" />
|
||
|
|
<div>
|
||
|
|
<h2>{portal.title}</h2>
|
||
|
|
<p>{portal.description}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span className="portal__action">
|
||
|
|
进入系统
|
||
|
|
<ArrowRight size={22} weight="bold" aria-hidden="true" />
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function App() {
|
||
|
|
return (
|
||
|
|
<main className="site-shell">
|
||
|
|
<img
|
||
|
|
className="ecosystem-scene"
|
||
|
|
src="/assets/heqi-ecosystem-hero.jpg"
|
||
|
|
alt=""
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<header className="site-header">
|
||
|
|
<a className="brand" href="/" aria-label="和气首页">
|
||
|
|
<img src="/assets/heqi-logo.svg" alt="" />
|
||
|
|
<span>和气</span>
|
||
|
|
</a>
|
||
|
|
<div className="trust-line">
|
||
|
|
<ShieldCheck size={20} weight="regular" aria-hidden="true" />
|
||
|
|
<span>安全可靠 · 稳定高效 · 智能互联</span>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section className="hero" aria-labelledby="hero-title">
|
||
|
|
<p className="hero__eyebrow">HEQI SMART GAS PLATFORM</p>
|
||
|
|
<h1 id="hero-title">安全连接每一程</h1>
|
||
|
|
<p className="hero__description">
|
||
|
|
<span>智能瓶阀、气站运营与配送履约</span>
|
||
|
|
<span>的一体化管理入口</span>
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<nav className="portal-grid" aria-label="管理系统入口">
|
||
|
|
{portals.map((portal) => (
|
||
|
|
<PortalLink key={portal.href} portal={portal} />
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<p className="external-note">
|
||
|
|
<ArrowSquareOut size={17} weight="regular" aria-hidden="true" />
|
||
|
|
系统将在新标签页中打开
|
||
|
|
</p>
|
||
|
|
</main>
|
||
|
|
);
|
||
|
|
}
|