chore: 解决方案页面
This commit is contained in:
parent
cb29b2a2d0
commit
8b7a946b4e
|
|
@ -0,0 +1,5 @@
|
|||
export function useWeb3() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -21,28 +21,28 @@ export function useNav(): NavMenu[] {
|
|||
{
|
||||
title: 'nav.solutions.child.land.service[0]',
|
||||
subtitle: 'nav.solutions.child.land.description[0]',
|
||||
href: '/solutions',
|
||||
href: '/solutions/web3',
|
||||
icon: 'i-tabler-affiliate',
|
||||
iconColor: 'red',
|
||||
},
|
||||
{
|
||||
title: 'nav.solutions.child.land.service[1]',
|
||||
subtitle: 'nav.solutions.child.land.description[1]',
|
||||
href: '/solutions',
|
||||
href: '/solutions/digital-twin',
|
||||
icon: 'i-tabler-a-b',
|
||||
iconColor: 'amber',
|
||||
},
|
||||
{
|
||||
title: 'nav.solutions.child.land.service[2]',
|
||||
subtitle: 'nav.solutions.child.land.description[2]',
|
||||
href: '/solutions',
|
||||
href: '/solutions/mixed-reality',
|
||||
icon: 'i-tabler-3d-cube-sphere',
|
||||
iconColor: 'amber',
|
||||
},
|
||||
{
|
||||
title: 'nav.solutions.child.land.service[3]',
|
||||
subtitle: 'nav.solutions.child.land.description[3]',
|
||||
href: '/solutions',
|
||||
href: '/solutions/aigc',
|
||||
icon: 'i-iconoir-brain-electricity',
|
||||
iconColor: 'amber',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ const sectionNine = useSectionNine()
|
|||
class="w-full text-center"
|
||||
>
|
||||
<div :class="content.icon" mb-5 h-60px w-full />
|
||||
<h4 mb-1 text-h4 font-bold>
|
||||
<h4 text-h4 mb-1 font-bold>
|
||||
{{ $t(content.title) }}
|
||||
</h4>
|
||||
<p text-h7>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
const router = useRouter()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main p="x4 y-50" text="center teal-700 dark:gray-200">
|
||||
<div text-4xl>
|
||||
<div i-carbon-warning inline-block />
|
||||
</div>
|
||||
<NuxtPage />
|
||||
|
||||
<h2 p-12 text-4xl>
|
||||
{{ $t('waiting') }}
|
||||
</h2>
|
||||
</main>
|
||||
<Section>
|
||||
<div class="grid-row rounded-lg from-violet-500 to-fuchsia-500 bg-gradient-to-r p-5 text-white shadow-lg lg:(grid-cols-2)">
|
||||
<ATypography
|
||||
class="text-white"
|
||||
title="联系我们"
|
||||
subtitle="使用下方的联系方式和我们沟通，或者留下您的邮箱"
|
||||
:text="['+86 12312314', 'text-sm']"
|
||||
/>
|
||||
<div h-full w-full flex flex-col items-center justify-center gap-3>
|
||||
<div flex items-center gap-3>
|
||||
<AInput placeholder="邮箱" class="col-start-1 w-full text-sm" input-wrapper-classes="bg-light-50" />
|
||||
<ABtn>test</ABtn>
|
||||
</div>
|
||||
<!-- <ACheckbox>
|
||||
<span>同意接收来自我们的消息</span>
|
||||
</ACheckbox> -->
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
<script setup lang="ts">
|
||||
import { useSectionSix } from '~/config/pages/home/use-section-six'
|
||||
|
||||
const sectionOne = {
|
||||
topic: 'home.sectionOne.topic',
|
||||
description: 'home.sectionOne.description',
|
||||
content: [
|
||||
{
|
||||
title: 'home.sectionOne.content.title[0]',
|
||||
subtext: 'home.sectionOne.content.subtext[0]',
|
||||
description: 'home.sectionOne.content.description[0]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[1]',
|
||||
subtext: 'home.sectionOne.content.subtext[1]',
|
||||
description: 'home.sectionOne.content.description[1]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[2]',
|
||||
subtext: 'home.sectionOne.content.subtext[2]',
|
||||
description: 'home.sectionOne.content.description[2]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[2]',
|
||||
subtext: 'home.sectionOne.content.subtext[2]',
|
||||
description: 'home.sectionOne.content.description[2]',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const data = {
|
||||
img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
|
||||
topic: 'Never Drink Alone：The Bar Symphony',
|
||||
title: 'Metaverse Space Design',
|
||||
description: 'Award-Winning Project',
|
||||
}
|
||||
|
||||
const sectionSix = useSectionSix()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
|
||||
<SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
|
||||
|
||||
<Section>
|
||||
<Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
|
||||
|
||||
<div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
|
||||
<div class="w-45% flex-grow">
|
||||
<div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
|
||||
<ImageLoading quality="20" :src="item.img" :err-src="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy" />
|
||||
<!-- <NuxtImg quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-55% flex-grow">
|
||||
<div class="h-full w-full flex flex-col items-center justify-center px-2 md:(items-start px-16)">
|
||||
<p class="text-title">
|
||||
{{ $t(item.title) }}
|
||||
</p>
|
||||
<h4 class="text-h4 font-bold">
|
||||
{{ $t(item.topic) }}
|
||||
</h4>
|
||||
<p class="text-h6 text-center md:text-left">
|
||||
{{ $t(item.description) }}
|
||||
</p>
|
||||
<div v-if="item.link" class="w-full py-10 text-center md:text-left">
|
||||
<LocaleNuxtLink :href="item.link.href">
|
||||
<ABtn variant="light" class="group">
|
||||
{{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
|
||||
</ABtn>
|
||||
</LocaleNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<script setup lang="ts">
|
||||
import { useSectionThree } from '~/config/pages/home/use-section-three'
|
||||
|
||||
const sectionOne = {
|
||||
topic: 'home.sectionOne.topic',
|
||||
description: 'home.sectionOne.description',
|
||||
content: [
|
||||
{
|
||||
title: 'home.sectionOne.content.title[0]',
|
||||
subtext: 'home.sectionOne.content.subtext[0]',
|
||||
description: 'home.sectionOne.content.description[0]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[1]',
|
||||
subtext: 'home.sectionOne.content.subtext[1]',
|
||||
description: 'home.sectionOne.content.description[1]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[2]',
|
||||
subtext: 'home.sectionOne.content.subtext[2]',
|
||||
description: 'home.sectionOne.content.description[2]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[2]',
|
||||
subtext: 'home.sectionOne.content.subtext[2]',
|
||||
description: 'home.sectionOne.content.description[2]',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const data = {
|
||||
img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
|
||||
topic: 'Never Drink Alone：The Bar Symphony',
|
||||
title: 'Metaverse Space Design',
|
||||
description: 'Award-Winning Project',
|
||||
}
|
||||
|
||||
const sectionThree = useSectionThree()
|
||||
const sectionThreeEl = ref(null)
|
||||
const sectionThreeVis = useElementVisibility(sectionThreeEl)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
|
||||
<SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
|
||||
|
||||
<!-- Section Three -->
|
||||
<Section text-center class="section-three">
|
||||
<Typography :title=" $t(sectionThree.title) " :topic=" $t(sectionThree.topic) " :description=" $t(sectionThree.description) " />
|
||||
|
||||
<div ref="sectionThreeEl">
|
||||
<div
|
||||
class="grid-row py-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentPrimary.length}`"
|
||||
>
|
||||
<ImageHover
|
||||
v-for="(content, i) in sectionThree.contentPrimary"
|
||||
:key="i"
|
||||
:href="content.href" :img="content.img" :topic="content.topic"
|
||||
class="min-h-200px"
|
||||
:class="[`animated-delay-${i * 100}ms`, {
|
||||
'animated animated-fade-in-up animated-faster': sectionThreeVis,
|
||||
}]"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid-row pb-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentSecondary.length}`">
|
||||
<ImageHover
|
||||
v-for="(content, i) in sectionThree.contentSecondary"
|
||||
:key="i"
|
||||
:href="content.href" :img="content.img" :topic="content.topic"
|
||||
class="min-h-200px"
|
||||
:class="[`animated-delay-${i * 100}ms`, {
|
||||
'animated animated-fade-in-up animated-faster': sectionThreeVis,
|
||||
}]"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid-row pb-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentThird.length}`">
|
||||
<ImageHover
|
||||
v-for="(content, i) in sectionThree.contentThird"
|
||||
:key="i"
|
||||
:href="content.href" :img="content.img" :topic="content.topic"
|
||||
class="min-h-200px"
|
||||
:class="[`animated-delay-${i * 100}ms`, {
|
||||
'animated animated-fade-in-up': sectionThreeVis,
|
||||
}]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<LocaleNuxtLink :href="sectionThree.link.href">
|
||||
<ABtn variant="light">
|
||||
{{ $t(sectionThree.link.name) }}
|
||||
</ABtn>
|
||||
</LocaleNuxtLink>
|
||||
</Section>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<script setup lang="ts">
|
||||
import { useSectionSix } from '~/config/pages/home/use-section-six'
|
||||
|
||||
const sectionOne = {
|
||||
topic: 'home.sectionOne.topic',
|
||||
description: 'home.sectionOne.description',
|
||||
content: [
|
||||
{
|
||||
title: 'home.sectionOne.content.title[0]',
|
||||
subtext: 'home.sectionOne.content.subtext[0]',
|
||||
description: 'home.sectionOne.content.description[0]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[1]',
|
||||
subtext: 'home.sectionOne.content.subtext[1]',
|
||||
description: 'home.sectionOne.content.description[1]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[2]',
|
||||
subtext: 'home.sectionOne.content.subtext[2]',
|
||||
description: 'home.sectionOne.content.description[2]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[2]',
|
||||
subtext: 'home.sectionOne.content.subtext[2]',
|
||||
description: 'home.sectionOne.content.description[2]',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const data = {
|
||||
img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
|
||||
topic: 'Never Drink Alone：The Bar Symphony',
|
||||
title: 'Metaverse Space Design',
|
||||
description: 'Award-Winning Project',
|
||||
}
|
||||
|
||||
const sectionSix = useSectionSix()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
|
||||
|
||||
<Section>
|
||||
<Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
|
||||
|
||||
<div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
|
||||
<div class="w-45% flex-grow">
|
||||
<div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
|
||||
<ImageLoading quality="20" :src="item.img" :err-src="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy" />
|
||||
<!-- <NuxtImg quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-55% flex-grow">
|
||||
<div class="h-full w-full flex flex-col items-center justify-center px-2 md:(items-start px-16)">
|
||||
<p class="text-title">
|
||||
{{ $t(item.title) }}
|
||||
</p>
|
||||
<h4 class="text-h4 font-bold">
|
||||
{{ $t(item.topic) }}
|
||||
</h4>
|
||||
<p class="text-h6 text-center md:text-left">
|
||||
{{ $t(item.description) }}
|
||||
</p>
|
||||
<div v-if="item.link" class="w-full py-10 text-center md:text-left">
|
||||
<LocaleNuxtLink :href="item.link.href">
|
||||
<ABtn variant="light" class="group">
|
||||
{{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
|
||||
</ABtn>
|
||||
</LocaleNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<script setup lang="ts">
|
||||
import { useSectionSix } from '~/config/pages/home/use-section-six'
|
||||
|
||||
const sectionOne = {
|
||||
topic: 'home.sectionOne.topic',
|
||||
description: 'home.sectionOne.description',
|
||||
content: [
|
||||
{
|
||||
title: 'home.sectionOne.content.title[0]',
|
||||
subtext: 'home.sectionOne.content.subtext[0]',
|
||||
description: 'home.sectionOne.content.description[0]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[1]',
|
||||
subtext: 'home.sectionOne.content.subtext[1]',
|
||||
description: 'home.sectionOne.content.description[1]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[2]',
|
||||
subtext: 'home.sectionOne.content.subtext[2]',
|
||||
description: 'home.sectionOne.content.description[2]',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.content.title[2]',
|
||||
subtext: 'home.sectionOne.content.subtext[2]',
|
||||
description: 'home.sectionOne.content.description[2]',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const data = {
|
||||
img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
|
||||
topic: 'Never Drink Alone：The Bar Symphony',
|
||||
title: 'Metaverse Space Design',
|
||||
description: 'Award-Winning Project',
|
||||
}
|
||||
|
||||
const sectionSix = useSectionSix()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
|
||||
<SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
|
||||
|
||||
<Section>
|
||||
<Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
|
||||
|
||||
<div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
|
||||
<div class="w-45% flex-grow">
|
||||
<div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
|
||||
<ImageLoading quality="20" :src="item.img" :err-src="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy" />
|
||||
<!-- <NuxtImg quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-55% flex-grow">
|
||||
<div class="h-full w-full flex flex-col items-center justify-center px-2 md:(items-start px-16)">
|
||||
<p class="text-title">
|
||||
{{ $t(item.title) }}
|
||||
</p>
|
||||
<h4 class="text-h4 font-bold">
|
||||
{{ $t(item.topic) }}
|
||||
</h4>
|
||||
<p class="text-h6 text-center md:text-left">
|
||||
{{ $t(item.description) }}
|
||||
</p>
|
||||
<div v-if="item.link" class="w-full py-10 text-center md:text-left">
|
||||
<LocaleNuxtLink :href="item.link.href">
|
||||
<ABtn variant="light" class="group">
|
||||
{{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
|
||||
</ABtn>
|
||||
</LocaleNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</template>
|
||||
Loading…
Reference in New Issue