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

<script setup lang="ts">
import AddFeedingPlan from '@/components/AddFeedingPlan.vue'

function goToChooseProductPage() {
  uni.navigateTo({
    url: '/pages/feed-plan-calculator/choose-product',
  })
}
</script>

<template>
  <view class="w-full h-full bg-regular flex flex-col items-center">
    <view class="mt-[54px] flex flex-col gap-1 mb-[60px] items-center">
      <view class="gradient-text text-[48px] font-bold">
        400<text class="text-[24px] font-semibold">
          Kcal
        </text>
      </view>
      <view class="font-semibold">
        总热量
      </view>
      <view class="text-xs text-disabled font-semibold">
        （未添加产品）
      </view>
    </view>
    <image src="@/static/svg/plate.svg" class="w-[289px] h-[176px] mb-[50px]" />
    <view class="w-full px-4 mb-[52px]">
      <AddFeedingPlan @tap="goToChooseProductPage" />
    </view>
    <BButton disabled>
      确认
    </BButton>
  </view>
</template>

<style scoped>
.gradient-text {
  background: linear-gradient(180deg, #151515 0%, #7B7B7B 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>