ce1f28dbb7
This commit introduces the new 'Web Design' service page. - Creates the route to showcase pricing plans for Landing Pages and Official Websites. - Uses a tabbed layout to organize the different service tiers. - Adds a '网展开发' link to the main navigation bar in the default layout for easy access.
78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<template>
|
|
<UApp>
|
|
<UHeader>
|
|
<template #left>
|
|
<div class="text-2xl font-bold">Tootaio Studio</div>
|
|
</template>
|
|
|
|
<UNavigationMenu :items="items" />
|
|
|
|
<template #right>
|
|
<UColorModeButton />
|
|
</template>
|
|
</UHeader>
|
|
|
|
<UMain>
|
|
<slot />
|
|
</UMain>
|
|
|
|
<UFooter>
|
|
<template #left>
|
|
<p class="text-muted text-sm">
|
|
Copyright © 2021 - {{ new Date().getFullYear() }} Tootaio Studio.
|
|
All Rights Reserved.
|
|
</p>
|
|
</template>
|
|
|
|
<template #right>
|
|
<UButton
|
|
v-for="link in socialLink"
|
|
:key="link.name"
|
|
:icon="link.icon"
|
|
color="neutral"
|
|
variant="ghost"
|
|
:to="link.link"
|
|
target="_blank"
|
|
:aria-label="link.name"
|
|
/>
|
|
</template>
|
|
</UFooter>
|
|
</UApp>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { NavigationMenuItem } from "@nuxt/ui";
|
|
|
|
const route = useRoute();
|
|
|
|
const items = computed<NavigationMenuItem[]>(() => [
|
|
{
|
|
label: "宴会大屏展示",
|
|
to: "/",
|
|
},
|
|
{
|
|
label: "网展开发",
|
|
to: "/web-design",
|
|
active: route.path.startsWith("/web-design"),
|
|
},
|
|
]);
|
|
|
|
const socialLink = [
|
|
{
|
|
name: "Blog Posts",
|
|
icon: "lucide:globe",
|
|
link: "https://xiaomai.tootaio.com",
|
|
},
|
|
{
|
|
name: "Official Website",
|
|
icon: "lucide:mouse-pointer-click",
|
|
link: "https://tootaio.com",
|
|
},
|
|
{
|
|
name: "GitHub",
|
|
icon: "lucide:github",
|
|
link: "https://github.com/kingsmai",
|
|
},
|
|
];
|
|
</script>
|