Fix capsule-aligned navigation and refresh mini program typography

pets-fe/pages/pets/pets.wxml

@@ -1,11 +1,8 @@
-<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
+<page-layout id="page-layout" title="我的毛孩子">
 <view class="screen">
-  <safe-top />
-  <view class="eyebrow">MY LITTLE FAMILY</view>
-  <view class="title">我的毛孩子</view>
   <view class="family">
     <view>
-      <text>五只柯基，也能一起遛</text>
+      <text>每一位家人，都值得被好好照顾</text>
       <strong>每一只都有自己的故事</strong>
     </view>
     <image src="/assets/corgi-family-five.png" mode="aspectFit" />
@@ -27,7 +24,7 @@
         src="{{item.avatar_url}}"
         mode="aspectFill"
       />
-      <text wx:else>🐕</text>
+      <app-icon wx:else size="70" />
     </view>
     <view class="pet-info">
       <strong>{{item.name}}</strong>
@@ -39,8 +36,8 @@
     </view>
     <text class="arrow">›</text>
   </view>
-  <view wx:if="{{!pets.length}}" class="empty">给第一只狗狗建个档案吧 🐾</view>
+  <view wx:if="{{!pets.length}}" class="empty">给第一只狗狗建个档案吧 </view>
   <button class="primary add-button" bindtap="add">＋ 新建宠物档案</button>
 </view>
-</scroll-view>
+</page-layout>
 <tab-bar current="/pages/pets/pets" />