130 lines
3.4 KiB
Vue
130 lines
3.4 KiB
Vue
<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> |