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

const cardItems = ref([
  {
    title: "可防伪的溯源标签码",
    description: "每件商品都将生成唯一的二维码作为“身份证”标识，一物一码、无法复制、有效防伪，提升品牌效应。",
    image: "/img/product/beenSafe/product1.png"
  },
  {
    title: "全流程精准快捷追溯",
    description: "可随时通过扫码跳转至溯源页面，对产品从生产到流通全流程信息实现数字化记录和溯源查询，买的放心，吃的安心。",
    image: "/img/product/beenSafe/product2.png"
  },
  {
    title: "蜂产品质量安全追溯平台",
    description: "为开展蜂产品质量安全管理提供有效的监管工具，集成高清环境监控设备，完成对蜂产品从养殖到采收、加工、销售全产业链信息数字化采集和追溯查询，强化产品质量安全保障。",
    image: "/img/product/beenSafe/product3.png"
  },

])
</script>
<template>

  <img alt="" class="w-max" src="/img/product/beenSafe/banner.png">

  <TitleDescription
      description="利用物联网、人工智能等技术，集成蜂箱数据采集硬件设备及数据管理系统，协助养蜂人员远程实时获取、监控蜂箱内部环境，减少频繁开箱操作，同时提供
      预警功能辅助养殖决策，推动从传统经验养蜂到智能化养蜂转型，提高管理效率。根据不同需求分为基础版、标准版、高级版三种产品。"
      subtitle="SERVICE INTRODUCTION"
      title="服务简介"
  />

  <img alt="" src="/img/product/beenSafe/intro.png">


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


</template>


