WindowBird/beehive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导航头

Browse Source
This commit is contained in:
WindowBird 2025-10-22 16:32:29 +08:00
parent 7333f97521
commit d18d062ab3
3 changed files with 81 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/css/main.css
View File

@ -2,14 +2,12 @@
@import "@nuxt/ui"; @import "@nuxt/ui";
/*:root {*/
/* --ui-container: var(--container-4xl);*/
/* !*::selection {*!*/
:root { /* !* color: #282a30;*!*/
--ui-container: var(--container-4xl); /* !* background-color: #c8c8c8;*!*/
/* !*}*!*/
::selection { /*}*/
color: #282a30;
background-color: #c8c8c8;
}
}

31
app/components/AppHeader.vue
View File

@ -10,7 +10,7 @@ const items = computed<NavigationMenuItem[]>(() => [{
active: route.path.startsWith('/docs/getting-started') active: route.path.startsWith('/docs/getting-started')
}, { }, {
label: '产品与服务', label: '产品与服务',
icon: 'i-lucide-box', icon: 'i-lucide-box',
active: route.path.startsWith('/docs/components'), active: route.path.startsWith('/docs/components'),
children: [ children: [
@ -40,27 +40,32 @@ const items = computed<NavigationMenuItem[]>(() => [{
to: '/docs/components', to: '/docs/components',
icon: 'i-lucide-box', icon: 'i-lucide-box',
active: route.path.startsWith('/docs/components') active: route.path.startsWith('/docs/components')
}, { },
label: '联系我们', {
to: '/docs/components', label: '联系我们',
icon: 'i-lucide-box', to: '/docs/components',
active: route.path.startsWith('/docs/components') icon: 'i-lucide-box',
},]) active: route.path.startsWith('/docs/components')
},
])
</script> </script>
<template> <template>
<UHeader> <UHeader>
<template #title> <template #title>
<Logo class="h-6 w-auto"/> <view class="h-6 w-auto ">
创特蜂箱
</view>
</template> </template>
<UNavigationMenu :items="items"/> <UNavigationMenu :items="items"/>
<!-- <template #right>--> <template #right>
<!-- <view>--> <view>
<!-- --> 商户管理
<!-- </view>--> </view>
<!-- </template>--> </template>
<template #body> <template #body>
<UNavigationMenu :items="items" class="-mx-2.5" orientation="vertical"/> <UNavigationMenu :items="items" class="-mx-2.5" orientation="vertical"/>

83
app/components/landing/Hero.vue
View File

@ -1,32 +1,61 @@
<script lang="ts" setup> <script lang="ts" setup>
const links = ref([ // const links = ref([
{ // {
label: 'Get started', // label: 'Get started',
to: '/docs/getting-started', // to: '/docs/getting-started',
icon: 'i-lucide-square-play' // icon: 'i-lucide-square-play'
}, // },
{ // {
label: 'Learn more', // label: 'Learn more',
to: '/docs/getting-started/theme/design-system', // to: '/docs/getting-started/theme/design-system',
color: 'neutral', // color: 'neutral',
variant: 'subtle', // variant: 'subtle',
trailingIcon: 'i-lucide-arrow-right' // trailingIcon: 'i-lucide-arrow-right'
} // }
]) // ])
</script> </script>
<template> <template>
<UPageHero <!-- 外层容器设置为全屏 -->
:links="links" <div class="hero-fullscreen">
description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications." <!-- <UPageHero-->
headline="New release" <!-- :links="links"-->
orientation="horizontal" <!--&lt;!&ndash; description="A Nuxt/Vue-integrated UI library..."&ndash;&gt;-->
title="Ultimate Vue UI library" <!--&lt;!&ndash; headline="New release"&ndash;&gt;-->
> <!--&lt;!&ndash; orientation="horizontal"&ndash;&gt;-->
<img <!--&lt;!&ndash; title="Ultimate Vue UI library"&ndash;&gt;-->
alt="App screenshot" <!-- >-->
class="rounded-lg shadow-2xl ring ring-default" <!-- &lt;!&ndash; 图片作为背景（非内容） &ndash;&gt;-->
src="/img/img_1.png" <!-- </UPageHero>-->
> </div>
</UPageHero>
</template> </template>
<style scoped>
/* 关键CSS */
.hero-fullscreen {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.hero-fullscreen::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/img/img_1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1; /* 确保内容在前景 */
}
/* 适配UPageHero内部样式 */
.hero-fullscreen :deep(.u-page-hero) {
background-color: transparent; /* 移除组件默认背景 */
height: 100%;
}
</style>