Files
PetCommunity/miniprogram/custom-tab-bar/index.wxml
chenwu 2c3c2653fa style: 按毛玻璃设计稿重做广场/附近/发布/汪友/我的五大页面视觉
参照 wangquan_glass_redesign_mockup.html 的玻璃拟态(glassmorphism)设计语言重写前端展示样式:
- app.wxss: 引入 coral/tangerine/lemon/mint/sky/lilac 色板与 .glass/.glass-strong/.sticker-tag 毛玻璃工具类,背景改为纯白
- custom-tab-bar: 改为悬浮玻璃浮岛(.tab-dock),含液态光泽动画与渐变发布按钮(FAB)
- feed: 故事条改为方形圆角描边+conic渐变,顶部操作按钮、骨架屏改为玻璃质感
- post-card 组件: 卡片/贴纸标签/操作按钮全面玻璃化,点赞按钮改为渐变高亮
- nearby: 地图控件、宠物弹窗、列表项、预览条统一为毛玻璃卡片
- post: 上传区/输入框/标签pill/心情选择器改为玻璃质感+渐变选中态
- friends: 空态与好友列表项改为玻璃卡片
- profile: 用户信息区改为带渐变光斑的玻璃英雄卡,统计/宠物卡/动态网格同步玻璃化

未改动页面结构(WXML)与业务逻辑(TS),仅升级视觉样式(WXSS),保持程序可运行。
2026-06-08 11:36:38 +08:00

59 lines
1.9 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<view class="tab-dock">
<view class="dock-sheen"></view>
<!-- 广场 -->
<view class="tab-pill {{selected === 0 ? 'active' : ''}}" bindtap="onTab" data-index="0" data-path="/pages/feed/feed">
<view class="icon-wrap">
<view class="icon-grid">
<view class="sq"></view><view class="sq"></view>
<view class="sq"></view><view class="sq"></view>
</view>
</view>
<text class="tab-label">广场</text>
</view>
<!-- 附近 -->
<view class="tab-pill {{selected === 1 ? 'active' : ''}}" bindtap="onTab" data-index="1" data-path="/pages/nearby/nearby">
<view class="icon-wrap">
<view class="icon-pin">
<view class="pin-head"></view>
<view class="pin-tail"></view>
</view>
</view>
<text class="tab-label">附近</text>
</view>
<!-- 发布 FAB -->
<view class="tab-fab-wrap">
<view class="tab-fab" bindtap="onPost">
<view class="fab-shine"></view>
<text class="fab-plus"></text>
</view>
</view>
<!-- 汪友 -->
<view class="tab-pill {{selected === 2 ? 'active' : ''}}" bindtap="onTab" data-index="2" data-path="/pages/friends/friends">
<view class="icon-wrap" style="position:relative">
<view class="icon-ppl">
<view class="ppl-head ppl-head-l"></view>
<view class="ppl-head ppl-head-r"></view>
<view class="ppl-body"></view>
</view>
<view wx:if="{{unreadCount > 0}}" class="badge">{{unreadCount > 99 ? '99+' : unreadCount}}</view>
</view>
<text class="tab-label">汪友</text>
</view>
<!-- 我的 -->
<view class="tab-pill {{selected === 3 ? 'active' : ''}}" bindtap="onTab" data-index="3" data-path="/pages/profile/profile">
<view class="icon-wrap">
<view class="icon-user">
<view class="user-head"></view>
<view class="user-body"></view>
</view>
</view>
<text class="tab-label">我的</text>
</view>
</view>