57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<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'
|
||
// }
|
||
// ])
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 外层容器设置为全屏 -->
|
||
<div class="hero-fullscreen">
|
||
<!-- <UPageHero-->
|
||
<!-- :links="links"-->
|
||
<!-- description="A Nuxt/Vue-integrated UI library..."-->
|
||
<!-- headline="New release"-->
|
||
<!-- orientation="horizontal"-->
|
||
<!-- title="Ultimate Vue UI library"-->
|
||
<!-- >-->
|
||
<!-- <!– 图片作为背景（非内容） –>-->
|
||
<!-- </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; /* 确保内容在前景 */
|
||
}
|
||
|
||
|
||
</style> |