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.
277 lines
8.7 KiB
277 lines
8.7 KiB
<?php
|
|
/**
|
|
* 流程图Tab切换区块模板
|
|
* 支持自定义器设置和短代码调用
|
|
*/
|
|
|
|
// 防止直接访问
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
// 获取短代码参数（如果通过短代码调用）
|
|
global $flowchart_tabs_shortcode_atts;
|
|
$is_shortcode = !empty($flowchart_tabs_shortcode_atts) && is_array($flowchart_tabs_shortcode_atts);
|
|
|
|
// 获取容器设置
|
|
$container_id = $is_shortcode ? $flowchart_tabs_shortcode_atts['id'] : 'nenghui-flowchart-tabs';
|
|
$container_class = $is_shortcode ? $flowchart_tabs_shortcode_atts['class'] : '';
|
|
|
|
// 定义三个固定的tab数据
|
|
$flowchart_tabs = array(
|
|
1 => array(
|
|
'id' => 'pack-process',
|
|
'title' => get_theme_mod('flowchart_tab_1_title', 'PACK Process Flowchart'),
|
|
'image' => get_theme_mod('flowchart_tab_1_image', get_template_directory_uri() . '/assets/images/pack-process flow-chart.png'),
|
|
'note' => get_theme_mod('flowchart_tab_1_note', 'Note 1: Blue procedures denote liquid-cooled project operations; Turquoise procedures indicate universal processes (Air-cooled PACK units require turquoise procedures only). 2.Operations marked with [★] denote critical processes; those marked with [▲] indicate inspection operations.')
|
|
),
|
|
2 => array(
|
|
'id' => 'enclosure-manufacturing',
|
|
'title' => get_theme_mod('flowchart_tab_2_title', 'Enclosure Manufacturing Process Flow Diagram'),
|
|
'image' => get_theme_mod('flowchart_tab_2_image', get_template_directory_uri() . '/assets/images/cabinet-process flow-chart.png'),
|
|
'note' => get_theme_mod('flowchart_tab_2_note', '') // 第二个tab没有文案
|
|
),
|
|
3 => array(
|
|
'id' => 'module-manufacturing',
|
|
'title' => get_theme_mod('flowchart_tab_3_title', 'Module Manufacturing Process Flow Diagram'),
|
|
'image' => get_theme_mod('flowchart_tab_3_image', get_template_directory_uri() . '/assets/images/module-process flow.png'),
|
|
'note' => get_theme_mod('flowchart_tab_3_note', 'Note: [★] denotes Critical Processes; [▲] denotes Inspection Processes.')
|
|
)
|
|
);
|
|
|
|
// 获取第一个tab作为默认显示
|
|
$first_tab = $flowchart_tabs[1];
|
|
?>
|
|
|
|
<style>
|
|
/* 流程图Tab区块样式 */
|
|
#<?php echo esc_attr($container_id); ?>.nenghui-flowchart-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
font-family: 'NotoSans', Arial, sans-serif;
|
|
bacgroud: #fafafa;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-tabs {
|
|
display: flex;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-tab {
|
|
width: 100%;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
color: #666;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-tab:hover {
|
|
background-color: #d0d0d0;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-tab.active {
|
|
background: linear-gradient(135deg, #2cb5a9, #00699f);
|
|
border-color: #2cb5a9;
|
|
color: white;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-tab.active:hover {
|
|
background: linear-gradient(135deg, #2cb5a9, #00699f);
|
|
border-color: #2cb5a9;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-content {
|
|
padding: 30px;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-image {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-image img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-note {
|
|
font-size: 14px;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
/* 动画效果 */
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-content {
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-content.fade-out {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-content.fade-in {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
#<?php echo esc_attr($container_id); ?>.nenghui-flowchart-container {
|
|
padding: 30px 15px;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-tabs {
|
|
gap: 5px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-tab {
|
|
font-size: 11px;
|
|
padding: 8px 4px;
|
|
flex: 1;
|
|
white-space: normal;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 50px;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-content {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-content {
|
|
padding: 15px;
|
|
}
|
|
|
|
#<?php echo esc_attr($container_id); ?> .flowchart-note {
|
|
font-size: 13px;
|
|
padding: 12px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div id="<?php echo esc_attr($container_id); ?>" class="nenghui-flowchart-container <?php echo esc_attr($container_class); ?>" data-aos="fade-up">
|
|
<!-- 选项卡导航 -->
|
|
<div class="flowchart-tabs" data-aos="fade-up" data-aos-delay="200">
|
|
<?php foreach ($flowchart_tabs as $index => $tab) : ?>
|
|
<button class="flowchart-tab<?php echo $index === 1 ? ' active' : ''; ?>"
|
|
data-flowchart-tab="<?php echo esc_attr($tab['id']); ?>">
|
|
<?php echo esc_html($tab['title']); ?>
|
|
</button>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<!-- 内容区域 -->
|
|
<div class="flowchart-content" data-aos="fade-up" data-aos-delay="400">
|
|
<div class="flowchart-image">
|
|
<img src="<?php echo esc_url($first_tab['image']); ?>"
|
|
alt="<?php echo esc_attr($first_tab['title']); ?>"
|
|
id="flowchart-current-image">
|
|
</div>
|
|
<?php if (!empty($first_tab['note'])) : ?>
|
|
<div class="flowchart-note" id="flowchart-current-note">
|
|
<?php echo wp_kses_post($first_tab['note']); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
/**
|
|
* 流程图Tab切换功能
|
|
*/
|
|
function initFlowchartTabs() {
|
|
const container = document.getElementById('<?php echo esc_js($container_id); ?>');
|
|
if (!container) return;
|
|
|
|
const tabs = container.querySelectorAll('.flowchart-tab');
|
|
const content = container.querySelector('.flowchart-content');
|
|
const image = container.querySelector('#flowchart-current-image');
|
|
const note = container.querySelector('#flowchart-current-note');
|
|
|
|
// 流程图数据
|
|
const flowchartData = <?php echo json_encode($flowchart_tabs, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>;
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
// 移除所有活动状态
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
|
|
// 添加当前活动状态
|
|
this.classList.add('active');
|
|
|
|
// 获取tab类型
|
|
const tabType = this.getAttribute('data-flowchart-tab');
|
|
|
|
// 更新内容
|
|
updateFlowchartContent(tabType);
|
|
});
|
|
});
|
|
|
|
function updateFlowchartContent(tabType) {
|
|
// 找到对应的数据
|
|
let tabData = null;
|
|
for (let key in flowchartData) {
|
|
if (flowchartData[key].id === tabType) {
|
|
tabData = flowchartData[key];
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!tabData) return;
|
|
|
|
// 添加淡出效果
|
|
content.classList.add('fade-out');
|
|
|
|
// 延迟更新内容
|
|
setTimeout(() => {
|
|
// 更新图片
|
|
if (image) {
|
|
image.src = tabData.image;
|
|
image.alt = tabData.title;
|
|
}
|
|
|
|
// 更新注释
|
|
if (note) {
|
|
if (tabData.note && tabData.note.trim() !== '') {
|
|
note.innerHTML = tabData.note;
|
|
note.style.display = 'block';
|
|
} else {
|
|
note.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// 移除淡出效果，添加淡入效果
|
|
content.classList.remove('fade-out');
|
|
content.classList.add('fade-in');
|
|
|
|
// 清理动画类
|
|
setTimeout(() => {
|
|
content.classList.remove('fade-in');
|
|
}, 300);
|
|
}, 150);
|
|
}
|
|
}
|
|
|
|
// 页面加载完成后初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initFlowchartTabs();
|
|
});
|
|
</script>
|