style: 周末契约顶部对齐极速救场 + 首页卡片样式统一
- blindbox/page: 加 justify-center 让标题垂直位置与 panic 页保持一致,移除 flex-1 子容器 - page: 周末契约卡片色值统一用 white/* 透明度,去掉紫色 drop-shadow,简化 hover 光晕
This commit is contained in:
+71
-61
@@ -131,84 +131,94 @@ export default function BlindboxLobbyPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-6 overflow-y-auto scrollbar-none">
|
||||
<div className="relative flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-6 overflow-y-auto scrollbar-none">
|
||||
{/* Ambient */}
|
||||
<div className="pointer-events-none fixed left-1/3 top-0 h-80 w-80 -translate-y-1/3 rounded-full bg-purple-600/8 blur-3xl" />
|
||||
<div className="pointer-events-none fixed right-0 top-1/2 h-60 w-60 rounded-full bg-indigo-500/5 blur-3xl" />
|
||||
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={() => router.push("/")}
|
||||
className="absolute left-4 top-3 flex h-8 items-center gap-1 rounded-full bg-surface px-3 text-xs font-medium text-muted ring-1 ring-border transition-colors active:bg-elevated"
|
||||
>
|
||||
<ArrowLeft size={14} />
|
||||
返回
|
||||
</button>
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex w-full max-w-sm items-center gap-3">
|
||||
<button
|
||||
onClick={() => router.push("/")}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-full bg-surface ring-1 ring-border transition-colors active:bg-elevated"
|
||||
>
|
||||
<ArrowLeft size={16} className="text-muted" />
|
||||
</button>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-lg font-black text-heading">🎁 周末契约</h1>
|
||||
<p className="text-[10px] font-medium tracking-wider text-purple-400/60">
|
||||
<motion.div
|
||||
className="flex items-center gap-3"
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-linear-to-br from-indigo-900 to-purple-700 shadow-lg shadow-purple-900/30 ring-1 ring-purple-500/20">
|
||||
<Package size={22} className="text-purple-300" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-black tracking-tight text-heading">
|
||||
周末契约
|
||||
</h1>
|
||||
<p className="text-xs font-medium tracking-widest text-muted">
|
||||
ADVENTURE ROULETTE
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.p
|
||||
className="mt-2 max-w-xs text-center text-xs leading-relaxed text-muted"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.05 }}
|
||||
>
|
||||
平日蓄水,周末开奖。把所有"想做但一直没做"的事,交给命运来决定。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
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 w-16">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-purple-500/15">
|
||||
<Plus size={14} className="text-purple-400" />
|
||||
</div>
|
||||
<span className="text-[10px] font-semibold text-muted">塞入想法</span>
|
||||
</div>
|
||||
|
||||
<ChevronRight size={12} className="shrink-0 text-dim" />
|
||||
|
||||
<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-indigo-500/15">
|
||||
<Package size={14} className="text-indigo-400" />
|
||||
</div>
|
||||
<span className="text-[10px] font-semibold text-muted">周末开奖</span>
|
||||
</div>
|
||||
|
||||
<ChevronRight size={12} className="shrink-0 text-dim" />
|
||||
|
||||
<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-violet-500/15">
|
||||
<Sparkles size={14} className="text-violet-400" />
|
||||
</div>
|
||||
<span className="text-[10px] font-semibold text-muted">执行契约</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{!loggedIn ? (
|
||||
/* ============ Layer 1: Unauthenticated — Feature intro ============ */
|
||||
/* ============ Layer 1: Unauthenticated — Login CTA ============ */
|
||||
<motion.div
|
||||
key="intro"
|
||||
className="mt-10 flex flex-1 flex-col items-center"
|
||||
className="mt-10 flex flex-col items-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
>
|
||||
{/* Hero icon */}
|
||||
<motion.div
|
||||
className="relative flex h-28 w-28 items-center justify-center"
|
||||
animate={{ y: [0, -6, 0] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
||||
>
|
||||
<div className="absolute inset-0 rounded-3xl bg-purple-600/20 blur-xl" />
|
||||
<div className="relative flex h-24 w-24 items-center justify-center rounded-2xl bg-linear-to-br from-indigo-900 to-purple-900 shadow-2xl ring-1 ring-purple-700/30">
|
||||
<Package size={36} className="text-purple-300/70" strokeWidth={1.5} />
|
||||
</div>
|
||||
<motion.span
|
||||
className="absolute -right-1 -top-1 text-lg"
|
||||
animate={{ rotate: [0, 15, -15, 0], scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}
|
||||
>
|
||||
✨
|
||||
</motion.span>
|
||||
</motion.div>
|
||||
|
||||
<h2 className="mt-6 text-xl font-black text-heading">
|
||||
和 TA 一起,拆开周末
|
||||
</h2>
|
||||
<p className="mt-2 max-w-72 text-center text-sm leading-relaxed text-tertiary">
|
||||
平日蓄水,周末开奖。把所有"想做但一直没做"的事,
|
||||
交给命运来决定。
|
||||
</p>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="mt-8 flex w-full max-w-xs flex-col gap-4">
|
||||
{[
|
||||
{ step: "1", icon: Plus, text: "创建专属房间,邀请 TA 加入" },
|
||||
{ step: "2", icon: Package, text: "平时随时塞入疯狂想法" },
|
||||
{ step: "3", icon: Sparkles, text: "周末一起盲抽,绝不反悔" },
|
||||
].map((s) => (
|
||||
<div key={s.step} className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-purple-600/15 text-sm font-black text-purple-400 ring-1 ring-purple-500/20">
|
||||
{s.step}
|
||||
</div>
|
||||
<p className="text-sm font-medium text-secondary">{s.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<motion.button
|
||||
onClick={() => setShowAuth(true)}
|
||||
className="mt-10 flex h-12 w-full max-w-xs items-center justify-center gap-2 rounded-2xl bg-linear-to-r from-purple-600 to-indigo-600 text-sm font-bold text-white shadow-lg shadow-purple-900/40 transition-shadow hover:shadow-xl hover:shadow-purple-900/50"
|
||||
className="flex h-12 w-full max-w-xs items-center justify-center gap-2 rounded-2xl bg-linear-to-r from-purple-600 to-indigo-600 text-sm font-bold text-white shadow-lg shadow-purple-900/40 transition-shadow hover:shadow-xl hover:shadow-purple-900/50"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
>
|
||||
@@ -242,7 +252,7 @@ export default function BlindboxLobbyPage() {
|
||||
/* ============ Layer 2: Logged in, no rooms — Create first ============ */
|
||||
<motion.div
|
||||
key="empty"
|
||||
className="mt-10 flex flex-1 flex-col items-center"
|
||||
className="mt-10 flex flex-col items-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
@@ -338,7 +348,7 @@ export default function BlindboxLobbyPage() {
|
||||
/* ============ Layer 3: Logged in, has rooms — Room list ============ */
|
||||
<motion.div
|
||||
key="rooms"
|
||||
className="mt-6 flex w-full max-w-sm flex-1 flex-col"
|
||||
className="mt-6 flex w-full max-w-sm flex-col"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
|
||||
+18
-12
@@ -97,44 +97,50 @@ export default function LandingPage() {
|
||||
{/* Card B: Adventure Roulette */}
|
||||
<motion.button
|
||||
onClick={() => router.push("/blindbox")}
|
||||
className="group relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-indigo-900 to-purple-800 p-5 pb-4 text-left shadow-xl shadow-purple-600/20 ring-1 ring-purple-400/15 transition-shadow hover:shadow-2xl hover:shadow-purple-500/30"
|
||||
className="group relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-indigo-900 to-purple-800 p-5 pb-4 text-left shadow-xl shadow-purple-600/20 ring-1 ring-white/15 transition-shadow hover:shadow-2xl hover:shadow-purple-500/30"
|
||||
initial={{ x: 40, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
whileHover={{ scale: 1.02, rotate: 0.5 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
>
|
||||
<div className="absolute -right-6 -top-6 h-32 w-32 rounded-full bg-purple-500/20 blur-2xl transition-all group-hover:bg-purple-400/30 group-hover:blur-3xl" />
|
||||
<div className="absolute -bottom-4 -left-4 h-24 w-24 rounded-full bg-indigo-400/15 blur-xl transition-all group-hover:bg-indigo-300/25" />
|
||||
<div className="absolute -right-6 -top-6 h-32 w-32 rounded-full bg-purple-400/15 blur-2xl" />
|
||||
<div className="absolute -bottom-4 -left-4 h-24 w-24 rounded-full bg-indigo-300/15 blur-xl" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 ring-1 ring-purple-300/15">
|
||||
<Gift size={22} className="text-purple-200" />
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-black/15 ring-1 ring-white/10">
|
||||
<Gift size={22} className="text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-lg font-black text-white drop-shadow-[0_0_12px_rgba(192,132,252,0.5)]">
|
||||
🎁 周末契约
|
||||
</h2>
|
||||
<p className="text-[10px] font-semibold tracking-wider text-purple-300/60">
|
||||
<h2 className="text-lg font-black text-white">🎁 周末契约</h2>
|
||||
<p className="text-[10px] font-semibold tracking-wider text-white/60">
|
||||
ADVENTURE ROULETTE
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-3.5 text-sm font-medium leading-relaxed text-purple-100/90">
|
||||
<p className="mt-3.5 text-sm font-medium leading-relaxed text-white/90">
|
||||
丢入疯狂想法,周末盲盒开奖,绝不反悔
|
||||
</p>
|
||||
<div className="mt-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-1.5 text-xs font-bold text-purple-300/50">
|
||||
<div className="flex items-center gap-1.5 text-xs font-bold text-white/50">
|
||||
<Gift size={12} />
|
||||
<span>盲盒蓄水 · 仪式开奖</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-0.5 text-xs font-semibold text-purple-200/40 transition-colors group-hover:text-purple-200/70">
|
||||
<div className="flex items-center gap-0.5 text-xs font-semibold text-white/40 transition-colors group-hover:text-white/70">
|
||||
进入
|
||||
<ChevronRight size={14} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl"
|
||||
whileHover={{
|
||||
x: [0, -2, 2, -2, 2, 0],
|
||||
transition: { duration: 0.4, repeat: Infinity },
|
||||
}}
|
||||
/>
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user