<script lang="ts" setup>
const cardItems = ref([
  {
    title: "蜜蜂大世界",
    description: "北京最大的蜜蜂文化产业园，世界蜜蜂日承办点",
    image: "/img/index/c1.png"
  },
  {
    title: "竹山县智慧蜂场",
    description: "受国家烟草专卖局和竹山县政府委托建立的高标准示范蜂场",
    image: "/img/index/c2.png"
  },
  {
    title: "雪慧峰业研究",
    description: "蜂产品质量安全追溯系统的研究与应用探索",
    image: "/img/index/c3.png"
  },
  {
    title: "智能蜂箱监测",
    description: "中国农业科学院蜜蜂研究所研发，已在全国多地示范应用",
    image: "/img/index/c4.png"
  }
])
</script>

<template>
  <div
      :style="{ backgroundImage: `url('/img/index/3d_bg.png')` ,    }"
      class="bg-cover bg-no-repeat bg-center w-full mb-4">
    <TitleSection
        subtitle="CASE FACTS"
        title="案例实况"
    />

    <div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-2 gap-6 lg:px-40">
      <UPageCard
          v-for="(item, index) in cardItems"
          :key="index"
          :description="item.description"
          :title="item.title"
          :ui="{
                title: 'font-semibold text-lg',
                description: 'text-gray-600 leading-relaxed',

              }"
          class="shadow-lg"
          reverse

      >
        <img
            :alt="item.title"
            :src="item.image"
            class="w-full"
        >
      </UPageCard>
    </div>


  </div>
</template>
