official-website-abroad/wp-content/themes/nenghui-energy-theme-4/template-parts/blocks/block-overseas-services.php

<?php
/**
 * 海外服务板块模板
 * 
 * 显示海外服务信息，包含标题和描述
 */
 
// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 获取短代码参数
global $overseas_services_shortcode_atts;
$atts = $overseas_services_shortcode_atts;

// 设置默认值
$section_id = !empty($atts['id']) ? esc_attr($atts['id']) : 'nenghui-overseas-services-' . uniqid();
$section_class = !empty($atts['class']) ? esc_attr($atts['class']) : '';
$title = !empty($atts['title']) ? esc_html($atts['title']) : 'Overseas Services';
$description = !empty($atts['description']) ? esc_html($atts['description']) : 'Our service team delivers diversified solutions tailored to client requirements, including product training, installation guidance, and after-sales support. NengHui ESS\'s specialized expert team provides comprehensive on-site services covering Uninterruptible Power Supplies (UPS), modular data centers, solar energy, and Energy Storage Systems (ESS), ensuring your power systems operate at peak performance.';
$height = !empty($atts['height']) ? esc_attr($atts['height']) : '400px';
$show_animation = !empty($atts['show_animation']) && $atts['show_animation'] !== 'false';

// 背景图片路径
$background_image = get_template_directory_uri() . '/assets/images/Overseas-Services-bg.webp';
?>

<section id="<?php echo $section_id; ?>" class="overseas-services-section <?php echo $section_class; ?>">
    <div class="overseas-services-container">
        <div class="overseas-services-content <?php echo $show_animation ? 'fade-in-up' : ''; ?>">
            <h2 class="overseas-services-title"><?php echo $title; ?></h2>
            <p class="overseas-services-description"><?php echo $description; ?></p>
        </div>
    </div>
</section>

<style>
.overseas-services-section {
    width: 100%;
    min-height: <?php echo $height; ?>;
    background-image: url('<?php echo esc_url($background_image); ?>');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    padding: 80px 0;
}



.overseas-services-container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.overseas-services-content {
    max-width: 600px;
    color: #333333;
}

.overseas-services-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #333333;
}

.overseas-services-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    color: #333333  ;
    opacity: 0.95;
}

/* 动画效果 */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .overseas-services-container {
        width: 85%;
    }
}

@media (max-width: 992px) {
    .overseas-services-section {
        padding: 60px 0;
        min-height: 350px;
    }
    
    .overseas-services-container {
        width: 90%;
    }
    
    .overseas-services-title {
        font-size: 2.2rem;
    }
    
    .overseas-services-description {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .overseas-services-section {
        padding: 50px 0;
        min-height: 300px;
    }
    
    .overseas-services-container {
        width: 95%;
        padding: 0 15px;
    }
    
    .overseas-services-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .overseas-services-description {
        font-size: 0.95rem;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .overseas-services-section {
        padding: 40px 0;
        min-height: 280px;
    }
    
    .overseas-services-container {
        padding: 0 10px;
    }
    
    .overseas-services-title {
        font-size: 1.8rem;
    }
    
    .overseas-services-description {
        font-size: 0.9rem;
    }
}
</style>

<script>
// 动画初始化
document.addEventListener('DOMContentLoaded', function() {
    const animatedElements = document.querySelectorAll('.fade-in-up');
    
    // 滚动触发动画
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                entry.target.style.animationPlayState = 'running';
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });
    
    animatedElements.forEach(function(element) {
        observer.observe(element);
    });
});
</script>