WindowBird/beehive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add serviceIcon optimization

Browse Source
This commit is contained in:
WindowBird 2025-10-23 10:17:10 +08:00
parent 2d747f07c3
commit 0211cf4040
2 changed files with 13 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/components/landing/D3_INTELLIGENT_APIARY.vue
View File

@ -4,11 +4,16 @@
<template> <template>
<UPageCTA <UPageCTA
:ui="{ container: 'border-0' } " :ui="{
container: 'border-0 shadow-none', // 移除边框和阴影
// 移除焦点环
title: 'border-none', // 标题无边框
description: 'border-0' // 描述无边框
}"
description="3D INTELLIGENT APIARY" description="3D INTELLIGENT APIARY"
title="3D智慧蜂场" title="3D智慧蜂场"
/> />
<img alt="" class="w-full px-40" src="/img/index/model2.b444287.gif"> <img alt="" class="w-full lg:px-40" src="/img/index/model2.b444287.gif">
</template> </template>

47
app/components/landing/SERVICE_INTRODUCTION.vue
View File

@ -41,13 +41,16 @@ const services = [
] ]
</script> </script>
<!--class="relative w-screen h-screen overflow-hidden bg-cover bg-center bg-no-repeat" backgroundSize: '100% auto'-->
<template> <template>
<!-- 外层容器设置为全屏 --> <!-- 外层容器设置为全屏 -->
<div class="hero-fullscreen"> <div
:style="{ backgroundImage: `url('/img/index/service.png')` , }"
class="bg-cover bg-no-repeat bg-center w-full min-h-screen">
<UPageHero <UPageHero
:ui="{ :ui="{
title: 'text-white text-2xl font-bold', title: 'text-white ',
headline: 'text-white/90 text-sm uppercase tracking-widest', headline: 'text-white/90 text-sm uppercase tracking-widest',
description: 'text-white/80 text-base leading-relaxed' description: 'text-white/80 text-base leading-relaxed'
}" }"
@ -61,7 +64,7 @@ const services = [
</UPageHero> </UPageHero>
<!-- 服务卡片网格布局 --> <!-- 服务卡片网格布局 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 lg:px-50"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 lg:px-50 ">
<!-- 外层控制大小的容器 --> <!-- 外层控制大小的容器 -->
<div <div
v-for="(service, index) in services" v-for="(service, index) in services"
@ -80,41 +83,3 @@ const services = [
</div> </div>
</template> </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>