beehive/app/components/landing/SERVICE_INTRODUCTION.vue

62 lines
1.8 KiB
Vue
Raw Normal View History

2025-10-22 17:43:13 +08:00
<script lang="ts" setup>
</script>
<template>
<!-- 外层容器设置为全屏 -->
<div class="hero-fullscreen">
<UPageHero
:ui="{
title: 'text-white text-2xl font-bold',
headline: 'text-white/90 text-sm uppercase tracking-widest',
description: 'text-white/80 text-base leading-relaxed'
}"
description="以提升蜂产业标准化和自动化水平为目标综合应用物联网视频巡航深度学习3S技术无人机无线通讯等信息技术手段开展蜂业
生产安全产业链智能管控技术研究研制了智能蜂场蜂产品质量追溯智能蜂箱蜂业知识服务蜂产业大数据等系列软硬产品携手共建智能化生态化无人化的现代蜂业经营管理模式"
headline="SERVICE INTRODUCTION"
title="服务简介"
>
<!-- 图片作为背景非内容 -->
</UPageHero>
</div>
</template>
<style scoped>
/* 深度选择器确保样式穿透 */
:deep(.u-page-hero .title),
:deep(.u-page-hero .headline),
:deep(.u-page-hero .description) {
color: white !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 可选:增加文字阴影提升可读性 */
}
/* 关键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/index/service.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>