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 ( 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 */} {/* Profile / Auth button */}
<div className="absolute right-4 top-4"> <div className="absolute right-4 top-3">
{profile ? ( {profile ? (
<button <button
onClick={() => router.push("/profile")} 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="text-base leading-none">{profile.avatar}</span>
<span className="max-w-[5rem] truncate text-xs font-semibold text-zinc-700">{profile.username}</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 <button
onClick={() => setAuthModalOpen(true)} 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} /> <User size={14} />
登录 登录
@@ -279,60 +279,65 @@ export default function LandingPage() {
</div> </div>
<motion.div <motion.div
className="flex flex-col items-center" className="flex items-center gap-3"
initial={{ y: -20, opacity: 0 }} initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
> >
<BrandLogo size={56} /> <BrandLogo size={44} />
<h1 className="mt-2.5 text-3xl font-black tracking-tight text-zinc-900"> <div>
NoWhatever <h1 className="text-2xl font-black tracking-tight text-zinc-900">
</h1> NoWhatever
<p className="mt-0.5 text-sm font-medium tracking-widest text-zinc-400"> </h1>
别说随便 <p className="text-xs font-medium tracking-widest text-zinc-400">
</p> 别说随便
<p className="mt-3 max-w-xs text-center text-sm leading-relaxed text-zinc-500"> </p>
{sceneConfig.subtitle} </div>
</p>
</motion.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 <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 }} initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.1 }} transition={{ duration: 0.5, delay: 0.1 }}
> >
<div className="flex flex-col items-center gap-1.5 w-20"> <div className="flex flex-col items-center gap-1 w-16">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-50">
<Users size={18} className="text-emerald-500" /> <Users size={14} className="text-emerald-500" />
</div> </div>
<span className="text-xs font-semibold text-zinc-700">创建房间</span> <span className="text-[10px] font-semibold text-zinc-700">创建房间</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">邀请朋友加入</span>
</div> </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 flex-col items-center gap-1 w-16">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-50"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-50">
<Heart size={18} className="text-amber-500" /> <Heart size={14} className="text-amber-500" />
</div> </div>
<span className="text-xs font-semibold text-zinc-700">各自滑卡</span> <span className="text-[10px] font-semibold text-zinc-700">各自滑卡</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">右滑喜欢的店</span>
</div> </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 flex-col items-center gap-1 w-16">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-50"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-rose-50">
<Sparkles size={18} className="text-rose-500" /> <Sparkles size={14} className="text-rose-500" />
</div> </div>
<span className="text-xs font-semibold text-zinc-700">匹配结果</span> <span className="text-[10px] font-semibold text-zinc-700">匹配结果</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">滑中同一家就去</span>
</div> </div>
</motion.div> </motion.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 }} initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.4, delay: 0.12 }} transition={{ duration: 0.4, delay: 0.12 }}
@@ -345,7 +350,7 @@ export default function LandingPage() {
key={s} key={s}
onClick={() => handleSceneChange(s)} onClick={() => handleSceneChange(s)}
disabled={loading} 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 active
? "bg-emerald-500 text-white shadow-md shadow-emerald-200" ? "bg-emerald-500 text-white shadow-md shadow-emerald-200"
: "bg-zinc-100 text-zinc-500 hover:bg-zinc-200" : "bg-zinc-100 text-zinc-500 hover:bg-zinc-200"
@@ -359,7 +364,7 @@ export default function LandingPage() {
</motion.div> </motion.div>
<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 }} initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.15 }} transition={{ duration: 0.5, delay: 0.15 }}
@@ -558,7 +563,7 @@ export default function LandingPage() {
<button <button
onClick={handleCreate} onClick={handleCreate}
disabled={loading} 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 ? ( {loading && loadingText ? (
<> <>
@@ -573,7 +578,7 @@ export default function LandingPage() {
)} )}
</button> </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" /> <div className="h-px flex-1 bg-zinc-200" />
<span className="text-xs text-zinc-400">或加入已有房间</span> <span className="text-xs text-zinc-400">或加入已有房间</span>
<div className="h-px flex-1 bg-zinc-200" /> <div className="h-px flex-1 bg-zinc-200" />
@@ -592,12 +597,12 @@ export default function LandingPage() {
setError(""); setError("");
}} }}
disabled={loading} 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 <button
type="submit" type="submit"
disabled={loading || roomCode.length !== 4} 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} /> <LogIn size={18} />
</button> </button>