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:
@@ -1,5 +1,12 @@
|
||||
Component({
|
||||
options: { addGlobalClass: true },
|
||||
properties: {
|
||||
// 之前漏声明,icon 一直没传进来,pt-icon 收到空值退到 note 兜底字形,
|
||||
// 首页那个「文档」图标就是这么来的
|
||||
icon: { type: String, value: 'plus' },
|
||||
// 首页快速记录用肉垫造型(呼应「肉垫计划」),社区发帖仍用普通图标
|
||||
paw: { type: Boolean, value: false },
|
||||
},
|
||||
methods: {
|
||||
onTap() {
|
||||
this.triggerEvent('tap');
|
||||
|
||||
@@ -1 +1,11 @@
|
||||
<view class="fab" bindtap="onTap"><pt-icon name="{{icon}}" size="{{48}}"></pt-icon></view>
|
||||
<view class="fab {{paw ? 'fab-paw' : ''}}" bindtap="onTap">
|
||||
<!-- 肉垫:一个大掌垫 + 四个脚趾垫,纯 CSS 画,呼应 app 名 -->
|
||||
<view wx:if="{{paw}}" class="paw">
|
||||
<view class="bean bean-1"></view>
|
||||
<view class="bean bean-2"></view>
|
||||
<view class="bean bean-3"></view>
|
||||
<view class="bean bean-4"></view>
|
||||
<view class="pad"></view>
|
||||
</view>
|
||||
<pt-icon wx:else name="{{icon}}" size="{{48}}"></pt-icon>
|
||||
</view>
|
||||
|
||||
@@ -8,3 +8,26 @@
|
||||
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)}
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
<scroll-view class="pet-switch" scroll-x="true" enhanced="{{true}}" show-scrollbar="{{false}}">
|
||||
<!-- 纯文字筛选:带头像时不同宠物 chip 高度对不齐,这里只作切换用,文字最稳 -->
|
||||
<view wx:for="{{pets}}" wx:key="id"
|
||||
class="pet-chip {{item.id === currentId ? 'active' : ''}}"
|
||||
data-id="{{item.id}}" bindtap="onPick">
|
||||
<view class="mini-avatar">
|
||||
<image wx:if="{{item.avatar_url}}" class="mini-avatar-img" src="{{item.avatar_url}}" mode="aspectFill"></image>
|
||||
<block wx:else>{{item.emoji}}</block>
|
||||
</view>{{item.name}}
|
||||
</view>
|
||||
<view wx:if="{{showAdd}}" class="pet-chip" bindtap="onAdd">
|
||||
<view class="mini-avatar"><pt-icon name="plus" size="{{30}}"></pt-icon></view>添加
|
||||
</view>
|
||||
data-id="{{item.id}}" bindtap="onPick">{{item.name}}</view>
|
||||
<view wx:if="{{showAdd}}" class="pet-chip pet-chip-add" bindtap="onAdd">+ 添加</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
.pet-switch{
|
||||
display:block;white-space:nowrap;width:100%;
|
||||
display:block;white-space:nowrap;width:100%;font-size:0;
|
||||
}
|
||||
/* chip 是 inline-flex,行内盒默认按 baseline 对齐,不同内容会高低不齐;
|
||||
统一固定高度 + vertical-align:middle,彻底对齐。父级 font-size:0 消掉 chip 间的空白基线 */
|
||||
.pet-switch .pet-chip{
|
||||
margin-right:20rpx;vertical-align:middle;
|
||||
height:64rpx;padding-top:0;padding-bottom:0;font-size:var(--fs-md);
|
||||
}
|
||||
.pet-switch .pet-chip{margin-right:20rpx}
|
||||
.pet-switch .pet-chip:last-child{margin-right:0}
|
||||
/* flex 子项默认 min-width:auto,图片的固有尺寸(320×240)会把 chip 撑大,
|
||||
真机比模拟器更明显。flex:none 锁死成 app.wxss 里定的 52rpx 见方 */
|
||||
.mini-avatar{overflow:hidden;flex:none}
|
||||
.mini-avatar-img{width:52rpx;height:52rpx;display:block}
|
||||
.pet-chip-add{color:var(--muted)}
|
||||
|
||||
Reference in New Issue
Block a user