You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
246 lines
6.7 KiB
246 lines
6.7 KiB
<?php
|
|
/**
|
|
* futures区块模板
|
|
* 支持自定义器设置和短代码调用
|
|
*/
|
|
|
|
// 防止直接访问
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
// 获取短代码参数（如果通过短代码调用）
|
|
global $futures_shortcode_atts;
|
|
$shortcode_atts = isset($futures_shortcode_atts) ? $futures_shortcode_atts : array();
|
|
|
|
// 确保 $shortcode_atts 是数组
|
|
if (!is_array($shortcode_atts)) {
|
|
$shortcode_atts = array();
|
|
}
|
|
|
|
// 设置默认参数
|
|
$atts = wp_parse_args($shortcode_atts, array(
|
|
'id' => 'nenghui-futures-block',
|
|
'class' => '',
|
|
'title' => get_theme_mod('futures_title', 'Powering Sustainble Futures'),
|
|
'show_animation' => 'true'
|
|
));
|
|
|
|
// 获取自定义器设置
|
|
$futures_title = !empty($atts['title']) ? $atts['title'] : get_theme_mod('futures_title', 'Powering Sustainble Futures');
|
|
$futures_bg_image = get_theme_mod('futures_bg_image', get_template_directory_uri() . '/assets/images/futures-bg.webp');
|
|
$futures_button_text = get_theme_mod('futures_button_text', 'About us');
|
|
$futures_button_link = get_theme_mod('futures_button_link', 'about.html');
|
|
|
|
// 获取特性项目数据
|
|
$futures_items = array();
|
|
$default_placeholder = get_template_directory_uri() . '/assets/images/NaN-img.png';
|
|
|
|
// 定义默认项目数据
|
|
$default_items = array(
|
|
1 => array('title' => 'High-Performance', 'icon' => './images/2_03.png'),
|
|
2 => array('title' => 'Advanced Safety', 'icon' => './images/2_05.png'),
|
|
3 => array('title' => 'Smart Energy', 'icon' => './images/4_05.png'),
|
|
4 => array('title' => 'Fast Deployment', 'icon' => './images/5_05.png'),
|
|
5 => array('title' => 'Global Compliance', 'icon' => './images/7_05.png'),
|
|
);
|
|
|
|
for ($i = 1; $i <= 5; $i++) {
|
|
// 获取自定义器设置，如果为空则使用默认值
|
|
$title = get_theme_mod('futures_item_' . $i . '_title', $default_items[$i]['title']);
|
|
$icon_url = get_theme_mod('futures_item_' . $i . '_icon', $default_placeholder);
|
|
|
|
// 如果标题为空，使用默认值
|
|
if (empty($title)) {
|
|
$title = $default_items[$i]['title'];
|
|
}
|
|
|
|
// 如果没有设置图标或图标路径无效，使用默认占位图片
|
|
if (empty($icon_url) || strpos($icon_url, './images/') === 0) {
|
|
$icon_url = $default_placeholder;
|
|
}
|
|
|
|
$item = array(
|
|
'icon' => $icon_url,
|
|
'title' => $title
|
|
);
|
|
$futures_items[] = $item;
|
|
}
|
|
|
|
// 构建CSS类
|
|
$css_classes = array('ilist4');
|
|
if (!empty($atts['class'])) {
|
|
$css_classes[] = $atts['class'];
|
|
}
|
|
$css_class = implode(' ', $css_classes);
|
|
|
|
// 动画类
|
|
$animation_class = ($atts['show_animation'] === 'true') ? 'wow fadeInUp' : '';
|
|
|
|
?>
|
|
|
|
<style>
|
|
.ilist4 {
|
|
position: relative;
|
|
padding: 80px 0;
|
|
margin: 0 50px;
|
|
margin-top: 3rem;
|
|
background: url('<?php echo esc_url($futures_bg_image); ?>') no-repeat center center;
|
|
background-size: cover;
|
|
border-radius: 30px;
|
|
color: #fff;
|
|
}
|
|
|
|
.ilist4 .contentbox {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.ilist4 .bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 30px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ilist4 .w1620 {
|
|
max-width: 1620px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.ilist4 .section-title {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.ilist4 .stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.ilist4 .stat-item {
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.ilist4 .stat-item:hover {
|
|
transform: translateY(-8px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ilist4 .stat-item
|
|
|
|
.ilist4 .stat-item img {
|
|
width: auto;
|
|
height: 60px;
|
|
margin: 0 auto 1rem;
|
|
display: block;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.ilist4 .stat-value {
|
|
font-size: 1.25rem;
|
|
font-weight: bold;
|
|
margin-bottom: 0.5rem;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
|
|
.ilist4 .cta-btn {
|
|
text-align: center;
|
|
}
|
|
|
|
.ilist4 .cta-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 12px 24px;
|
|
background: #007cba;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
border-radius: 25px;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ilist4 .cta-button:hover {
|
|
background-color: #0056b3;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0, 86, 179, 0.3);
|
|
transition: all 0.3s ease;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ilist4 .cta-button svg {
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.ilist4 {
|
|
margin: 0 20px;
|
|
padding: 40px 0;
|
|
}
|
|
|
|
.ilist4 .section-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.ilist4 .stats-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<section id="<?php echo esc_attr($atts['id']); ?>" class="<?php echo esc_attr($css_class); ?>" data-aos="fade-up">
|
|
<div class="contentbox" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="bg img-cover <?php echo esc_attr($animation_class); ?>"
|
|
style="background-image: url('<?php echo esc_url($futures_bg_image); ?>');"
|
|
data-wow-delay="0.1s"></div>
|
|
<div class="w1620 warpbox" data-aos="fade-up" data-aos-delay="400">
|
|
<h2 class="section-title" data-aos="fade-up" data-aos-delay="600"><?php echo esc_html($futures_title); ?></h2>
|
|
<div class="stats-grid" data-aos="fade-up" data-aos-delay="800">
|
|
<?php if (is_array($futures_items) && !empty($futures_items)) {
|
|
foreach ($futures_items as $index => $item): ?>
|
|
<div class="stat-item">
|
|
<img src="<?php echo esc_url($item['icon']); ?>" alt="<?php echo esc_attr($item['title']); ?>">
|
|
<div class="stat-value"><?php echo esc_html($item['title']); ?></div>
|
|
|
|
</div>
|
|
<?php endforeach;
|
|
} ?>
|
|
</div>
|
|
<?php if (!empty($futures_button_text) && !empty($futures_button_link)): ?>
|
|
<div class="cta-btn">
|
|
<a href="<?php echo esc_url($futures_button_link); ?>" class="cta-button">
|
|
<span><?php echo esc_html($futures_button_text); ?></span>
|
|
<svg viewBox="0 0 13 10" height="10px" width="15px">
|
|
<path d="M1,5 L11,5"></path>
|
|
<polyline points="8 1 12 5 8 9"></polyline>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|