beehive/app/pages/news/index.vue

<script lang="ts" setup>
const cards = [
  {
    title: "重磅！中国农业科学院发布基于AI的智慧养蜂系统",
    description: "3月7日，由中国农业科学院农业信息研究所刘升平团队研发的“优蜜蜂箱”小程序正式接入DeepSeek大模型。此次升级象征着蜂业管理正稳步迈向智能化与精准化的阶段。",
    icon: "i-heroicons-academic-cap",
    image: "/img/news/n1.png",
    alt: "AI智慧养蜂系统",
    to: '5',
    date: "2025.03.07"
  },
  {
    title: "农业农村部新闻：北京密云蜂农用上智能新蜂箱",
    description: "中国农业科学院的智能蜂箱在北京密云召开的2024年国际蜂联亚洲区域研讨会展示。它能监测蜜蜂的“出勤”情况、为蜂巢称重，还能通过声音频率辨别蜜蜂的健康状况。",
    icon: "i-heroicons-beaker",
    image: "/img/news/n2.png",
    alt: "智能蜂箱展示",
    to: '6',
    date: "2024.09.26"
  },
  {
    title: "慧养蜂：农业信息研究所刘升平团队利用智能蜂箱为蜂群行为规律研究赋能",
    description: "在春繁时节，位于北京市昌平区南口的蜜蜂实验基地，一场富有科技感的探索正在展开。",
    icon: "i-heroicons-chart-bar",
    image: "/img/news/n3.png",
    alt: "蜂群行为研究",
    date: "2024.04.08"
  },
  {
    title: "慧养蜂：重庆市市委书记袁家军参观武隆“智慧蜂业数字化服务平台”",
    description: "12月18日至19日，市委书记袁家军前往武隆区、南川区、万盛经开区调研产业发展、乡村振兴、数字重庆建设等工作。",
    icon: "i-heroicons-building-office",
    image: "/img/news/n4.png",
    alt: "领导调研",
    date: "2023.12.20"
  },
  {
    title: "慧养蜂：农业信息研究所参加中国养蜂学会蜜蜂饲养管理专委会第26次学术研讨会",
    description: "2023年11月11日-12日，中国养蜂学会“蜜蜂饲养管理专业委员会第26次学术研讨会”在湖北恩施成功召开。",
    icon: "i-heroicons-users",
    image: "/img/news/n5.png",
    alt: "学术研讨会",
    date: "2023.11.17"
  }
]
const page = ref(1)
</script>

<template>
  <UPage>
    <img alt="" src="/img/news/banner.png">
    <UPageSection
        :ui="{
      container:'lg:px-0 lg:pt-10'
    }">
      <div class="space-y-6 ">
        <UPageCard
            v-for="(card, index) in cards"
            :key="index"
            :description="card.description"
            :title="card.title"
            :to="`/news/${card.to}`"
            :ui="{
             root:'group',
        container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6',
      }"
            class="hover:shadow-2xl hover:scale-105 hover:translate-x-8"
            orientation="horizontal"
            reverse
            spotlight
            spotlight-color="primary"
        >
          <img
              :alt="card.alt" :src="card.image  " class="object-cover aspect-[4/3] w-full">
          <template #footer>
            <UButton
                class="px-0 gap-0 text-right"
                label="去阅读"
                size="xl"
                variant="link"
            >
              <template #trailing>
                <UIcon
                    class="size-4 text-primary transition-all opacity-0 group-hover:translate-x-1 group-hover:opacity-100"
                    name="i-lucide-arrow-right"
                />
              </template>
            </UButton>
          </template>
          <template #header>
            <view class="text-left">{{ card.date }}</view>
          </template>
        </UPageCard>
      </div>
      <UPagination v-model:page="page" :total="100"/>
    </UPageSection>
  </UPage>
</template>

<style scoped>

</style>