feat(frontend): add management portal landing page

2026-07-31 15:00:44 +08:00
parent ad6a914450
commit 486fcc94e9
16 changed files with 2536 additions and 0 deletions
--- a/frontend/site/src/App.jsx
+++ b/frontend/site/src/App.jsx
@@ -0,0 +1,100 @@
+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>
+  );
+}
--- a/frontend/site/src/main.jsx
+++ b/frontend/site/src/main.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.jsx";
+import "./styles.css";
+
+createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
--- a/frontend/site/src/styles.css
+++ b/frontend/site/src/styles.css
@@ -0,0 +1,475 @@
+@import "@fontsource-variable/noto-sans-sc";
+
+:root {
+  font-family:
+    "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
+  color: #202936;
+  background: #f7faff;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  --platform: #1265e8;
+  --platform-deep: #0c4fbd;
+  --station: #dc7100;
+  --station-deep: #b85a00;
+  --delivery: #068f8b;
+  --delivery-deep: #08746f;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-width: 320px;
+  background: #f7faff;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  color: #202936;
+  background: #f7faff;
+  -webkit-font-smoothing: antialiased;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+a {
+  color: inherit;
+}
+
+.site-shell {
+  position: relative;
+  isolation: isolate;
+  min-height: 100vh;
+  min-height: 100dvh;
+  padding: 38px clamp(28px, 4.6vw, 72px) 30px;
+  overflow: hidden;
+  background: #f7faff;
+}
+
+.ecosystem-scene {
+  position: absolute;
+  inset: 108px 0 0;
+  z-index: -1;
+  width: 100%;
+  height: calc(100% - 108px);
+  object-fit: cover;
+  object-position: center bottom;
+  user-select: none;
+  pointer-events: none;
+}
+
+.site-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: min(100%, 1320px);
+  margin: 0 auto;
+}
+
+.brand {
+  display: inline-flex;
+  gap: 12px;
+  align-items: center;
+  color: #17212d;
+  font-weight: 650;
+  font-size: 27px;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+}
+
+.brand img {
+  width: 43px;
+  height: 43px;
+}
+
+.trust-line {
+  display: inline-flex;
+  gap: 9px;
+  align-items: center;
+  color: #687586;
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0.02em;
+}
+
+.hero {
+  position: relative;
+  z-index: 1;
+  width: min(100%, 900px);
+  margin: clamp(34px, 4.5vh, 46px) auto 0;
+  text-align: center;
+}
+
+.hero__eyebrow {
+  margin: 0 0 12px;
+  color: #6d7f95;
+  font-weight: 620;
+  font-size: 12px;
+  line-height: 20px;
+  letter-spacing: 0.2em;
+}
+
+.hero h1 {
+  margin: 0;
+  color: #202936;
+  font-weight: 680;
+  font-size: clamp(48px, 4.2vw, 66px);
+  line-height: 1.16;
+  letter-spacing: 0.035em;
+}
+
+.hero__description {
+  margin: 18px auto 0;
+  color: #637083;
+  font-size: clamp(16px, 1.35vw, 19px);
+  line-height: 30px;
+  letter-spacing: 0.025em;
+}
+
+.hero__description span {
+  display: inline;
+}
+
+.portal-grid {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: clamp(30px, 4vw, 64px);
+  width: min(100%, 1280px);
+  margin: clamp(48px, 6.5vh, 66px) auto 0;
+}
+
+.portal {
+  --accent: var(--platform);
+  --accent-deep: var(--platform-deep);
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 24px;
+  padding: 8px 10px 12px;
+  border-radius: 14px;
+  text-decoration: none;
+  outline: none;
+  transition:
+    background-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+}
+
+.portal--station {
+  --accent: var(--station);
+  --accent-deep: var(--station-deep);
+}
+
+.portal--delivery {
+  --accent: var(--delivery);
+  --accent-deep: var(--delivery-deep);
+}
+
+.portal:hover {
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 18px 46px rgba(37, 58, 84, 0.12);
+  transform: translateY(-4px);
+}
+
+.portal:focus-visible {
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow:
+    0 0 0 4px rgba(18, 101, 232, 0.18),
+    0 18px 46px rgba(37, 58, 84, 0.12);
+}
+
+.portal__heading {
+  display: grid;
+  grid-template-columns: auto 1px minmax(0, 1fr);
+  gap: 20px;
+  align-items: center;
+  min-height: 68px;
+}
+
+.portal__number {
+  color: var(--accent);
+  font-weight: 660;
+  font-size: clamp(46px, 4vw, 60px);
+  line-height: 1;
+  letter-spacing: -0.035em;
+}
+
+.portal__divider {
+  width: 1px;
+  height: 54px;
+  background: color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+.portal h2 {
+  margin: 0;
+  color: #202936;
+  font-weight: 650;
+  font-size: clamp(20px, 1.7vw, 25px);
+  line-height: 1.35;
+}
+
+.portal p {
+  margin: 7px 0 0;
+  color: #6b7787;
+  font-size: 13px;
+  line-height: 21px;
+  white-space: nowrap;
+}
+
+.portal__action {
+  display: inline-flex;
+  width: min(100%, 194px);
+  min-height: 50px;
+  gap: 18px;
+  align-items: center;
+  justify-content: center;
+  margin-left: 78px;
+  color: #fff;
+  background: var(--accent);
+  border-radius: 9px;
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 22px;
+  box-shadow: 0 9px 22px color-mix(in srgb, var(--accent) 24%, transparent);
+  transition: background-color 180ms ease;
+}
+
+.portal:hover .portal__action,
+.portal:focus-visible .portal__action {
+  background: var(--accent-deep);
+}
+
+.external-note {
+  position: absolute;
+  right: clamp(28px, 4.6vw, 72px);
+  bottom: 24px;
+  z-index: 2;
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  margin: 0;
+  color: rgba(60, 76, 94, 0.72);
+  font-size: 12px;
+  line-height: 20px;
+}
+
+@media (max-width: 1020px) {
+  .site-shell {
+    padding-inline: 28px;
+  }
+
+  .portal-grid {
+    gap: 20px;
+  }
+
+  .portal {
+    padding-inline: 4px;
+  }
+
+  .portal__heading {
+    gap: 13px;
+  }
+
+  .portal__number {
+    font-size: 44px;
+  }
+
+  .portal h2 {
+    font-size: 19px;
+  }
+
+  .portal p {
+    font-size: 12px;
+  }
+
+  .portal__action {
+    margin-left: 58px;
+  }
+}
+
+@media (max-width: 760px) {
+  .site-shell {
+    display: flex;
+    min-height: 100dvh;
+    flex-direction: column;
+    padding: 24px 18px 0;
+    overflow: hidden;
+    background: #f7faff;
+  }
+
+  .ecosystem-scene {
+    position: relative;
+    inset: auto;
+    order: 5;
+    width: calc(100% + 36px);
+    height: auto;
+    margin: 34px -18px 0;
+    object-fit: contain;
+  }
+
+  .brand {
+    gap: 9px;
+    font-size: 22px;
+  }
+
+  .brand img {
+    width: 36px;
+    height: 36px;
+  }
+
+  .trust-line {
+    display: none;
+  }
+
+  .hero {
+    margin-top: 48px;
+  }
+
+  .hero__eyebrow {
+    margin-bottom: 9px;
+    font-size: 10px;
+    letter-spacing: 0.15em;
+  }
+
+  .hero h1 {
+    font-size: clamp(37px, 11vw, 48px);
+    line-height: 1.18;
+  }
+
+  .hero__description {
+    max-width: 330px;
+    margin-top: 14px;
+    font-size: 15px;
+    line-height: 25px;
+  }
+
+  .hero__description span {
+    display: block;
+  }
+
+  .portal-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    margin-top: 38px;
+  }
+
+  .portal {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 16px;
+    align-items: center;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.84);
+    border: 1px solid rgba(104, 132, 164, 0.14);
+    border-radius: 12px;
+    box-shadow: 0 10px 28px rgba(35, 60, 88, 0.08);
+  }
+
+  .portal:hover {
+    transform: none;
+  }
+
+  .portal__heading {
+    grid-template-columns: auto 1px minmax(0, 1fr);
+    gap: 12px;
+    min-height: auto;
+  }
+
+  .portal__number {
+    font-size: 32px;
+  }
+
+  .portal__divider {
+    height: 44px;
+  }
+
+  .portal h2 {
+    font-size: 17px;
+  }
+
+  .portal p {
+    margin-top: 4px;
+    overflow: hidden;
+    font-size: 11px;
+    line-height: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .portal__action {
+    width: 46px;
+    min-height: 46px;
+    margin: 0;
+    border-radius: 50%;
+    font-size: 0;
+  }
+
+  .portal__action svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .external-note {
+    position: static;
+    order: 4;
+    justify-content: center;
+    margin: 18px 0 0;
+    font-size: 11px;
+  }
+}
+
+@media (max-width: 380px) {
+  .site-shell {
+    padding-inline: 14px;
+  }
+
+  .ecosystem-scene {
+    width: calc(100% + 28px);
+    margin-inline: -14px;
+  }
+
+  .portal {
+    padding-inline: 12px;
+  }
+
+  .portal__heading {
+    gap: 9px;
+  }
+
+  .portal__number {
+    font-size: 29px;
+  }
+
+  .portal h2 {
+    font-size: 16px;
+  }
+}
+
+@media (max-height: 790px) and (min-width: 761px) {
+  .site-shell {
+    padding-top: 26px;
+  }
+
+  .hero {
+    margin-top: 38px;
+  }
+
+  .portal-grid {
+    margin-top: 40px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .portal,
+  .portal__action {
+    transition: none;
+  }
+}