beehive/app/components/product/knowledge/Hero.vue

82 lines
3.1 KiB
Vue
Raw Normal View History

2025-10-24 12:02:24 +08:00
<script lang="ts" setup>
import TitleDescription from "~/components/TitleDescription.vue";
const cardItems = ref([
{
title: "可防伪的溯源标签码",
description: "每件商品都将生成唯一的二维码作为“身份证”标识,一物一码、无法复制、有效防伪,提升品牌效应。",
image: "/img/product/knowledge/yfbl.png"
},
{
title: "全流程精准快捷追溯",
description: "可随时通过扫码跳转至溯源页面,对产品从生产到流通全流程信息实现数字化记录和溯源查询,买的放心,吃的安心。",
image: "/img/product/knowledge/yfbk.png"
},
{
title: "蜂产品质量安全追溯平台",
description: "为开展蜂产品质量安全管理提供有效的监管工具,集成高清环境监控设备,完成对蜂产品从养殖到采收、加工、销售全产业链信息数字化采集和追溯查询,强化产品质量安全保障。",
image: "/img/product/knowledge/lzt.png"
}, {
title: "可防伪的溯源标签码",
description: "每件商品都将生成唯一的二维码作为“身份证”标识,一物一码、无法复制、有效防伪,提升品牌效应。",
image: "/img/product/knowledge/dyj.png"
},
{
title: "全流程精准快捷追溯",
description: "可随时通过扫码跳转至溯源页面,对产品从生产到流通全流程信息实现数字化记录和溯源查询,买的放心,吃的安心。",
image: "/img/product/knowledge/fqry.png"
},
{
title: "蜂产品质量安全追溯平台",
description: "为开展蜂产品质量安全管理提供有效的监管工具,集成高清环境监控设备,完成对蜂产品从养殖到采收、加工、销售全产业链信息数字化采集和追溯查询,强化产品质量安全保障。",
image: "/img/product/knowledge/zswd.png"
},
])
</script>
<template>
<img alt="" class="w-max" src="/img/product/knowledge/banner.png">
<!-- <UPageSection-->
<!-- :ui="{-->
<!-- container:'!py-0 !gap-0'-->
<!-- }">-->
<TitleDescription
description="为消费者蜂产品生产企业或质量监管部门提供的一种蜂产品质量追溯手段实现对蜂产品从养殖到销售全流程信息追溯提高全产业链
透明度极大提升产品品牌效应和宣传力度已在北京新疆湖北广东浙江四川等地推广应用"
subtitle="SERVICE INTRODUCTION"
title="服务简介"
/>
<!-- </UPageSection>-->
<view class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-6 px-4 md:py-16">
<UPageCTA
v-for="(item, index) in cardItems"
:key="index"
:description="item.description"
:title="item.title"
:ui="{
title: 'font-semibold text-lg text-primary',
}"
class="shadow-lg"
reverse
>
<img
:src="item.image"
alt="Illustration"
class="w-full shadow-2xl rounded-2xl"
>
</UPageCTA>
</view>
<img alt="" class="pt-6" src="/img/product/knowledge/dingzhipng.png">
</template>