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

motion-about

Browse Source
This commit is contained in:
WindowBird 2025-10-27 11:06:30 +08:00
parent 682a24dffd
commit 5a9b0f0f5d
1 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
app/pages/about/index.vue
View File

@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type {TabsItem, TimelineItem} from '@nuxt/ui' import type {TabsItem, TimelineItem} from '@nuxt/ui'
import {Motion} from "motion-v"
const items = [ const items = [
{ {
@ -246,45 +247,58 @@ onMounted(() => {
class="space-y-6 bg-cover bg-no-repeat bg-center w-full mb-4"> class="space-y-6 bg-cover bg-no-repeat bg-center w-full mb-4">
<UTabs :items="items" :ui="{ trigger: 'grow' }" class="gap-4 w-full"> <UTabs :items="items" :ui="{ trigger: 'grow' }" class="gap-4 w-full">
<template #team="{ item }"> <template #team="{ item }">
<Motion
<view class="grid lg:grid-cols-[2fr_3fr] gap-4 items-center"> :initial="{ x: 100, opacity: 0 }"
<img alt="" src="/img/about/teamPhoto.png"> :animate="{ x: 0, opacity: 1 }"
<img alt="" src="/img/about/about.png"> :transition="{ duration: 0.6, ease: 'easeOut' }"
>
</view> <view class="grid lg:grid-cols-[2fr_3fr] gap-4 items-center">
<img alt="" src="/img/about/teamPhoto.png">
<img alt="" src="/img/about/about.png">
</view>
</Motion>
</template> </template>
<template #advantage="{ item }"> <template #advantage="{ item }">
<Motion
<div class="space-y-6 "> :initial="{ x: 100, opacity: 0 }"
<UPageCard :animate="{ x: 0, opacity: 1 }"
v-for="(card, index) in cards" :transition="{ duration: 0.6, ease: 'easeOut' }"
:key="index" >
:description="card.description" <div class="space-y-6 ">
<UPageCard
:title="card.title" v-for="(card, index) in cards"
:ui="{ :key="index"
container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6', :description="card.description"
}" :title="card.title"
orientation="horizontal" :ui="{
reverse container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6',
spotlight }"
spotlight-color="primary" orientation="horizontal"
> reverse
spotlight
<UIcon :name="card.icon" class="size-20 m-auto text-primary"/> spotlight-color="primary"
</UPageCard> >
</div> <UIcon :name="card.icon" class="size-20 m-auto text-primary"/>
</UPageCard>
</div>
</Motion>
</template> </template>
<template #record="{ item }"> <template #record="{ item }">
<view/> <Motion
<UTimeline :initial="{ x: 100, opacity: 0 }"
v-model="active" :items="lineItems" :ui="{ :animate="{ x: 0, opacity: 1 }"
date:'text-dimmed text-2xl', :transition="{ duration: 0.6, ease: 'easeOut' }"
title: 'font-medium text-highlighted text-3xl', >
description: 'text-muted text-wrap text-xl' <view/>
}" class=" px-auto " size="3xl"/> <UTimeline
v-model="active" :items="lineItems" :ui="{
date:'text-dimmed text-2xl',
title: 'font-medium text-highlighted text-3xl',
description: 'text-muted text-wrap text-xl'
}" class=" px-auto " size="3xl"/>
</Motion>
</template> </template>
</UTabs> </UTabs>
</upagesection> </upagesection>