You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.6 KiB
54 lines
1.6 KiB
<script setup lang="ts">
|
|
const nuxtApp = useNuxtApp()
|
|
const { activeHeadings, updateHeadings } = useScrollspy()
|
|
|
|
const links = computed(() => [{
|
|
label: '首页',
|
|
to: '#home',
|
|
icon: 'i-heroicons-cube-transparent',
|
|
active: activeHeadings.value.includes('home') && !activeHeadings.value.includes('home')
|
|
},{
|
|
label: '特色',
|
|
to: '#features',
|
|
icon: 'i-heroicons-cube-transparent',
|
|
active: activeHeadings.value.includes('features') && !activeHeadings.value.includes('features')
|
|
}, {
|
|
label: '价格',
|
|
to: '#pricing',
|
|
icon: 'i-heroicons-credit-card',
|
|
active: activeHeadings.value.includes('pricing') && !activeHeadings.value.includes('pricing')
|
|
}, {
|
|
label: '下载',
|
|
to: '#down',
|
|
icon: 'i-heroicons-academic-cap',
|
|
active: activeHeadings.value.includes('down')
|
|
}, {
|
|
label: '常见问题',
|
|
to: '#faq',
|
|
icon: 'i-heroicons-question-mark-circle',
|
|
active: activeHeadings.value.includes('faq')
|
|
}])
|
|
|
|
nuxtApp.hooks.hookOnce('page:finish', () => {
|
|
updateHeadings([
|
|
document.querySelector('#features'),
|
|
document.querySelector('#pricing'),
|
|
document.querySelector('#testimonials'),
|
|
document.querySelector('#faq')
|
|
])
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UHeader :links="links">
|
|
<template #logo>
|
|
<div class="flex items-center">
|
|
<NuxtImg src="https://oss.wsdns.cn/20240717/5db2fc954a3a4034a0572be5ecfe8208.jpg?x-oss-process=image/resize,m_fixed,w_100,h_100/quality,Q_90" :size="20" />
|
|
<text class="text-2xl ml-2">工匠基地</text>
|
|
</div>
|
|
</template>
|
|
<template #right>
|
|
<UColorModeButton size="sm" />
|
|
</template>
|
|
</UHeader>
|
|
</template>
|