beehive/app/components/landing/Hero.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"-->
    <!--&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>