|
|
<?php
|
|
|
/**
|
|
|
* 技术服务板块模板
|
|
|
*
|
|
|
* 显示三个技术服务卡片：7x24h响应、认证售前售后技术人员、智能ESS守护者
|
|
|
*/
|
|
|
// 防止直接访问
|
|
|
if (!defined('ABSPATH')) {
|
|
|
exit;
|
|
|
}
|
|
|
|
|
|
// 获取短代码参数
|
|
|
global $technical_service_shortcode_atts;
|
|
|
$atts = $technical_service_shortcode_atts;
|
|
|
|
|
|
// 设置默认值
|
|
|
$section_id = !empty($atts['id']) ? esc_attr($atts['id']) : 'nenghui-technical-service-' . uniqid();
|
|
|
$section_class = !empty($atts['class']) ? esc_attr($atts['class']) : '';
|
|
|
$title = !empty($atts['title']) ? esc_html($atts['title']) : 'Reliable Technical Service';
|
|
|
$subtitle = !empty($atts['subtitle']) ? esc_html($atts['subtitle']) : 'Enhance Experience for Customers';
|
|
|
$show_animation = !empty($atts['show_animation']) && $atts['show_animation'] !== 'false';
|
|
|
|
|
|
// 服务数据
|
|
|
$services = array(
|
|
|
array(
|
|
|
'icon' => get_template_directory_uri() . '/assets/images/24-h.webp',
|
|
|
'title' => '7x24h Respond',
|
|
|
'description' => 'We provide in-time response support to our customers'
|
|
|
),
|
|
|
array(
|
|
|
'icon' => get_template_directory_uri() . '/assets/images/Certified Pre-sales.webp',
|
|
|
'title' => 'Certified Pre-sales & Post-sales Technical Personnel',
|
|
|
'description' => 'Well trained technical experts to serve you online'
|
|
|
),
|
|
|
array(
|
|
|
'icon' => get_template_directory_uri() . '/assets/images/Intelligent ESS Guardian.webp',
|
|
|
'title' => 'Intelligent ESS Guardian',
|
|
|
'description' => 'Transformer Monitoring Proactively Eliminates 95% Operational Risks'
|
|
|
)
|
|
|
);
|
|
|
?>
|
|
|
|
|
|
<section id="<?php echo $section_id; ?>" class="technical-service-section <?php echo $section_class; ?>">
|
|
|
<div class="container">
|
|
|
<!-- 标题区域 -->
|
|
|
<div class="section-header text-center <?php echo $show_animation ? 'fade-in-up' : ''; ?>">
|
|
|
<h2 class="section-title"><?php echo $title; ?></h2>
|
|
|
<p class="section-subtitle"><?php echo $subtitle; ?></p>
|
|
|
</div>
|
|
|
|
|
|
<!-- 服务卡片网格 -->
|
|
|
<div class="services-grid">
|
|
|
<?php foreach ($services as $index => $service): ?>
|
|
|
<div class="service-card <?php echo $show_animation ? 'fade-in-up' : ''; ?>"
|
|
|
<?php if ($show_animation): ?>data-delay="<?php echo ($index + 1) * 200; ?>"<?php endif; ?>>
|
|
|
<div class="service-icon">
|
|
|
<img src="<?php echo esc_url($service['icon']); ?>" alt="<?php echo esc_attr($service['title']); ?>" />
|
|
|
</div>
|
|
|
<div class="service-content">
|
|
|
<h3 class="service-title"><?php echo esc_html($service['title']); ?></h3>
|
|
|
<div class="service-divider"></div>
|
|
|
<p class="service-description"><?php echo esc_html($service['description']); ?></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<?php endforeach; ?>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<style>
|
|
|
.technical-service-section {
|
|
|
padding: 80px 0;
|
|
|
background-color: #f8f9fa;
|
|
|
}
|
|
|
|
|
|
.technical-service-section .container {
|
|
|
max-width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
|
|
|
.section-header {
|
|
|
margin-bottom: 60px;
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 2.5rem;
|
|
|
font-weight: 700;
|
|
|
color: #2c3e50;
|
|
|
margin-bottom: 15px;
|
|
|
line-height: 1.2;
|
|
|
}
|
|
|
|
|
|
.section-subtitle {
|
|
|
font-size: 1.2rem;
|
|
|
color: #7f8c8d;
|
|
|
margin: 0;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.services-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
|
gap: 40px;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
|
|
|
.service-card {
|
|
|
background: #ffffff;
|
|
|
border-radius: 0;
|
|
|
padding: 40px 30px;
|
|
|
text-align: center;
|
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
transition: all 0.3s ease;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
border-bottom: 4px solid transparent;
|
|
|
}
|
|
|
|
|
|
.service-card:hover {
|
|
|
transform: translateY(-8px);
|
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
|
|
|
border-bottom: 4px solid;
|
|
|
border-image: linear-gradient(90deg, #009194 0%, #116598 100%) 1;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.service-icon {
|
|
|
margin-bottom: 30px;
|
|
|
position: relative;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.service-icon img {
|
|
|
width: 80px;
|
|
|
height: 80px;
|
|
|
object-fit: contain;
|
|
|
transition: all 0.3s ease;
|
|
|
filter: grayscale(0.2);
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.service-card:hover .service-icon img {
|
|
|
filter: grayscale(0) brightness(1.1);
|
|
|
transform: scale(1.05);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
/* 为图标添加渐变遮罩效果 */
|
|
|
.service-card:hover .service-icon::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 15%;
|
|
|
transform: translateX(-50%);
|
|
|
width: 80px;
|
|
|
height: 80px;
|
|
|
background: linear-gradient(135deg, rgba(0, 145, 148, 0.2) 0%, rgba(17, 101, 152, 0.2) 100%);
|
|
|
border-radius: 50%;
|
|
|
pointer-events: none;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.service-content {
|
|
|
position: relative;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.service-title {
|
|
|
font-size: 1.3rem;
|
|
|
font-weight: 600;
|
|
|
color: #2c3e50;
|
|
|
margin-bottom: 20px;
|
|
|
line-height: 1.4;
|
|
|
min-height: 60px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
|
|
|
.service-divider {
|
|
|
width: 60px;
|
|
|
height: 3px;
|
|
|
background: #e9ecef;
|
|
|
margin: 0 0 20px 0;
|
|
|
border-radius: 2px;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.service-card:hover .service-divider {
|
|
|
background: linear-gradient(90deg, #009194 0%, #116598 100%);
|
|
|
width: 80px;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.service-description {
|
|
|
font-size: 1rem;
|
|
|
color: #6c757d;
|
|
|
line-height: 1.6;
|
|
|
margin: 0;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
/* 动画效果 */
|
|
|
.fade-in-up {
|
|
|
opacity: 0;
|
|
|
transform: translateY(30px);
|
|
|
animation: fadeInUp 0.8s ease forwards;
|
|
|
}
|
|
|
|
|
|
.fade-in-up[data-delay] {
|
|
|
animation-delay: var(--delay, 0s);
|
|
|
}
|
|
|
|
|
|
@keyframes fadeInUp {
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
@media (max-width: 992px) {
|
|
|
.technical-service-section {
|
|
|
padding: 60px 0;
|
|
|
}
|
|
|
|
|
|
.services-grid {
|
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
gap: 30px;
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 2.2rem;
|
|
|
}
|
|
|
|
|
|
.service-card {
|
|
|
padding: 35px 25px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.technical-service-section {
|
|
|
padding: 50px 0;
|
|
|
}
|
|
|
|
|
|
.section-header {
|
|
|
margin-bottom: 40px;
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 2rem;
|
|
|
}
|
|
|
|
|
|
.section-subtitle {
|
|
|
font-size: 1.1rem;
|
|
|
}
|
|
|
|
|
|
.services-grid {
|
|
|
grid-template-columns: 1fr;
|
|
|
gap: 25px;
|
|
|
}
|
|
|
|
|
|
.service-card {
|
|
|
padding: 30px 20px;
|
|
|
}
|
|
|
|
|
|
.service-title {
|
|
|
font-size: 1.2rem;
|
|
|
min-height: 50px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
.technical-service-section .container {
|
|
|
padding: 0 15px;
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 1.8rem;
|
|
|
}
|
|
|
|
|
|
.service-icon img {
|
|
|
width: 70px;
|
|
|
height: 70px;
|
|
|
}
|
|
|
|
|
|
.service-card:hover .service-icon::after {
|
|
|
width: 70px;
|
|
|
height: 70px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
// 动画初始化
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
const animatedElements = document.querySelectorAll('.fade-in-up');
|
|
|
|
|
|
// 设置动画延迟
|
|
|
animatedElements.forEach(function(element) {
|
|
|
const delay = element.getAttribute('data-delay');
|
|
|
if (delay) {
|
|
|
element.style.setProperty('--delay', delay + 'ms');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 滚动触发动画
|
|
|
const observer = new IntersectionObserver(function(entries) {
|
|
|
entries.forEach(function(entry) {
|
|
|
if (entry.isIntersecting) {
|
|
|
entry.target.style.animationPlayState = 'running';
|
|
|
}
|
|
|
});
|
|
|
}, {
|
|
|
threshold: 0.1,
|
|
|
rootMargin: '0px 0px -50px 0px'
|
|
|
});
|
|
|
|
|
|
animatedElements.forEach(function(element) {
|
|
|
observer.observe(element);
|
|
|
});
|
|
|
});
|
|
|
</script>
|
