92 lines
3.1 KiB
Vue
92 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
|
import TitleDescription from "~/components/TitleDescription.vue";
|
|
import {Motion} from "motion-v";
|
|
|
|
const cardItems = ref([
|
|
{
|
|
title: "蜂场环境气象监测站",
|
|
description: "为养蜂人员提供的一套蜂场整体环境数据实时获取、监测及软硬件工具，用户不需到现场频繁开箱，可随时远程了解整个蜂场实时环境或历史信息，管理省时又省心。",
|
|
image: "/img/product/beenFactory/product1.png"
|
|
},
|
|
{
|
|
title: "智能全景视频监控站",
|
|
description: "利用智能全景视频监控站实现对蜂场物资和周边环境的高清视频远程监控，支持远程视频查看及自动预警。",
|
|
image: "/img/product/beenFactory/product2.png"
|
|
},
|
|
{
|
|
title: "蜂场环境远程控制系统",
|
|
description: "智能全景视频监控站和蜂场环境气象监测站的配套软件，帮助用户实现对蜂场环境信息的远程实时自动获取、巡检及预警，辅助精准养殖。",
|
|
image: "/img/product/beenFactory/product3.png"
|
|
},
|
|
{
|
|
title: "智能蜂箱",
|
|
description: "为蜂农提供蜜蜂养殖场所的同时，还可实现对蜂箱内部环境的远程实时监控管理，便于用户快速了解蜂箱环境、蜂群活动及产蜜情况。",
|
|
image: "/img/product/beenFactory/product4.png"
|
|
},
|
|
{
|
|
title: "蜜源地调查",
|
|
description: "通过对蜂场周边环境进行自动化巡视，准确掌握蜜源地分布情况，确保蜂场周边蜜源充足。",
|
|
image: "/img/product/beenFactory/product5.png"
|
|
}
|
|
])
|
|
</script>
|
|
<template>
|
|
|
|
<img alt="" class="w-max" src="/img/product/beenFactory/banner.png">
|
|
<Motion
|
|
:in-view-options="{ once: true }"
|
|
:initial="{ opacity: 0,scale:0 }"
|
|
:transition="{ duration: 0.6,delay: 0.1}"
|
|
:while-in-view="{ opacity: 1,scale:1 }"
|
|
>
|
|
<TitleDescription
|
|
description="将物联网、人工智能技术与蜂场管理需求紧密融合，配套环境监控软硬件设备，实现对蜂场环境信息自动获取、分析和预警，为管理者提供
|
|
标准化、智能化的蜂场管理工具，大大减少现场巡视成本，提高了蜂场管理效率和质量。"
|
|
subtitle="SERVICE INTRODUCTION"
|
|
title="服务简介"
|
|
/>
|
|
</Motion>
|
|
|
|
<Motion
|
|
v-for="(item, index) in cardItems"
|
|
:key="index"
|
|
:in-view-options="{ once: true }"
|
|
:initial="{
|
|
opacity: 0,
|
|
x: index % 2 === 0 ? -100 : 100
|
|
}"
|
|
:transition="{
|
|
duration: 0.8,
|
|
|
|
ease: 'easeOut'
|
|
}"
|
|
:while-in-view="{
|
|
opacity: 1,
|
|
x: 0
|
|
}"
|
|
>
|
|
<UPageCTA
|
|
: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>
|
|
</Motion>
|
|
|
|
|
|
</template>
|
|
|
|
|