feat: 优化能源订单班页面排版布局

详细说明:
- Hero区域优化: 添加动态SVG背景、浮动数据卡片、滚动指示器
- Bento Grid布局: 第一个section使用不等大小网格,增加视觉层次
- 增强动画效果: 添加滚动触发动画、卡片渐次出现、悬停特效
- 优化响应式布局: 针对移动端、平板、桌面进行适配
- 性能优化: 移动端隐藏SVG背景,优化导航显示

影响文件:
- web_frontend/web_result/order-classes/energy/index.html
- web_frontend/web_result/order-classes/energy/css/styles.css
- web_frontend/web_result/order-classes/energy/js/main.js

影响模块: 能源订单班展示页面

web_frontend/web_result/order-classes/energy/js/main.js

@@ -68,25 +68,52 @@ function initAnimations() {
     // 使用 Intersection Observer 实现滚动动画
     const observerOptions = {
         root: null,
-        rootMargin: '0px',
-        threshold: 0.1
+        rootMargin: '0px 0px -100px 0px',
+        threshold: 0.15
     };
 
     const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
-                entry.target.classList.add('fade-in');
+                // 检查元素有哪些动画类
+                if (entry.target.classList.contains('scroll-reveal') ||
+                    entry.target.classList.contains('scroll-reveal-left') ||
+                    entry.target.classList.contains('scroll-reveal-right') ||
+                    entry.target.classList.contains('scroll-reveal-scale')) {
+                    entry.target.classList.add('revealed');
+                } else {
+                    entry.target.classList.add('fade-in');
+                }
+                // 动画完成后停止观察
                 observer.unobserve(entry.target);
             }
         });
     }, observerOptions);
 
     // 观察所有需要动画的元素
-    const animatedElements = document.querySelectorAll('.card, .expert-intro');
-    animatedElements.forEach(el => {
-        el.style.opacity = '0';
+    const animatedElements = document.querySelectorAll(
+        '.card, .expert-intro, .scroll-reveal, .scroll-reveal-left, .scroll-reveal-right, .scroll-reveal-scale, .stats, .table-container'
+    );
+
+    animatedElements.forEach((el, index) => {
+        // 为卡片添加索引,用于延迟动画
+        if (el.classList.contains('card')) {
+            el.style.setProperty('--card-index', index % 3);
+            el.classList.add('scroll-reveal');
+        }
         observer.observe(el);
     });
+
+    // 滚动指示器点击事件
+    const scrollIndicator = document.querySelector('.scroll-indicator');
+    if (scrollIndicator) {
+        scrollIndicator.addEventListener('click', () => {
+            const nav = document.querySelector('.nav');
+            if (nav) {
+                nav.scrollIntoView({ behavior: 'smooth' });
+            }
+        });
+    }
 }
 
 // 图片懒加载