product-beehive-init

app/components/AppHeader.vue

@@ -15,7 +15,7 @@ const items = computed<NavigationMenuItem[]>(() => [{
   active: route.path.startsWith('/product'),
   children: [
     {label: '智慧蜂场建设', to: '/product/beenfactory'},
-    {label: '智能蜂箱研制', to: '/hive'},
+    {label: '智能蜂箱研制', to: '/product/beenhive'},
     {label: '质量安全溯源', to: '/hive'},
     {label: '蜂产业大数据', to: '/sensors'},
     {label: '知识服务中心', to: '/sensors'},

app/components/product/beenHive/Hero.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import TitleDescription from "~/components/TitleDescription.vue";
+
+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"
+  }
+])
+</script>
+<template>
+
+  <img alt="" class="w-max" src="/img/product/beenHive/banner.png">
+
+  <TitleDescription
+      description="利用物联网、人工智能等技术，集成蜂箱数据采集硬件设备及数据管理系统，协助养蜂人员远程实时获取、监控蜂箱内部环境，减少频繁开箱操作，同时提供
+      预警功能辅助养殖决策，推动从传统经验养蜂到智能化养蜂转型，提高管理效率。根据不同需求分为基础版、标准版、高级版三种产品。"
+      subtitle="SERVICE INTRODUCTION"
+      title="服务简介"
+  />
+
+
+  <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',
+            }"
+      :variant="index % 2 === 0 ? 'soft' : 'naked'"
+      orientation="horizontal"
+  >
+    <img
+        :src="item.image"
+        alt="Illustration"
+        class="w-full rounded-lg"
+        height="364"
+        width="320"
+    >
+  </UPageCTA>
+
+
+</template>
+
+

app/pages/product/beenHive.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <Upage>
+    <ProductBeenHiveHero/>
+  </Upage>
+</template>
+
+<style scoped>
+
+</style>