huyuanxiang
/
official-website-abroad
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '72632f097b'
${ noResults }
official-website-abroad/html/epc-emc.html

1173 lines
89 KiB
Raw Blame History Escape

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact & Global Grid - Nenghui</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700;900&family=Montserrat:wght@400;500;700;800;900&family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
<!-- AOS Animation Library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
<!-- Tailwind & Config -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#13eca4",
"background-light": "#f8fcfa",
"background-dark": "#10221c",
"pearlescent": "#f0f7f5",
"silver-accent": "#e2e8f0",
"about-us": "#ff6b00"
},
fontFamily: {
"display": ["Montserrat", "sans-serif"],
"sans": ["Montserrat", "sans-serif"],
"mono": ["JetBrains Mono", "Montserrat"],
"inter": ["Inter", "Montserrat"],
},
borderRadius: {
"DEFAULT": "0.5rem",
"lg": "1rem",
"xl": "1.5rem",
"2xl": "2rem",
"3xl": "3rem",
"full": "9999px"
},
backgroundImage: {
'liquid-gradient': 'linear-gradient(135deg, #f8fcfa 0%, #e8f5f1 50%, #dcfce7 100%)',
'glass-gradient': 'linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%)',
'aurora': 'linear-gradient(135deg, rgba(19,236,164,0.1) 0%, rgba(13,166,112,0.05) 50%, rgba(248,252,250,0) 100%)',
'mesh': 'radial-gradient(at 40% 20%, rgba(19,236,164,0.08) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(16,34,28,0.05) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(19,236,164,0.05) 0px, transparent 50%)',
},
boxShadow: {
// 将光效统一映射为 primary 颜色 (13eca4 的 RGBA)
'glow': '0 0 20px rgba(19, 236, 164, 0.4)',
'glow-lg': '0 10px 30px rgba(19, 236, 164, 0.4)',
'bento': '0 20px 40px -15px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02)',
'bento-hover': '0 30px 60px -20px rgba(19,236,164,0.15), 0 0 0 1px rgba(19,236,164,0.3)',
'bento-dark': '0 30px 60px -15px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1)',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0', transform: 'translateY(10px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
scan: {
'0%': { top: '-10%', opacity: '0' },
'10%': { opacity: '1' },
'90%': { opacity: '1' },
'100%': { top: '110%', opacity: '0' },
},
rotateGlobe: {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
dash: {
'0%': { strokeDashoffset: '1000' },
'100%': { strokeDashoffset: '0' },
},
globePulse: {
'0%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
'50%': { boxShadow: '0 0 50px rgba(19,236,164,0.4)', transform: 'scale(1.02)' },
'100%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
},
// 高级交互动画
pulseGlow: {
'0%': { textShadow: '0 0 10px rgba(19, 236, 164, 0.4)' },
'100%': { textShadow: '0 0 30px #ff6b00' }
},
sweep: { '100%': { left: '200%' } },
cardFlip: {
'0%': { opacity: '0', transform: 'rotateY(-90deg) translateZ(50px)' },
'100%': { opacity: '1', transform: 'rotateY(0deg) translateZ(0)' }
},
floatY: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-15px)' }
},
textShimmer: {
'0%': { backgroundPosition: '0% 50%' },
'100%': { backgroundPosition: '100% 50%' },
},
blobSpin: {
'0%': { transform: 'rotate(0deg) scale(1)' },
'50%': { transform: 'rotate(180deg) scale(1.1)' },
'100%': { transform: 'rotate(360deg) scale(1)' },
}
},
animation: {
'fade-in': 'fadeIn 0.5s ease-out forwards',
'scan-slow': 'scan 6s linear infinite',
'spin-slow': 'rotateGlobe 60s linear infinite',
'dash-flow': 'dash 3s linear infinite',
'globe-select': 'globePulse 0.8s ease-out',
'pulse-glow': 'pulseGlow 2s infinite alternate',
'sweep': 'sweep 3s infinite',
'flip-in': 'cardFlip 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
'float-1': 'floatY 3s ease-in-out infinite',
'float-2': 'floatY 3s ease-in-out infinite 1s',
'float-3': 'floatY 3s ease-in-out infinite 2s',
'text-shimmer': 'textShimmer 3s ease-out infinite alternate',
'blob-spin': 'blobSpin 20s infinite cubic-bezier(0.4, 0, 0.2, 1)',
}
},
},
}
</script>
<!-- Tailwind 基础样式注入 -->
<style type="text/tailwindcss">
@layer utilities {
/* contact us */
#contact-us .focus-group:hover > div:not(:hover) {
opacity: 0.6;
transform: scale(0.98);
filter: blur(2px);
}
#contact-us .focus-group > div {
transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}
/* about-us */
/* 新增：专门为副标题定制的 3D 荧光挤压动画 */
.-subtitle {
color: #ff6b00; /* 保持主题色 */
animation: pulse3d 2s infinite alternate;
}
@keyframes pulse3d {
0% {
text-shadow:
/* 左上高光 */
-1px -1px 0px rgba(255, 255, 255, 0.5),
/* 右下厚度 (深翠绿色系) */
1px 1px 0px #ce6c33,
2px 2px 0px #b44914,
3px 3px 0px #75600a,
/* 基础投影 */
4px 4px 10px rgba(0, 0, 0, 0.6),
/* 较弱的呼吸背光 */
0px 0px 10px rgba(224, 114, 12, 0.3);
}
100% {
text-shadow:
-1px -1px 0px rgba(255, 255, 255, 0.7),
1px 1px 0px #cc7e19,
2px 2px 0px #e2d921,
3px 3px 0px #692a05,
5px 5px 15px rgba(0, 0, 0, 0.8),
/* 较强的呼吸背光，模拟能量溢出 */
0px 0px 30px #f2e930,
0px 0px 50px rgba(195, 159, 16, 0.6);
}
}
. {
text-shadow:
0 1px 0 #e2e8f0, /* 亮银色顶边 */
0 2px 0 #cbd5e1,
0 3px 0 #94a3b8,
0 4px 0 #64748b, /* 逐渐变暗模拟背光面 */
0 5px 0 #475569,
0 6px 0 #334155,
0 8px 10px rgba(0, 0, 0, 0.4), /* 近处接触阴影 */
0 15px 20px rgba(0, 0, 0, 0.3), /* 中距离扩散阴影 */
0 25px 40px rgba(0, 0, 0, 0.8); /* 远距离环境阴影 */
}
.-ultra {
color: #ffffff;
/* 1. 顶部左侧的亮色高光切割边 */
text-shadow:
-1px -1px 1px rgba(255, 255, 255, 0.3),
/* 2. 右下角 45度 斜向挤压厚度 (融入您的深墨绿环境色) */
1px 1px 0px #0d1e18,
2px 2px 0px #0a1813,
3px 3px 0px #08130e,
4px 4px 0px #060e0a,
5px 5px 0px #040906,
6px 6px 0px #020403,
7px 7px 0px #000000,
/* 3. 接触面的死黑投影 */
8px 8px 15px rgba(0, 0, 0, 0.8),
/* 4. 远距离大范围柔和投影 */
15px 15px 30px rgba(0, 0, 0, 0.6),
/* 5. 核心点睛之笔：在阴影反方向及底部映射出 #13eca4 (Primary) 的环境光晕 */
-5px -5px 30px rgba(19, 236, 164, 0.1),
10px 10px 40px rgba(19, 236, 164, 0.25);
}
/* Tab 状态管控：选中时变为 primary 背景与深色字体 */
#tech-landing-wrapper .tab-content { @apply hidden; }
#tech-landing-wrapper .tab-content.active { @apply grid; }
}
</style>
</head>
<body class="bg-background-dark text-slate-300 font-sans overflow-x-hidden selection:bg-primary selection:text-black cursor-default">
<!-- 高级交互定制 CSS -->
<style>
html { scroll-behavior: smooth; }
@media (min-width: 768px) {
body a, body button, body .magnetic-btn, body .tab-btn { cursor: none !important; }
}
/* Tier-1 横向无限跑马灯动画引擎 (极致丝滑修复版) */
@keyframes marquee-x {
0% { transform: translate3d(0, 0, 0); }
/* 精确平移 50%，需确保内外结构绝对对称 */
100% { transform: translate3d(-50%, 0, 0); }
}
.animate-marquee-x {
display: flex;
width: max-content;
/* 提升时间至 40s 让运动更从容，强制 GPU 加速 */
animation: marquee-x 40s linear infinite;
will-change: transform;
}
.marquee-container:hover .animate-marquee-x {
animation-play-state: paused;
}
.mask-edges-x {
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
/* 取消使用 flex gap，改用精确的右侧外边距保证无缝对接 */
.marquee-item {
width: 12rem; /* w-48 = 192px */
flex-shrink: 0;
margin-right: 1.5rem; /* space-x-6 的等效值 24px */
}
/* Swiper 案例轮播图定制样式 */
.swiper { padding-bottom: 60px !important; }
.swiper-wrapper { cursor: grab; }
.swiper-wrapper:active { cursor: grabbing; }
/* EPC (绿色系) 分页器 */
.epc-swiper .swiper-pagination-bullet { background: rgba(255,255,255,0.3); opacity: 1; transition: all 0.3s; }
.epc-swiper .swiper-pagination-bullet-active { background: #13eca4; width: 24px; border-radius: 4px; box-shadow: 0 0 10px rgba(19, 236, 164, 0.5); }
/* EMC (橙色系) 分页器 */
.emc-swiper .swiper-pagination-bullet { background: rgba(255,255,255,0.3); opacity: 1; transition: all 0.3s; }
.emc-swiper .swiper-pagination-bullet-active { background: #ff6b00; width: 24px; border-radius: 4px; box-shadow: 0 0 10px rgba(255, 107, 0, 0.5); }
#energy-cursor {
position: fixed;
top: 0; left: 0;
width: 32px; height: 32px;
background: rgba(19, 236, 164, 0.4);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
height 0.3s cubic-bezier(0.25, 1, 0.5, 1),
background-color 0.3s ease,
box-shadow 0.3s ease, border 0.3s ease;
mix-blend-mode: screen;
backdrop-filter: blur(4px);
}
#energy-cursor.active {
width: 80px; height: 80px;
background: rgba(19, 236, 164, 0.1);
border: 1px solid rgba(19, 236, 164, 0.5);
box-shadow: 0 0 20px rgba(19, 236, 164, 0.4);
}
#energy-cursor.active-emc {
width: 80px; height: 80px;
background: rgba(255, 107, 0, 0.1);
border: 1px solid rgba(255, 107, 0, 0.5);
box-shadow: 0 0 20px rgba(255, 107, 0, 0.4);
}
/* 极致丝滑的 Tab 切换动画引擎 */
.tab-wrapper {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.tab-content {
/* 关键：让两个面板在同一网格区域重叠，由最高的元素撑开父容器 */
grid-area: 1 / 1;
opacity: 0;
/* 初始状态：轻微向下且缩小，形成“深处”的纵深感 */
transform: translateY(15px) scale(0.98);
pointer-events: none;
visibility: hidden;
/* 使用 Apple 级别的物理缓动曲线 */
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.6s step-end;
z-index: 0;
}
.tab-content.active {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
visibility: visible;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0s step-start;
z-index: 10;
}
/* ::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #060c09; }
::-webkit-scrollbar-thumb { background: #1a2e26; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #13eca4; } */
</style>
<!-- 自定义光标节点 -->
<div id="energy-cursor" class="hidden md:block"></div>
<!-- 英雄主视区 -->
<main class="relative pt-40 pb-24 overflow-hidden bg-mesh min-h-screen flex items-center parallax-container">
<div class="parallax-bg absolute top-1/4 -right-1/4 w-[800px] h-[800px] bg-primary/10 rounded-full blur-[120px] animate-blob-spin pointer-events-none" data-speed="-0.03"></div>
<div class="parallax-bg absolute bottom-0 left-0 w-[600px] h-[600px] bg-[#ff6b00]/10 rounded-full blur-[100px] animate-blob-spin pointer-events-none" style="animation-direction: reverse;" data-speed="0.03"></div>
<div class="container mx-auto px-6 relative z-10 text-center">
<div class="inline-block px-4 py-1 mb-8 rounded-full border border-primary/30 bg-primary/10 text-primary font-mono text-sm tracking-widest uppercase shadow-glow animate-fade-in">
Global Energy Transition Standard
</div>
<h1 class="text-4xl md:text-[2.66rem] -ultra mb-8 leading-[1.1] animate-fade-in" style="animation-delay: 0.2s;">
Mastering the <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-green-300 animate-text-shimmer" style="background-size: 200% auto;">Zero-Carbon</span> Equation.
</h1>
<p class="max-w-3xl mx-auto text-[1rem] text-slate-400 mb-12 font-inter leading-relaxed animate-fade-in" style="animation-delay: 0.4s;">
Empowering industrial giants and commercial leaders worldwide through elite Turnkey EPC execution and Zero-CAPEX Energy Management Contracting (EMC/PPA).
</p>
<!-- <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6 animate-fade-in" style="animation-delay: 0.6s;">
<a href="#models" class="magnetic-btn hover-trigger bg-primary text-black px-10 py-4 rounded-full text-lg hover:shadow-[0_0_40px_rgba(19,236,164,0.6)] transition-all duration-300 w-full sm:w-auto flex items-center justify-center relative overflow-hidden group">
<div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out pointer-events-none"></div>
<span class="pointer-events-none">Explore Models</span>
</a>
<a href="#cases" class="magnetic-btn hover-trigger bg-white/5 border border-white/20 text-white px-10 py-4 rounded-full text-lg hover:bg-white/10 transition-all duration-300 w-full sm:w-auto flex items-center justify-center">
<span class="material-symbols-outlined mr-2 pointer-events-none">&#xe143;</span> <span class="pointer-events-none">View Track Record</span>
</a>
</div> -->
</div>
</main>
<!-- 核心商业模式 (EPC & EMC Bento Grid) -->
<section id="models" class="container mx-auto px-6 py-24 relative z-10 -mt-20">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div data-aos="fade-right" class="hover-trigger relative group p-10 lg:p-14 rounded-[2.5rem] bg-[#0d1613] border border-white/5 shadow-bento-dark hover:shadow-bento-hover hover:border-primary/30 transition-all duration-500 overflow-hidden backdrop-blur-xl" data-tilt>
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 blur-[80px] rounded-full group-hover:bg-primary/20 transition-all duration-700 pointer-events-none"></div>
<div class="flex items-center justify-between mb-8 relative z-10">
<h2 class="text-3xl text-white ">EPC</h2>
<!-- engineering -> &#xea3d; -->
<span class="material-symbols-outlined text-5xl text-primary opacity-50 group-hover:opacity-100 group-hover:rotate-12 transition-all duration-500">&#xea3d;</span>
</div>
<h3 class="text-xl text-primary font-mono mb-6 uppercase tracking-widest border-l-2 border-primary pl-4 relative z-10">Engineering, Procurement, Construction</h3>
<p class="text-slate-400 mb-10 leading-relaxed text-lg relative z-10">
A traditional, robust model for clients holding CAPEX. We deliver end-to-end turnkey infrastructure, ensuring absolute quality control, timeline adherence, and tier-1 component integration.
</p>
<div class="grid grid-cols-2 gap-4 font-inter text-slate-300 text-sm relative z-10 pointer-events-none">
<!-- architecture -> &#xea3b; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-primary block mb-2">&#xea3b;</span>Site-Specific Design</div>
<!-- inventory_2 -> &#xe1a1; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-primary block mb-2">&#xe1a1;</span>Global Sourcing</div>
<!-- construction -> &#xea3c; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-primary block mb-2">&#xea3c;</span>Certified Build</div>
<!-- verified -> &#xe86c; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-primary block mb-2">&#xe86c;</span>Grid Handover</div>
</div>
</div>
<div data-aos="fade-left" class="hover-trigger hover-emc relative group p-10 lg:p-14 rounded-[2.5rem] bg-[#0d1613] border border-white/5 shadow-bento-dark hover:shadow-bento-hover hover:border-[#ff6b00]/30 transition-all duration-500 overflow-hidden backdrop-blur-xl" data-tilt>
<div class="absolute bottom-0 right-0 w-64 h-64 bg-[#ff6b00]/10 blur-[80px] rounded-full group-hover:bg-[#ff6b00]/20 transition-all duration-700 pointer-events-none"></div>
<div class="flex items-center justify-between mb-8 relative z-10">
<h2 class="text-3xl text-white ">EMC/PPA</h2>
<!-- handshake -> &#xebcb; -->
<span class="material-symbols-outlined text-5xl text-[#ff6b00] opacity-50 group-hover:opacity-100 group-hover:-rotate-12 transition-all duration-500">&#xebcb;</span>
</div>
<h3 class="text-xl text-[#ff6b00] font-mono mb-6 uppercase tracking-widest border-l-2 border-[#ff6b00] pl-4 relative z-10">Energy Management Contracting</h3>
<p class="text-slate-400 mb-10 leading-relaxed text-lg relative z-10">
The modern standard for risk-free upgrades. We finance 100% of the project. You enjoy immediate utility savings. We share the profit derived exclusively from the generated energy efficiency.
</p>
<div class="grid grid-cols-2 gap-4 font-inter text-slate-300 text-sm relative z-10 pointer-events-none">
<!-- account_balance -> &#xe84d; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-[#ff6b00] block mb-2">&#xe84d;</span>Zero CAPEX Required</div>
<!-- monitoring -> &#xf190; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-[#ff6b00] block mb-2">&#xf190;</span>Guaranteed Savings</div>
<!-- support_agent -> &#xf0e2; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-[#ff6b00] block mb-2">&#xf0e2;</span>Free O&M Included</div>
<!-- trending_down -> &#xe8e3; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-[#ff6b00] block mb-2">&#xe8e3;</span>Immediate ROI</div>
</div>
</div>
</div>
</section>
<!-- ======================================================= -->
<!-- 核心更新：极度丝滑双轨执行流程 -->
<!-- ======================================================= -->
<section id="dual-workflow" class="py-24 relative overflow-hidden bg-[#060c09]">
<div class="container mx-auto px-6 relative z-10">
<!-- 头部切换器 -->
<div class="text-center mb-24" data-aos="zoom-in">
<h2 class="text-4xl md:text-[2.66rem] text-white mb-8 -subtitle">Execution Pathways</h2>
<div class="inline-flex bg-black/50 border border-white/10 p-1.5 rounded-full backdrop-blur-md relative overflow-hidden shadow-bento-dark">
<!-- 滑动背景块 -->
<div id="tab-slider" class="absolute top-1.5 left-1.5 bottom-1.5 w-[calc(50%-6px)] bg-primary rounded-full transition-all duration-500 cubic-bezier(0.34, 1.56, 0.64, 1) ease-in-out"></div>
<button id="btn-epc" class="tab-btn hover-trigger relative z-10 px-6 md:px-10 py-3 md:py-4 rounded-full text-black transition-colors duration-300 flex items-center">
<!-- engineering -> &#xea3d; -->
<span class="material-symbols-outlined mr-2 text-base md:text-lg pointer-events-none">&#xea3d;</span> <span class="pointer-events-none">EPC Workflow</span>
</button>
<button id="btn-emc" class="tab-btn hover-trigger hover-emc relative z-10 px-6 md:px-10 py-3 md:py-4 rounded-full text-slate-400 hover:text-white transition-colors duration-300 flex items-center">
<!-- handshake -> &#xebcb; -->
<span class="material-symbols-outlined mr-2 text-base md:text-lg pointer-events-none">&#xebcb;</span> <span class="pointer-events-none">EMC/PPA Workflow</span>
</button>
</div>
</div>
<!-- 使用 Grid Wrapper 包裹 -->
<div class="tab-wrapper w-full relative">
<!-- EPC 流程内容 (6个步骤) -->
<div id="content-epc" class="tab-content active">
<div class="relative flex flex-col lg:flex-row justify-between items-start space-y-12 lg:space-y-0 lg:space-x-4 before:absolute before:content-[''] before:w-[2px] lg:before:w-full lg:before:h-[2px] before:bg-white/10 before:left-[23px] lg:before:top-[24px] lg:before:left-0 z-0">
<div class="hidden lg:block absolute top-[24px] left-0 h-[2px] bg-gradient-to-r from-transparent via-primary to-transparent z-0 animate-sweep" style="width: 400px; animation-duration: 4s;"></div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
<!-- my_location -> &#xe55c; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-primary flex items-center justify-center shadow-glow mb-0 lg:mb-6 shrink-0 group-hover:scale-110 transition-transform duration-500"><span class="material-symbols-outlined text-primary text-xl">&#xe55c;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-white mb-2">Site Survey</h4>
<p class="text-slate-500 text-xs leading-relaxed">Comprehensive assessment of roof integrity, shading, and electrical infrastructure.</p>
</div>
</div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
<!-- architecture -> &#xea3b; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 group-hover:border-primary flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-white group-hover:text-primary transition-colors text-xl">&#xea3b;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-white mb-2">Engineering</h4>
<p class="text-slate-500 text-xs leading-relaxed">Precision CAD/3D design optimized for maximum energy density.</p>
</div>
</div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
<!-- inventory_2 -> &#xe1a1; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 group-hover:border-primary flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-white group-hover:text-primary transition-colors text-xl">&#xe1a1;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-white mb-2">Procurement</h4>
<p class="text-slate-500 text-xs leading-relaxed">Sourcing high-efficiency components through our robust supply chain.</p>
</div>
</div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
<!-- construction -> &#xea3c; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 group-hover:border-primary flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-white group-hover:text-primary transition-colors text-xl">&#xea3c;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-white mb-2">Construction</h4>
<p class="text-slate-500 text-xs leading-relaxed">Rigorous on-site management following international safety & quality standards.</p>
</div>
</div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
<!-- electrical_services -> &#xf102; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 group-hover:border-primary flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-white group-hover:text-primary transition-colors text-xl">&#xf102;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-white mb-2">Grid & Testing</h4>
<p class="text-slate-500 text-xs leading-relaxed">Handling all PEA/MEA permits and conducting strict pre-commissioning tests.</p>
</div>
</div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
<!-- support_agent -> &#xf0e2; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-primary flex items-center justify-center mb-0 lg:mb-6 shrink-0 group-hover:bg-primary transition-colors duration-500"><span class="material-symbols-outlined text-primary group-hover:text-black transition-colors text-xl">&#xf0e2;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-white mb-2">O&M</h4>
<p class="text-slate-500 text-xs leading-relaxed">24/7 remote monitoring and localized cleaning/repair services.</p>
</div>
</div>
</div>
</div>
<!-- EMC 流程内容 (5个步骤) -->
<div id="content-emc" class="tab-content">
<div class="relative flex flex-col lg:flex-row justify-between items-start space-y-12 lg:space-y-0 lg:space-x-6 before:absolute before:content-[''] before:w-[2px] lg:before:w-full lg:before:h-[2px] before:bg-white/10 before:left-[23px] lg:before:top-[24px] lg:before:left-0 z-0">
<div class="hidden lg:block absolute top-[24px] left-0 h-[2px] bg-gradient-to-r from-transparent via-[#ff6b00] to-transparent z-0 animate-sweep" style="width: 400px; animation-duration: 4s;"></div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc">
<!-- query_stats -> &#xe4fc; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-[#ff6b00] flex items-center justify-center shadow-[0_0_15px_rgba(255,107,0,0.4)] mb-0 lg:mb-6 shrink-0 group-hover:scale-110 transition-transform duration-500"><span class="material-symbols-outlined text-[#ff6b00] text-xl">&#xe4fc;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-white mb-2">Evaluation</h4>
<p class="text-slate-500 text-xs leading-relaxed">Financial feasibility study based on your historical electricity bills.</p>
</div>
</div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc">
<!-- contract -> &#xf0c9; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 group-hover:border-[#ff6b00] flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-white group-hover:text-[#ff6b00] transition-colors text-xl">&#xebc7;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-white mb-2">Agreement</h4>
<p class="text-slate-500 text-xs leading-relaxed">Clear, transparent PPA (Power Purchase Agreement) with no hidden fees.</p>
</div>
</div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc">
<!-- precision_manufacturing -> &#xf049; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 group-hover:border-[#ff6b00] flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-white group-hover:text-[#ff6b00] transition-colors text-xl">&#xf049;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-white mb-2">Deployment</h4>
<p class="text-slate-500 text-xs leading-relaxed">Rapid installation and commissioning by our expert engineering team.</p>
</div>
</div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc">
<!-- energy_savings_leaf -> &#xec46; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 group-hover:border-[#ff6b00] flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-white group-hover:text-[#ff6b00] transition-colors text-xl">&#xe6df;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-white mb-2">Management</h4>
<p class="text-slate-500 text-xs leading-relaxed">Intelligent dispatching of solar and storage to optimize self-consumption.</p>
</div>
</div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc">
<!-- savings -> &#xe2eb; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-[#ff6b00] flex items-center justify-center mb-0 lg:mb-6 shrink-0 group-hover:bg-[#ff6b00] transition-colors duration-500"><span class="material-symbols-outlined text-[#ff6b00] group-hover:text-black transition-colors text-xl">&#xe2eb;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-white mb-2">Benefit Share</h4>
<p class="text-slate-500 text-xs leading-relaxed">Pay only for the solar energy generated at a rate significantly lower than the grid.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 信任枢纽：运维 SLA、资质与顶级供应链生态 (大气专业版) -->
<section id="trust" class="py-32 bg-[#030604] border-y border-white/5 relative overflow-hidden">
<!-- 宏大的背景全局光晕 -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1200px] h-[600px] bg-gradient-to-b from-primary/5 to-transparent blur-[120px] pointer-events-none"></div>
<div class="container mx-auto px-6 relative z-10">
<!-- 模块标题 -->
<div class="text-center mb-20" data-aos="fade-up">
<div class="text-primary font-mono text-sm tracking-widest mb-4 uppercase flex justify-center items-center inline-block px-3 py-1 rounded-full">Trust & Service</div>
<h3 class="text-4xl md:text-[2.66rem] text-white -subtitle">Built on Absolute Reliability.</h3>
</div>
<!-- 上半部：运维服务 SLA 与 国际资质 (水平全宽布局) -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
<!-- 运维 SLA 核心卡片 (占据 2 列，展现大气) -->
<div data-aos="fade-right" class="lg:col-span-2 hover-trigger group bg-[#0a110e] border border-white/5 rounded-[2rem] p-10 md:p-14 hover:border-primary/30 transition-colors duration-500 relative overflow-hidden flex flex-col justify-center">
<div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out"></div>
<div class="flex items-center mb-10">
<!-- support_agent -> &#xf0e2; -->
<span class="material-symbols-outlined text-primary text-4xl mr-4">&#xf0e2;</span>
<div>
<h4 class="text-2xl md:text-3xl text-white">Localized O&M Support</h4>
<p class="text-slate-400 mt-1">24/7/365 lifecycle protection for your energy assets.</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 divide-y md:divide-y-0 md:divide-x divide-white/10">
<!-- SLA 1: 2H -->
<div class="pt-6 md:pt-0 md:pr-8 group-hover:pl-2 transition-all duration-300">
<div class="text-4xl font-mono text-white mb-2 flex items-baseline">2<span class="text-primary text-xl ml-1">H</span></div>
<div class="text-xs text-primary uppercase tracking-widest mb-2 ">Consultation</div>
<p class="text-sm text-slate-500 leading-relaxed">Technical Consultation Response within 2 hours.</p>
</div>
<!-- SLA 2: 24H -->
<div class="pt-6 md:pt-0 md:px-8 group-hover:pl-10 transition-all duration-300 delay-75">
<div class="text-4xl font-mono text-white mb-2 flex items-baseline">24<span class="text-[#ff6b00] text-xl ml-1">H</span></div>
<div class="text-xs text-[#ff6b00] uppercase tracking-widest mb-2 ">Diagnosis</div>
<p class="text-sm text-slate-500 leading-relaxed">Remote Diagnosis & Solution proposition.</p>
</div>
<!-- SLA 3: 48H -->
<div class="pt-6 md:pt-0 md:pl-8 group-hover:pl-10 transition-all duration-300 delay-150">
<div class="text-4xl font-mono text-white mb-2 flex items-baseline">48<span class="text-white text-xl ml-1">H</span></div>
<div class="text-xs text-slate-300 uppercase tracking-widest mb-2 ">On-Site</div>
<p class="text-sm text-slate-500 leading-relaxed">On-site Engineering Support deployment.</p>
</div>
</div>
</div>
<!-- 国际资质证书卡片 (占据 1 列，纵向排列) -->
<div data-aos="fade-left" class="hover-trigger group bg-[#0a110e] border border-white/5 rounded-[2rem] p-10 md:p-14 flex flex-col justify-center relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent pointer-events-none"></div>
<div class="mb-8 relative z-10">
<!-- verified -> &#xe86c; -->
<span class="material-symbols-outlined text-white/50 text-4xl mb-4 block">&#xe86c;</span>
<h4 class="text-3xl text-white mb-2">Global Quality Benchmarks</h4>
<p class="text-slate-400 text-sm">Strictest adherence to global standards.</p>
</div>
<div class="flex flex-col gap-4 relative z-10">
<div class="w-full px-5 py-3.5 rounded-xl bg-black/50 border border-white/5 text-slate-300 font-mono text-sm flex items-center group-hover:border-primary transition-colors"><span class="w-1.5 h-1.5 rounded-full bg-primary mr-3"></span> ISO 9001 : 2015</div>
<div class="w-full px-5 py-3.5 rounded-xl bg-black/50 border border-white/5 text-slate-300 font-mono text-sm flex items-center group-hover:border-primary transition-colors"><span class="w-1.5 h-1.5 rounded-full bg-primary mr-3"></span> ISO 14001 : 2015</div>
<div class="w-full px-5 py-3.5 rounded-xl bg-black/50 border border-white/5 text-slate-300 font-mono text-sm flex items-center group-hover:border-[#ff6b00] transition-colors"><span class="w-1.5 h-1.5 rounded-full bg-[#ff6b00] mr-3"></span> ISO 45001 / CE</div>
</div>
</div>
</div>
<!-- 下半部：Tier-1 全球供应链联盟 (全宽横向跑马灯版) -->
<div data-aos="fade-up" class="hover-trigger group bg-gradient-to-b from-[#0a110e] to-black border border-white/5 rounded-[2rem] p-10 md:p-14 relative overflow-hidden flex flex-col">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[60%] h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent pointer-events-none"></div>
<!-- 联盟说明文字 -->
<div class="flex flex-col md:flex-row md:items-end justify-between mb-12 border-b border-white/10 pb-8 gap-6 pointer-events-none">
<div class="max-w-xl">
<!-- hub -> &#xe9f4; -->
<span class="material-symbols-outlined text-white/30 text-3xl mb-4 block">&#xe9f4;</span>
<h4 class="text-2xl md:text-3xl text-white mb-3">Tier-1 Ecosystem</h4>
<p class="text-slate-400 text-sm leading-relaxed relative z-10">Forging Strategic Alliances with Global Leaders in PV manufacturing and inverter technology, backed by our <span id="dynamic-years" class="text-white font-mono mx-1 border-b border-primary/50"></span>years of industry expertise, ensuring lifecycle performance and uncompromised safety.</p>
</div>
<div class="text-left md:text-right shrink-0">
<div class="text-sm font-mono text-white ">100%</div>
<div class="text-[10px] text-slate-500 uppercase tracking-widest mt-1">Authentic Component Sourcing</div>
</div>
</div>
<!-- 核心更新：横向无缝跑马灯容器 (绝对等宽版) -->
<div data-no-translation class="marquee-container relative w-full overflow-hidden mask-edges-x py-2 cursor-default">
<!-- 去除了 gap-x-6，改用 CSS 控制间距以保证总体宽度的绝对数学精度 -->
<div class="animate-marquee-x">
<!-- ================= 第一组名单 (9个品牌) ================= -->
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">LONGi</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">JA Solar</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-[#ff6b00]/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Trina Solar</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Huawei</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-[#ff6b00]/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Sungrow</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-400 pointer-events-none">Ginlong</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-400 pointer-events-none">Chint</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-400 pointer-events-none">GoodWe</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-400 pointer-events-none">Deye</span>
</div>
<!-- ================= 第二组名单 (完美复制，保证衔接不跳帧) ================= -->
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">LONGi</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">JA Solar</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-[#ff6b00]/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Trina Solar</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Huawei</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-[#ff6b00]/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Sungrow</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-400 pointer-events-none">Ginlong</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-400 pointer-events-none">Chint</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-400 pointer-events-none">GoodWe</span>
</div>
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-400 pointer-events-none">Deye</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 6. 标杆案例 (双轨 Swiper) -->
<section id="cases" class="py-32 bg-[#060c09] overflow-hidden relative">
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/5 blur-[150px] pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-[#ff6b00]/5 blur-[150px] pointer-events-none"></div>
<div class="container mx-auto px-6 relative z-10">
<div class="text-center mb-20" data-aos="fade-up">
<div class="text-primary font-mono text-sm tracking-widest mb-4 uppercase flex justify-center items-center inline-block px-3 py-1 rounded-full">Success Stories</div>
<h3 class="text-4xl md:text-[2.66rem] text-white ">Our Portfolio</h3>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16">
<!-- ================= 左侧：EPC 轨道 (绿色系) ================= -->
<div data-aos="fade-right">
<div class="flex items-center justify-between mb-6 border-b border-white/10 pb-4">
<div class="flex items-center">
<!-- engineering -> &#xea3d; -->
<span class="material-symbols-outlined text-primary text-3xl mr-3">&#xea3d;</span>
<h4 class="text-3xl text-white">Turnkey EPC</h4>
</div>
<div class="flex space-x-2 relative z-50">
<!-- arrow_back -> &#xe5c4; -->
<button id="epc-btn-prev" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-white hover:border-primary hover:text-primary transition-colors cursor-pointer hover-trigger"><span class="material-symbols-outlined text-sm pointer-events-none">&#xe5c4;</span></button>
<!-- arrow_forward -> &#xe5c8; -->
<button id="epc-btn-next" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-white hover:border-primary hover:text-primary transition-colors cursor-pointer hover-trigger"><span class="material-symbols-outlined text-sm pointer-events-none">&#xe5c8;</span></button>
</div>
</div>
<div class="swiper epc-swiper rounded-[2rem] overflow-hidden shadow-bento-dark h-[450px]">
<div class="swiper-wrapper">
<!-- EPC Case 1 -->
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing">
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_epc5.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
</div>
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start">
<span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Wind Power</span>
<!-- location_on -> &#xe0c8; -->
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Yulin, CN</span> -->
</div>
<div class="mb-6">
<h3 class="text-2xl text-white mb-3 group-hover:text-primary transition-colors leading-tight line-clamp-2 drop-shadow-lg">Yulin’s Wind Frontier: A Global Benchmark</h3>
<p class="text-slate-200 text-sm mb-6 max-w-md line-clamp-3 drop-shadow-md">Proven technical architectures seamlessly aligned with national energy policies to ensure rapid, high-yield grid integration.</p>
<div class="flex space-x-6 border-t border-white/30 pt-4">
<div><div class="text-2xl font-mono text-white drop-shadow-md">100<span class="text-primary text-sm ml-1">MW</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Capacity</div></div>
<div><div class="text-2xl font-mono text-white drop-shadow-md">280<span class="text-primary text-sm ml-1">Days</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Commencement to Grid</div></div>
</div>
</div>
</div>
</div>
<!-- EPC Case 2 -->
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing">
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_epc6.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
</div>
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start">
<span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Dual-Axis Solar</span>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Southwest, CN</span> -->
</div>
<div class="mb-6">
<h3 class="text-2xl text-white mb-3 group-hover:text-primary transition-colors leading-tight line-clamp-2 drop-shadow-lg">The Solar Sentinel</h3>
<p class="text-slate-200 text-sm mb-6 max-w-md line-clamp-3 drop-shadow-md">Pioneering dual-axis tracking and high-concentration technology, maximizing energy yields across Southwest China’s largest solar landscape.</p>
<div class="flex space-x-6 border-t border-white/30 pt-4">
<div><div class="text-2xl font-mono text-white drop-shadow-md">50<span class="text-primary text-sm ml-1">MWp</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Capacity</div></div>
<div><div class="text-2xl font-mono text-white drop-shadow-md">210<span class="text-primary text-sm ml-1">Days</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Commencement to Grid</div></div>
</div>
</div>
</div>
</div>
<!-- EPC Case 3 -->
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing">
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_epc.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
</div>
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start">
<span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Grid Integration</span>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Regional, CN</span> -->
</div>
<div class="mb-6">
<h3 class="text-2xl text-white mb-3 group-hover:text-primary transition-colors leading-tight line-clamp-2 drop-shadow-lg">The Grid-Ready Blueprint</h3>
<p class="text-slate-200 text-sm mb-6 max-w-md line-clamp-3 drop-shadow-md">Optimized 110kV substation and localized 35kV collection lines ensuring ultra-fast, seamless connection to the regional power grid.</p>
<div class="flex space-x-6 border-t border-white/30 pt-4">
<div><div class="text-2xl font-mono text-white drop-shadow-md">40<span class="text-primary text-sm ml-1">MW</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Capacity</div></div>
<div><div class="text-2xl font-mono text-white drop-shadow-md">180<span class="text-primary text-sm ml-1">Days</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Commencement to Grid</div></div>
</div>
</div>
</div>
</div>
<!-- EPC Case 4 -->
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing">
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_epc1.png')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
</div>
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start">
<span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Agrivoltaics</span>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Terrain, CN</span> -->
</div>
<div class="mb-6">
<h3 class="text-2xl text-white mb-3 group-hover:text-primary transition-colors leading-tight line-clamp-2 drop-shadow-lg">The Green Synergy Blueprint</h3>
<p class="text-slate-200 text-sm mb-6 max-w-md line-clamp-3 drop-shadow-md">Customized panel height and irrigation-friendly design with optimized electrical safety to harmonize solar and agriculture.</p>
<div class="flex space-x-6 border-t border-white/30 pt-4">
<div><div class="text-2xl font-mono text-white drop-shadow-md">70<span class="text-primary text-sm ml-1">MWp</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Capacity</div></div>
<div><div class="text-2xl font-mono text-white drop-shadow-md">245<span class="text-primary text-sm ml-1">Days</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Commencement to Grid</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination epc-pagination z-30"></div>
</div>
</div>
<!-- ================= 右侧：EMC 轨道 (橙色系) ================= -->
<div data-aos="fade-left" data-aos-delay="100">
<div class="flex items-center justify-between mb-6 border-b border-white/10 pb-4">
<div class="flex items-center">
<!-- handshake -> &#xebcb; -->
<span class="material-symbols-outlined text-[#ff6b00] text-3xl mr-3">&#xebcb;</span>
<h4 class="text-3xl text-white">EMC/PPA Contracts</h4>
</div>
<div class="flex space-x-2 relative z-50">
<!-- arrow_back -> &#xe5c4; -->
<button id="emc-btn-prev" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-white hover:border-[#ff6b00] hover:text-[#ff6b00] transition-colors cursor-pointer hover-trigger hover-emc"><span class="material-symbols-outlined text-sm pointer-events-none">&#xe5c4;</span></button>
<!-- arrow_forward -> &#xe5c8; -->
<button id="emc-btn-next" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-white hover:border-[#ff6b00] hover:text-[#ff6b00] transition-colors cursor-pointer hover-trigger hover-emc"><span class="material-symbols-outlined text-sm pointer-events-none">&#xe5c8;</span></button>
</div>
</div>
<div class="swiper emc-swiper rounded-[2rem] overflow-hidden shadow-[0_30px_60px_-15px_rgba(0,0,0,0.5)] h-[450px]">
<div class="swiper-wrapper">
<!-- EMC Case 1 -->
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing">
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_emc2.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent"></div>
</div>
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start">
<span class="px-4 py-1.5 bg-[#ff6b00] text-white text-[10px] rounded-full uppercase tracking-wider shadow-[0_0_10px_rgba(255,107,0,0.5)]">Industrial Park</span>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Zhuhai, CN</span> -->
</div>
<div class="mb-5">
<h3 class="text-2xl text-white mb-2 group-hover:text-[#ff6b00] transition-colors leading-tight line-clamp-2 drop-shadow-lg">10MWp Distributed Solar PV Empowerment</h3>
<p class="text-slate-200 text-sm mb-4 line-clamp-2 drop-shadow-md">Optimizing industrial energy efficiency through a seamless 10MWp solar integration, slashing carbon footprints.</p>
<div class="space-y-3 border-t border-white/20 pt-3">
<div class="flex items-center justify-between">
<span class="text-[11px] text-slate-300 uppercase tracking-wider ">CAPEX Est.</span>
<span class="text-sm font-mono text-white drop-shadow-md">$6.5M - $7.2M</span>
</div>
<div class="flex items-center justify-between">
<span class="text-[11px] text-[#ff6b00] uppercase tracking-wider ">Energy Optimization</span>
<span class="text-sm font-mono text-[#ff6b00] drop-shadow-md">$450k - $600k / Yr</span>
</div>
</div>
</div>
</div>
</div>
<!-- EMC Case 2 -->
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing">
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_emc3.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent"></div>
</div>
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start">
<span class="px-4 py-1.5 bg-[#ff6b00] text-white text-[10px] rounded-full uppercase tracking-wider shadow-[0_0_10px_rgba(255,107,0,0.5)]">Tier-1 Hub</span>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> B7 Mfg, CN</span> -->
</div>
<div class="mb-5">
<h3 class="text-2xl text-white mb-2 group-hover:text-[#ff6b00] transition-colors leading-tight line-clamp-2 drop-shadow-lg">5.2MWp High-Efficiency PV System</h3>
<p class="text-slate-200 text-sm mb-4 line-clamp-2 drop-shadow-md">Empowering a global Tier-1 manufacturer with sustainable energy, ensuring significant carbon reduction.</p>
<div class="space-y-3 border-t border-white/20 pt-3">
<div class="flex items-center justify-between">
<span class="text-[11px] text-slate-300 uppercase tracking-wider ">Client CAPEX</span>
<span class="text-sm font-mono text-white drop-shadow-md">$3.6M <span class="text-xs text-slate-400 font-sans font-normal">(Fully Funded)</span></span>
</div>
<div class="flex items-center justify-between">
<span class="text-[11px] text-[#ff6b00] uppercase tracking-wider ">Energy Optimization</span>
<span class="text-sm font-mono text-[#ff6b00] drop-shadow-md">15% - 20% <span class="text-xs text-[#ff6b00]/70 font-sans font-normal">Annual Savings</span></span>
</div>
</div>
</div>
</div>
</div>
<!-- EMC Case 3 -->
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing">
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_emc1.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent"></div>
</div>
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start">
<span class="px-4 py-1.5 bg-[#ff6b00] text-white text-[10px] rounded-full uppercase tracking-wider shadow-[0_0_10px_rgba(255,107,0,0.5)]">Logistics Park</span>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Xinfei, CN</span> -->
</div>
<div class="mb-5">
<h3 class="text-2xl text-white mb-2 group-hover:text-[#ff6b00] transition-colors leading-tight line-clamp-2 drop-shadow-lg">4.99MWp Rooftop PV Project</h3>
<p class="text-slate-200 text-sm mb-4 line-clamp-2 drop-shadow-md">Transforming expansive logistics rooftops into high-yield green assets for modern industrial infrastructure.</p>
<div class="space-y-3 border-t border-white/20 pt-3">
<div class="flex items-center justify-between">
<span class="text-[11px] text-slate-300 uppercase tracking-wider ">Client CAPEX</span>
<span class="text-sm font-mono text-white drop-shadow-md">$3.2M <span class="text-xs text-slate-400 font-sans font-normal">(Zero Upfront)</span></span>
</div>
<div class="flex items-center justify-between">
<span class="text-[11px] text-[#ff6b00] uppercase tracking-wider ">Energy Optimization</span>
<span class="text-sm font-mono text-[#ff6b00] drop-shadow-md">12% - 18% <span class="text-xs text-[#ff6b00]/70 font-sans font-normal">Annual Discount</span></span>
</div>
</div>
</div>
</div>
</div>
<!-- EMC Case 4 -->
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing">
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_emc4.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent"></div>
</div>
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start">
<span class="px-4 py-1.5 bg-[#ff6b00] text-white text-[10px] rounded-full uppercase tracking-wider shadow-[0_0_10px_rgba(255,107,0,0.5)]">Manufacturing</span>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Cheng-Ou, CN</span> -->
</div>
<div class="mb-5">
<h3 class="text-2xl text-white mb-2 group-hover:text-[#ff6b00] transition-colors leading-tight line-clamp-2 drop-shadow-lg">5.86MWp Integrated PV Solution</h3>
<p class="text-slate-200 text-sm mb-4 line-clamp-2 drop-shadow-md">Driving sustainable manufacturing with a high-capacity solar array, significantly lowering energy overheads.</p>
<div class="space-y-3 border-t border-white/20 pt-3">
<div class="flex items-center justify-between">
<span class="text-[11px] text-slate-300 uppercase tracking-wider ">Client CAPEX</span>
<span class="text-sm font-mono text-white drop-shadow-md">$4.1M <span class="text-xs text-slate-400 font-sans font-normal">(Zero Upfront)</span></span>
</div>
<div class="flex items-center justify-between">
<span class="text-[11px] text-[#ff6b00] uppercase tracking-wider ">Energy Optimization</span>
<span class="text-sm font-mono text-[#ff6b00] drop-shadow-md">15% - 22% <span class="text-xs text-[#ff6b00]/70 font-sans font-normal">Annual Reduction</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination emc-pagination z-30"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 行动呼吁 -->
<section id="contact" class="py-24 relative bg-[#0a1410]">
<div class="container mx-auto px-6 text-center z-10 relative" data-aos="zoom-in">
<h2 class="text-4xl md:text-[2.66rem] text-white mb-8">Ready to Decarbonize?</h2>
<p class="text-[1rem] text-slate-400 mb-10 max-w-2xl mx-auto">Whether you are looking for a Turnkey EPC build or a Zero-CAPEX EMC/PPA partnership, our engineering teams are ready to assess your site.</p>
<div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
<a href="/contact-us" class="magnetic-btn hover-trigger bg-primary text-black px-12 py-5 rounded-full text-lg hover:shadow-[0_0_40px_rgba(19,236,164,0.4)] transition-all flex items-center justify-center">
<!-- description -> &#xe873; -->
<span class="material-symbols-outlined mr-2 pointer-events-none">&#xe873;</span> <span class="pointer-events-none">Connect with Local Experts</span>
</a>
<!-- <button class="magnetic-btn hover-trigger hover-emc bg-transparent border border-white/20 text-white px-12 py-5 rounded-full text-lg hover:border-[#ff6b00] hover:text-[#ff6b00] transition-all">
<span class="pointer-events-none">Become a Channel Partner</span>
</button> -->
</div>
</div>
</section>
<!-- ================= 核心依赖与高级 JS 交互引擎 ================= -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
<!-- 引入 Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 动态计算公司成立年份 (从 2009 年起算)
const calculateYearsOfExperience = () => {
const startYear = 2009;
const currentYear = new Date().getFullYear();
const yearsOfExperience = currentYear - startYear;
const yearElement = document.getElementById('dynamic-years');
if (yearElement) {
yearElement.textContent = yearsOfExperience + "+ ";
}
};
calculateYearsOfExperience();
// 1. 初始化 AOS & Tilt
if(typeof AOS !== 'undefined') AOS.init({ duration: 800, once: true, offset: 50 });
if(typeof VanillaTilt !== 'undefined') VanillaTilt.init(document.querySelectorAll("[data-tilt]"), { max: 5, speed: 400, glare: true, "max-glare": 0.05, scale: 1.02 });
// 2. 双轨流程切换交互 (Tab Workflows)
const btnEpc = document.getElementById('btn-epc');
const btnEmc = document.getElementById('btn-emc');
const contentEpc = document.getElementById('content-epc');
const contentEmc = document.getElementById('content-emc');
const slider = document.getElementById('tab-slider');
const switchTab = (tab) => {
if (tab === 'epc') {
btnEpc.classList.add('text-black');
btnEpc.classList.remove('text-slate-400');
btnEmc.classList.remove('text-black');
btnEmc.classList.add('text-slate-400');
slider.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)';
slider.style.transform = 'translateX(0)';
slider.style.backgroundColor = '#13eca4';
contentEmc.classList.remove('active');
contentEpc.classList.add('active');
} else {
btnEmc.classList.add('text-black');
btnEmc.classList.remove('text-slate-400');
btnEpc.classList.remove('text-black');
btnEpc.classList.add('text-slate-400');
slider.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)';
slider.style.transform = 'translateX(100%)';
slider.style.backgroundColor = '#ff6b00';
contentEpc.classList.remove('active');
contentEmc.classList.add('active');
}
};
if(btnEpc) btnEpc.addEventListener('click', () => switchTab('epc'));
if(btnEmc) btnEmc.addEventListener('click', () => switchTab('emc'));
// 3. 导航栏滚效 (虽然 HTML 移除了，但保留 JS 防报错)
const nav = document.getElementById('main-nav');
if(nav) {
window.addEventListener('scroll', () => {
if(window.scrollY > 50) {
nav.classList.add('bg-background-dark/80', 'backdrop-blur-xl', 'py-4', 'border-white/5');
nav.classList.remove('bg-transparent', 'py-6', 'border-transparent');
} else {
nav.classList.remove('bg-background-dark/80', 'backdrop-blur-xl', 'py-4', 'border-white/5');
nav.classList.add('bg-transparent', 'py-6', 'border-transparent');
}
});
}
// 4. 自定义光标
const cursor = document.getElementById('energy-cursor');
const hoverTriggers = document.querySelectorAll('a, button, .hover-trigger');
if (window.innerWidth > 768 && cursor) {
document.addEventListener('mousemove', (e) => {
requestAnimationFrame(() => {
cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
});
});
hoverTriggers.forEach(el => {
el.addEventListener('mouseenter', () => {
if(el.classList.contains('hover-emc')) cursor.classList.add('active-emc');
else cursor.classList.add('active');
});
el.addEventListener('mouseleave', () => cursor.classList.remove('active', 'active-emc'));
});
}
// 5. 磁性按钮
const magneticBtns = document.querySelectorAll('.magnetic-btn');
magneticBtns.forEach(btn => {
btn.addEventListener('mousemove', (e) => {
const rect = btn.getBoundingClientRect();
const x = (e.clientX - rect.left - rect.width / 2) * 0.3;
const y = (e.clientY - rect.top - rect.height / 2) * 0.3;
btn.style.transform = `translate(${x}px, ${y}px)`;
});
btn.addEventListener('mouseleave', () => {
btn.style.transform = `translate(0px, 0px)`;
btn.style.transition = `transform 0.5s ease-out`;
});
btn.addEventListener('mouseenter', () => btn.style.transition = `none`);
});
// 6. 视差背景
const parallaxContainer = document.querySelector('.parallax-container');
const parallaxBgs = document.querySelectorAll('.parallax-bg');
if (parallaxContainer && window.innerWidth > 768) {
parallaxContainer.addEventListener('mousemove', (e) => {
const x = (e.clientX - window.innerWidth / 2);
const y = (e.clientY - window.innerHeight / 2);
parallaxBgs.forEach(bg => {
const speed = bg.getAttribute('data-speed');
bg.style.transform = `translate(${x * speed}px, ${y * speed}px)`;
});
});
}
// 7. 滚动数字
const counters = document.querySelectorAll('.count-up');
const counterSection = document.getElementById('counter-section');
let started = false;
const runCounter = () => {
counters.forEach(counter => {
const target = parseFloat(counter.getAttribute('data-target'));
const isFloat = counter.getAttribute('data-is-float') === 'true';
const totalFrames = Math.round(2000 / (1000 / 60));
let currentFrame = 0;
const updateCounter = () => {
currentFrame++;
const progress = currentFrame / totalFrames === 1 ? 1 : 1 - Math.pow(2, -10 * (currentFrame / totalFrames));
const currentVal = target * progress;
counter.innerText = isFloat ? currentVal.toFixed(1) : Math.floor(currentVal);
if (currentFrame < totalFrames) requestAnimationFrame(updateCounter);
else counter.innerText = target;
};
updateCounter();
});
};
if (counterSection) {
if( 'IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !started) {
started = true; runCounter();
}
}, { threshold: 0.5 });
observer.observe(counterSection);
}
}
// 8. Swiper 左右画中画初始化
if (typeof Swiper !== 'undefined') {
const commonConfig = {
slidesPerView: 1,
loop: true,
effect: 'fade',
fadeEffect: { crossFade: true },
speed: 800,
grabCursor: true,
};
new Swiper('.epc-swiper', {
...commonConfig,
autoplay: { delay: 4500, disableOnInteraction: false, pauseOnMouseEnter: true },
pagination: { el: ".epc-pagination", clickable: true },
navigation: { nextEl: '#epc-btn-next', prevEl: '#epc-btn-prev' }
});
new Swiper('.emc-swiper', {
...commonConfig,
autoplay: { delay: 5500, disableOnInteraction: false, pauseOnMouseEnter: true },
pagination: { el: ".emc-pagination", clickable: true },
navigation: { nextEl: '#emc-btn-next', prevEl: '#emc-btn-prev' }
});
}
});
</script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink