feat(fe): 肉垫 FAB + 冷启动闪屏;顶部筛选改纯文字对齐

- FAB 重设计成肉垫造型(呼应「肉垫计划」),修 fab.js 漏声明
  icon 属性导致的兜底文档图标;社区发帖 FAB 保持图标
- onboarding 加冷启动闪屏,登录+拉宠物在闪屏期完成再进首页,
  不再闪一下建档向导;欢迎屏 logo 换肉垫、去掉过时 AI 文案
- 顶部宠物筛选去掉头像改纯文字(带图/emoji 时高度对不齐),
  固定高度 + vertical-align:middle 彻底对齐,添加用「+」文字

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-07-30 17:57:06 +08:00
parent de2b72221c
commit 396f531023
10 changed files with 119 additions and 28 deletions
+35 -2
View File
@@ -9,13 +9,46 @@
.skip-link{text-align:center;margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-md);padding:var(--sp-2)}
@keyframes fade{from{opacity:0;transform:translateY(16rpx)}to{opacity:1;transform:none}}
/* 冷启动闪屏 */
.boot{
position:fixed;inset:0;z-index:200;
display:flex;flex-direction:column;align-items:center;justify-content:center;
background:
radial-gradient(circle at 50% 32%, rgba(253,179,92,.28), transparent 55%),
var(--bg);
}
.boot-badge{
width:184rpx;height:184rpx;border-radius:44rpx;
background:linear-gradient(150deg,#FFB865,#F5943E);
display:flex;align-items:center;justify-content:center;
box-shadow:0 18rpx 42rpx rgba(214,138,52,.4);
animation:boot-pop .5s ease both, boot-breathe 2.4s ease-in-out .5s infinite;
}
.boot-name{margin-top:var(--sp-5);font-size:var(--fs-2xl);font-weight:var(--fw-b);letter-spacing:-1rpx}
.boot-tip{margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-md)}
@keyframes boot-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes boot-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-10rpx)}}
.hero{text-align:center;padding:60rpx 0 var(--sp-5)}
.pet-logo{
width:176rpx;height:176rpx;margin:0 auto var(--sp-5);border-radius:var(--r-lg);
background:linear-gradient(135deg,#FFE0AB,#FDB35C);
display:flex;align-items:center;justify-content:center;font-size:88rpx;
background:linear-gradient(135deg,#FFB865,#F5943E);
display:flex;align-items:center;justify-content:center;
box-shadow:var(--sd-2);
}
/* 肉垫(呼应「肉垫计划」)——奶白掌垫 + 四趾垫,闪屏和欢迎屏共用 */
.paw{position:relative;width:100rpx;height:92rpx}
.paw .pad{
position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:66rpx;height:54rpx;background:#FFF7EC;
border-radius:48% 48% 44% 44%/62% 62% 40% 40%;
}
.paw .bean{position:absolute;background:#FFF7EC;border-radius:50%}
.paw .bean-1{width:22rpx;height:30rpx;left:0;top:30rpx;transform:rotate(-20deg)}
.paw .bean-2{width:24rpx;height:33rpx;left:27rpx;top:6rpx;transform:rotate(-7deg)}
.paw .bean-3{width:24rpx;height:33rpx;right:27rpx;top:6rpx;transform:rotate(7deg)}
.paw .bean-4{width:22rpx;height:30rpx;right:0;top:30rpx;transform:rotate(20deg)}
.hero-h1{font-size:var(--fs-2xl);letter-spacing:-1.2rpx;font-weight:var(--fw-b)}
.hero-sub{margin-top:var(--sp-3);line-height:1.65;color:var(--muted);font-size:var(--fs-md)}