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

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-30 17:57:06 +08:00

34 lines
1.4 KiB
Plaintext

.fab{
position:fixed;right:36rpx;bottom:calc(190rpx + env(safe-area-inset-bottom));
width:108rpx;height:108rpx;border-radius:var(--r-md);
background:var(--cta);
color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:var(--sd-2);
z-index:60;
}
.fab:active{transform:scale(.96)}
/* 肉垫造型:暖橘圆钮,中间一只奶白肉垫。圆形更像脚印落下的样子,
阴影带橘调让它从奶白背景上浮起来 */
.fab-paw{
width:116rpx;height:116rpx;border-radius:50%;
background:linear-gradient(150deg,#FFB865,#F5943E);
box-shadow:0 12rpx 28rpx rgba(214,138,52,.42),0 2rpx 6rpx rgba(214,138,52,.3);
}
.fab-paw:active{transform:scale(.94)}
.paw{position:relative;width:66rpx;height:60rpx}
/* 掌垫:上窄下宽的圆角心形块,坐在下方 */
.paw .pad{
position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:44rpx;height:36rpx;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:15rpx;height:20rpx;left:0;top:20rpx;transform:rotate(-20deg)}
.paw .bean-2{width:16rpx;height:22rpx;left:18rpx;top:5rpx;transform:rotate(-7deg)}
.paw .bean-3{width:16rpx;height:22rpx;right:18rpx;top:5rpx;transform:rotate(7deg)}
.paw .bean-4{width:15rpx;height:20rpx;right:0;top:20rpx;transform:rotate(20deg)}