chore: 解决方案数据整合
This commit is contained in:
parent
8b7a946b4e
commit
0255151e1c
|
|
@ -0,0 +1,87 @@
|
|||
export function useAIGC() {
|
||||
return {
|
||||
head: {
|
||||
img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
|
||||
topic: 'Never Drink Alone：The Bar Symphony',
|
||||
title: 'Metaverse Space Design',
|
||||
description: 'Award-Winning Project',
|
||||
},
|
||||
feature: {
|
||||
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]',
|
||||
},
|
||||
],
|
||||
},
|
||||
solutions: {
|
||||
topic: 'home.sectionSix.topic',
|
||||
description: 'home.sectionSix.description',
|
||||
content: [
|
||||
{
|
||||
title: 'home.sectionSix.content.title[0]',
|
||||
topic: 'home.sectionSix.content.topic[0]',
|
||||
description: 'home.sectionSix.content.description[0]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[0]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/DigitalTwin.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/DigitalTwin.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[1]',
|
||||
topic: 'home.sectionSix.content.topic[1]',
|
||||
description: 'home.sectionSix.content.description[1]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[1]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/Circulus.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/Circulus.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[2]',
|
||||
topic: 'home.sectionSix.content.topic[2]',
|
||||
description: 'home.sectionSix.content.description[2]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[2]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/CyberPink.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/CyberPink.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[3]',
|
||||
topic: 'home.sectionSix.content.topic[3]',
|
||||
description: 'home.sectionSix.content.description[3]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[3]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/AIGC.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/AIGC.jpg',
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
export function useDigitalTwin() {
|
||||
return {
|
||||
head: {
|
||||
img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
|
||||
topic: 'Never Drink Alone：The Bar Symphony',
|
||||
title: 'Metaverse Space Design',
|
||||
description: 'Award-Winning Project',
|
||||
},
|
||||
feature: {
|
||||
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]',
|
||||
},
|
||||
],
|
||||
},
|
||||
solutions: {
|
||||
topic: 'home.sectionSix.topic',
|
||||
description: 'home.sectionSix.description',
|
||||
content: [
|
||||
{
|
||||
title: 'home.sectionSix.content.title[0]',
|
||||
topic: 'home.sectionSix.content.topic[0]',
|
||||
description: 'home.sectionSix.content.description[0]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[0]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/DigitalTwin.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/DigitalTwin.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[1]',
|
||||
topic: 'home.sectionSix.content.topic[1]',
|
||||
description: 'home.sectionSix.content.description[1]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[1]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/Circulus.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/Circulus.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[2]',
|
||||
topic: 'home.sectionSix.content.topic[2]',
|
||||
description: 'home.sectionSix.content.description[2]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[2]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/CyberPink.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/CyberPink.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[3]',
|
||||
topic: 'home.sectionSix.content.topic[3]',
|
||||
description: 'home.sectionSix.content.description[3]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[3]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/AIGC.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/AIGC.jpg',
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
export function useMixedReality() {
|
||||
return {
|
||||
head: {
|
||||
img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
|
||||
topic: 'Never Drink Alone：The Bar Symphony',
|
||||
title: 'Metaverse Space Design',
|
||||
description: 'Award-Winning Project',
|
||||
},
|
||||
// feature: {
|
||||
// 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]',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
solutions: {
|
||||
topic: 'home.sectionSix.topic',
|
||||
description: 'home.sectionSix.description',
|
||||
content: [
|
||||
{
|
||||
title: 'home.sectionSix.content.title[0]',
|
||||
topic: 'home.sectionSix.content.topic[0]',
|
||||
description: 'home.sectionSix.content.description[0]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[0]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/DigitalTwin.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/DigitalTwin.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[1]',
|
||||
topic: 'home.sectionSix.content.topic[1]',
|
||||
description: 'home.sectionSix.content.description[1]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[1]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/Circulus.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/Circulus.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[2]',
|
||||
topic: 'home.sectionSix.content.topic[2]',
|
||||
description: 'home.sectionSix.content.description[2]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[2]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/CyberPink.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/CyberPink.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[3]',
|
||||
topic: 'home.sectionSix.content.topic[3]',
|
||||
description: 'home.sectionSix.content.description[3]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[3]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/AIGC.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/AIGC.jpg',
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,87 @@
|
|||
export function useWeb3() {
|
||||
return {
|
||||
head: {
|
||||
img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
|
||||
topic: 'Never Drink Alone：The Bar Symphony',
|
||||
title: 'Metaverse Space Design',
|
||||
description: 'Award-Winning Project',
|
||||
},
|
||||
feature: {
|
||||
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]',
|
||||
},
|
||||
],
|
||||
},
|
||||
solutions: {
|
||||
topic: 'home.sectionSix.topic',
|
||||
description: 'home.sectionSix.description',
|
||||
content: [
|
||||
{
|
||||
title: 'home.sectionSix.content.title[0]',
|
||||
topic: 'home.sectionSix.content.topic[0]',
|
||||
description: 'home.sectionSix.content.description[0]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[0]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/DigitalTwin.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/DigitalTwin.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[1]',
|
||||
topic: 'home.sectionSix.content.topic[1]',
|
||||
description: 'home.sectionSix.content.description[1]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[1]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/Circulus.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/Circulus.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[2]',
|
||||
topic: 'home.sectionSix.content.topic[2]',
|
||||
description: 'home.sectionSix.content.description[2]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[2]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/CyberPink.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/CyberPink.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionSix.content.title[3]',
|
||||
topic: 'home.sectionSix.content.topic[3]',
|
||||
description: 'home.sectionSix.content.description[3]',
|
||||
link: {
|
||||
name: 'home.sectionSix.content.link[3]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/Home-Solutions&Services/AIGC.gif',
|
||||
errImg: '/imgs/Home-Solutions&Services/AIGC.jpg',
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { useSectionSix } from '~/config/pages/home/use-section-six'
|
||||
import { useAIGC } from '~/config/pages/solutions/use-aigc'
|
||||
|
||||
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()
|
||||
const content = useAIGC()
|
||||
</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" />
|
||||
<SectionBanner :img="content.head?.img" :title="content.head?.title" :topic="content.head?.topic" :description="content.head?.description" font-bold text-white />
|
||||
<SectionGradientCard :content="content.feature.content" :topic="content.feature.topic" />
|
||||
|
||||
<Section>
|
||||
<Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
|
||||
<Typography :topic=" $t(content.solutions.topic) " :description=" $t(content.solutions.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 v-for="(item, i) in content.solutions.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" />
|
||||
|
|
|
|||
|
|
@ -1,94 +1,44 @@
|
|||
<script setup lang="ts">
|
||||
import { useSectionThree } from '~/config/pages/home/use-section-three'
|
||||
import { useDigitalTwin } from '~/config/pages/solutions/use-digital-twin'
|
||||
|
||||
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)
|
||||
const content = useDigitalTwin()
|
||||
</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" />
|
||||
<SectionBanner :img="content.head?.img" :title="content.head?.title" :topic="content.head?.topic" :description="content.head?.description" font-bold text-white />
|
||||
<SectionGradientCard :content="content.feature.content" :topic="content.feature.topic" />
|
||||
|
||||
<!-- Section Three -->
|
||||
<Section text-center class="section-three">
|
||||
<Typography :title=" $t(sectionThree.title) " :topic=" $t(sectionThree.topic) " :description=" $t(sectionThree.description) " />
|
||||
<Section>
|
||||
<Typography :topic=" $t(content.solutions.topic) " :description=" $t(content.solutions.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 v-for="(item, i) in content.solutions.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>
|
||||
<LocaleNuxtLink :href="sectionThree.link.href">
|
||||
<ABtn variant="light">
|
||||
{{ $t(sectionThree.link.name) }}
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { useSectionSix } from '~/config/pages/home/use-section-six'
|
||||
import { useMixedReality } from '~/config/pages/solutions/use-mixed-reality'
|
||||
|
||||
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()
|
||||
const mixedReality = useMixedReality()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
|
||||
<SectionBanner :img="mixedReality.head?.img" :title="mixedReality.head?.title" :topic="mixedReality.head?.topic" :description="mixedReality.head?.description" font-bold text-white />
|
||||
|
||||
<Section>
|
||||
<Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
|
||||
<Typography :topic=" $t(mixedReality.solutions.topic) " :description=" $t(mixedReality.solutions.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 v-for="(item, i) in mixedReality.solutions.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" />
|
||||
|
|
|
|||
|
|
@ -1,51 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { useSectionSix } from '~/config/pages/home/use-section-six'
|
||||
import { useWeb3 } from '~/config/pages/solutions/use-web3'
|
||||
|
||||
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()
|
||||
const content = useWeb3()
|
||||
</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" />
|
||||
<SectionBanner :img="content.head?.img" :title="content.head?.title" :topic="content.head?.topic" :description="content.head?.description" font-bold text-white />
|
||||
<SectionGradientCard :content="content.feature.content" :topic="content.feature.topic" />
|
||||
|
||||
<Section>
|
||||
<Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
|
||||
<Typography :topic=" $t(content.solutions.topic) " :description=" $t(content.solutions.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 v-for="(item, i) in content.solutions.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" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue