feat: ui update

miniprogram/pages/wardrobe/wardrobe.wxml

@@ -1,35 +1,43 @@
 <view class="page page-flex">
-  <navigation-bar title="我的衣橱" back="{{false}}" />
+  <navigation-bar title="我的衣橱" back="{{false}}" scrolled="{{navScrolled}}" />
 
   <scroll-view
     scroll-y
-    class="scroll-body"
+    class="scroll-body pb-tab"
     refresher-enabled
     refresher-triggered="{{refreshing}}"
     bindrefresherrefresh="onRefresh"
     bindscrolltolower="onReachBottom"
+    bindscroll="onNavScroll"
   >
-    <!-- 分类筛选 -->
-    <scroll-view scroll-x class="cat-scroll" show-scrollbar="{{false}}">
-      <view class="cat-row">
-        <view
-          wx:for="{{categories}}"
-          wx:key="name"
-          class="cat-item {{activeCategory === index ? 'active' : ''}}"
-          data-index="{{index}}"
-          bindtap="onCategoryTap"
-        >{{item.name}}</view>
-      </view>
-    </scroll-view>
+    <!-- 大标题页头 -->
+    <view class="head">
+      <view class="eyebrow">Wardrobe</view>
+      <view class="display">我的衣橱</view>
+      <view class="wd-stat num">共 {{total}} 件 · 上传额度剩余 {{uploadRemain}} 次</view>
+    </view>
 
-    <!-- 统计 -->
-    <view class="stat">共 {{total}} 件 · 上传额度剩余 {{uploadRemain}} 次</view>
+    <!-- 下划线式极简分类条 -->
+    <view class="segbar">
+      <scroll-view scroll-x class="seg-scroll" show-scrollbar="{{false}}">
+        <view class="seg">
+          <view
+            wx:for="{{categories}}"
+            wx:key="name"
+            class="seg-item {{activeCategory === index ? 'is-on' : ''}}"
+            data-index="{{index}}"
+            bindtap="onCategoryTap"
+          >{{item.name}}</view>
+        </view>
+      </scroll-view>
+    </view>
 
     <!-- 骨架屏 -->
-    <view wx:if="{{loading}}" class="grid">
-      <view class="grid-item" wx:for="{{[1, 2, 3, 4, 5, 6]}}" wx:key="*this">
-        <view class="skeleton sk-card"></view>
-        <view class="skeleton sk-line"></view>
+    <view wx:if="{{loading}}" class="wd-grid">
+      <view class="wd-skel" wx:for="{{[1, 2, 3, 4, 5, 6]}}" wx:key="*this">
+        <view class="sk sk-img"></view>
+        <view class="sk sk-ln" style="width: 70%;"></view>
+        <view class="sk sk-ln" style="width: 46%;"></view>
       </view>
     </view>
 
@@ -44,8 +52,8 @@
     />
 
     <!-- 衣物网格 -->
-    <view wx:else class="grid">
-      <view class="grid-item" wx:for="{{list}}" wx:key="clothes_uuid">
+    <view wx:else class="wd-grid">
+      <view class="wd-tile" wx:for="{{list}}" wx:key="clothes_uuid">
         <clothes-card
           item="{{item}}"
           statusText="{{item._statusText}}"
@@ -55,7 +63,8 @@
       </view>
     </view>
 
-    <view wx:if="{{list.length && !hasMore}}" class="no-more">没有更多了</view>
+    <view wx:if="{{list.length && !hasMore}}" class="foot-note">没有更多了</view>
+    <view class="gap-64"></view>
   </scroll-view>
 
   <view class="fab" bindtap="onUpload">