87 lines
3.3 KiB
Vue
87 lines
3.3 KiB
Vue
<script setup>
|
||
import SmartApiaryCard from "~/components/landing/SmartApiaryCard.vue";
|
||
|
||
const services = [
|
||
{
|
||
title: "智慧蜂场建设",
|
||
description: "提供蜂群、蜂箱、蜂场环境等信息远程实时自动获取、统计分析和监测预警服务，实现智能化养殖，提高管理效率，节省成本。",
|
||
iconSrc: "/img/index/s1.svg",
|
||
linkUrl: "/product/beenfactory"
|
||
},
|
||
{
|
||
title: "蜂产品质量追溯",
|
||
description: "建立完整的蜂产品质量追溯体系，从源头到终端全程可追溯，确保产品质量安全可靠。",
|
||
iconSrc: "/img/index/s2.svg",
|
||
linkUrl: "/product/beensafe"
|
||
},
|
||
{
|
||
title: "智能蜂箱管理",
|
||
description: "采用物联网技术实时监控蜂箱状态，智能调节温湿度，提高蜜蜂养殖效率和生存率。",
|
||
iconSrc: "/img/index/s3.svg",
|
||
linkUrl: "/product/beenhive"
|
||
},
|
||
{
|
||
title: "蜂业知识服务",
|
||
description: "提供专业的蜂业知识库和技术指导，帮助养殖户科学养殖，提升技术水平。",
|
||
iconSrc: "/img/index/s4.svg",
|
||
linkUrl: "/product/knowledge"
|
||
},
|
||
{
|
||
title: "蜂产业大数据",
|
||
description: "基于大数据分析的蜂产业监测预警系统，为产业发展提供数据支撑和决策依据。",
|
||
iconSrc: "/img/index/s5.svg",
|
||
linkUrl: "/product/beendata"
|
||
},
|
||
{
|
||
title: "定制化开发",
|
||
description: "支持软件系统定制化开发、充分满足企业或政府的特定需求、" +
|
||
"灵活的功能设计、定制化的模块开发、更好的支持企业业务需求。",
|
||
iconSrc: "/img/index/s6.svg",
|
||
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<!--class="relative w-screen h-screen overflow-hidden bg-cover bg-center bg-no-repeat" backgroundSize: '100% auto'-->
|
||
<template>
|
||
<!-- 外层容器设置为全屏 -->
|
||
<div
|
||
:style="{ backgroundImage: `url('/img/index/service.png')` , }"
|
||
class="bg-cover bg-no-repeat bg-center w-full min-h-screen">
|
||
<UPageHero
|
||
|
||
:ui="{
|
||
title: 'text-white ',
|
||
headline: 'text-white/90 text-sm uppercase tracking-widest',
|
||
description: 'text-white/80 text-base leading-relaxed'
|
||
}"
|
||
description="以提升蜂产业标准化和自动化水平为目标，综合应用物联网、视频巡航、深度学习、3S技术、无人机、无线通讯等信息技术手段，开展蜂业
|
||
生产安全产业链智能管控技术研究，研制了智能蜂场、蜂产品质量追溯、智能蜂箱、蜂业知识服务、蜂产业大数据等系列软硬产品，携手共建智能化、生态化、无人化的现代蜂业经营管理模式。"
|
||
headline="SERVICE INTRODUCTION"
|
||
title="服务简介"
|
||
|
||
>
|
||
<!-- 图片作为背景（非内容） -->
|
||
</UPageHero>
|
||
|
||
<!-- 服务卡片网格布局 -->
|
||
<div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 lg:px-50 justify-items-center">
|
||
<!-- 外层控制大小的容器 -->
|
||
<div
|
||
v-for="(service, index) in services"
|
||
:key="index"
|
||
class="w-45 aspect-square justify-center align-center "
|
||
>
|
||
<SmartApiaryCard
|
||
:description="service.description"
|
||
:icon-src="service.iconSrc"
|
||
:link-url="service.linkUrl"
|
||
:title="service.title"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</template>
|