|
|
<?php
|
|
|
/**
|
|
|
* Block Template: Cooperate
|
|
|
* 合作伙伴区块模板
|
|
|
*/
|
|
|
|
|
|
// 防止直接访问
|
|
|
if (!defined('ABSPATH')) {
|
|
|
exit;
|
|
|
}
|
|
|
|
|
|
// 加载CSS文件
|
|
|
if (!wp_style_is('block-cooperate-css', 'enqueued')) {
|
|
|
$theme_url = get_template_directory_uri();
|
|
|
$theme_path = get_template_directory();
|
|
|
$css_file = '/assets/css/block-cooperate.css';
|
|
|
|
|
|
if (file_exists($theme_path . $css_file)) {
|
|
|
wp_enqueue_style('block-cooperate-css', $theme_url . $css_file, array(), '1.0.0');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 加载JavaScript文件
|
|
|
wp_enqueue_script('block-cooperate', get_template_directory_uri() . '/assets/js/block-cooperate.js', array('jquery'), '1.0.0', true);
|
|
|
|
|
|
// 获取区块属性
|
|
|
$block_id = isset($block['id']) ? $block['id'] : 'cooperate-' . uniqid();
|
|
|
$class_name = 'cooperate-block';
|
|
|
if (!empty($block['className'])) {
|
|
|
$class_name .= ' ' . $block['className'];
|
|
|
}
|
|
|
if (!empty($block['align'])) {
|
|
|
$class_name .= ' align' . $block['align'];
|
|
|
}
|
|
|
?>
|
|
|
|
|
|
<div id="<?php echo esc_attr($block_id); ?>" class="<?php echo esc_attr($class_name); ?>">
|
|
|
|
|
|
</div>
|
|
|
<section class="relative pb-20 lg:pb-28 bg-white overflow-hidden ">
|
|
|
|
|
|
<div class="container mx-auto px-6 lg:px-12 relative z-20">
|
|
|
<!-- 模块标题 -->
|
|
|
<div class="text-center mb-16 lg:mb-20" data-aos="fade-up">
|
|
|
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-slate-200 bg-slate-50 mb-4 shadow-sm">
|
|
|
<span class="material-symbols-outlined text-slate-500 text-sm">public</span>
|
|
|
<span class="text-xs font-semibold text-slate-600 uppercase tracking-wider">Trusted by Industry Leaders</span>
|
|
|
</div>
|
|
|
<h2 class="text-3xl md:text-4xl font-display font-bold text-slate-heading">生态合作伙伴</h2>
|
|
|
<div class="w-12 h-1 bg-gradient-to-r from-primary to-teal-400 mx-auto mt-4 rounded-full shadow-md"></div>
|
|
|
<p class="mt-6 text-slate-500 max-w-2xl mx-auto text-base">与全球顶尖企业并肩，共同驱动能源产业的数字化变革</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 滚动容器主包裹层 -->
|
|
|
<div class="relative w-full overflow-hidden flex flex-col gap-8 lg:gap-12 bg-white py-4 z-10">
|
|
|
|
|
|
<!-- 左右两端白色渐变边缘遮罩 -->
|
|
|
<div class="absolute left-0 top-0 bottom-0 w-24 md:w-48 bg-gradient-to-r from-white via-white/80 to-transparent z-30 pointer-events-none"></div>
|
|
|
<div class="absolute right-0 top-0 bottom-0 w-24 md:w-48 bg-gradient-to-l from-white via-white/80 to-transparent z-30 pointer-events-none"></div>
|
|
|
|
|
|
<!-- ================= 第一行轨道：向左滚动 (animate-scroll-left) ================= -->
|
|
|
<div class="flex w-max animate-scroll-left hover:[animation-play-state:paused] group relative z-20">
|
|
|
|
|
|
<!-- 【第一组数据】 hzhb1 - hzhb12 -->
|
|
|
<div class="flex items-center gap-10 md:gap-16 px-5 md:px-8">
|
|
|
<!-- hzhb1 - hzhb12 -->
|
|
|
<!-- 使用内联结构以便直观展示，这里重复1到12 -->
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb1.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb2.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb3.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb4.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb5.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb6.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb7.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb8.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb9.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb10.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb11.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb12.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 【第二组数据】 第一组的克隆(hzhb1-hzhb12)，用于无缝循环 -->
|
|
|
<div class="flex items-center gap-10 md:gap-16 px-5 md:px-8">
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb1.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb2.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb3.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb4.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb5.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb6.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb7.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb8.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb9.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb10.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb11.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb12.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- ================= 第二行轨道：向右滚动 (animate-scroll-right) ================= -->
|
|
|
<div class="flex w-max animate-scroll-right hover:[animation-play-state:paused] group relative z-20 -ml-16 lg:-ml-32">
|
|
|
|
|
|
<!-- 【第一组数据】 hzhb13 - hzhb23 -->
|
|
|
<div class="flex items-center gap-10 md:gap-16 px-5 md:px-8">
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb13.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb14.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb15.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb16.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb17.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb18.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb19.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb20.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb21.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb22.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb23.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-primary/20 blur-md rounded-full opacity-0 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 【第二组数据】 第二行的克隆(hzhb13-hzhb23)，用于无缝循环 -->
|
|
|
<div class="flex items-center gap-10 md:gap-16 px-5 md:px-8">
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb13.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb14.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb15.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb16.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb17.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb18.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb19.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb20.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb21.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb22.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
<div class="relative w-32 md:w-44 flex items-center justify-center cursor-pointer transition-all duration-500 group-hover:opacity-30 group-hover:scale-95 hover:!opacity-100 hover:!scale-110 hover:-translate-y-2">
|
|
|
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cooperate/hzhb23.png" alt="Partner" class="w-full h-full object-contain relative z-10">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<style>
|
|
|
.group > div > div:hover > div[class*="blur-md"] {
|
|
|
opacity: 1;
|
|
|
transform: translateX(-50%) scaleX(1.3);
|
|
|
}
|
|
|
</style>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
|
|
|
|
|
|
<script>
|
|
|
// AOS 初始化
|
|
|
AOS.init({
|
|
|
once: true,
|
|
|
offset: 100,
|
|
|
duration: 800,
|
|
|
easing: 'ease-out-cubic'
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
