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";
/*:root {*/
/* --ui-container: var(--container-4xl);*/
:root {
--ui-container: var(--container-4xl);
::selection {
color: #282a30;
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')
}, {
label: '产品与服务',
icon: 'i-lucide-box',
active: route.path.startsWith('/docs/components'),
children: [
@ -40,27 +40,32 @@ const items = computed<NavigationMenuItem[]>(() => [{
to: '/docs/components',
icon: 'i-lucide-box',
active: route.path.startsWith('/docs/components')
}, {
label: '联系我们',
to: '/docs/components',
icon: 'i-lucide-box',
active: route.path.startsWith('/docs/components')
},])
},
{
label: '联系我们',
to: '/docs/components',
icon: 'i-lucide-box',
active: route.path.startsWith('/docs/components')
},
])
</script>
<template>
<UHeader>
<template #title>
<Logo class="h-6 w-auto"/>
<view class="h-6 w-auto ">
创特蜂箱
</view>
</template>
<UNavigationMenu :items="items"/>
<!-- <template #right>-->
<!-- <view>-->
<!-- -->
<!-- </view>-->
<!-- </template>-->
<template #right>
<view>
商户管理
</view>
</template>
<template #body>
<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>
const links = ref([
{
label: 'Get started',
to: '/docs/getting-started',
icon: 'i-lucide-square-play'
},
{
label: 'Learn more',
to: '/docs/getting-started/theme/design-system',
color: 'neutral',
variant: 'subtle',
trailingIcon: 'i-lucide-arrow-right'
}
])
// const links = ref([
// {
// label: 'Get started',
// to: '/docs/getting-started',
// icon: 'i-lucide-square-play'
// },
// {
// label: 'Learn more',
// to: '/docs/getting-started/theme/design-system',
// color: 'neutral',
// variant: 'subtle',
// trailingIcon: 'i-lucide-arrow-right'
// }
// ])
</script>
<template>
<UPageHero
:links="links"
description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
headline="New release"
orientation="horizontal"
title="Ultimate Vue UI library"
>
<img
alt="App screenshot"
class="rounded-lg shadow-2xl ring ring-default"
src="/img/img_1.png"
>
</UPageHero>
<!-- 外层容器设置为全屏 -->
<div class="hero-fullscreen">
<!-- <UPageHero-->
<!-- :links="links"-->
<!--&lt;!&ndash; description="A Nuxt/Vue-integrated UI library..."&ndash;&gt;-->
<!--&lt;!&ndash; headline="New release"&ndash;&gt;-->
<!--&lt;!&ndash; orientation="horizontal"&ndash;&gt;-->
<!--&lt;!&ndash; title="Ultimate Vue UI library"&ndash;&gt;-->
<!-- >-->
<!-- &lt;!&ndash; 图片作为背景（非内容） &ndash;&gt;-->
<!-- </UPageHero>-->
</div>
</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>