beifan/company-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve various issues in hero section

Browse Source
This commit is contained in:
郑肖毅
2026-02-09 16:08:52 +08:00
parent 64ed7bb140
commit d8b77d3d3c
2 changed files with 83 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/sections/Hero.astro
View File

@@ -1,12 +1,67 @@
<section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-dark">
<style>
/* Hero 轮播动画 - 每张图片显示 5 秒，总周期 15 秒 */
@keyframes hero-fade {
0%, 26.66% { opacity: 1; }
33.33%, 100% { opacity: 0; }
}
@keyframes hero-zoom {
0% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.hero-slide {
animation: hero-fade 15s infinite;
}
.hero-slide:nth-child(1) {
animation-delay: 0s;
}
.hero-slide:nth-child(2) {
animation-delay: 5s;
}
.hero-slide:nth-child(3) {
animation-delay: 10s;
}
.hero-slide img {
animation: hero-zoom 5s ease-out forwards;
}
.hero-slide:nth-child(1) img {
animation-delay: 0s;
}
.hero-slide:nth-child(2) img {
animation-delay: 5s;
}
.hero-slide:nth-child(3) img {
animation-delay: 10s;
}
/* 指示点样式 */
.hero-dot {
background-color: rgba(255, 255, 255, 0.3);
transition: background-color 0.3s ease;
}
.hero-dot.active {
background-color: #165DFF;
}
</style>
<div id="hero-carousel-container" class="absolute inset-0 z-0">
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-100">
<img src="/img/hero-banner-1.webp" alt="数字化解决方案" class="w-full h-full object-cover scale-105">
<div class="hero-slide absolute inset-0">
<img src="/img/hero-banner-1.webp" alt="数字化解决方案" class="w-full h-full object-cover">
</div>
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0">
<div class="hero-slide absolute inset-0">
<img src="/img/hero-banner-2.webp" alt="创新科技应用" class="w-full h-full object-cover">
</div>
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0">
<div class="hero-slide absolute inset-0">
<img src="/img/hero-banner-3.webp" alt="智慧城市远景" class="w-full h-full object-cover">
</div>
</div>
@@ -28,14 +83,29 @@
</div>
<div id="hero-carousel-dots" class="absolute bottom-10 left-1/2 lg:left-0 lg:ml-0 lg:translate-x-0 -translate-x-1/2 z-20 flex space-x-3 lg:max-w-7xl lg:mx-auto lg:px-4 w-full justify-center lg:justify-start">
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
</button>
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
</button>
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
</button>
<div class="hero-dot h-1.5 w-12 rounded-full"></div>
<div class="hero-dot h-1.5 w-12 rounded-full"></div>
<div class="hero-dot h-1.5 w-12 rounded-full"></div>
</div>
<script is:inline>
(function() {
const dots = document.querySelectorAll('#hero-carousel-dots .hero-dot');
let currentIndex = 0;
const interval = 5000; // 5 seconds per slide
function updateDots() {
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
currentIndex = (currentIndex + 1) % dots.length;
}
// Initialize first dot as active
updateDots();
// Update every 5 seconds to match CSS animation
setInterval(updateDots, interval);
})();
</script>
</section>