2025-10-22 10:57:30 +08:00
|
|
|
|
<script lang="ts" setup>
|
2025-10-22 16:32:29 +08:00
|
|
|
|
// 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'
|
|
|
|
|
|
// }
|
|
|
|
|
|
// ])
|
2025-10-22 10:57:30 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
2025-10-22 16:32:29 +08:00
|
|
|
|
<!-- 外层容器设置为全屏 -->
|
|
|
|
|
|
<div class="hero-fullscreen">
|
|
|
|
|
|
<!-- <UPageHero-->
|
|
|
|
|
|
<!-- :links="links"-->
|
2025-10-22 17:43:13 +08:00
|
|
|
|
<!-- description="A Nuxt/Vue-integrated UI library..."-->
|
|
|
|
|
|
<!-- headline="New release"-->
|
|
|
|
|
|
<!-- orientation="horizontal"-->
|
|
|
|
|
|
<!-- title="Ultimate Vue UI library"-->
|
2025-10-22 16:32:29 +08:00
|
|
|
|
<!-- >-->
|
|
|
|
|
|
<!-- <!– 图片作为背景（非内容） –>-->
|
|
|
|
|
|
<!-- </UPageHero>-->
|
|
|
|
|
|
</div>
|
2025-10-22 10:57:30 +08:00
|
|
|
|
</template>
|
2025-10-22 16:32:29 +08:00
|
|
|
|
|
|
|
|
|
|
<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; /* 确保内容在前景 */
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-10-22 17:43:13 +08:00
|
|
|
|
|
2025-10-22 16:32:29 +08:00
|
|
|
|
</style>
|
