beehive/app/components/landing/SERVICE_INTRODUCTION.vue

<script setup>
import SmartApiaryCard from "~/components/landing/SmartApiaryCard.vue";

const services = [
  {
    title: "智慧蜂场建设",
    description: "提供蜂群、蜂箱、蜂场环境等信息远程实时自动获取、统计分析和监测预警服务，实现智能化养殖，提高管理效率，节省成本。",
    iconSrc: "/img/index/s1.svg",
    linkUrl: "/product/smart-farm"
  },
  {
    title: "蜂产品质量追溯",
    description: "建立完整的蜂产品质量追溯体系，从源头到终端全程可追溯，确保产品质量安全可靠。",
    iconSrc: "/img/index/s2.svg",
    linkUrl: "/product/quality-trace"
  },
  {
    title: "智能蜂箱管理",
    description: "采用物联网技术实时监控蜂箱状态，智能调节温湿度，提高蜜蜂养殖效率和生存率。",
    iconSrc: "/img/index/s3.svg",
    linkUrl: "/product/smart-hive"
  },
  {
    title: "蜂业知识服务",
    description: "提供专业的蜂业知识库和技术指导，帮助养殖户科学养殖，提升技术水平。",
    iconSrc: "/img/index/s4.svg",
    linkUrl: "/product/knowledge"
  },
  {
    title: "蜂产业大数据",
    description: "基于大数据分析的蜂产业监测预警系统，为产业发展提供数据支撑和决策依据。",
    iconSrc: "/img/index/s5.svg",
    linkUrl: "/product/big-data"
  },
  {
    title: "无人机巡检",
    description: "利用无人机技术进行蜂场巡检，高效监测蜂群状态和环境变化，降低人工成本。",
    iconSrc: "/img/index/s6.svg",
    linkUrl: "/product/drone-inspection"
  }
]
</script>

<!--class="relative w-screen h-screen overflow-hidden bg-cover bg-center bg-no-repeat" backgroundSize: '100% auto'-->
<template>
  <!-- 外层容器设置为全屏 -->
  <div
      :style="{ backgroundImage: `url('/img/index/service.png')` ,    }"
      class="bg-cover bg-no-repeat bg-center w-full min-h-screen">
    <UPageHero

        :ui="{
          title: 'text-white  ',
          headline: 'text-white/90 text-sm uppercase tracking-widest',
          description: 'text-white/80 text-base leading-relaxed'
        }"
        description="以提升蜂产业标准化和自动化水平为目标，综合应用物联网、视频巡航、深度学习、3S技术、无人机、无线通讯等信息技术手段，开展蜂业
        生产安全产业链智能管控技术研究，研制了智能蜂场、蜂产品质量追溯、智能蜂箱、蜂业知识服务、蜂产业大数据等系列软硬产品，携手共建智能化、生态化、无人化的现代蜂业经营管理模式。"
        headline="SERVICE INTRODUCTION"
        title="服务简介"

    >
      <!-- 图片作为背景（非内容） -->
    </UPageHero>

    <!-- 服务卡片网格布局 -->
    <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 lg:px-50  justify-items-center">
      <!-- 外层控制大小的容器 -->
      <div
          v-for="(service, index) in services"
          :key="index"
          class="w-45 aspect-square justify-center align-center "
      >
        <SmartApiaryCard
            :description="service.description"
            :icon-src="service.iconSrc"
            :link-url="service.linkUrl"
            :title="service.title"
        />
      </div>
    </div>


  </div>
</template>