add:新增喂养计划未注册页面

src/pages/feed-plan/index.vue

@@ -1,17 +1,35 @@
 <script setup lang="ts">
+import addBtn from '@/static/image/pet-plan/add_btn.png'
+import card from '@/static/image/pet-plan/card.png'
+import ToolApi from '@/utils'
+
 const titleName = ref<string>('喂养计划')
-function handleJumpPlan() {
-  uni.navigateTo({ url: '/pages/feed-calculator/index' })
-}
+const safeHeight = ToolApi.getSafeHeight()
 </script>
 
 <template>
   <TitleBar :title-name="titleName" />
-  <button class="h-16 flex items-center justify-center bg-[red]" @tap="handleJumpPlan">
-    跳转喂养计算器
-  </button>
+  <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto" :style="`height:calc(100vh - ${safeHeight}px)`">
+    <view class="w-[calc(100% - 32px)] h-[135px]  rounded-lg m-[16px] relative">
+      <image :src="card" class="w-full h-full absolute z-20" />
+      <view class="z-20 absolute w-full mt-[35px] flex flex-col">
+        <image :src="addBtn" class="w-[47px] h-[47px] mx-auto" />
+        <text class="text-[12px] text-[#D9D9D9] mx-auto mt-[6px]">
+          添加你的喂养计划
+        </text>
+      </view>
+
+      <view class="w-[111px] h-[42px] bg-[black] absolute top-0 right-0 rounded-tr-xl z-10">
+        <text class="text-[#999] absolute right-5 top-2 text-[12px]">
+          编辑计划
+        </text>
+      </view>
+    </view>
+  </view>
 </template>
 
 <style scoped>
-
+.clip_container{
+  clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);
+}
 </style>