frontend-uniapp/src/pages/feed-plan/index.vue

<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>
  <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="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>

</style>