|
|
<?php
|
|
|
/**
|
|
|
* Warehousing and Distribution Project Block Template
|
|
|
* 仓储和配送项目区块模板
|
|
|
*/
|
|
|
|
|
|
// 防止直接访问
|
|
|
if (!defined('ABSPATH')) {
|
|
|
exit;
|
|
|
}
|
|
|
|
|
|
// 获取短代码属性
|
|
|
global $warehousing_distribution_shortcode_atts;
|
|
|
$atts = isset($warehousing_distribution_shortcode_atts) ? $warehousing_distribution_shortcode_atts : array();
|
|
|
|
|
|
// 设置默认值
|
|
|
$block_id = !empty($atts['id']) ? $atts['id'] : 'nenghui-warehousing-distribution-' . uniqid();
|
|
|
$block_class = !empty($atts['class']) ? $atts['class'] : '';
|
|
|
$show_animation = isset($atts['show_animation']) ? $atts['show_animation'] : 'true';
|
|
|
|
|
|
// 项目标题
|
|
|
$project_title = 'Our Warehousing and Distribution Project';
|
|
|
|
|
|
// 项目特性列表
|
|
|
$project_features = array(
|
|
|
'Address: Koning Leopoldlaan 5, 2870 Puurs',
|
|
|
'CO2 Neutral Warehouse',
|
|
|
'22 loading docks',
|
|
|
'Immediately available',
|
|
|
'Next to major road connection',
|
|
|
'Existing battery and ESS flows',
|
|
|
'Bonded warehouse',
|
|
|
'22,500 sqm',
|
|
|
'Heavy material handling equipment available up to 3 tons payload'
|
|
|
);
|
|
|
|
|
|
// 图片路径
|
|
|
$image_1 = get_template_directory_uri() . '/assets/images/htgfvdd.png';
|
|
|
$image_2 = get_template_directory_uri() . '/assets/images/htbgfd.png';
|
|
|
?>
|
|
|
|
|
|
<section id="<?php echo esc_attr($block_id); ?>" class="warehousing-distribution-section <?php echo esc_attr($block_class); ?>" data-aos="fade-up">
|
|
|
<div class="container">
|
|
|
<!-- 项目标题 -->
|
|
|
<div class="project-header" data-aos="fade-up" data-aos-delay="200">
|
|
|
<h2 class="project-title"><?php echo esc_html($project_title); ?></h2>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第一个项目展示区域 -->
|
|
|
<div class="project-showcase first-project" data-aos="fade-up" data-aos-delay="400">
|
|
|
<div class="project-content">
|
|
|
<!-- 左侧内容区域 -->
|
|
|
<div class="project-left" data-aos="fade-right" data-aos-delay="600">
|
|
|
<div class="project-details">
|
|
|
<h3 class="details-title">Key Details and Features</h3>
|
|
|
<ul class="features-list">
|
|
|
<?php foreach ($project_features as $index => $feature): ?>
|
|
|
<li class="feature-item" data-aos="fade-up" data-aos-delay="<?php echo 700 + ($index * 50); ?>">
|
|
|
<span class="feature-bullet">·</span>
|
|
|
<span class="feature-text"><?php echo esc_html($feature); ?></span>
|
|
|
</li>
|
|
|
<?php endforeach; ?>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧图片区域 -->
|
|
|
<div class="project-right" data-aos="fade-left" data-aos-delay="800">
|
|
|
<div class="project-image">
|
|
|
<img src="<?php echo esc_url($image_1); ?>" alt="Warehousing and Distribution Project - Aerial View" loading="lazy" />
|
|
|
<div class="image-overlay">
|
|
|
<span class="location-tag">ANTWERP</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第二个项目展示区域 -->
|
|
|
<div class="project-showcase second-project" data-aos="fade-up" data-aos-delay="1000">
|
|
|
<div class="project-content">
|
|
|
<!-- 左侧图片区域 -->
|
|
|
<div class="project-left" data-aos="fade-right" data-aos-delay="1200">
|
|
|
<div class="project-image">
|
|
|
<img src="<?php echo esc_url($image_2); ?>" alt="Warehousing and Distribution Project - Interior View" loading="lazy" />
|
|
|
<div class="image-overlay">
|
|
|
<span class="location-tag">OPER</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧空白区域或其他内容 -->
|
|
|
<div class="project-right" data-aos="fade-left" data-aos-delay="1400">
|
|
|
<!-- 可以添加其他内容或保持空白 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<style>
|
|
|
.warehousing-distribution-section {
|
|
|
padding: 80px 0;
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
max-width: 1400px;
|
|
|
margin: 0 auto;
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
|
|
|
.project-header {
|
|
|
text-align: center;
|
|
|
margin-bottom: 60px;
|
|
|
}
|
|
|
|
|
|
.project-title {
|
|
|
font-size: 2.8rem;
|
|
|
font-weight: 700;
|
|
|
color: #2c5aa0;
|
|
|
margin: 0;
|
|
|
line-height: 1.2;
|
|
|
letter-spacing: 1px;
|
|
|
text-transform: uppercase;
|
|
|
}
|
|
|
|
|
|
.project-showcase {
|
|
|
margin-bottom: 80px;
|
|
|
}
|
|
|
|
|
|
.project-showcase:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.project-content {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
gap: 60px;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.project-left,
|
|
|
.project-right {
|
|
|
flex: 1;
|
|
|
max-width: 50%;
|
|
|
}
|
|
|
|
|
|
.project-details {
|
|
|
padding: 40px 0;
|
|
|
}
|
|
|
|
|
|
.details-title {
|
|
|
font-size: 1.5rem;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
margin-bottom: 30px;
|
|
|
line-height: 1.3;
|
|
|
}
|
|
|
|
|
|
.features-list {
|
|
|
list-style: none;
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
.feature-item {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
margin-bottom: 15px;
|
|
|
padding: 8px 0;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.feature-item:hover {
|
|
|
transform: translateX(10px);
|
|
|
color: #2c5aa0;
|
|
|
}
|
|
|
|
|
|
.feature-bullet {
|
|
|
color: #2c5aa0;
|
|
|
font-size: 1.2rem;
|
|
|
font-weight: bold;
|
|
|
margin-right: 15px;
|
|
|
flex-shrink: 0;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.feature-text {
|
|
|
font-size: 1rem;
|
|
|
line-height: 1.6;
|
|
|
color: #666;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.project-image {
|
|
|
position: relative;
|
|
|
border-radius: 20px;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.project-image:hover {
|
|
|
transform: translateY(-10px);
|
|
|
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
|
|
|
.project-image img {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
display: block;
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.project-image:hover img {
|
|
|
transform: scale(1.05);
|
|
|
}
|
|
|
|
|
|
.image-overlay {
|
|
|
position: absolute;
|
|
|
bottom: 20px;
|
|
|
left: 20px;
|
|
|
background: rgba(44, 90, 160, 0.9);
|
|
|
color: white;
|
|
|
padding: 8px 16px;
|
|
|
border-radius: 20px;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.location-tag {
|
|
|
font-size: 0.9rem;
|
|
|
font-weight: 600;
|
|
|
letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
/* 第二个项目的特殊样式 */
|
|
|
.second-project .project-content {
|
|
|
flex-direction: row;
|
|
|
}
|
|
|
|
|
|
.second-project .project-left {
|
|
|
order: 1;
|
|
|
}
|
|
|
|
|
|
.second-project .project-right {
|
|
|
order: 2;
|
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
@media (max-width: 1200px) {
|
|
|
.container {
|
|
|
padding: 0 30px;
|
|
|
}
|
|
|
|
|
|
.project-content {
|
|
|
gap: 40px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 992px) {
|
|
|
.project-content {
|
|
|
flex-direction: column;
|
|
|
gap: 40px;
|
|
|
}
|
|
|
|
|
|
.project-left,
|
|
|
.project-right {
|
|
|
max-width: 100%;
|
|
|
}
|
|
|
|
|
|
.project-title {
|
|
|
font-size: 2.2rem;
|
|
|
}
|
|
|
|
|
|
.second-project .project-content {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.second-project .project-left {
|
|
|
order: 1;
|
|
|
}
|
|
|
|
|
|
.second-project .project-right {
|
|
|
order: 2;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.warehousing-distribution-section {
|
|
|
padding: 60px 0;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
|
|
|
.project-header {
|
|
|
margin-bottom: 40px;
|
|
|
}
|
|
|
|
|
|
.project-title {
|
|
|
font-size: 1.8rem;
|
|
|
}
|
|
|
|
|
|
.project-showcase {
|
|
|
margin-bottom: 60px;
|
|
|
}
|
|
|
|
|
|
.project-details {
|
|
|
padding: 20px 0;
|
|
|
}
|
|
|
|
|
|
.details-title {
|
|
|
font-size: 1.3rem;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.feature-item {
|
|
|
margin-bottom: 12px;
|
|
|
padding: 6px 0;
|
|
|
}
|
|
|
|
|
|
.feature-text {
|
|
|
font-size: 0.9rem;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
.warehousing-distribution-section {
|
|
|
padding: 40px 0;
|
|
|
}
|
|
|
|
|
|
.project-title {
|
|
|
font-size: 1.5rem;
|
|
|
}
|
|
|
|
|
|
.project-content {
|
|
|
gap: 30px;
|
|
|
}
|
|
|
|
|
|
.project-details {
|
|
|
padding: 15px 0;
|
|
|
}
|
|
|
|
|
|
.details-title {
|
|
|
font-size: 1.2rem;
|
|
|
}
|
|
|
|
|
|
.feature-bullet {
|
|
|
font-size: 1rem;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.feature-text {
|
|
|
font-size: 0.85rem;
|
|
|
}
|
|
|
|
|
|
.image-overlay {
|
|
|
bottom: 15px;
|
|
|
left: 15px;
|
|
|
padding: 6px 12px;
|
|
|
}
|
|
|
|
|
|
.location-tag {
|
|
|
font-size: 0.8rem;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
<?php if ($show_animation === 'true'): ?>
|
|
|
// 初始化AOS动画库（如果已加载）
|
|
|
if (typeof AOS !== 'undefined') {
|
|
|
AOS.init({
|
|
|
duration: 800,
|
|
|
easing: 'ease-out-cubic',
|
|
|
once: true,
|
|
|
offset: 100
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 添加滚动视差效果
|
|
|
const images = document.querySelectorAll('#<?php echo esc_js($block_id); ?> .project-image');
|
|
|
|
|
|
function handleScroll() {
|
|
|
const scrolled = window.pageYOffset;
|
|
|
const rate = scrolled * -0.5;
|
|
|
|
|
|
images.forEach((image, index) => {
|
|
|
const speed = 0.5 + (index * 0.1);
|
|
|
image.style.transform = `translateY(${rate * speed}px)`;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 节流函数
|
|
|
let ticking = false;
|
|
|
function requestTick() {
|
|
|
if (!ticking) {
|
|
|
requestAnimationFrame(handleScroll);
|
|
|
ticking = true;
|
|
|
setTimeout(() => {
|
|
|
ticking = false;
|
|
|
}, 16);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
window.addEventListener('scroll', requestTick);
|
|
|
<?php endif; ?>
|
|
|
});
|
|
|
</script>
|
