Redesign mini program navigation and add back controls

pets-fe/components/tab-bar/index.wxml

@@ -2,11 +2,35 @@
   <view
     wx:for="{{tabs}}"
     wx:key="path"
-    class="item {{current===item.path?'active':''}} {{item.label==='遛狗'?'walk':''}}"
+    class="item {{current===item.path?'active':''}} {{item.key==='walk'?'walk':''}}"
     data-path="{{item.path}}"
     bindtap="go"
+    aria-role="button"
+    aria-label="{{item.label}}"
   >
-    <view class="icon">{{item.icon}}</view>
-    <text>{{item.label}}</text>
+    <view wx:if="{{item.key==='walk'}}" class="walk-bubble">
+      <view class="paw">
+        <view class="toe toe-one"></view>
+        <view class="toe toe-two"></view>
+        <view class="toe toe-three"></view>
+        <view class="toe toe-four"></view>
+        <view class="pad"></view>
+      </view>
+    </view>
+    <view wx:else class="icon-wrap">
+      <view wx:if="{{item.key==='home'}}" class="home-icon">
+        <view class="home-roof"></view>
+        <view class="home-body"></view>
+        <view class="home-door"></view>
+      </view>
+      <view wx:elif="{{item.key==='meetups'}}" class="friends-icon">
+        <view class="friend friend-left"></view>
+        <view class="friend friend-right"></view>
+      </view>
+      <view wx:elif="{{item.key==='tasks'}}" class="task-icon"><view class="task-tick"></view></view>
+      <image wx:else class="pet-icon" src="/assets/logo-corgi-v2.png" mode="aspectFill" />
+    </view>
+    <text class="label">{{item.label}}</text>
+    <view wx:if="{{current===item.path && item.key!=='walk'}}" class="active-dot"></view>
   </view>
 </view>