application [cat-mini-app] layout development

apps/cat-mini-app/src/pages.json

@@ -43,6 +43,26 @@
 			}
 		}
 	],
+	"tabBar": {
+		"color": "#7A7E83",
+		"selectedColor": "#ea580c",
+		"borderStyle": "black",
+		"backgroundColor": "#ffffff",
+		"list": [
+			{
+				"pagePath": "pages/home",
+				"text": "首页"
+			},
+			{
+				"pagePath": "pages/cats",
+				"text": "猫咪"
+			},
+			{
+				"pagePath": "pages/shop",
+				"text": "商城"
+			}
+		]
+	},
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

apps/cat-mini-app/src/pages/home.vue

@@ -60,6 +60,20 @@
       </view>
     </view>
 
+    <!-- 导航卡片 -->
+    <view class="mx-4 mb-6">
+      <view class="grid grid-cols-2 gap-4">
+        <view @click="navigateTo('/pages/breeders')" class="bg-white rounded-2xl shadow-lg p-6 flex flex-col items-center cursor-pointer hover:bg-orange-50 transition-colors">
+          <text class="text-3xl mb-2">🐈</text>
+          <text class="text-gray-800 font-medium">种公种母介绍</text>
+        </view>
+        <view @click="navigateTo('/pages/reservation')" class="bg-white rounded-2xl shadow-lg p-6 flex flex-col items-center cursor-pointer hover:bg-orange-50 transition-colors">
+          <text class="text-3xl mb-2">📅</text>
+          <text class="text-gray-800 font-medium">预约排队</text>
+        </view>
+      </view>
+    </view>
+
     <!-- 加载中 -->
     <view v-else class="flex-1 flex items-center justify-center">
       <view class="flex flex-col items-center">
@@ -68,27 +82,7 @@
       </view>
     </view>
 
-    <!-- 底部导航提示 -->
-    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
-      <view class="flex justify-around">
-        <view class="flex flex-col items-center text-orange-500">
-          <text class="text-lg">🏠</text>
-          <text class="text-xs mt-1">首页</text>
-        </view>
-        <view class="flex flex-col items-center text-gray-400">
-          <text class="text-lg">🐱</text>
-          <text class="text-xs mt-1">猫咪</text>
-        </view>
-        <view class="flex flex-col items-center text-gray-400">
-          <text class="text-lg">🛒</text>
-          <text class="text-xs mt-1">商城</text>
-        </view>
-        <view class="flex flex-col items-center text-gray-400">
-          <text class="text-lg">👤</text>
-          <text class="text-xs mt-1">我的</text>
-        </view>
-      </view>
-    </view>
+
   </view>
 </template>
 
@@ -117,6 +111,10 @@ interface AttributeFile {
 const shelter = ref<Shelter | null>(null)
 const images = ref<AttributeFile[]>([])
 
+const navigateTo = (url: string) => {
+  uni.navigateTo({ url })
+}
+
 onLoad(async () => {
   // 如果需要认证，检查登录状态
   if (AUTH_REQUIRED) {