知识服务中心

app/components/AppHeader.vue

@@ -18,7 +18,7 @@ const items = computed<NavigationMenuItem[]>(() => [{
     {label: '智能蜂箱研制', to: '/product/beenhive'},
     {label: '质量安全溯源', to: '/product/beensafe'},
     {label: '蜂产业大数据', to: '/product/beendata'},
-    {label: '知识服务中心', to: '/sensors'},
+    {label: '知识服务中心', to: '/product/knowledge'},
   ]
 }, {
   label: '应用实例',
@@ -43,9 +43,9 @@ const items = computed<NavigationMenuItem[]>(() => [{
 },
   {
     label: '联系我们',
-    to: '/docs/components',
+    to: '/contact',
     icon: 'i-lucide-box',
-    active: route.path.startsWith('/docs/components')
+    active: route.path.startsWith('/contact')
   },
 ])
 </script>

app/components/product/knowledge/Hero.vue

@@ -0,0 +1,81 @@
+<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>
+
+

app/pages/product/knowledge.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <Upage>
+    <ProductKnowledgeHero/>
+  </Upage>
+</template>
+
+<style scoped>
+
+</style>