official-website-abroad/wp-content/themes/nenghui-energy-theme-4/template-parts/blocks/black-about-company-banner.php

<?php
/**
 * Black About Company Banner 简码模板
 * 样式文件已在 inc/assets-loader.php 中统一加载
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}
// 获取简码参数
global $black_about_company_banner_shortcode_atts;
$atts = $black_about_company_banner_shortcode_atts;

// 设置默认值
$container_id = !empty($atts['id']) ? $atts['id'] : 'black-about-company-banner';
$container_class = !empty($atts['class']) ? $atts['class'] : '';
$show_animation = !empty($atts['show_animation']) ? $atts['show_animation'] : 'true';

// 获取图片路径
$image_path = get_template_directory_uri() . '/assets/images/';
?>
<section id="<?php echo esc_attr($container_id); ?>" class="black-about-company-banner <?php echo esc_attr($container_class); ?>" <?php if ($show_animation === 'true'): ?>data-animation="true"<?php endif; ?>>
    <div class="container">
        <div class="banner-content">
            <!-- 左侧主图区域 -->
            <div class="banner-left">
                <div class="main-image">
                    <img src="<?php echo $image_path; ?>black-about-company-banner-img.webp" alt="Nenghui Energy Technology Production Facility" loading="lazy" />
                </div>
            </div>
            
            <!-- 右侧内容区域 -->
            <div class="banner-right">
                <!-- 公司标题和介绍 -->
                <div class="content-text">
                    <h2>NENGHUI ENERGY TECHNOLOGY CO.,LTD</h2>
                    <p>Nenghui Energy Technology Co.,Ltd Overseas Division has successfully dispatched a new wave of industrial & commercial energy storage cabinets (C&I ESS) and utility-scale battery systems, reaffirming its leadership in high-efficiency manufacturing and globally resilient supply chain operations.</p>
                </div>
                
                <!-- 生产流程介绍 -->
                <div class="mass-production">
                    <h3>Mass Production Process:</h3>
                    <p>Our advanced smart factory, equipped with automated production lines and AI-driven quality control, ensures rapid scalability for large volume orders while adhering to international certifications (ISO, UL).</p>
                </div>
                
                <!-- 生产线图片轮播 - 跑马灯效果 -->
                <div class="production-carousel-container">
                    <div class="marquee-container">
                        <div class="marquee-track">
                            <!-- 第一组图片 -->
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs-1.webp" alt="Automated Production Line 1" loading="lazy" />
                            </div>
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs-2.webp" alt="Quality Control Station" loading="lazy" />
                            </div>
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs.webp" alt="Manufacturing Floor" loading="lazy" />
                            </div>
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs-3.jpg" alt="Production Equipment" loading="lazy" />
                            </div>
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs-4.jpg" alt="Assembly Line" loading="lazy" />
                            </div>
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs-5.jpg" alt="Quality Testing" loading="lazy" />
                            </div>
                            <!-- 重复第二组图片实现无缝循环 -->
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs-1.webp" alt="Automated Production Line 1" loading="lazy" />
                            </div>
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs-2.webp" alt="Quality Control Station" loading="lazy" />
                            </div>
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs.webp" alt="Manufacturing Floor" loading="lazy" />
                            </div>
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs-3.jpg" alt="Production Equipment" loading="lazy" />
                            </div>
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs-4.jpg" alt="Assembly Line" loading="lazy" />
                            </div>
                            <div class="marquee-item">
                                <img src="<?php echo $image_path; ?>black-about-company-banner-imgs-5.jpg" alt="Quality Testing" loading="lazy" />
                            </div>
                        </div>
                    </div>
                    
                    <style>
                    .marquee-container {
                        overflow: hidden;
                        width: 100%;
                        position: relative;
                    }
                    
                    .marquee-track {
                        display: flex;
                        width: calc(200% + 20px);
                        animation: marquee 20s linear infinite;
                    }
                    
                    .marquee-track:hover {
                        animation-play-state: paused;
                    }
                    
                    .marquee-item {
                        flex: 0 0 auto;
                        margin-right: 10px;
                    }
                    
                    .marquee-item img {
                        width: 200px;
                        height: 120px;
                        object-fit: cover;
                        border-radius: 8px;
                    }
                    
                    @keyframes marquee {
                        0% {
                            transform: translateX(0);
                        }
                        100% {
                            transform: translateX(-50%);
                        }
                    }
                    
                    @media (max-width: 768px) {
                        .marquee-item img {
                            width: 150px;
                            height: 90px;
                        }
                    }
                    
                    @media (max-width: 480px) {
                        .marquee-item img {
                            width: 120px;
                            height: 72px;
                        }
                    }
                    </style>
                    
                    <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        console.log('Production marquee carousel initialized');
                    });
                    </script>
                </div>
            </div>
        </div>
    </div>
</section>