117 lines
3.3 KiB
Vue
117 lines
3.3 KiB
Vue
<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-2xl 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-2xl 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"
|
|
>
|
|
<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> |