classic finish

app/components/AppHeader.vue

@@ -75,7 +75,7 @@ const items = computed<NavigationMenuItem[]>(() => [{
 
 <template>
   <UHeader
-      :ui="{root:'fixed right-0 left-0 h-7 lg:h-16'}"
+      :ui="{root:'fixed right-0 left-0 h-8 lg:h-16'}"
 
 
   >

app/components/example/PartnerCard.vue

@@ -0,0 +1,20 @@
+<!-- src/components/PartnerCard.vue -->
+<template>
+  <view class="flex flex-col items-center">
+    <img
+        :alt="name"
+        :src="image"
+        class="w-full rounded-lg shadow-sm"
+    >
+    <view class="p-3 text-lg font-semibold text-center">
+      {{ name }}
+    </view>
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  name: String,
+  image: String
+})
+</script>

app/components/example/PartnerGrid.vue

@@ -0,0 +1,22 @@
+<!-- src/components/PartnerGrid.vue -->
+<template>
+  <view class="grid lg:grid-cols-3 gap-6 w-full">
+    <ExamplePartnerCard
+        v-for="(partner, index) in partners"
+        :key="index"
+        :image="partner.image"
+        :name="partner.name"
+    />
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  partners: {
+    type: Array,
+    required: true,
+    validator: (value) =>
+        value.every(item => 'name' in item && 'image' in item)
+  }
+})
+</script>

app/data/partners.js

@@ -0,0 +1,142 @@
+// src/data/partners.js
+export const partnerGroups = {
+    // 政府机构
+    government: [
+        {
+            name: '北京市园林绿化局',
+            image: '/img/example/g1.png'
+        },
+        {
+            name: '北京密云高标准示范蜂场',
+            image: '/img/example/g2.png'
+        },
+        {
+            name: '湖北竹山高标准示范蜂场',
+            image: '/img/example/g3.png'
+        }
+    ],
+    university: [
+        {
+            name: '中国农业科学院',
+            image: '/img/example/s1.png',
+            type: 'research_institute'
+        },
+        {
+            name: '华中科技大学',
+            image: '/img/example/s2.png',
+            type: 'university'
+        },
+        {
+            name: '福建农林大学',
+            image: '/img/example/s3.png',
+            type: 'agricultural_university'
+        }
+    ],
+
+
+    enterprise: [
+        {
+            name: '武汉葆春',
+            image: '/img/example/e1.png',
+            type: 'bee_enterprise'
+        },
+        {
+            name: '新疆百信',
+            image: '/img/example/e2.png',
+            type: 'bee_enterprise'
+        },
+        {
+            name: '新疆花岛',
+            image: '/img/example/e3.png',
+            type: 'bee_enterprise'
+        }
+    ],
+
+    // 示范基地
+    demonstration: [
+        {
+            name: '北京密云高标准示范蜂场',
+            image: '/img/example/g2.png',
+            type: 'demonstration',
+            location: '密云区'
+        },
+        {
+            name: '湖北竹山高标准示范蜂场',
+            image: '/img/example/g3.png',
+            type: 'demonstration',
+            location: '竹山县'
+        }
+    ],
+    pilot: [
+        {
+            name: '北京密云',
+            image: '/img/example/p1.png',
+            type: 'northern_city'
+        },
+        {
+            name: '新疆乌鲁木齐',
+            image: '/img/example/p2.png',
+            type: 'western_city'
+        },
+        {
+            name: '湖北武汉',
+            image: '/img/example/p3.png',
+            type: 'central_city'
+        },
+        {
+            name: '广东广州',
+            image: '/img/example/p4.png',
+            type: 'southern_city'
+        },
+        {
+            name: '浙江金华',
+            image: '/img/example/p5.png',
+            type: 'eastern_city'
+        },
+        {
+            name: '四川成都',
+            image: '/img/example/p6.png',
+            type: 'southwestern_city'
+        },
+        {
+            name: '海南海口',
+            image: '/img/example/p7.png',
+            type: 'tropical_city'
+        },
+        {
+            name: '江苏扬州',
+            image: '/img/example/p8.png',
+            type: 'jiangnan_city'
+        },
+        {
+            name: '重庆',
+            image: '/img/example/p9.png',
+            type: 'mountain_city'
+        }
+    ],
+
+    // 合作社
+    cooperative: [
+        {
+            name: '北京京纯合作社',
+            image: '/img/example/c1.png',
+            type: 'bee_cooperative'
+        },
+        {
+            name: '四川省蟲鑫合作社',
+            image: '/img/example/c2.png',
+            type: 'bee_cooperative'
+        },
+        {
+            name: '北京金华林合作社',
+            image: '/img/example/c3.png',
+            type: 'bee_cooperative'
+        }
+    ]
+}
+
+// 按类型获取数据
+export const getPartnersByType = (type) => {
+    return partnerGroups[type] || []
+}
+

app/pages/example/index.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+
+import type {TabsItem} from "@nuxt/ui";
+import {getPartnersByType,} from '@/data/partners'
+
+const governmentPartners = getPartnersByType('government')
+const universityPartners = getPartnersByType('university')
+const enterprisePartners = getPartnersByType('enterprise')
+const pilotPartners = getPartnersByType('pilot')
+const cooperativePartners = getPartnersByType('cooperative')
+const items = [
+  {
+    name: '服务覆盖省级行政区域',
+    number: '11',
+    unit: '省'
+  },
+  {
+    name: '遍及城市',
+    number: '20',
+    unit: '个'
+  },
+  {
+    name: '智慧蜂场基地',
+    number: '3',
+    unit: '个'
+  },
+  {
+    name: '服务面积',
+    number: '100',
+    unit: '万亩'
+  },
+  {
+    name: '相关从业者',
+    number: '5',
+    unit: '万人'
+  }
+]
+const tabsItems = [
+  {
+    label: '政府单位',
+    description: '面向各级农业农村部门的监管服务平台',
+
+    slot: 'government' as const
+  },
+  {
+    label: '科研机构',
+    description: '蜂产业技术创新与成果转化平台',
+
+    slot: 'research' as const
+  },
+  {
+    label: '大型企业',
+    description: '蜂产品企业智能化管理解决方案',
+
+    slot: 'enterprise' as const
+  },
+  {
+    label: '综合试验点',
+    description: '蜂产业技术集成与示范基地',
+
+    slot: 'pilot' as const
+  },
+  {
+    label: '养蜂合作社',
+    description: '蜂农专业合作社数字化管理工具',
+
+    slot: 'cooperative' as const
+  }
+] satisfies TabsItem[]
+</script>
+
+<template>
+  <UPage>
+    <img alt="" src="/img/example/banner.png">
+    <UPageSection
+
+        :style="{ backgroundImage: `url('/img/about/bg.png')` ,    }"
+        :ui="{container:'lg:py-3'}"
+        class="space-y-6 bg-cover bg-no-repeat bg-center w-full mb-4">
+      <view class="grid grid-cols-3 lg:grid-cols-5 gap-4 lg:gap-6 items-center">
+        <!-- 每个单元格单独循环 -->
+        <view v-for="item in items" :key="item.name" class="text-center">
+          <text class="block  text-xs lg:text-lg mb-2">{{ item.name }}</text>
+          <view class="flex items-baseline justify-center gap-1">
+            <text class="text-primary text-3xl font-bold">{{ item.number }}</text>
+            <text class="text-black text-bold">{{ item.unit }}</text>
+          </view>
+        </view>
+      </view>
+      <UTabs
+          :items="tabsItems"
+          :ui="{
+             trigger: ' grow ', // 绿色背景+白字
+          label:'font-bold lg:text-lg text-xs',
+
+    }"
+          class="w-full gap-6"
+          size="xl"
+          unmount-on-hide="false"
+          variant="link"
+      >
+
+        <!-- 政府单位 -->
+        <template #government="{ item }">
+          <ExamplePartnerGrid :partners="governmentPartners"/>
+        </template>
+        <!-- 科研机构 -->
+        <template #research="{ item }">
+          <ExamplePartnerGrid :partners="universityPartners"/>
+        </template>
+        <!-- 大型企业 -->
+        <template #enterprise="{ item }">
+          <ExamplePartnerGrid :partners="enterprisePartners "/>
+        </template>
+        <!-- 综合试验点 -->
+        <template #pilot="{ item }">
+          <ExamplePartnerGrid :partners="pilotPartners "/>
+        </template>
+        <!-- 养蜂合作社 -->
+        <template #cooperative="{ item }">
+          <ExamplePartnerGrid :partners="cooperativePartners "/>
+        </template>
+      </UTabs>
+    </upagesection>
+  </UPage>
+</template>
+
+<style scoped>
+
+</style>