add:新增喂养计算器开始页面

src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    FeedStep: typeof import('./components/FeedStep.vue')['default']
     TabBar: typeof import('./components/TabBar.vue')['default']
     TitleBar: typeof import('./components/TitleBar.vue')['default']
   }

src/components/FeedStep.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const props = defineProps<{
+  list: Array<{
+    step: number
+    title: string
+  }>
+}>()
+</script>
+
+<template>
+  <view v-for="(item, index) in props.list" :key="index">
+    <view class="flex">
+      <view class="w-[21px] h-[21px] bg-[#999] rounded-xl flex items-center justify-center text-[white]">
+        {{ item.step }}
+      </view>
+      <view class="ml-1 text-[#999] font-pingfangsc font-normal tracking-[0.8px]">
+        {{ item.title }}
+      </view>
+    </view>
+    <view v-if="index !== props.list.length - 1" class="w-[1px] h-[13px] bg-[#999] ml-2.5 mt-1 mb-1" />
+  </view>
+</template>
+
+<style scoped>
+
+</style>

src/pages/feed-plan/index.vue

@@ -1,8 +1,44 @@
 <script setup lang="ts">
+import FeedStep from '@/components/FeedStep.vue'
+import feedSlogan from '@/static/image/feed-plan/feed-slogan.png'
+import feedTitle from '@/static/image/feed-plan/feed-title.png'
+import ToolApi from '@/utils'
+
+interface StepInfo {
+  step: number
+  title: string
+}
+const titleName = ref<string>('喂养计算器')
+const safeHeight = ToolApi.getSafeHeight()
+const safeBottomMenuHeight = ToolApi.getMenuButtonInfoHeight()
+const stepInfo = ref<StepInfo[]>([
+  { step: 1, title: '宠物基础信息' },
+  { step: 2, title: '身体状态信息' },
+  { step: 3, title: '计算喂养计划' },
+])
 </script>
 
 <template>
-  <view>喂养计划</view>
+  <TitleBar :title-name="titleName" />
+  <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto" :style="`height:calc(100vh - ${safeHeight}px)`">
+    <view class="w-[273px] h-[125px] mx-auto mt-[105px]">
+      <image :src="feedTitle" class="w-full h-full" />
+    </view>
+
+    <view class="w-[127px] h-[121px] ml-15 mt-14">
+      <FeedStep :list="stepInfo" />
+    </view>
+
+    <view class="mx-auto">
+      <button class="w-[176px] h-[47px] flex items-center justify-center bg-[#4545E5] border-none text-[white] rounded-3xl mt-[87px]">
+        准备好了
+      </button>
+    </view>
+
+    <view class="w-full fixed left-0" :style="{ bottom: `${safeBottomMenuHeight + 70}px` }">
+      <image :src="feedSlogan" class="w-[138px] h-[38px] mx-auto" />
+    </view>
+  </view>
 </template>
 
 <style scoped>

src/utils/index.ts

@@ -4,7 +4,10 @@ function getSafeHeight(): number {
   const menuButtonInfoHeight: number = uni.getMenuButtonBoundingClientRect().height + 60
   return safeAreaInsetBottom + menuButtonInfoHeight
 }
-
+function getMenuButtonInfoHeight(): number {
+  return uni.getMenuButtonBoundingClientRect().height + 60
+}
 export default {
   getSafeHeight,
+  getMenuButtonInfoHeight,
 }