40 lines
1.7 KiB
TypeScript
40 lines
1.7 KiB
TypeScript
import Link from "next/link";
|
||
|
||
import { ScanClient } from "@/components/scan-client";
|
||
|
||
export default function ScanPage() {
|
||
return (
|
||
<main className="mx-auto min-h-screen max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
|
||
<section className="grid gap-6 lg:grid-cols-[0.82fr_1.18fr]">
|
||
<div className="rounded-[36px] border border-white/70 bg-white/78 p-6 shadow-[0_30px_70px_rgba(115,76,42,0.14)] backdrop-blur">
|
||
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
|
||
扫码连接
|
||
</p>
|
||
<h1 className="mt-4 font-[family-name:var(--font-display)] text-4xl leading-[1.15] text-[var(--ink)]">
|
||
对准长辈手机上的二维码
|
||
</h1>
|
||
<p className="mt-4 text-base leading-8 text-[var(--muted)]">
|
||
扫描成功后，系统会自动将长辈的设备连接到您的账号。之后就能随时查看长辈的留言和使用动态。
|
||
</p>
|
||
|
||
<div className="mt-6 space-y-3 rounded-[28px] bg-[var(--paper-soft)] p-5 text-sm leading-7 text-[var(--muted)]">
|
||
<p>1. 让长辈打开手机上的「家人连接」页面。</p>
|
||
<p>2. 将镜头对准屏幕上的二维码，保持一两秒即可。</p>
|
||
<p>3. 连接成功后会自动跳转。</p>
|
||
</div>
|
||
|
||
<div className="mt-6 flex flex-wrap gap-3">
|
||
<Link
|
||
href="/devices"
|
||
className="inline-flex h-12 items-center justify-center rounded-full border border-[var(--line)] bg-white px-5 text-sm font-semibold text-[var(--ink)] transition hover:bg-[var(--paper-soft)]"
|
||
>
|
||
返回设备页
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<ScanClient />
|
||
</section>
|
||
</main>
|
||
);
|
||
} |