add: hook section
This commit is contained in:
parent
ba996e5b47
commit
f9debe4ed3
|
|
@ -2,5 +2,8 @@
|
|||
"extends": [
|
||||
"@antfu",
|
||||
"@unocss"
|
||||
]
|
||||
],
|
||||
"rules": {
|
||||
"@typescript-eslint/ban-ts-comment":"off"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { useCarousel } from '~/config/pages/home/use-carousel'
|
||||
|
||||
const { state: pages, next, prev } = useCycleList(Array(4).fill('').map((_, i) => i), {
|
||||
initialValue: 1,
|
||||
})
|
||||
const transitionPages = ref('view-next')
|
||||
const carousels = [
|
||||
{
|
||||
title: 'carousel.one.topic',
|
||||
description: 'carousel.one.description',
|
||||
entry: 'carousel.one.entry',
|
||||
img: '/imgs/1 (1).jpg',
|
||||
},
|
||||
{
|
||||
title: 'carousel.two.topic',
|
||||
description: 'carousel.two.description',
|
||||
entry: 'carousel.two.entry',
|
||||
img: '/imgs/1 (2).jpg',
|
||||
},
|
||||
{
|
||||
title: 'carousel.third.topic',
|
||||
description: 'carousel.third.description',
|
||||
entry: 'carousel.third.entry',
|
||||
img: '/imgs/1 (3).jpg',
|
||||
},
|
||||
{
|
||||
title: 'carousel.four.topic',
|
||||
description: 'carousel.four.description',
|
||||
entry: 'carousel.four.entry',
|
||||
img: '/imgs/1 (4).jpg',
|
||||
},
|
||||
]
|
||||
const carousels = useCarousel()
|
||||
|
||||
useIntervalFn(() => {
|
||||
next()
|
||||
|
|
@ -52,8 +28,8 @@ useIntervalFn(() => {
|
|||
{{ $t(item.entry) }}
|
||||
</ABtn>
|
||||
</div>
|
||||
<div class="h-full w-full absolute top-0 left-0" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 80%, hsl(var(--a-body-bg-c)) 101%);" ></div>
|
||||
<img :src="item.img">
|
||||
<div class="absolute left-0 top-0 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 75%, hsl(var(--a-body-bg-c)) 99%);" />
|
||||
<img :src="item.img">
|
||||
</div>
|
||||
<!-- <ACard
|
||||
:title="item.title"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div text="xl gray4" m-5 flex="~ gap3" justify-center>
|
||||
<NuxtLink i-carbon-campsite to="/" />
|
||||
<a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="_blank" />
|
||||
<DarkToggle />
|
||||
<div class="grid-row py-10 lg:(grid-cols-3) md:(grid-cols-2)">
|
||||
<div
|
||||
v-for="col in 3"
|
||||
:key="col"
|
||||
class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
const nav = [
|
||||
{
|
||||
name: 'nav.dashboard',
|
||||
to: '/dashboard',
|
||||
},
|
||||
{
|
||||
name: 'nav.datacenter',
|
||||
to: '/data-center',
|
||||
},
|
||||
{
|
||||
name: 'nav.server',
|
||||
to: '/server',
|
||||
},
|
||||
{
|
||||
name: 'nav.filer',
|
||||
to: '/filer',
|
||||
},
|
||||
{
|
||||
name: 'nav.cdn',
|
||||
to: '/cdn',
|
||||
},
|
||||
{
|
||||
name: 'nav.management',
|
||||
to: '/management',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="bg-header/10 h-[100px]" absolute z-100 w-full flex items-center justify-between px-15>
|
||||
<header class="bg-header/10 min-h-[100px]" z-100 w-full flex flex-col items-start justify-start px-5 md="items-center flex-row justify-around px-15 absolute">
|
||||
<NuxtLink to="/" class="w-35 flex items-center gap-5">
|
||||
<BrandLogo />
|
||||
</NuxtLink>
|
||||
<nav h-full flex items-center>
|
||||
<HeaderNav />
|
||||
</nav>
|
||||
<div w-20 flex justify-center>
|
||||
<ABtn variant="text">
|
||||
<!-- <div w-20 flex justify-center> -->
|
||||
<!-- <ABtn variant="text">
|
||||
login
|
||||
</ABtn>
|
||||
<ABtn shadow-lg>
|
||||
login
|
||||
</ABtn>
|
||||
</div>
|
||||
</ABtn> -->
|
||||
<!-- </div> -->
|
||||
</header>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,7 @@
|
|||
<script setup>
|
||||
const { x, y } = useWindowScroll()
|
||||
<script setup lang="ts">
|
||||
import { useNav } from '~/config/use-nav'
|
||||
|
||||
const navs = [
|
||||
{
|
||||
title: 'home',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'solutions.t',
|
||||
child: [
|
||||
{
|
||||
title: 'solutions.child.land.t',
|
||||
subtitle: 'solutions.child.land.description',
|
||||
href: '/land',
|
||||
icon: 'i-solar-accumulator-bold-duotone',
|
||||
iconColor: 'red',
|
||||
},
|
||||
{
|
||||
title: 'solutions.child.land.t',
|
||||
subtitle: 'solutions.child.land.description sdfdsfasdf ',
|
||||
href: '/landa',
|
||||
icon: 'i-solar-airbuds-case-open-line-duotone text-amber',
|
||||
iconColor: 'amber',
|
||||
// avatarProps: { icon: 'i-solar-airbuds-case-open-line-duotone' },
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const navs = useNav()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -48,7 +23,6 @@ const navs = [
|
|||
:title="item.title"
|
||||
:subtitle="item.subtitle"
|
||||
:icon="item.icon"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</AList>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
export function useCarousel() {
|
||||
return [
|
||||
{
|
||||
title: 'home.carousel.one.topic',
|
||||
description: 'home.carousel.one.description',
|
||||
entry: 'home.carousel.one.entry',
|
||||
img: '/imgs/1 (1).jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.carousel.two.topic',
|
||||
description: 'home.carousel.two.description',
|
||||
entry: 'home.carousel.two.entry',
|
||||
img: '/imgs/1 (2).jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.carousel.third.topic',
|
||||
description: 'home.carousel.third.description',
|
||||
entry: 'home.carousel.third.entry',
|
||||
img: '/imgs/1 (3).jpg',
|
||||
},
|
||||
{
|
||||
title: 'home.carousel.four.topic',
|
||||
description: 'home.carousel.four.description',
|
||||
entry: 'home.carousel.four.entry',
|
||||
img: '/imgs/1 (4).jpg',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
export function useSectionOne() {
|
||||
return {
|
||||
topic: 'home.sectionOne.topic',
|
||||
description: 'home.sectionOne.description',
|
||||
content: [
|
||||
{
|
||||
title: 'home.sectionOne.one.title',
|
||||
subtext: 'home.setctionOne.one.subtext',
|
||||
description: 'home.setctionOne.one.description',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.two.title',
|
||||
subtext: 'home.setctionOne.two.subtext',
|
||||
description: 'home.setctionOne.two.description',
|
||||
},
|
||||
{
|
||||
title: 'home.sectionOne.three.title',
|
||||
subtext: 'home.setctionOne.three.subtext',
|
||||
description: 'home.setctionOne.three.description',
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
export function useSectionThree() {
|
||||
return {
|
||||
title: 'home.sectionThree.title',
|
||||
topic: 'home.sectionThree.topic',
|
||||
description: 'home.sectionThree.description',
|
||||
entry: 'home.sectionThree.entry',
|
||||
contentFirst: [
|
||||
{
|
||||
topic: 'home.sectionThree.contentFirst.topic1',
|
||||
img: '/imgs/1 (1).jpg',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
topic: 'home.sectionThree.contentFirst.topic2',
|
||||
img: '/imgs/1 (1).jpg',
|
||||
href: '#',
|
||||
},
|
||||
],
|
||||
contentSecondary: [
|
||||
{
|
||||
topic: 'home.sectionThree.contentSecondary.topic1',
|
||||
img: '/imgs/1 (1).jpg',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
topic: 'home.sectionThree.contentSecondary.topic2',
|
||||
img: '/imgs/1 (1).jpg',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
topic: 'home.sectionThree.contentSecondary.topic3',
|
||||
img: '/imgs/1 (1).jpg',
|
||||
href: '#',
|
||||
},
|
||||
|
||||
],
|
||||
contentThird: [
|
||||
{
|
||||
topic: 'home.sectionThree.contentThird.topic1',
|
||||
img: '/imgs/1 (1).jpg',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
topic: 'home.sectionThree.contentThird.topic2',
|
||||
img: '/imgs/1 (1).jpg',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
topic: 'home.sectionThree.contentThird.topic3',
|
||||
img: '/imgs/1 (1).jpg',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
topic: 'home.sectionThree.contentThird.topic4',
|
||||
img: '/imgs/1 (1).jpg',
|
||||
href: '#',
|
||||
},
|
||||
|
||||
],
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
export function useSectionTwo() {
|
||||
return {
|
||||
title: 'home.sectionTwo.title',
|
||||
content: [
|
||||
{
|
||||
img: 'https://landvault.io/assets/logos/paypal.svg',
|
||||
href: '#',
|
||||
title: 'paypal',
|
||||
},
|
||||
{
|
||||
img: 'https://landvault.io/assets/logos/paypal.svg',
|
||||
href: '#',
|
||||
title: 'paypal',
|
||||
},
|
||||
{
|
||||
img: 'https://landvault.io/assets/logos/paypal.svg',
|
||||
href: '#',
|
||||
title: 'paypal',
|
||||
},
|
||||
{
|
||||
img: 'https://landvault.io/assets/logos/paypal.svg',
|
||||
href: '#',
|
||||
title: 'paypal',
|
||||
},
|
||||
{
|
||||
img: 'https://landvault.io/assets/logos/paypal.svg',
|
||||
href: '#',
|
||||
title: 'paypal',
|
||||
},
|
||||
{
|
||||
img: 'https://landvault.io/assets/logos/paypal.svg',
|
||||
href: '#',
|
||||
title: 'paypal',
|
||||
},
|
||||
{
|
||||
img: 'https://landvault.io/assets/logos/paypal.svg',
|
||||
href: '#',
|
||||
title: 'paypal',
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import type { colors } from 'unocss/preset-mini'
|
||||
|
||||
interface NavMenu {
|
||||
title: string
|
||||
icon?: string
|
||||
href?: string
|
||||
subtitle?: string
|
||||
iconColor?: keyof typeof colors
|
||||
child?: NavMenu[]
|
||||
}
|
||||
|
||||
export function useNav(): NavMenu[] {
|
||||
return [
|
||||
{
|
||||
title: 'nav.home',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'nav.solutions.t',
|
||||
child: [
|
||||
{
|
||||
title: 'nav.solutions.child.land.t',
|
||||
subtitle: 'nav.solutions.child.land.description',
|
||||
href: '/land',
|
||||
icon: 'i-solar-accumulator-bold-duotone',
|
||||
iconColor: 'red',
|
||||
},
|
||||
{
|
||||
title: 'nav.solutions.child.land.t',
|
||||
subtitle: 'nav.solutions.child.land.description',
|
||||
href: '/landa',
|
||||
icon: 'i-solar-airbuds-case-open-line-duotone text-amber',
|
||||
iconColor: 'amber',
|
||||
// avatarProps: { icon: 'i-solar-airbuds-case-open-line-duotone' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'nav.test',
|
||||
href: '/test',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
const el = ref<HTMLElement | null>(null)
|
||||
const { y } = useScroll(el)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="scrollbar scrollbar-rounded scrollbar-w-4px scrollbar-radius-2 scrollbar-track-color-transparent scrollbar-thumb-color-dark-50 scrollbar-thumb-radius-4 h-screen w-screen overflow-auto">
|
||||
<Header />
|
||||
<main :ref="el" class="h-screen w-screen overflow-auto scrollbar-thumb-color-dark-50 scrollbar-track-color-transparent scrollbar-radius-2 scrollbar-thumb-radius-4 scrollbar-w-6px scrollbar scrollbar-rounded">
|
||||
<Header
|
||||
:class="{
|
||||
hidden: !!y,
|
||||
}"
|
||||
/>
|
||||
<slot />
|
||||
<ABtn shadow-lg>
|
||||
test
|
||||
</ABtn>
|
||||
<AInput />
|
||||
<Footer />
|
||||
<div class="mx-auto mt-5 text-center text-sm opacity-25">
|
||||
[Default Layout]
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -113,4 +113,6 @@ export default defineNuxtConfig({
|
|||
devtools: {
|
||||
enabled: true,
|
||||
},
|
||||
|
||||
telemetry: false,
|
||||
})
|
||||
|
|
|
|||
137
pages/index.vue
137
pages/index.vue
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useSectionOne } from '~/config/pages/home/use-section-one'
|
||||
import { useSectionThree } from '~/config/pages/home/use-section-three'
|
||||
import { useSectionTwo } from '~/config/pages/home/use-section-two'
|
||||
|
||||
const imgs = [
|
||||
{
|
||||
img: 'https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9tYXAuanBn?w=581&h=358&fit=crop&fm=webp&s=1eeea55d816b6b9fb182d2a469db110c',
|
||||
|
|
@ -44,70 +48,131 @@ const imgs = [
|
|||
},
|
||||
},
|
||||
]
|
||||
|
||||
const sectionOne = useSectionOne()
|
||||
const sectionTwo = useSectionTwo()
|
||||
const sectionThree = useSectionThree()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Carousel class="mb-5" />
|
||||
<Divider />
|
||||
<!-- Section One -->
|
||||
<Section>
|
||||
<h2 class="text-h2">
|
||||
{{ $t('home.sectionOne.topic') }}
|
||||
<h2 class="text-h2" :title="$t(sectionOne.topic)">
|
||||
{{ $t(sectionOne.topic) }}
|
||||
</h2>
|
||||
<div class="grid-row lg:(grid-cols-3) md:(grid-cols-2)">
|
||||
<div class="grid-row md:(grid-cols-2)" :class="`lg:grid-cols-${sectionOne.content.length}`">
|
||||
<div
|
||||
v-for="col in 3"
|
||||
:key="col"
|
||||
class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
|
||||
/>
|
||||
v-for="(col, i) in sectionOne.content"
|
||||
:key="i"
|
||||
class="w-full overflow-hidden text-center"
|
||||
>
|
||||
<h2 :title="$t(col.title)" class="break-words from-pink-500 to-violet-500 bg-gradient-to-r bg-clip-text text-h3 font-bold text-transparent">
|
||||
{{ $t(col.title) }}
|
||||
</h2>
|
||||
<Divider />
|
||||
<h5 :title="$t(col.subtext)" class="mt-3 break-words text-h4 text-h5">
|
||||
{{ $t(col.subtext) }}
|
||||
</h5>
|
||||
<Divider />
|
||||
<p :title="$t(col.description)" class="mt-1 break-words text-h6 !line-clamp-3">
|
||||
{{ $t(col.description) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<!-- Section Two -->
|
||||
<Section class="border-b-2 border-light-50/10 border-b-solid from-light/5 bg-gradient-to-t">
|
||||
<p class="text-title">
|
||||
{{ $t('home.sectionTwo.title') }}
|
||||
{{ $t(sectionTwo.title) }}
|
||||
</p>
|
||||
<div class="grid-row grid-cols-2 py-10 lg:(grid-cols-7) md:(grid-cols-3)">
|
||||
<div
|
||||
v-for="col in 7"
|
||||
:key="col"
|
||||
class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
|
||||
/>
|
||||
<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"
|
||||
:key="i"
|
||||
class="h-10 w-full flex justify-center"
|
||||
:href="content.href"
|
||||
:title="$t(content.title)"
|
||||
>
|
||||
<img :src="content.img">
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<!-- Section Three -->
|
||||
<Section text-center>
|
||||
<p class="text-title">
|
||||
{{ $t('home.sectionThird.title') }}
|
||||
{{ $t(sectionThree.title) }}
|
||||
</p>
|
||||
<h2 class="text-h2">
|
||||
{{ $t('home.sectionThird.topic') }}
|
||||
{{ $t(sectionThree.topic) }}
|
||||
</h2>
|
||||
<p class="text-h6">
|
||||
{{ $t('home.sectionThird.description') }}
|
||||
{{ $t(sectionThree.description) }}
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<div class="grid-row py-10 pb-20 lg:(grid-cols-2) md:(grid-cols-2)">
|
||||
<div
|
||||
v-for="col in 2"
|
||||
:key="col"
|
||||
class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
|
||||
/>
|
||||
<div class="grid-row py-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentFirst.length}`">
|
||||
<NuxtLink
|
||||
v-for="(content, i) in sectionThree.contentFirst"
|
||||
:key="i"
|
||||
:href="content.href"
|
||||
class="relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35"
|
||||
>
|
||||
<img :src="content.img">
|
||||
<div class="absolute left-0 top-0 z-1 h-full w-full from-transparent to-dark-800 bg-gradient-to-b" />
|
||||
<div class="absolute bottom-0 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
|
||||
<div class="w-full text-h4">
|
||||
<p :title="content.topic" class="w-90% truncate">
|
||||
{{ content.topic }}
|
||||
</p>
|
||||
</div>
|
||||
<div i-solar-arrow-right-linear stroke-3 font-bold />
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="grid-row pb-20 lg:(grid-cols-3) md:(grid-cols-2)">
|
||||
<div
|
||||
v-for="col in 3"
|
||||
:key="col"
|
||||
class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
|
||||
/>
|
||||
<div class="grid-row pb-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentSecondary.length}`">
|
||||
<NuxtLink
|
||||
v-for="(content, i) in sectionThree.contentSecondary"
|
||||
:key="i"
|
||||
:href="content.href"
|
||||
class="relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35"
|
||||
>
|
||||
<img :src="content.img">
|
||||
<div class="absolute left-0 top-0 z-1 h-full w-full from-transparent to-dark-800 bg-gradient-to-b" />
|
||||
<div class="absolute bottom-0 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
|
||||
<div class="w-full text-h4">
|
||||
<p :title="content.topic" class="w-90% truncate">
|
||||
{{ content.topic }}
|
||||
</p>
|
||||
</div>
|
||||
<div i-solar-arrow-right-linear stroke-3 font-bold />
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="grid-row pb-20 lg:(grid-cols-4) md:(grid-cols-2)">
|
||||
<div
|
||||
v-for="col in 4"
|
||||
:key="col"
|
||||
class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
|
||||
/>
|
||||
<div class="grid-row pb-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentThird.length}`">
|
||||
<NuxtLink
|
||||
v-for="(content, i) in sectionThree.contentThird"
|
||||
:key="i"
|
||||
:href="content.href"
|
||||
class="relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35"
|
||||
>
|
||||
<img :src="content.img">
|
||||
<div class="absolute left-0 top-0 z-1 h-full w-full from-transparent to-dark-800 bg-gradient-to-b" />
|
||||
<div class="absolute bottom-0 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
|
||||
<div class="w-full text-h4">
|
||||
<p :title="content.topic" class="w-90% truncate">
|
||||
{{ content.topic }}
|
||||
</p>
|
||||
</div>
|
||||
<div i-solar-arrow-right-linear stroke-3 font-bold />
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<ABtn>{{ $t('home.sectionThird.entry') }}</ABtn>
|
||||
<ABtn>{{ $t(sectionThree.entry) }}</ABtn>
|
||||
</Section>
|
||||
<Section
|
||||
relative h-380px md:h-400px xl:h-450px
|
||||
|
|
|
|||
|
|
@ -22,13 +22,17 @@ export default defineConfig({
|
|||
'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': 'text-5xl text-center leading-20 font-bold',
|
||||
'text-h3': 'text-4xl text-center leading-18',
|
||||
'text-h4': 'text-2xl text-center leading-14',
|
||||
'text-h5': 'text-xl text-center leading-10',
|
||||
'text-h6': 'text-lg text-center leading-6',
|
||||
'text-h7': 'text 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',
|
||||
},
|
||||
safelist: [
|
||||
...Array(10).fill('').map((_, i) => `grid-cols-${i + 1}`),
|
||||
...Array(10).fill('').map((_, i) => `lg:grid-cols-${i + 1}`),
|
||||
],
|
||||
presets: [
|
||||
presetAnu(),
|
||||
// default theme preset
|
||||
|
|
|
|||
Loading…
Reference in New Issue