69 lines
1.7 KiB
Vue
69 lines
1.7 KiB
Vue
<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">
|
|
|
|
<Motion
|
|
:in-view-options="{ once: true }"
|
|
:initial="{ opacity: 0,scale:0 }"
|
|
:transition="{ duration: 0.6,delay: 0.1}"
|
|
:while-in-view="{ opacity: 1,scale:1 }"
|
|
>
|
|
<TitleSection
|
|
subtitle="CASE FACTS"
|
|
title="案例实况"
|
|
/>
|
|
</Motion>
|
|
|
|
<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>
|