feat：小程序生长监控 研发

src/pagesHome/index.scss

@@ -3,3 +3,6 @@ background-color: #e8f8db;
 color: #207c06;
 border: 4px solid #7fcf5e;
 }
+.topBg{
+background-image: linear-gradient(to bottom, #c6edb7 0%, #f5f6f5 100%)
+}

src/pagesHome/monitor.tsx

@@ -1,7 +1,81 @@
-import { View } from "@tarojs/components";
+import { View,Image,Text } from "@tarojs/components";
-
+import './index.scss'
-export default function Monitor() {
+import avatar from './assets/cardAvatar.png'
+import triangle from './assets/triangle.png'
+import share from './assets/share.png'
+import circle from './assets/circle.png'
+import growMain from './assets/grawMain.png'
+import larvae from './assets/larvea.png'
+const shareComponent=()=>{
   return (
-    <View>Monitor</View>
+          <View className="bg-[#e0f4d6] text-[green] flex justify-evenly items-center w-[130px] h-[50px]  rounded-xl">
+            <Image src={share} className="w-[20px] h-[20px]" />
+            <View>分享</View>
+          </View>
+  )
+}
+const adoptionCircle=()=>{
+    return (
+      <View className="fixed right-0 bottom-[18%]">
+        <Image src={circle} className="w-[80px] h-[80px]"/>
+      </View>
+    )
+}
+export default function Monitor() {
+  return (
+    <View className="relative">
+      <View className="topBg  w-full h-[180px] flex items-center p-[15px]">
+        <Image src={avatar} className="w-[140px] ml-[50px] h-[120px]"/>
+        <View className="ml-[20px]">
+            <View className="text-lg mb-[10px]">塘主0908</View>
+            <View className="text-xs">参与了<Text className="text-[green]">1个</Text>认养,累计认养<Text className="text-[green]">3亩</Text></View>
+        </View>
+      </View>
+      <View className="bg-[#fff] ">
+        <View className="flex items-center p-[20px] px-[30px]">
+          <Text>2024季</Text>
+          <Image src={triangle} className="w-[25px] h-[15px] ml-[10px]" />
+        </View>
+        <View className="w-full h-[5px] bg-[#f7f7f7]"></View>
+        <View className="flex justify-between p-[20px] px-[30px]">
+          <View>
+            <View className="text-[#fff] mb-[10px] flex items-center justify-center w-[60px] h-[60px] bg-[#5ec45f]">24</View>
+            <View>2024.06</View>
+          </View>
+          <View> 
+            <View className="text-sm text-[#b3b3b3]">当前大闸蟹状态</View>
+            <View className="text-xl">蚤状幼体期</View>
+          </View>
+          {shareComponent()}
+        </View>
+        <View className="w-full flex relative justify-center mb-[20px]">
+          <Image src={growMain} className="w-[90%] h-[180px]"/>
+          <Image src={larvae} className="absolute w-[170px] h-[150px] left-[19%] top-[-10px]"/>
+        </View>
+        <View className="w-full h-[5px] bg-[#f7f7f7]"></View>
+        <View className="p-[20px] px-[30px]">
+          <View>本季认养</View>
+          <View className="rounded-lg mt-[10px] w-full h-[80px] p-[20px] flex items-center bg-[#f5f5f5]">
+            <Text>3亩</Text>
+          </View>
+        </View>
+        <View className="p-[20px] px-[30px]">
+          <View>预计产量</View>
+          <View className="rounded-lg text-sm mt-[10px] w-full p-[20px] bg-[#f5f5f5]">
+            <View>3两母蟹+4两公蟹25份，每份8只；</View>
+            <View className="mt-[10px]">3.5两母蟹+4.5两公蟹16份，每份8只；</View>
+            <View className="mt-[10px] mb-[10px]">4两母蟹+5两公蟹12份，每份8只；</View>
+            <View>4.5两母蟹+5.5两公蟹9份，每份8只；</View>
+          </View>
+        </View>
+        <View className="p-[20px] px-[30px]">
+          <View>预计收获日期</View>
+          <View className="rounded-lg mt-[10px] w-full h-[80px] p-[20px] flex items-center bg-[#f5f5f5]">
+            <Text>2024.09.01-2024.10.01</Text>
+          </View>
+        </View>
+      </View>
+      {adoptionCircle()}
+    </View>
   )
 }