Fix capsule-aligned navigation and refresh mini program typography

2026-10-04 10:30:17 +08:00
parent adfd0574cc
commit c2b51f96e0
45 changed files with 307 additions and 216 deletions
@@ -0,0 +1,7 @@
+Component({
+  properties: {
+    kind: { type: String, value: "paw" },
+    size: { type: Number, value: 48 },
+    color: { type: String, value: "#398668" },
+  },
+});
@@ -0,0 +1 @@
+{ "component": true }
@@ -0,0 +1,9 @@
+<view class="app-icon-icon" style="width: {{size}}rpx; height: {{size}}rpx; color: {{color}}">
+  <view wx:if="{{kind==='water'}}" class="app-icon-drop"></view>
+  <view wx:elif="{{kind==='food'}}" class="app-icon-bowl"><view class="app-icon-bowl-rim"></view></view>
+  <view wx:else class="app-icon-paw">
+    <view class="app-icon-toe app-icon-one"></view><view class="app-icon-toe app-icon-two"></view>
+    <view class="app-icon-toe app-icon-three"></view><view class="app-icon-toe app-icon-four"></view>
+    <view class="app-icon-pad"></view>
+  </view>
+</view>
@@ -0,0 +1,12 @@
+.app-icon-icon { position: relative; display: flex; align-items: center; justify-content: center; }
+.app-icon-drop { width: 48%; height: 48%; border: 3rpx solid currentColor; border-radius: 50% 50% 50% 0; transform: rotate(135deg); }
+.app-icon-bowl { position: relative; width: 70%; height: 40%; border: 3rpx solid currentColor; border-radius: 5rpx 5rpx 50% 50%; }
+.app-icon-bowl-rim { position: absolute; left: -8%; top: -5rpx; width: 116%; height: 3rpx; border-radius: 4rpx; background: currentColor; }
+.app-icon-paw { position: relative; width: 85%; height: 85%; }
+.app-icon-toe, .app-icon-pad { position: absolute; background: currentColor; }
+.app-icon-toe { width: 17%; height: 24%; border-radius: 50%; }
+.app-icon-one { left: 0; top: 26%; transform: rotate(-28deg); }
+.app-icon-two { left: 24%; top: 3%; transform: rotate(-12deg); }
+.app-icon-three { right: 24%; top: 3%; transform: rotate(12deg); }
+.app-icon-four { right: 0; top: 26%; transform: rotate(28deg); }
+.app-icon-pad { left: 24%; top: 48%; width: 52%; height: 42%; border-radius: 50% 50% 45% 45%; }