102 lines
3.0 KiB
Vue
102 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import TitleDescription from "~/components/TitleDescription.vue";
|
|
|
|
const cardItems = ref([
|
|
{
|
|
title: "蜂场环境气象监测站",
|
|
description: "为养蜂人员提供的一套蜂场整体环境数据实时获取、监测及软硬件工具，用户不需到现场频繁开箱，可随时远程了解整个蜂场实时环境或历史信息，管理省时又省心。",
|
|
image: "/img/product/beeHive/beeHive_wx.png"
|
|
}
|
|
|
|
])
|
|
</script>
|
|
<template>
|
|
|
|
<img alt="" class="w-max" src="/img/product/beeHive/banner.png">
|
|
|
|
|
|
<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',
|
|
}"
|
|
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"
|
|
>
|
|
<img
|
|
:src="item.image"
|
|
alt="Illustration"
|
|
class="w-full rounded-lg"
|
|
height="364"
|
|
width="320"
|
|
>
|
|
</UPageCTA>
|
|
</UPageSection>
|
|
|
|
|
|
</template>
|
|
|
|
|