<script lang="ts" setup>
import TitleDescription from "~/components/TitleDescription.vue";

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">
 
  <TitleDescription
      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',
            }"
      orientation="horizontal"
  >
    <img
        :src="item.image"
        alt="Illustration"
        class="w-full rounded-lg"
        height="364"
        width="320"
    >
  </UPageCTA>


</template>


