fix: 一些语言转换问题 carousel foot，优化组件
This commit is contained in:
parent
bbb736ccd2
commit
96c06d9337
|
|
@ -7,38 +7,34 @@ const { state: pages, next, prev } = useCycleList(carousels.map((_, i) => i), {
|
|||
initialValue: 0,
|
||||
})
|
||||
|
||||
useIntervalFn(() => {
|
||||
next()
|
||||
}, 2500)
|
||||
onMounted(() => {
|
||||
useIntervalFn(() => {
|
||||
next()
|
||||
}, 3500)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AViews
|
||||
v-model="pages"
|
||||
>
|
||||
<AView v-for="(item, i) in carousels" :key="i" :value="i">
|
||||
<div class="relative h-full max-h-700px min-h-500px w-full flex items-center justify-center bg-transparent">
|
||||
<!-- <div class="absolute absolute z-10 text-shadow">
|
||||
<h2 class="text-h2 text-start text-amber-700 dark:text-white">
|
||||
{{ $t(item.title) }}
|
||||
</h2>
|
||||
<p class="text-h3 text-start">
|
||||
{{ $t(item.description) }}
|
||||
</p>
|
||||
<NuxtLink :href="item.link.href">
|
||||
<ABtn class="text-xl">
|
||||
{{ $t(item.link.name) }}
|
||||
</ABtn>
|
||||
</NuxtLink>
|
||||
</div> -->
|
||||
<div class="absolute left-0 top-0 z-0 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 65%, hsl(var(--a-body-bg-c))); pointer-events: none;" />
|
||||
<img :src="item.img">
|
||||
</div>
|
||||
<!-- <ACard
|
||||
:title="item.title"
|
||||
class="h-300px shadow-none"
|
||||
:text="item.description"
|
||||
/> -->
|
||||
</AView>
|
||||
</AViews>
|
||||
<div class="relative h-500px w-full overflow-hidden md:h-600px xl:h-700px">
|
||||
<AViews
|
||||
v-model="pages"
|
||||
h-full
|
||||
class="[&>.a-views-wrapper]:h-full"
|
||||
>
|
||||
<AView v-for="(item, i) in carousels" :key="i" :value="i" h-full>
|
||||
<img :src="item.img" style="object-fit: cover;height:100%;width: 100%;">
|
||||
</AView>
|
||||
</AViews>
|
||||
|
||||
<div class="absolute top-0 z-10 h-full w-full flex items-center justify-center text-shadow">
|
||||
<Typography
|
||||
text-color="white"
|
||||
:topic="$t(carousels[pages].title)" :description="$t(carousels[pages].description)" :link="{
|
||||
...carousels[pages].link,
|
||||
name: $t(carousels[pages].link.name),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="absolute left-0 top-0 z-1 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 65%, hsl(var(--a-body-bg-c))); pointer-events: none; pointer-events: none;" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const footer = useFoot()
|
|||
<Divider />
|
||||
<div class="grid-row p-20 pt-30 lg:(grid-cols-3) md:(grid-cols-2 px-30) xl:px-60">
|
||||
<div
|
||||
v-for="(col, i) in footer"
|
||||
v-for="(col, i) in footer.links"
|
||||
:key="i"
|
||||
class="w-full flex flex-col items-center gap-8"
|
||||
>
|
||||
|
|
@ -17,13 +17,23 @@ const footer = useFoot()
|
|||
</h5>
|
||||
|
||||
<NuxtLink v-for="(item, i) in col.child" :key="i" class="font-bold" :href="item.link.href">
|
||||
{{ item.link.name }}
|
||||
{{ $t(item.link.name) }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div my-10 flex items-center justify-center gap-4>
|
||||
<BrandLogo />
|
||||
© Copyright 2022 - 2023 LandVault · Wam Group · All rights reserved
|
||||
<DarkToggle />
|
||||
<div my-10 flex flex-col items-center justify-center gap-4>
|
||||
<div flex items-center gap-4>
|
||||
<BrandLogo />
|
||||
<DarkToggle />
|
||||
</div>
|
||||
<p>
|
||||
{{ $t(footer.copyright) }}
|
||||
</p>
|
||||
<p>
|
||||
{{ $t(footer.release) }}
|
||||
</p>
|
||||
<p v-for="(record, i) in footer.record" :key="i">
|
||||
{{ $t(record) }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<script setup lang="ts">
|
||||
$defineProps<{
|
||||
img: string
|
||||
topic: string
|
||||
href: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
:href="href"
|
||||
class="group relative h-full w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
|
||||
>
|
||||
<img :src="img" class="h-full w-full" style="object-fit: cover;">
|
||||
<div class="mask-img opacity-0 group-hover:opacity-100">
|
||||
<div class="text-h6 w-full">
|
||||
<p :title="$t(topic)" class="w-90% truncate text-white">
|
||||
{{ $t(topic) }}
|
||||
</p>
|
||||
</div>
|
||||
<div i-solar-arrow-right-linear stroke-3 font-bold text-white />
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mask-img{
|
||||
--uno:'absolute bottom-0 left-0 z-1 flex h-50px w-full items-center justify-center border-t-2px border-dark-50/10 bg-black/15 p-2 px-10 backdrop-blur-md transition ';
|
||||
box-shadow: 0 -5px 25px rgba(0,0,0,0.4);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<script setup lang="ts">
|
||||
$defineProps<{
|
||||
img: string
|
||||
title?: string
|
||||
topic?: string
|
||||
description?: string
|
||||
link?: {
|
||||
href: string
|
||||
name: string
|
||||
}
|
||||
textColor?: 'white' | 'black'
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<p v-if="title" class="text-title" :class="`text-${textColor}`" drop-shadow>
|
||||
{{ title }}
|
||||
</p>
|
||||
<h2 v-if="topic" class="text-h2" :class="`text-${textColor}`" drop-shadow>
|
||||
{{ topic }}
|
||||
</h2>
|
||||
<p v-if="description" :class="`text-${textColor}`" text-h6 pb-5 drop-shadow>
|
||||
{{
|
||||
description
|
||||
}}
|
||||
</p>
|
||||
<NuxtLink v-if="link" :href="link?.href">
|
||||
<ABtn>
|
||||
{{ link?.name }}
|
||||
</ABtn>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -12,7 +12,7 @@ const navs = useNav()
|
|||
<AList
|
||||
:items="nav.child"
|
||||
avatar-append
|
||||
class="[--a-list-item-gap:1rem] [--a-spacing:1] border-3px border-light-50/20 !m-0 divide-y divide-dark-50/10 dark:divide-light-50/10"
|
||||
class="[--a-list-item-gap:1rem] [--a-spacing:1] border-1px border-light-50/20 !m-0 divide-y divide-dark-50/10 dark:(border-dark-50/20 divide-light-50/10)"
|
||||
>
|
||||
<NuxtLink v-for="(item, index) in nav.child" :key="index" :href="item.href" class="overflow-hidden py-1 hover:(bg-primary/20)" active-class="bg-primary/20">
|
||||
<AListItem
|
||||
|
|
|
|||
|
|
@ -29,23 +29,8 @@ function getMask() {
|
|||
relative h-380px md:h-400px xl:h-450px
|
||||
>
|
||||
<div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat :style="`background-image: url('${img}');-webkit-mask-image:${getMask()}`" />
|
||||
<Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow>
|
||||
<p v-if="title" class="text-title" drop-shadow>
|
||||
{{ title }}
|
||||
</p>
|
||||
<h2 v-if="topic" class="text-h2" text-white drop-shadow>
|
||||
{{ topic }}
|
||||
</h2>
|
||||
<p v-if="description" text-h6 pb-5 drop-shadow>
|
||||
{{
|
||||
description
|
||||
}}
|
||||
</p>
|
||||
<NuxtLink v-if="link" :href="link?.href">
|
||||
<ABtn>
|
||||
{{ link?.name }}
|
||||
</ABtn>
|
||||
</NuxtLink>
|
||||
<Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-shadow>
|
||||
<Typography :title="title" :topic="topic" :description="description" :link="link" />
|
||||
</Section>
|
||||
</Section>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<script setup lang="ts">
|
||||
$defineProps<{
|
||||
topic: string
|
||||
content: {
|
||||
title: string
|
||||
subtext: string
|
||||
description: string
|
||||
}[]
|
||||
}>()
|
||||
|
||||
const colors = [
|
||||
'text-gradient-pink',
|
||||
'text-gradient-blue',
|
||||
'text-gradient-green',
|
||||
'text-gradient-rose',
|
||||
'text-gradient-purple',
|
||||
'text-gradient-yello',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Section>
|
||||
<Typography :topic="$t(topic)" />
|
||||
<div class="grid-row gap-0 pt-20 md:(grid-cols-2)" :class="`lg:grid-cols-${content.length}`">
|
||||
<div
|
||||
v-for="(col, i) in content"
|
||||
:key="i"
|
||||
class="h-full w-full flex flex-col items-center justify-center"
|
||||
>
|
||||
<h2 :title="$t(col.title)" class="text-h2 w-full text-center text-7xl font-bold text-transparent" :class="colors[i]">
|
||||
{{ $t(col.title) }}
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
v-for="(col, i) in content"
|
||||
:key="i"
|
||||
class="h-full w-full flex flex-col items-center justify-center"
|
||||
>
|
||||
<h5 :title="$t(col.subtext)" class="text-h4 text-h5 mt-3 break-words">
|
||||
{{ $t(col.subtext) }}
|
||||
</h5>
|
||||
</div>
|
||||
<div
|
||||
v-for="(col, i) in content"
|
||||
:key="i"
|
||||
class="h-full w-full flex flex-col items-center justify-center"
|
||||
>
|
||||
<p :title="$t(col.description)" class="text-h6 mt-1 break-words !line-clamp-3">
|
||||
{{ $t(col.description) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</template>
|
||||
|
|
@ -7,8 +7,16 @@ export function useCarousel() {
|
|||
name: 'home.carousel.link[0]',
|
||||
href: '#',
|
||||
},
|
||||
|
||||
img: '/imgs/Home.Creatorverse.jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.carousel.topic[1]',
|
||||
description: 'home.carousel.description[1]',
|
||||
link: {
|
||||
name: 'home.carousel.link[1]',
|
||||
href: '#',
|
||||
},
|
||||
img: '/imgs/1 (8).jpg',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
export function useSectionTwo() {
|
||||
return {
|
||||
title: 'home.sectionTwo.title',
|
||||
description: 'home.sectionTwo.description',
|
||||
content: [
|
||||
{
|
||||
img: '/imgs/Partners/MUA.png',
|
||||
|
|
|
|||
|
|
@ -3,75 +3,80 @@ export function useFoot() {
|
|||
|
||||
const path = locale.value === 'zh' ? '/' : `/${locale.value}`
|
||||
|
||||
return [
|
||||
{
|
||||
title: 'foot.group1.name',
|
||||
child: [
|
||||
{
|
||||
link: {
|
||||
name: 'foot.group1.link1',
|
||||
href: '#',
|
||||
return {
|
||||
copyright: 'foot.copyright',
|
||||
release: 'foot.release',
|
||||
record: ['foot.record[0]', 'foot.record[1]'],
|
||||
links: [
|
||||
{
|
||||
title: 'foot.links[0].group',
|
||||
child: [
|
||||
{
|
||||
link: {
|
||||
name: 'foot.links[0].link[0]',
|
||||
href: '#',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
link: {
|
||||
name: 'foot.group1.link2',
|
||||
href: '#',
|
||||
{
|
||||
link: {
|
||||
name: 'foot.links[0].link[1]',
|
||||
href: '#',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
link: {
|
||||
name: 'foot.group1.link3',
|
||||
href: '#',
|
||||
{
|
||||
link: {
|
||||
name: 'foot.links[0].link[2]',
|
||||
href: '#',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'foot.group2.name',
|
||||
child: [
|
||||
{
|
||||
link: {
|
||||
name: 'foot.group2.link1',
|
||||
href: '#',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'foot.links[1].group',
|
||||
child: [
|
||||
{
|
||||
link: {
|
||||
name: 'foot.links[1].link[0]',
|
||||
href: '#',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
link: {
|
||||
name: 'foot.group2.link2',
|
||||
href: '#',
|
||||
{
|
||||
link: {
|
||||
name: 'foot.links[1].link[1]',
|
||||
href: '#',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
link: {
|
||||
name: 'foot.group2.link3',
|
||||
href: '#',
|
||||
{
|
||||
link: {
|
||||
name: 'foot.links[1].link[2]',
|
||||
href: '#',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'foot.group3.name',
|
||||
child: [
|
||||
{
|
||||
link: {
|
||||
name: 'foot.group3.link1',
|
||||
href: '#',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'foot.links[2].group',
|
||||
child: [
|
||||
{
|
||||
link: {
|
||||
name: 'foot.links[2].link[0]',
|
||||
href: '#',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
link: {
|
||||
name: 'foot.group3.link2',
|
||||
href: '#',
|
||||
{
|
||||
link: {
|
||||
name: 'foot.links[2].link[1]',
|
||||
href: '#',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
link: {
|
||||
name: 'foot.group3.link3',
|
||||
href: '#',
|
||||
{
|
||||
link: {
|
||||
name: 'foot.links[2].link[2]',
|
||||
href: '#',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
"nav": {
|
||||
"news": "News",
|
||||
"home": "Home",
|
||||
"event":{
|
||||
"t":"Events",
|
||||
"child":{
|
||||
"act":["AaaO!","TOPO Land"],
|
||||
"description":["Architecture as an Object", "Topverse Meta Island"]
|
||||
"event": {
|
||||
"t": "Events",
|
||||
"child": {
|
||||
"act": ["AaaO!", "TOPO Land"],
|
||||
"description": ["Architecture as an Object", "Topverse Meta Island"]
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
"t": "Solutions",
|
||||
"child": {
|
||||
"land": {
|
||||
"service":["Web 3.0","Digital Twins","Mixed Reality"],
|
||||
"description": ["The quick brown fox jumps over the lazy dog.","IRL World in Digital","Immersive Creations"]
|
||||
"service": ["Web 3.0", "Digital Twins", "Mixed Reality"],
|
||||
"description": ["The quick brown fox jumps over the lazy dog.", "IRL World in Digital", "Immersive Creations"]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -58,11 +58,11 @@
|
|||
|
||||
},
|
||||
"sectionThree": {
|
||||
|
||||
|
||||
"title": "SHOWCASE",
|
||||
"topic": "Success Stories",
|
||||
"description": "See how TOPVERSE® brings the virtual world into reality",
|
||||
"contentPrimary":{
|
||||
"contentPrimary": {
|
||||
"topic": [
|
||||
"Spotlight: Music Venue",
|
||||
"Parcel Creatorverse Spotlight: Meeting Venue"
|
||||
|
|
@ -91,5 +91,20 @@
|
|||
"topic": "DIVE INTO THE NEW WORLD WITH TOPVERSE® LAB",
|
||||
"description": ""
|
||||
}
|
||||
},
|
||||
"foot": {
|
||||
"copyright": "© Copyright 2022 - 2023 LandVault · Wam Group · All rights reserved",
|
||||
"release": "增值电信业务经营许可证：合字B2-20090007",
|
||||
"record": ["京ICP备10036305号-7", "京公网安备11010802022657号"],
|
||||
"links": [
|
||||
{
|
||||
"group": "testname",
|
||||
"link": ["test", "test2", "test3"]
|
||||
},
|
||||
{
|
||||
"group": "testname2",
|
||||
"link": ["test", "test2", "test3"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
"nav": {
|
||||
"news": "最新动态",
|
||||
"home": "首页",
|
||||
"event":{
|
||||
"t":"项目发起",
|
||||
"child":{
|
||||
"act":["AaaO!","TOPO Land"],
|
||||
"description":["未建成建筑系列", "TOPO元界岛"]
|
||||
"event": {
|
||||
"t": "项目发起",
|
||||
"child": {
|
||||
"act": ["AaaO!", "TOPO Land"],
|
||||
"description": ["未建成建筑系列", "TOPO元界岛"]
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -14,12 +14,12 @@
|
|||
"t": "解决方案",
|
||||
"child": {
|
||||
"land": {
|
||||
"service":["Web 3.0","数字孪生","混合现实"],
|
||||
"description": ["区块链及元宇宙空间板块","智慧城市及工业元宇宙解决方案","虚拟、混合现实内容开发"]
|
||||
"service": ["Web 3.0", "数字孪生", "混合现实"],
|
||||
"description": ["区块链及元宇宙空间板块", "智慧城市及工业元宇宙解决方案", "虚拟、混合现实内容开发"]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
"portfolio": "portfolio",
|
||||
"learn": "learn",
|
||||
"check": "check app",
|
||||
|
|
@ -27,14 +27,14 @@
|
|||
},
|
||||
"scrolldown": "Scroll down to learn more",
|
||||
"home": {
|
||||
"carousel":{
|
||||
"one":{
|
||||
"topic":"Never Drink Alone 元宇宙酒吧",
|
||||
"description":"The Bar Symphony: 在元宇宙中找到共鸣"
|
||||
"carousel": {
|
||||
"one": {
|
||||
"topic": "Never Drink Alone 元宇宙酒吧",
|
||||
"description": "The Bar Symphony: 在元宇宙中找到共鸣"
|
||||
},
|
||||
"two":{
|
||||
"topic":"",
|
||||
"description":""
|
||||
"two": {
|
||||
"topic": "",
|
||||
"description": ""
|
||||
}
|
||||
},
|
||||
"sectionOne": {
|
||||
|
|
@ -43,11 +43,11 @@
|
|||
"title": ["80+", "20+", "近200万"],
|
||||
"subtext": ["工程师及技术专家", "落地项目及技术专利", "平方米落地开发量"],
|
||||
"description": [
|
||||
"建筑师、代码工程师、交互设计师及更多领域交叉",
|
||||
"自2021年起深耕混合现实体验、虚拟地产及Web 3.0开发",
|
||||
"建筑师、代码工程师、交互设计师及更多领域交叉",
|
||||
"自2021年起深耕混合现实体验、虚拟地产及Web 3.0开发",
|
||||
"打通现实世界与虚拟世界的体验，以虚赋实"]
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
"sectionTwo": {
|
||||
"title": "合作伙伴"
|
||||
|
|
@ -76,4 +76,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
152
pages/index.vue
152
pages/index.vue
|
|
@ -24,35 +24,12 @@ const sectionNine = useSectionNine()
|
|||
<Carousel class="mb-5" />
|
||||
<Divider />
|
||||
<!-- Section One -->
|
||||
<Section>
|
||||
<h2 class="text-h2" :title="$t(sectionOne.topic)">
|
||||
{{ $t(sectionOne.topic) }}
|
||||
</h2>
|
||||
<div class="grid-row pt-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionOne.content.length}`">
|
||||
<div
|
||||
v-for="(col, i) in sectionOne.content"
|
||||
:key="i"
|
||||
class="w-full overflow-hidden text-center"
|
||||
>
|
||||
<h2 :title="$t(col.title)" class="text-h2 break-words from-pink-500 to-violet-500 bg-gradient-to-r bg-clip-text text-7xl font-bold text-transparent">
|
||||
{{ $t(col.title) }}
|
||||
</h2>
|
||||
<Divider />
|
||||
<h5 :title="$t(col.subtext)" class="text-h4 text-h5 mt-3 break-words">
|
||||
{{ $t(col.subtext) }}
|
||||
</h5>
|
||||
<p :title="$t(col.description)" class="text-h6 mt-1 break-words !line-clamp-3">
|
||||
{{ $t(col.description) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
<SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
|
||||
|
||||
<!-- Section Two -->
|
||||
<Section class="border-b-2 border-dark/40 border-b-solid from-dark/30 bg-gradient-to-t dark:(border-light-50/10 from-light/5)">
|
||||
<p class="text-title">
|
||||
{{ $t(sectionTwo.title) }}
|
||||
</p>
|
||||
<Typography :title=" $t(sectionTwo.title) " :description=" $t(sectionTwo.description) " />
|
||||
|
||||
<div class="grid-row grid-cols-2 py-10 md:grid-cols-3" :class="`lg:grid-cols-${sectionTwo.content.length}`">
|
||||
<NuxtLink
|
||||
v-for="(content, i) in sectionTwo.content"
|
||||
|
|
@ -68,70 +45,29 @@ const sectionNine = useSectionNine()
|
|||
|
||||
<!-- Section Three -->
|
||||
<Section text-center class="section-three">
|
||||
<p class="text-title">
|
||||
{{ $t(sectionThree.title) }}
|
||||
</p>
|
||||
<h2 class="text-h2">
|
||||
{{ $t(sectionThree.topic) }}
|
||||
</h2>
|
||||
<p class="text-h6">
|
||||
{{ $t(sectionThree.description) }}
|
||||
</p>
|
||||
<Typography :title=" $t(sectionThree.title) " :topic=" $t(sectionThree.topic) " :description=" $t(sectionThree.description) " />
|
||||
|
||||
<div>
|
||||
<div class="grid-row py-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentPrimary.length}`">
|
||||
<NuxtLink
|
||||
<ImageHover
|
||||
v-for="(content, i) in sectionThree.contentPrimary"
|
||||
:key="i"
|
||||
:href="content.href"
|
||||
class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
|
||||
>
|
||||
<img :src="content.img">
|
||||
<div class="mask-img opacity-0 group-hover:opacity-100">
|
||||
<div class="text-h4 w-full">
|
||||
<p :title="content.topic" class="w-90% truncate text-white">
|
||||
{{ content.topic }}
|
||||
</p>
|
||||
</div>
|
||||
<div i-solar-arrow-right-linear stroke-3 font-bold text-white />
|
||||
</div>
|
||||
</NuxtLink>
|
||||
:href="content.href" :img="content.img" :topic="content.topic"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid-row pb-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentSecondary.length}`">
|
||||
<NuxtLink
|
||||
<ImageHover
|
||||
v-for="(content, i) in sectionThree.contentSecondary"
|
||||
:key="i"
|
||||
:href="content.href"
|
||||
class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
|
||||
>
|
||||
<img :src="content.img">
|
||||
<div class="mask-img opacity-0 group-hover:opacity-100">
|
||||
<div class="text-h4 w-full">
|
||||
<p :title="content.topic" class="w-90% truncate text-white">
|
||||
{{ content.topic }}
|
||||
</p>
|
||||
</div>
|
||||
<div i-solar-arrow-right-linear stroke-3 font-bold text-white />
|
||||
</div>
|
||||
</NuxtLink>
|
||||
:href="content.href" :img="content.img" :topic="content.topic"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid-row pb-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentThird.length}`">
|
||||
<NuxtLink
|
||||
<ImageHover
|
||||
v-for="(content, i) in sectionThree.contentThird"
|
||||
:key="i"
|
||||
:href="content.href"
|
||||
class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
|
||||
>
|
||||
<img :src="content.img">
|
||||
<div class="mask-img opacity-0 group-hover:opacity-100">
|
||||
<div class="text-h4 w-full">
|
||||
<p :title="content.topic" class="w-90% truncate text-white">
|
||||
{{ content.topic }}
|
||||
</p>
|
||||
</div>
|
||||
<div i-solar-arrow-right-linear stroke-3 font-bold text-white />
|
||||
</div>
|
||||
</NuxtLink>
|
||||
:href="content.href" :img="content.img" :topic="content.topic"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<NuxtLink :href="sectionThree.link.href">
|
||||
|
|
@ -140,7 +76,7 @@ const sectionNine = useSectionNine()
|
|||
</Section>
|
||||
|
||||
<!-- Section Four -->
|
||||
<Banner
|
||||
<SectionBanner
|
||||
:img="$t(sectionFour.img)" :topic="$t(sectionFour.topic)" :description="$t(sectionFour.description)" :link="{
|
||||
href: sectionFour.link.href,
|
||||
name: $t(sectionFour.link.name),
|
||||
|
|
@ -148,17 +84,8 @@ const sectionNine = useSectionNine()
|
|||
/>
|
||||
|
||||
<!-- Section Five -->
|
||||
<Section class="from-violet-500 to-fuchsia-500 text-white dark:(from-violet-600 to-fuchsia-600)" bg-gradient-to-r>
|
||||
<p class="text-title text-start">
|
||||
{{ $t(sectionFive.title) }}
|
||||
</p>
|
||||
<h2 class="text-h2 text-start text-white">
|
||||
{{ $t(sectionFive.topic) }}
|
||||
</h2>
|
||||
<p class="text-h6 mb-20 text-start">
|
||||
{{ $t(sectionFive.description) }}
|
||||
</p>
|
||||
|
||||
<Section class="bg-gradient-blue text-white">
|
||||
<Typography :title=" $t(sectionFive.title) " :topic=" $t(sectionFive.topic) " :description=" $t(sectionFive.description) " class="pb-20 text-start" />
|
||||
<div class="grid-row gap-26 pb-10 lg:(grid-cols-3) md:(grid-cols-2)">
|
||||
<div
|
||||
v-for="(content, i) in sectionFive.content"
|
||||
|
|
@ -166,10 +93,10 @@ const sectionNine = useSectionNine()
|
|||
class="w-full"
|
||||
>
|
||||
<h4 text-h4 class="break-words text-start font-bold text-white !line-clamp-2">
|
||||
{{ content.topic }}
|
||||
{{ $t(content.topic) }}
|
||||
</h4>
|
||||
<p text-h7 class="break-words text-start !line-clamp-3">
|
||||
{{ content.description }}
|
||||
{{ $t(content.description) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -177,12 +104,7 @@ const sectionNine = useSectionNine()
|
|||
|
||||
<!-- Section Six -->
|
||||
<Section>
|
||||
<h2 class="text-h2">
|
||||
{{ $t(sectionSix.topic) }}
|
||||
</h2>
|
||||
<p class="text-h6">
|
||||
{{ $t(sectionSix.description) }}
|
||||
</p>
|
||||
<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">
|
||||
|
|
@ -194,18 +116,18 @@ const sectionNine = useSectionNine()
|
|||
<div class="w-55% flex-grow">
|
||||
<div class="h-full w-full flex flex-col items-center justify-center px-16 md:items-start">
|
||||
<p class="text-title">
|
||||
{{ item.title }}
|
||||
{{ $t(item.title) }}
|
||||
</p>
|
||||
<h4 class="text-h4 font-bold">
|
||||
{{ item.topic }}
|
||||
{{ $t(item.topic) }}
|
||||
</h4>
|
||||
<p class="text-h6 md:text-left">
|
||||
{{ item.description }}
|
||||
{{ $t(item.description) }}
|
||||
</p>
|
||||
<div w-full py-10>
|
||||
<div v-if="item.link" w-full py-10>
|
||||
<NuxtLink :href="item.link.href">
|
||||
<ABtn variant="light" class="group">
|
||||
{{ item.link.name }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
|
||||
{{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
|
||||
</ABtn>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
|
@ -215,7 +137,7 @@ const sectionNine = useSectionNine()
|
|||
</Section>
|
||||
|
||||
<!-- Section Seven -->
|
||||
<Banner :img="$t(sectionSeven.img)" :title="$t(sectionSeven.title)" :topic="$t(sectionSeven.topic)" mask="bottom" />
|
||||
<SectionBanner :img="$t(sectionSeven.img)" :title="$t(sectionSeven.title)" :topic="$t(sectionSeven.topic)" mask="bottom" />
|
||||
|
||||
<!-- Section Eight -->
|
||||
<Section>
|
||||
|
|
@ -223,14 +145,14 @@ const sectionNine = useSectionNine()
|
|||
<div
|
||||
v-for="(content, i) in sectionEight.content"
|
||||
:key="i"
|
||||
class="w-full"
|
||||
class="w-full text-center"
|
||||
>
|
||||
<div :class="content.icon" class="h-60px w-full" />
|
||||
<h4 text-h4 class="break-words font-bold !line-clamp-2">
|
||||
{{ content.title }}
|
||||
<div :class="content.icon" h-60px w-full />
|
||||
<h4 text-h4 font-bold>
|
||||
{{ $t(content.title) }}
|
||||
</h4>
|
||||
<p text-h7 class="break-words text-center !line-clamp-3">
|
||||
{{ content.description }}
|
||||
<p text-h7>
|
||||
{{ $t(content.description) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -256,16 +178,8 @@ const sectionNine = useSectionNine()
|
|||
<Divider />
|
||||
|
||||
<!-- Section Nine -->
|
||||
<Section my-10 from-green-500 to-lime-300 bg-gradient-to-r>
|
||||
<p class="text-title text-start">
|
||||
{{ $t(sectionNine.title) }}
|
||||
</p>
|
||||
<h2 class="text-h2 text-start">
|
||||
{{ $t(sectionNine.topic) }}
|
||||
</h2>
|
||||
<p class="text-h6 mb-10 text-start">
|
||||
{{ $t(sectionNine.description) }}
|
||||
</p>
|
||||
<Section class="bg-gradient-green my-10">
|
||||
<Typography :title="$t(sectionNine.title)" :topic=" $t(sectionNine.topic)" :description=" $t(sectionNine.description)" class="text-start" />
|
||||
</Section>
|
||||
<Divider />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -19,20 +19,38 @@ import { presetThemeDefault } from '@anu-vue/preset-theme-default'
|
|||
export default defineConfig({
|
||||
include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
|
||||
shortcuts: {
|
||||
'text-title': 'text font-bold opacity-90 text-center uppercase',
|
||||
'text-body': 'text-base text-center tracking-normal',
|
||||
'text-description': 'text-md text-stone text-center',
|
||||
'text-h2': 'line-clamp-2 text-5xl text-center leading-20 font-bold',
|
||||
'text-h3': 'line-clamp-2 text-4xl text-center leading-13',
|
||||
'text-h4': 'line-clamp-2 text-2xl text-center leading-10',
|
||||
'text-h5': 'line-clamp-2 text-xl text-center leading-8',
|
||||
'text-h6': 'line-clamp-2 text-lg text-center leading-6',
|
||||
'text-h7': 'line-clamp-3 text text-center',
|
||||
'text-title': ' font-bold opacity-90 uppercase break-words',
|
||||
'text-body': 'text-base tracking-normal break-words',
|
||||
'text-description': 'text-md text-stone break-words',
|
||||
'text-h2': 'line-clamp-2 text-5xl leading-20 break-words font-bold',
|
||||
'text-h3': 'line-clamp-2 text-4xl leading-13 break-words',
|
||||
'text-h4': 'line-clamp-2 text-2xl leading-10 break-words',
|
||||
'text-h5': 'line-clamp-3 text-xl leading-8 break-words',
|
||||
'text-h6': 'line-clamp-3 text-lg leading-6 break-words',
|
||||
'text-h7': 'line-clamp-3 text-base break-words',
|
||||
'bg-gradient-pink': 'from-pink to-violet bg-gradient-to-r ',
|
||||
'bg-gradient-blue': 'from-sky to-indigo bg-gradient-to-r ',
|
||||
'bg-gradient-green': 'from-lime to-green bg-gradient-to-r ',
|
||||
'bg-gradient-purple': 'from-purple to-fuchsia bg-gradient-to-r ',
|
||||
'bg-gradient-rose': 'from-orange to-rose bg-gradient-to-r ',
|
||||
'bg-gradient-yellow': 'from-yellow to-amber bg-gradient-to-r ',
|
||||
'text-gradient-pink': 'from-pink to-violet bg-gradient-to-r bg-clip-text ',
|
||||
'text-gradient-blue': 'from-blue to-indigo bg-gradient-to-r bg-clip-text ',
|
||||
'text-gradient-green': 'from-lime to-green bg-gradient-to-r bg-clip-text ',
|
||||
'text-gradient-purple': 'from-purple to-fuchsia bg-gradient-to-r bg-clip-text ',
|
||||
'text-gradient-rose': 'from-orange to-rose bg-gradient-to-r bg-clip-text ',
|
||||
'text-gradient-yellow': 'from-yellow to-amber bg-gradient-to-r bg-clip-text ',
|
||||
},
|
||||
safelist: [
|
||||
...Array(10).fill('').map((_, i) => `grid-cols-${i + 1}`),
|
||||
...Array(10).fill('').map((_, i) => `lg:grid-cols-${i + 1}`),
|
||||
'i-solar-airbuds-left-bold-duotone',
|
||||
'text-gradient-pink',
|
||||
'text-gradient-blue',
|
||||
'text-gradient-green',
|
||||
'text-gradient-rose',
|
||||
'text-gradient-purple',
|
||||
'text-gradient-yello',
|
||||
],
|
||||
presets: [
|
||||
presetAnu(),
|
||||
|
|
|
|||
Loading…
Reference in New Issue