智能蜂箱研制

app/components/TitleDescription.vue

@@ -4,10 +4,10 @@
     <view class="text-sm mt-4 lg:mt-20 text-primary font-bold">
       {{ subtitle }}
     </view>
-    <view class="text-4xl my-6 font-bold">
+    <view class="text-5xl my-6 font-bold">
       {{ title }}
     </view>
-    <view class="text-xl lg:mx-32 mx-6 mb-6 text-muted">
+    <view class="text-xl lg:mx-32 mx-6 mb-6 ">
       {{ description }}
     </view>
   </view>

app/components/product/beenHive/Hero.vue

@@ -5,62 +5,95 @@ const cardItems = ref([
   {
     title: "蜂场环境气象监测站",
     description: "为养蜂人员提供的一套蜂场整体环境数据实时获取、监测及软硬件工具，用户不需到现场频繁开箱，可随时远程了解整个蜂场实时环境或历史信息，管理省时又省心。",
-    image: "/img/product/beenHive/product1.png"
-  },
-  {
-    title: "智能全景视频监控站",
-    description: "利用智能全景视频监控站实现对蜂场物资和周边环境的高清视频远程监控，支持远程视频查看及自动预警。",
-    image: "/img/product/beenHive/product2.png"
-  },
-  {
-    title: "蜂场环境远程控制系统",
-    description: "智能全景视频监控站和蜂场环境气象监测站的配套软件，帮助用户实现对蜂场环境信息的远程实时自动获取、巡检及预警，辅助精准养殖。",
-    image: "/img/product/beenHive/product3.png"
-  },
-  {
-    title: "智能蜂箱",
-    description: "为蜂农提供蜜蜂养殖场所的同时，还可实现对蜂箱内部环境的远程实时监控管理，便于用户快速了解蜂箱环境、蜂群活动及产蜜情况。",
-    image: "/img/product/beenHive/product4.png"
-  },
-  {
-    title: "蜜源地调查",
-    description: "通过对蜂场周边环境进行自动化巡视，准确掌握蜜源地分布情况，确保蜂场周边蜜源充足。",
-    image: "/img/product/beenHive/product5.png"
+    image: "/img/product/beeHive/beeHive_wx.png"
   }
+
 ])
 </script>
 <template>
 
-  <img alt="" class="w-max" src="/img/product/beenHive/banner.png">
-
-  <TitleDescription
-      description="利用物联网、人工智能等技术，集成蜂箱数据采集硬件设备及数据管理系统，协助养蜂人员远程实时获取、监控蜂箱内部环境，减少频繁开箱操作，同时提供
-      预警功能辅助养殖决策，推动从传统经验养蜂到智能化养蜂转型，提高管理效率。根据不同需求分为基础版、标准版、高级版三种产品。"
-      subtitle="SERVICE INTRODUCTION"
-      title="服务简介"
-  />
+  <img alt="" class="w-max" src="/img/product/beeHive/banner.png">
 
 
-  <UPageCTA
-      v-for="(item, index) in cardItems"
-      :key="index"
-      :description="item.description"
-      :reverse="index % 2 == 0"
-      :title="item.title"
+  <UPageSection
       :ui="{
+         container:'!py-0 !gap-0'
+      }">
+    <TitleDescription
+
+        description="利用物联网、人工智能等技术，集成蜂箱数据采集硬件设备及数据管理系统，协助养蜂人员远程实时获取、监控蜂箱内部环境，减少频繁开箱操作，同时提供
+      预警功能辅助养殖决策，推动从传统经验养蜂到智能化养蜂转型，提高管理效率。根据不同需求分为基础版、标准版、高级版三种产品。"
+        subtitle="SERVICE INTRODUCTION"
+        title="服务简介"
+    />
+    <view class="flex flex-col items-center mb-15">
+      <view class="text-2xl font-bold mt-15 mb-8">
+        蜂箱各版本的功能对比
+      </view>
+      <img alt="" src="/img/product/beeHive/beehive.png">
+
+
+    </view>
+    <view class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
+      <UPageCTA
+          :ui="{
                 title: 'font-semibold text-lg text-primary',
             }"
-      :variant="index % 2 === 0 ? 'soft' : 'naked'"
-      orientation="horizontal"
-  >
-    <img
-        :src="item.image"
-        alt="Illustration"
-        class="w-full rounded-lg"
-        height="364"
-        width="320"
+          description="蜂箱内部环境监测、声音监控、无线数据传输、太阳能供电、部署方便。"
+          orientation="vertical"
+          title="标准版蜂箱"
+          variant="naked"
+
+      >
+        <img
+            alt="Illustration"
+            class="w-full rounded-lg"
+            height="364"
+            src="/img/product/beeHive/beenHiveBox_standar.png"
+            width="320"
+        >
+      </UPageCTA>
+      <UPageCTA
+          :ui="{
+                title: 'font-semibold text-lg text-primary',
+            }"
+          description="支持视频监控、蜜蜂计数更精确、需要电源和网络支持。"
+          orientation="vertical"
+          title="高级版蜂箱"
+          variant="soft"
+
+      >
+        <img
+            alt="Illustration"
+            class="w-full rounded-lg"
+            height="364"
+            src="/img/product/beeHive/beenHiveBox_base.png"
+            width="320"
+        >
+      </UPageCTA>
+    </view>
+
+    <UPageCTA
+        v-for="(item, index) in cardItems"
+        :key="index"
+        :description="item.description"
+        :reverse="index % 2 == 0"
+        :title="item.title"
+        :ui="{
+                title: 'font-semibold text-lg text-primary',
+            }"
+        orientation="horizontal"
+        variant="naked"
     >
-  </UPageCTA>
+      <img
+          :src="item.image"
+          alt="Illustration"
+          class="w-full rounded-lg"
+          height="364"
+          width="320"
+      >
+    </UPageCTA>
+  </UPageSection>
 
 
 </template>