add:新增喂养计划页面

src/pages/feed-plan/index.vue

@@ -1,16 +1,36 @@
 <script setup lang="ts">
+import avator from '@/static/image/pet-parameters/avator.png'
 import addBtn from '@/static/image/pet-plan/add_btn.png'
 import card from '@/static/image/pet-plan/card.png'
+import userAddBtn from '@/static/image/pet-plan/user_add_btn.png'
 import ToolApi from '@/utils'
 
+interface User {
+  name: string
+  image: string
+  label: string[]
+  isClick: boolean
+}
 const titleName = ref<string>('喂养计划')
 const safeHeight = ToolApi.getSafeHeight()
+const userList = ref<User[]>([
+  { name: '子龙', image: avator, label: ['1岁', '孟加拉豹猫', '8kg'], isClick: true },
+  { name: '广坤', image: avator, label: ['1岁', '孟加拉豹猫', '8kg'], isClick: false },
+])
+function resetUserClick() {
+  userList.value.forEach(i => (i.isClick = false))
+}
+function handleUser(index: number) {
+  resetUserClick()
+  userList.value[index].isClick = true
+}
 </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-[calc(100% - 32px)] h-[135px]  rounded-lg m-[16px] relative">
+    <!--  喂养计划未注册  -->
+    <view v-show="false" 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" />
@@ -25,11 +45,34 @@ const safeHeight = ToolApi.getSafeHeight()
         </text>
       </view>
     </view>
+    <!--  喂养计划已注册  -->
+    <view class="w-[calc(100% - 32px)] m-[16px] flex items-center">
+      <view v-for="(item, index) in userList" :key="index" class="text-[16px] font-500 mr-[12px] flex flex-col items-center justify-center" :style="{ fontSize: item.isClick ? '20px' : '16px', color: item.isClick ? '#4545E5' : 'black', fontWeight: item.isClick ? '600' : '500' }" @click="handleUser(index)">
+        <text>{{ item.name }}</text>
+        <view v-if="item.isClick" class="w-[16px] h-[3px] bg-[#4545E5]" />
+      </view>
+      <image :src="userAddBtn" class="w-[24px] h-[24px]" />
+    </view>
+
+    <view class="w-[calc(100% - 32px)] h-[129px] rounded-lg m-[16px] relative bg-[white] px-[16px] flex items-center">
+      <image :src="avator" class="w-[64px] h-[64px] rounded-full" />
+      <view class="ml-[16px] min-h-[54px] ">
+        <text class="font-600">
+          子龙
+        </text>
+        <view class="px-[8px] py-[4px] mt-[6px] rounded bg-[#f3f3f3] text-[#999] text-[12px]">
+          1岁
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <style scoped>
-.clip_container{
-  clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);
+.select_user_span{
+  color: #4545E5;
+}
+.user_span{
+  color:black;
 }
 </style>