<script lang="ts" setup>
// 产业与科研平台数据
const industryPlatforms = [
  {
    name: '中国蜂业信息服务平台',
    image: '/img/classic/p1.png'
  },
  {
    name: '蜂产品质量安全追溯平台',
    image: '/img/classic/p2.png'
  },
  {
    name: '首届全国优质成熟蜂蜜大会',
    image: '/img/classic/p3.png'
  }
]

// 示范蜂场数据
const demonstrationFields = [
  {
    name: '北京京纯高标准示范蜂场',
    image: '/img/classic/c1.png'
  },
  {
    name: '湖北金叶情高标准示范蜂场',
    image: '/img/classic/c2.png'
  },
  {
    name: '广西蒙山高标准智慧蜂场',
    image: '/img/classic/c3.png'
  },
  {
    name: '重庆武隆数字化智慧蜂场',
    image: '/img/classic/c4.png'
  },
  {
    name: '蜜蜂大世界蜂群认养示范蜂场',
    image: '/img/classic/c5.png'
  }
]
</script>

<template>
  <UPage>
    <img alt="" class="w-full" src="/img/classic/banner.png">
    <UPageSection
        :ui="{
       container: 'flex flex-col lg:grid py-16 lg:py-12 gap-8 sm:gap-16',
    }">
      <!-- 面向产业与科研 -->
      <UPageCard
          :ui="{
        title: 'font-bold text-3xl text-primary',
        description:'font-semibold text-lg',
        container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6'
      }"
          description="紧跟产业需求，破解发展痛点，提供智能化、集约化的综合解决方案，推动产业升级，实现绿色发展。强化科技支撑与引领，注重科技创新与成果转化有机融合。"
          highlight
          highlight-color="primary"
          icon="i-heroicons-building-library"
          orientation="horizontal"
          title="面向产业与科研"
      >
        <view class="grid lg:grid-cols-3 gap-4">

          <view
              v-for="(field, index) in industryPlatforms"
              :key="index"
              class="flex flex-col items-center justify-center text-center"
          >
            <img
                :alt="field.name"
                :src="field.image"
                class="w-full rounded-lg shadow-sm mb-2  "
            >
            <text class="py-2 text-lg font-bold">{{ field.name }}</text>
          </view>
        </view>
      </UPageCard>

      <!-- 面向企业与政府 -->
      <UPageCard
          :ui="{

          title: 'font-bold text-3xl text-primary',
description:'font-semibold text-lg',
        container: 'grid lg:grid-cols-3 gap-4'
      }"
          description="精准定制，量身打造，协助构建先进实用、高效便捷的企业生产经营管理模式，实现生产经营智能化、精准化，管理高效化、便捷化。"
          highlight
          highlight-color="primary"
          icon="i-heroicons-building-office"
          orientation="horizontal"
          title="面向企业与政府"
      >

        <view
            v-for="(field, index) in demonstrationFields"
            :key="index"
            class="flex flex-col items-center justify-center text-center rounded-2xl "
        >
          <img
              :alt="field.name"
              :src="field.image"
              class="w-full rounded-lg shadow-sm mb-2 "
          >
          <text class="py-2 text-lg font-bold">{{ field.name }}</text>
        </view>

      </UPageCard>
    </UPageSection>
  </UPage>
</template>

<style scoped>

</style>