kurihada/no-whatever
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: 压缩首页布局适配小屏手机

Browse Source 
- Logo 与标题改为横排显示
- 缩小图标和间距，整体高度减少
- 确保创建房间按钮在小屏上可见
This commit is contained in:
kurihada
2026-02-25 14:37:00 +08:00
parent 77914672e0
commit 45b31e9319
1 changed files with 45 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/page.tsx
+45 -40
View File
@@ -256,13 +256,13 @@ export default function LandingPage() {
};
return (
<div className="relative flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12">
<div className="relative flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-6">
{/* Profile / Auth button */}
<div className="absolute right-4 top-4">
<div className="absolute right-4 top-3">
{profile ? (
<button
onClick={() => router.push("/profile")}
className={`flex h-9 items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors active:opacity-80 ${getAvatarBg(profile.avatar)}`}
className={`flex h-8 items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors active:opacity-80 ${getAvatarBg(profile.avatar)}`}
>
<span className="text-base leading-none">{profile.avatar}</span>
<span className="max-w-[5rem] truncate text-xs font-semibold text-zinc-700">{profile.username}</span>
@@ -270,7 +270,7 @@ export default function LandingPage() {
) : (
<button
onClick={() => setAuthModalOpen(true)}
className="flex h-9 items-center gap-1.5 rounded-full bg-zinc-100 px-3 text-xs font-medium text-zinc-500 transition-colors active:bg-zinc-200"
className="flex h-8 items-center gap-1.5 rounded-full bg-zinc-100 px-3 text-xs font-medium text-zinc-500 transition-colors active:bg-zinc-200"
>
<User size={14} />
登录
@@ -279,60 +279,65 @@ export default function LandingPage() {
</div>
<motion.div
className="flex flex-col items-center"
className="flex items-center gap-3"
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5 }}
>
<BrandLogo size={56} />
<h1 className="mt-2.5 text-3xl font-black tracking-tight text-zinc-900">
NoWhatever
</h1>
<p className="mt-0.5 text-sm font-medium tracking-widest text-zinc-400">
别说随便
</p>
<p className="mt-3 max-w-xs text-center text-sm leading-relaxed text-zinc-500">
{sceneConfig.subtitle}
</p>
<BrandLogo size={44} />
<div>
<h1 className="text-2xl font-black tracking-tight text-zinc-900">
NoWhatever
</h1>
<p className="text-xs font-medium tracking-widest text-zinc-400">
别说随便
</p>
</div>
</motion.div>
<motion.p
className="mt-2 max-w-xs text-center text-xs leading-relaxed text-zinc-500"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.05 }}
>
{sceneConfig.subtitle}
</motion.p>
<motion.div
className="mt-8 flex items-start justify-center gap-3"
className="mt-4 flex items-center justify-center gap-4"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.1 }}
>
<div className="flex flex-col items-center gap-1.5 w-20">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50">
<Users size={18} className="text-emerald-500" />
<div className="flex flex-col items-center gap-1 w-16">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-50">
<Users size={14} className="text-emerald-500" />
</div>
<span className="text-xs font-semibold text-zinc-700">创建房间</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">邀请朋友加入</span>
<span className="text-[10px] font-semibold text-zinc-700">创建房间</span>
</div>
<ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
<ChevronRight size={12} className="shrink-0 text-zinc-300" />
<div className="flex flex-col items-center gap-1.5 w-20">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-50">
<Heart size={18} className="text-amber-500" />
<div className="flex flex-col items-center gap-1 w-16">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-50">
<Heart size={14} className="text-amber-500" />
</div>
<span className="text-xs font-semibold text-zinc-700">各自滑卡</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">右滑喜欢的店</span>
<span className="text-[10px] font-semibold text-zinc-700">各自滑卡</span>
</div>
<ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
<ChevronRight size={12} className="shrink-0 text-zinc-300" />
<div className="flex flex-col items-center gap-1.5 w-20">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-50">
<Sparkles size={18} className="text-rose-500" />
<div className="flex flex-col items-center gap-1 w-16">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-rose-50">
<Sparkles size={14} className="text-rose-500" />
</div>
<span className="text-xs font-semibold text-zinc-700">匹配结果</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">滑中同一家就去</span>
<span className="text-[10px] font-semibold text-zinc-700">匹配结果</span>
</div>
</motion.div>
<motion.div
className="mt-8 flex items-center justify-center gap-2"
className="mt-4 flex items-center justify-center gap-2"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.4, delay: 0.12 }}
@@ -345,7 +350,7 @@ export default function LandingPage() {
key={s}
onClick={() => handleSceneChange(s)}
disabled={loading}
className={`flex items-center gap-1.5 rounded-full px-4 py-2 text-sm font-semibold transition-all disabled:opacity-50 ${
className={`flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all disabled:opacity-50 ${
active
? "bg-emerald-500 text-white shadow-md shadow-emerald-200"
: "bg-zinc-100 text-zinc-500 hover:bg-zinc-200"
@@ -359,7 +364,7 @@ export default function LandingPage() {
</motion.div>
<motion.div
className="mt-5 flex w-full max-w-xs flex-col gap-3"
className="mt-4 flex w-full max-w-xs flex-col gap-2.5"
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.15 }}
@@ -558,7 +563,7 @@ export default function LandingPage() {
<button
onClick={handleCreate}
disabled={loading}
className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600 disabled:opacity-50"
className="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600 disabled:opacity-50"
>
{loading && loadingText ? (
<>
@@ -573,7 +578,7 @@ export default function LandingPage() {
)}
</button>
<div className="flex items-center gap-3 py-2">
<div className="flex items-center gap-3 py-1">
<div className="h-px flex-1 bg-zinc-200" />
<span className="text-xs text-zinc-400">或加入已有房间</span>
<div className="h-px flex-1 bg-zinc-200" />
@@ -592,12 +597,12 @@ export default function LandingPage() {
setError("");
}}
disabled={loading}
className="h-12 flex-1 rounded-xl border border-zinc-200 bg-white px-4 text-center text-lg font-semibold tracking-[0.3em] text-zinc-900 outline-none transition-colors placeholder:text-sm placeholder:tracking-normal placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 disabled:opacity-50"
className="h-11 flex-1 rounded-xl border border-zinc-200 bg-white px-4 text-center text-lg font-semibold tracking-[0.3em] text-zinc-900 outline-none transition-colors placeholder:text-sm placeholder:tracking-normal placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 disabled:opacity-50"
/>
<button
type="submit"
disabled={loading || roomCode.length !== 4}
className="flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-900 text-white transition-colors hover:bg-zinc-700 disabled:opacity-30"
className="flex h-11 w-11 items-center justify-center rounded-xl bg-zinc-900 text-white transition-colors hover:bg-zinc-700 disabled:opacity-30"
>
<LogIn size={18} />
</button>