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.
77 lines
3.1 KiB
77 lines
3.1 KiB
<?php
|
|
/**
|
|
* 业务流程设计区块模板
|
|
*/
|
|
|
|
// 防止直接访问
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
// 获取自定义器设置
|
|
$show_process = get_theme_mod('business_process_show', true);
|
|
$process_title = get_theme_mod('business_process_title', '设计业务流程');
|
|
$process_subtitle = get_theme_mod('business_process_subtitle', '专业的设计流程，确保项目成功');
|
|
|
|
// 获取各个tab的配置
|
|
$tab_items = [];
|
|
for ($i = 1; $i <= 4; $i++) {
|
|
$tab_items[] = [
|
|
'number' => sprintf('%02d', $i),
|
|
'title' => get_theme_mod("business_process_tab{$i}_title", "步骤{$i}"),
|
|
'description' => get_theme_mod("business_process_tab{$i}_description", "步骤{$i}的详细描述"),
|
|
'image' => get_theme_mod("business_process_tab{$i}_image", get_template_directory_uri() . '/assets/images/FWas.jpg')
|
|
];
|
|
}
|
|
|
|
// 如果不显示区块，直接返回
|
|
if (!$show_process) {
|
|
return;
|
|
}
|
|
?>
|
|
|
|
<div class="business-process-block" id="business-process">
|
|
<div class="container">
|
|
<?php if ($process_title || $process_subtitle): ?>
|
|
<div class="process-header">
|
|
<?php if ($process_title): ?>
|
|
<h2 class="process-title"><?php echo esc_html($process_title); ?></h2>
|
|
<?php endif; ?>
|
|
<?php if ($process_subtitle): ?>
|
|
<p class="process-subtitle"><?php echo esc_html($process_subtitle); ?></p>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="process-content">
|
|
<!-- 左侧Tab标签 -->
|
|
<div class="process-tabs">
|
|
<?php foreach ($tab_items as $index => $item): ?>
|
|
<div class="process-tab <?php echo $index === 0 ? 'active' : ''; ?>" data-tab="<?php echo $index; ?>">
|
|
<div class="tab-number"><?php echo esc_html($item['number']); ?></div>
|
|
<div class="tab-content">
|
|
<h3 class="tab-title"><?php echo esc_html($item['title']); ?></h3>
|
|
<p class="tab-description"><?php echo esc_html($item['description']); ?></p>
|
|
</div>
|
|
<div class="tab-arrow">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<!-- 右侧图片显示区域 -->
|
|
<div class="process-images">
|
|
<?php foreach ($tab_items as $index => $item): ?>
|
|
<div class="process-image <?php echo $index === 0 ? 'active' : ''; ?>" data-image="<?php echo $index; ?>">
|
|
<img src="<?php echo esc_url($item['image']); ?>"
|
|
alt="<?php echo esc_attr($item['title']); ?>"
|
|
loading="lazy">
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|