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>
import type {TabsItem, TimelineItem} from '@nuxt/ui'
import {Motion} from "motion-v"
const items = [
{
@ -246,45 +247,58 @@ onMounted(() => {
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">
<template #team="{ item }">
<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
:initial="{ x: 100, opacity: 0 }"
:animate="{ x: 0, opacity: 1 }"
:transition="{ duration: 0.6, ease: 'easeOut' }"
>
<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 #advantage="{ item }">
<div class="space-y-6 ">
<UPageCard
v-for="(card, index) in cards"
:key="index"
:description="card.description"
:title="card.title"
:ui="{
container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6',
}"
orientation="horizontal"
reverse
spotlight
spotlight-color="primary"
>
<UIcon :name="card.icon" class="size-20 m-auto text-primary"/>
</UPageCard>
</div>
<Motion
:initial="{ x: 100, opacity: 0 }"
:animate="{ x: 0, opacity: 1 }"
:transition="{ duration: 0.6, ease: 'easeOut' }"
>
<div class="space-y-6 ">
<UPageCard
v-for="(card, index) in cards"
:key="index"
:description="card.description"
:title="card.title"
:ui="{
container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6',
}"
orientation="horizontal"
reverse
spotlight
spotlight-color="primary"
>
<UIcon :name="card.icon" class="size-20 m-auto text-primary"/>
</UPageCard>
</div>
</Motion>
</template>
<template #record="{ item }">
<view/>
<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
:initial="{ x: 100, opacity: 0 }"
:animate="{ x: 0, opacity: 1 }"
:transition="{ duration: 0.6, ease: 'easeOut' }"
>
<view/>
<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>
</UTabs>
</upagesection>