beehive/app/components/product/beenHive/Hero.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>