WindowBird/beehive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

motion-example

Browse Source
This commit is contained in:
WindowBird 2025-10-27 11:10:57 +08:00
parent 5a9b0f0f5d
commit f3b9b43d9c
1 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/pages/example/index.vue
View File

@ -2,6 +2,7 @@
import type {TabsItem} from "@nuxt/ui"; import type {TabsItem} from "@nuxt/ui";
import {getPartnersByType,} from '@/data/partners' import {getPartnersByType,} from '@/data/partners'
import {Motion} from "motion-v"
const governmentPartners = getPartnersByType('government') const governmentPartners = getPartnersByType('government')
const universityPartners = getPartnersByType('university') const universityPartners = getPartnersByType('university')
@ -75,7 +76,7 @@ const tabsItems = [
<UPageSection <UPageSection
:style="{ backgroundImage: `url('/img/about/bg.png')` , }" :style="{ backgroundImage: `url('/img/about/bg.png')` , }"
:ui="{container:'lg:py-3'}" :ui="{container:'lg:py-3'}"
class="space-y-6 bg-cover bg-no-repeat bg-center w-full mb-4"> class="space-y-6 bg-fixed bg-no-repeat bg-center w-full mb-4 min-h-screen">
<view class="grid grid-cols-3 lg:grid-cols-5 gap-4 lg:gap-6 items-center"> <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"> <view v-for="item in items" :key="item.name" class="text-center">
@ -101,23 +102,53 @@ const tabsItems = [
<!-- 政府单位 --> <!-- 政府单位 -->
<template #government="{ item }"> <template #government="{ item }">
<ExamplePartnerGrid :partners="governmentPartners"/> <Motion
:initial="{ x: 100, opacity: 0 }"
:animate="{ x: 0, opacity: 1 }"
:transition="{ duration: 0.6, ease: 'easeOut' }"
>
<ExamplePartnerGrid :partners="governmentPartners"/>
</Motion>
</template> </template>
<!-- 科研机构 --> <!-- 科研机构 -->
<template #research="{ item }"> <template #research="{ item }">
<ExamplePartnerGrid :partners="universityPartners"/> <Motion
:initial="{ x: 100, opacity: 0 }"
:animate="{ x: 0, opacity: 1 }"
:transition="{ duration: 0.6, ease: 'easeOut' }"
>
<ExamplePartnerGrid :partners="universityPartners"/>
</Motion>
</template> </template>
<!-- 大型企业 --> <!-- 大型企业 -->
<template #enterprise="{ item }"> <template #enterprise="{ item }">
<ExamplePartnerGrid :partners="enterprisePartners "/> <Motion
:initial="{ x: 100, opacity: 0 }"
:animate="{ x: 0, opacity: 1 }"
:transition="{ duration: 0.6, ease: 'easeOut' }"
>
<ExamplePartnerGrid :partners="enterprisePartners "/>
</Motion>
</template> </template>
<!-- 综合试验点 --> <!-- 综合试验点 -->
<template #pilot="{ item }"> <template #pilot="{ item }">
<ExamplePartnerGrid :partners="pilotPartners "/> <Motion
:initial="{ x: 100, opacity: 0 }"
:animate="{ x: 0, opacity: 1 }"
:transition="{ duration: 0.6, ease: 'easeOut' }"
>
<ExamplePartnerGrid :partners="pilotPartners "/>
</Motion>
</template> </template>
<!-- 养蜂合作社 --> <!-- 养蜂合作社 -->
<template #cooperative="{ item }"> <template #cooperative="{ item }">
<ExamplePartnerGrid :partners="cooperativePartners "/> <Motion
:initial="{ x: 100, opacity: 0 }"
:animate="{ x: 0, opacity: 1 }"
:transition="{ duration: 0.6, ease: 'easeOut' }"
>
<ExamplePartnerGrid :partners="cooperativePartners "/>
</Motion>
</template> </template>
</UTabs> </UTabs>
</upagesection> </upagesection>