fix: resolve various issues in hero section

public/js/script.js

@@ -36,47 +36,6 @@ document.addEventListener('DOMContentLoaded', function() {
         menuToggle.querySelector('i').classList.toggle('fa-close');
     });
 
-    // 轮播图逻辑
-    const slides = document.querySelectorAll('.hero-carousel-slide');
-    const dots = document.querySelectorAll('.hero-carousel-dot');
-    let currentSlide = 0;
-    const intervalTime = 5000;
-
-    function updateCarousel() {
-        slides.forEach((slide, index) => {
-            slide.classList.remove('opacity-100');
-            slide.classList.add('opacity-0');
-            dots[index].classList.remove('bg-white');
-            dots[index].classList.add('bg-white/50');
-        });
-
-        slides[currentSlide].classList.remove('opacity-0');
-        slides[currentSlide].classList.add('opacity-100');
-        dots[currentSlide].classList.remove('bg-white/50');
-        dots[currentSlide].classList.add('bg-white');
-
-        const img = slides[currentSlide].querySelector('img');
-        document.querySelectorAll('.hero-carousel-slide img').forEach(i => i.classList.remove('ken-burns-active'));
-        img.classList.add('ken-burns-active');
-    }
-
-    function nextSlide() {
-        currentSlide = (currentSlide + 1) % slides.length;
-        updateCarousel();
-    }
-
-    let carouselInterval = setInterval(nextSlide, intervalTime);
-    updateCarousel(); // 初始化
-
-    dots.forEach((dot, index) => {
-        dot.addEventListener('click', () => {
-            clearInterval(carouselInterval);
-            currentSlide = index;
-            updateCarousel();
-            carouselInterval = setInterval(nextSlide, intervalTime);
-        });
-    });
-
     // 模态框逻辑
     const modal = document.getElementById('solution-modal');
     const modalTitle = document.getElementById('modal-title');

src/components/sections/Hero.astro

@@ -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">
+		<div class="hero-slide absolute inset-0">
-			<img src="/img/hero-banner-1.webp" alt="数字化解决方案" class="w-full h-full object-cover scale-105">
+			<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="hero-dot h-1.5 w-12 rounded-full"></div>
-			<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
+		<div class="hero-dot h-1.5 w-12 rounded-full"></div>
-		</button>
+		<div class="hero-dot h-1.5 w-12 rounded-full"></div>
-		<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>
+	
+	<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>