参照 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),保持程序可运行。
59 lines
1.9 KiB
Plaintext
59 lines
1.9 KiB
Plaintext
<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>
|