gjjd-web-nuxt
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

97 lines
2.6 KiB

<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
useSeoMeta({
title: page.value.title,
ogTitle: page.value.title,
description: page.value.description,
ogDescription: page.value.description
})
</script>
<template>
<div>
<ULandingHero
id="home"
title="工匠基地"
description="快速提升职业技能的学习神器"
:links="page.hero.links"
style="background-image: url(https://oss.wsdns.cn/20240610/41ab59f725204d9ea4218fd4ae38e5c2.png); background-repeat: no-repeat; background-position: center; background-size: 100%"
>
<div class="absolute inset-0 landing-grid z-[-1] [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" />
</ULandingHero>
<!-- <ULandingHero-->
<!-- id="home"-->
<!-- :title="`工匠基地`"-->
<!-- :description="`千铝教育app下载`"-->
<!-- >-->
<!-- </ULandingHero>-->
<ULandingSection
:title="page.features.title"
:description="page.features.description"
:headline="page.features.headline"
>
<UPageGrid
id="features"
class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]"
>
<ULandingCard
v-for="(item, index) in page.features.items"
:key="index"
v-bind="item"
/>
</UPageGrid>
</ULandingSection>
<ULandingSection
:title="page.pricing.title"
:description="page.pricing.description"
:headline="page.pricing.headline"
>
<UPricingGrid
id="pricing"
compact
class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]"
>
<UPricingCard
v-for="(plan, index) in page.pricing.plans"
:key="index"
v-bind="plan"
/>
</UPricingGrid>
</ULandingSection>
<ULandingSection class="bg-primary-50 dark:bg-primary-400 dark:bg-opacity-10" style="background-image: url(https://oss.wsdns.cn/20240607/dd18d6830ce541e69ad3ba12e2eed33f.jpeg); background-size: 100%; background-position: center">
<ULandingCTA
id="down"
v-bind="page.cta"
:card="false"
/>
</ULandingSection>
<ULandingSection
id="faq"
:title="page.faq.title"
:description="page.faq.description"
class="scroll-mt-[var(--header-height)]"
>
<ULandingFAQ
multiple
:items="page.faq.items"
:ui="{
button: {
label: 'font-semibold',
trailingIcon: {
base: 'w-6 h-6'
}
}
}"
class="max-w-4xl mx-auto"
/>
</ULandingSection>
</div>
</template>