|
|
<?php
|
|
|
/**
|
|
|
* About Company Block Template
|
|
|
* 关于公司区块模板
|
|
|
*/
|
|
|
|
|
|
// 防止直接访问
|
|
|
if (!defined('ABSPATH')) {
|
|
|
exit;
|
|
|
}
|
|
|
|
|
|
// 获取短代码属性
|
|
|
global $about_company_shortcode_atts;
|
|
|
$atts = isset($about_company_shortcode_atts) ? $about_company_shortcode_atts : array();
|
|
|
|
|
|
// 设置默认值
|
|
|
$block_id = !empty($atts['id']) ? $atts['id'] : 'nenghui-about-company-' . uniqid();
|
|
|
$block_class = !empty($atts['class']) ? $atts['class'] : '';
|
|
|
$show_animation = isset($atts['show_animation']) ? $atts['show_animation'] : 'true';
|
|
|
|
|
|
// 从自定义器获取设置
|
|
|
$title = get_theme_mod('about_company_title', 'ABOUT NENGHUI');
|
|
|
$description = get_theme_mod('about_company_description', 'Nenghui Technology (Shanghai Nenghui Technology Co., Ltd., SZ stock: 301046), established in 2018, is a listed public company with business ranging from solar power plant EPC, operation and maintenance, renewable energy services, microgrid solutions, energy storage and refuse pyrolysis, etc. With years of continuous innovation in the renewable energy industry, Nenghui has formed a comprehensive technology system and industrial layout in smart energy development and applications.');
|
|
|
$description_2 = get_theme_mod('about_company_description_2', 'Nenghui Energy, established in 2018, is a subsidiary entity of Nenghui Technology that focuses on lithium battery storage. Since 2018, Nenghui Energy has developed advanced and highly safe LFP battery storage systems (BESS) for homes and businesses. Ranging from low to high voltage and from single to multiple operations, as well as from cabinets to containers, with continuous technological innovations, Nenghui has been awarded excellent recognition in the industry and is committed to providing prompt service for all of our current and potential customers.');
|
|
|
$company_image = get_theme_mod('about_company_image', get_template_directory_uri() . '/assets/images/about-img.webp');
|
|
|
|
|
|
// 获取统计数据
|
|
|
$stats = array();
|
|
|
for ($i = 1; $i <= 4; $i++) {
|
|
|
$stats[] = array(
|
|
|
'number' => get_theme_mod('about_company_stat_' . $i . '_number', ''),
|
|
|
'label' => get_theme_mod('about_company_stat_' . $i . '_label', ''),
|
|
|
'icon' => get_theme_mod('about_company_stat_' . $i . '_icon', get_template_directory_uri() . '/assets/images/about-icon-' . $i . '.svg')
|
|
|
);
|
|
|
}
|
|
|
|
|
|
// 设置默认统计数据
|
|
|
$default_stats = array(
|
|
|
array('number' => '130+', 'label' => 'Patents', 'icon' => get_template_directory_uri() . '/assets/images/about-icon-1-1.svg'),
|
|
|
array('number' => '70%', 'label' => 'R&D employees', 'icon' => get_template_directory_uri() . '/assets/images/about-icon-2-2.svg'),
|
|
|
array('number' => '100+', 'label' => 'Solar power stations', 'icon' => get_template_directory_uri() . '/assets/images/about-icon-3-3.svg'),
|
|
|
array('number' => '200+', 'label' => 'Grid engineering projects', 'icon' => get_template_directory_uri() . '/assets/images/about-icon-4-4.svg'),
|
|
|
);
|
|
|
|
|
|
// 如果自定义器中没有设置，使用默认值
|
|
|
for ($i = 0; $i < 4; $i++) {
|
|
|
if (empty($stats[$i]['number'])) {
|
|
|
$stats[$i] = $default_stats[$i];
|
|
|
}
|
|
|
}
|
|
|
?>
|
|
|
|
|
|
<section id="<?php echo esc_attr($block_id); ?>" class="about-company-section <?php echo esc_attr($block_class); ?>" data-aos="fade-up">
|
|
|
<div class="container">
|
|
|
<div class="about-company-content">
|
|
|
<!-- 左侧内容区域 -->
|
|
|
<div class="about-company-left" data-aos="fade-up" data-aos-delay="200">
|
|
|
<div class="about-company-text">
|
|
|
<h2 class="about-company-title"><?php echo esc_html($title); ?></h2>
|
|
|
<div class="about-company-description">
|
|
|
<p><?php echo wp_kses_post($description); ?></p>
|
|
|
</div>
|
|
|
|
|
|
<!-- 统计数据区域 -->
|
|
|
<div class="about-company-stats">
|
|
|
<?php foreach ($stats as $index => $stat): ?>
|
|
|
<div class="stat-item" data-aos="fade-up" data-aos-delay="<?php echo ($index + 1) * 100; ?>">
|
|
|
<div class="stat-icon">
|
|
|
<img src="<?php echo esc_url($stat['icon']); ?>" alt="<?php echo esc_attr($stat['label']); ?>" />
|
|
|
</div>
|
|
|
<div class="stat-content">
|
|
|
<div class="stat-number" data-target="<?php echo esc_attr($stat['number']); ?>"><?php echo esc_html($stat['number']); ?></div>
|
|
|
<div class="stat-label"><?php echo esc_html($stat['label']); ?></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<?php endforeach; ?>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧图片区域 -->
|
|
|
<div class="about-company-right" data-aos="fade-up" data-aos-delay="400">
|
|
|
<div class="about-company-image" data-aos="fade-up" data-aos-delay="600">
|
|
|
<img src="<?php echo esc_url($company_image); ?>" alt="<?php echo esc_attr($title); ?>" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="about-company-content about-company-description-2">
|
|
|
<p><?php echo wp_kses_post($description_2); ?></p>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<style>
|
|
|
.about-company-section {
|
|
|
padding: 80px 0;
|
|
|
background-color: #f8f9fa;
|
|
|
}
|
|
|
|
|
|
.about-company-content {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
gap: 60px;
|
|
|
width: 100%;
|
|
|
max-width: 1320px;
|
|
|
margin: 0 auto;
|
|
|
padding: 0 20px;
|
|
|
justify-content: space-between;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.about-company-left {
|
|
|
flex: 1;
|
|
|
max-width: 600px;
|
|
|
}
|
|
|
|
|
|
.about-company-right {
|
|
|
flex: 1;
|
|
|
margin-top: 20px;
|
|
|
max-width: 100%;
|
|
|
}
|
|
|
|
|
|
.about-company-title {
|
|
|
font-size: 2.5rem;
|
|
|
font-weight: 700;
|
|
|
color: #2c3e50;
|
|
|
margin-bottom: 30px;
|
|
|
line-height: 1.2;
|
|
|
letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
.about-company-description,
|
|
|
.about-company-description-2 {
|
|
|
margin-bottom: 40px;
|
|
|
}
|
|
|
|
|
|
.about-company-description p,
|
|
|
.about-company-description-2 p {
|
|
|
font-size: 1rem;
|
|
|
line-height: 1.8;
|
|
|
color: #666;
|
|
|
margin: 0;
|
|
|
text-align: justify;
|
|
|
}
|
|
|
|
|
|
.about-company-stats {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
gap: 30px;
|
|
|
margin: 50px 0;
|
|
|
}
|
|
|
|
|
|
.stat-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 15px;
|
|
|
padding: 20px;
|
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
|
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.stat-item:hover {
|
|
|
transform: translateY(-8px);
|
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.stat-icon {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.stat-icon img {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
}
|
|
|
|
|
|
.stat-content {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.stat-number {
|
|
|
font-size: 1.8rem;
|
|
|
font-weight: 700;
|
|
|
color: #2dada2;
|
|
|
line-height: 1;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.stat-label {
|
|
|
font-size: 0.9rem;
|
|
|
color: #2dada2;
|
|
|
line-height: 1.3;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.about-company-image {
|
|
|
position: relative;
|
|
|
border-radius: 20px;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
|
|
|
|
.about-company-image img {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
display: block;
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.about-company-image:hover img {
|
|
|
transform: scale(1.05);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
@media (max-width: 992px) {
|
|
|
.about-company-content {
|
|
|
flex-direction: column;
|
|
|
gap: 40px;
|
|
|
}
|
|
|
|
|
|
.about-company-left,
|
|
|
.about-company-right {
|
|
|
max-width: 100%;
|
|
|
}
|
|
|
|
|
|
.about-company-title {
|
|
|
font-size: 2rem;
|
|
|
}
|
|
|
|
|
|
.about-company-stats {
|
|
|
grid-template-columns: 1fr;
|
|
|
gap: 20px;
|
|
|
margin: 30px 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.about-company-section {
|
|
|
padding: 60px 0;
|
|
|
}
|
|
|
|
|
|
.about-company-title {
|
|
|
font-size: 1.8rem;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.about-company-description,
|
|
|
.about-company-description-2 {
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
|
|
|
.stat-item {
|
|
|
padding: 15px;
|
|
|
gap: 12px;
|
|
|
}
|
|
|
|
|
|
.stat-icon {
|
|
|
width: 45px;
|
|
|
height: 45px;
|
|
|
}
|
|
|
|
|
|
.stat-icon img {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
}
|
|
|
|
|
|
.stat-number {
|
|
|
font-size: 1.5rem;
|
|
|
}
|
|
|
|
|
|
.stat-label {
|
|
|
font-size: 0.85rem;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
.about-company-section {
|
|
|
padding: 40px 0;
|
|
|
}
|
|
|
|
|
|
.about-company-content {
|
|
|
gap: 30px;
|
|
|
}
|
|
|
|
|
|
.about-company-title {
|
|
|
font-size: 1.6rem;
|
|
|
}
|
|
|
|
|
|
.about-company-description p,
|
|
|
.about-company-description-2 p {
|
|
|
font-size: 0.9rem;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
// 数字计数器动画函数
|
|
|
function animateCounter(element, target, duration = 2000) {
|
|
|
const start = 0;
|
|
|
const increment = target / (duration / 16); // 60fps
|
|
|
let current = start;
|
|
|
|
|
|
const timer = setInterval(() => {
|
|
|
current += increment;
|
|
|
if (current >= target) {
|
|
|
current = target;
|
|
|
clearInterval(timer);
|
|
|
}
|
|
|
|
|
|
// 格式化数字显示
|
|
|
let displayValue = Math.floor(current);
|
|
|
if (element.dataset.target.includes('+')) {
|
|
|
element.textContent = displayValue + '+';
|
|
|
} else if (element.dataset.target.includes('%')) {
|
|
|
element.textContent = displayValue + '%';
|
|
|
} else {
|
|
|
element.textContent = displayValue;
|
|
|
}
|
|
|
}, 16);
|
|
|
}
|
|
|
|
|
|
// 解析目标数字
|
|
|
function parseTargetNumber(targetStr) {
|
|
|
return parseInt(targetStr.replace(/[^0-9]/g, ''));
|
|
|
}
|
|
|
|
|
|
// 创建Intersection Observer来触发动画
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
|
entries.forEach(entry => {
|
|
|
if (entry.isIntersecting) {
|
|
|
const statNumbers = entry.target.querySelectorAll('.stat-number');
|
|
|
statNumbers.forEach((numberEl, index) => {
|
|
|
const target = parseTargetNumber(numberEl.dataset.target);
|
|
|
// 为每个数字添加不同的延迟
|
|
|
setTimeout(() => {
|
|
|
animateCounter(numberEl, target);
|
|
|
}, index * 200);
|
|
|
});
|
|
|
// 只触发一次动画
|
|
|
observer.unobserve(entry.target);
|
|
|
}
|
|
|
});
|
|
|
}, {
|
|
|
threshold: 0.5,
|
|
|
rootMargin: '0px 0px -100px 0px'
|
|
|
});
|
|
|
|
|
|
// 观察统计数据区域
|
|
|
const statsSection = document.querySelector('#<?php echo esc_js($block_id); ?> .about-company-stats');
|
|
|
if (statsSection) {
|
|
|
observer.observe(statsSection);
|
|
|
}
|
|
|
|
|
|
<?php if ($show_animation === 'true'): ?>
|
|
|
// 初始化AOS动画库（如果已加载）
|
|
|
if (typeof AOS !== 'undefined') {
|
|
|
AOS.init({
|
|
|
duration: 800,
|
|
|
easing: 'ease-out-cubic',
|
|
|
once: true,
|
|
|
offset: 100
|
|
|
});
|
|
|
}
|
|
|
<?php endif; ?>
|
|
|
});
|
|
|
</script>
|
