493 lines
30 KiB
HTML
493 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<!-- 注意：在 WordPress 中不需要 html/head/body 标签，只需保留 script 和内容容器 -->
|
|
<div id="wingsemi-root" class="wingsemi-scope font-inter bg-[#0f172a] !text-gray-200 relative w-full overflow-hidden">
|
|
|
|
<!-- 引入 Tailwind 和 字体 -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
//以此 id 为前缀，避免污染 WordPress 其他样式
|
|
important: '#wingsemi-root',
|
|
theme: {
|
|
screens: {
|
|
'tablet': '1024px',
|
|
'sm': '640px',
|
|
'md': '768px',
|
|
'lg': '1280px',
|
|
'xl': '1536px',
|
|
},
|
|
extend: {
|
|
colors: {
|
|
primary: '#3b82f6',
|
|
secondary: '#0E42D2',
|
|
accent: '#69b1ff',
|
|
dark: '#0f172a',
|
|
light: '#f8fafc',
|
|
darkBg: '#1e293b',
|
|
darkerBg: '#0f172a',
|
|
darkCard: '#334155',
|
|
brandBlue: '#2563EB',
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.text-shadow {
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
.animate-fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
|
}
|
|
.animate-fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.card-hover {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.bar-animate {
|
|
transition: height 1.5s ease-out;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div id="wingsemi-wrapper">
|
|
<main class="flex-1">
|
|
<!-- 头部 Hero Section -->
|
|
<section class="relative pt-20 md:pt-32 pb-20 overflow-hidden bg-[#1e293b]">
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0 opacity-20 pointer-events-none">
|
|
<div class="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-primary blur-3xl"></div>
|
|
<div class="absolute top-1/2 -left-24 w-72 h-72 rounded-full bg-secondary blur-3xl"></div>
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
|
|
<div class="max-w-5xl mx-auto text-center">
|
|
<h1
|
|
class="text-4xl md:text-5xl lg:text-6xl font-bold !text-white leading-tight mb-8 text-shadow animate-fade-in">
|
|
代码密度增强技术
|
|
</h1>
|
|
<div
|
|
class="inline-block px-4 py-1.5 rounded-full bg-primary/20 border border-primary/30 !text-primary font-semibold text-xl mb-6 animate-fade-in">
|
|
超越行业标杆 ARM 的技术突破
|
|
</div>
|
|
<p
|
|
class="text-lg md:text-xl !text-gray-300 mb-10 max-w-3xl mx-auto leading-relaxed animate-fade-in">
|
|
针对 RISC-V 指令集特性深度优化，通过 Xwingc 扩展指令集、WingGCC 编译器及 WingLib 基础库的全栈协同，显著降低内存占用与芯片成本，实现超越 ARM
|
|
的代码密度表现。
|
|
</p>
|
|
|
|
<!-- 核心指标 -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 animate-fade-in">
|
|
<div class="bg-darkCard/50 backdrop-blur-sm p-4 rounded-lg border border-gray-700">
|
|
<div class="text-3xl font-bold !text-primary mb-1">30%</div>
|
|
<div class="text-xs !text-gray-400">代码空间节省</div>
|
|
</div>
|
|
<div class="bg-darkCard/50 backdrop-blur-sm p-4 rounded-lg border border-gray-700">
|
|
<div class="text-3xl font-bold !text-primary mb-1">5-20%</div>
|
|
<div class="text-xs !text-gray-400">库体积优于竞品</div>
|
|
</div>
|
|
<div class="bg-darkCard/50 backdrop-blur-sm p-4 rounded-lg border border-gray-700">
|
|
<div class="text-3xl font-bold !text-primary mb-1">Xwingc</div>
|
|
<div class="text-xs !text-gray-400">自主研发扩展</div>
|
|
</div>
|
|
<div class="bg-darkCard/50 backdrop-blur-sm p-4 rounded-lg border border-gray-700">
|
|
<div class="text-3xl font-bold !text-primary mb-1">WingGCC</div>
|
|
<div class="text-xs !text-gray-400">深度定制编译器</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 背景痛点 -->
|
|
<section class="py-16 bg-[#0f172a] border-b border-gray-800">
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
|
<div class="max-w-4xl mx-auto mb-12 text-center">
|
|
<h2 class="text-3xl font-bold !text-white mb-4">技术背景与挑战</h2>
|
|
<div class="w-20 h-1 bg-primary mx-auto"></div>
|
|
</div>
|
|
|
|
<div class="bg-darkCard/30 rounded-2xl p-8 md:p-12 border border-gray-700 animate-fade-in">
|
|
<div class="flex flex-col lg:flex-row items-center gap-12">
|
|
<div class="lg:w-1/2">
|
|
<h3 class="text-2xl font-bold !text-white mb-4">RISC-V 的双刃剑</h3>
|
|
<p class="!text-gray-300 mb-6 leading-relaxed">
|
|
RISC-V 指令集以精简闻名，但在处理相同任务时，相较于 ARM 往往需要执行更多条指令。这种特性导致了<span
|
|
class="!text-primary font-semibold">代码密度较低</span>，进而要求更大的片上内存（Memory），最终导致芯片成本的增加。
|
|
</p>
|
|
<div class="flex flex-col space-y-2 text-sm !text-gray-400">
|
|
<div class="flex items-center"><span
|
|
class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>更多指令需求</div>
|
|
<div class="flex items-center"><span
|
|
class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>更高内存占用</div>
|
|
<div class="flex items-center"><span
|
|
class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>更高硬件成本</div>
|
|
</div>
|
|
</div>
|
|
<!-- 示意图模拟 -->
|
|
<div class="lg:w-1/2 w-full">
|
|
<div class="bg-darkBg p-6 rounded-xl border border-gray-700 relative">
|
|
<div
|
|
class="absolute -top-3 -right-3 bg-red-500 !text-white text-xs px-3 py-1 rounded-full">
|
|
高成本痛点</div>
|
|
<div class="grid grid-cols-2 gap-4 text-center">
|
|
<div class="space-y-2">
|
|
<div
|
|
class="h-24 bg-gray-700 rounded flex items-center justify-center !text-gray-400">
|
|
CPU</div>
|
|
<div
|
|
class="h-32 bg-gray-700/50 rounded flex items-center justify-center !text-gray-500 border-2 border-dashed border-gray-600">
|
|
Memory
|
|
</div>
|
|
<p class="text-sm !text-gray-400">普通 RISC-V</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div
|
|
class="h-24 bg-primary/20 border border-primary/50 rounded flex items-center justify-center !text-primary">
|
|
Wing CPU</div>
|
|
<div
|
|
class="h-20 bg-primary/10 border border-primary/30 rounded flex items-center justify-center !text-primary font-bold">
|
|
优化后 Memory
|
|
</div>
|
|
<p class="text-sm !text-primary">隼瞻方案</p>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-center text-sm !text-gray-400">通过提高代码密度，显著减少对 Memory 的需求，降低
|
|
Memory 面积与成本。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 四大技术手段 -->
|
|
<section class="py-20 bg-[#1e293b]">
|
|
<div class="container mx-auto px-4">
|
|
<div class="max-w-4xl mx-auto mb-16 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-bold !text-white mb-6">四大技术手段</h2>
|
|
<p class="!text-gray-400">全栈式优化策略，从指令集到工具链</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<!-- 01 压缩指令 -->
|
|
<div
|
|
class="bg-darkCard rounded-xl p-6 border-t-4 border-primary card-hover animate-fade-in group">
|
|
<div
|
|
class="text-4xl font-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
|
|
01</div>
|
|
<h3 class="text-xl font-bold !text-white mb-3">压缩指令</h3>
|
|
<p class="!text-gray-400 text-sm leading-relaxed mb-4">
|
|
对 RISC-V 社区的 <span class="!text-primary">B 扩展、Zc 扩展、Zicond</span>
|
|
等一系列标准扩展提供了有效支持，并进行了进一步优化。
|
|
</p>
|
|
<!-- 触发弹窗按钮 -->
|
|
<button onclick="openModal()"
|
|
class="flex items-center text-sm !text-primary hover:!text-accent transition-colors font-medium cursor-pointer">
|
|
<i class="fa fa-bar-chart mr-2"></i> 查看对比
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 02 Xwingc 扩展 -->
|
|
<div class="bg-darkCard rounded-xl p-6 border-t-4 border-primary card-hover animate-fade-in group"
|
|
style="transition-delay: 100ms;">
|
|
<div
|
|
class="text-4xl font-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
|
|
02</div>
|
|
<h3 class="text-xl font-bold !text-white mb-3">Xwingc 扩展指令集</h3>
|
|
<p class="!text-gray-400 text-sm leading-relaxed mb-4">
|
|
支持将自主研发的<span class="!text-white font-semibold">代码密度增强指令 Xwingc 扩展</span>加入到处理器核中。
|
|
</p>
|
|
<div class="bg-darkerBg p-3 rounded text-xs !text-gray-300 border border-gray-700">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span>Arm: </span> <span class="font-mono bg-gray-800 px-1 rounded">ldr r0, [r0, r1,
|
|
lsl #2]</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span>传统RISC-V指令: </span> <span class="font-mono bg-gray-800 px-1 rounded">sll a1,
|
|
a1, 2; add aO,</br> a1; lw a0, O(a0)</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="!text-primary">Wing Xc:</span> <span
|
|
class="font-mono bg-primary/20 px-1 rounded !text-primary">lwr a0, a1(a0)</span>
|
|
</div>
|
|
<div class="mt-2 text-[10px] text-center !text-gray-500">一条指令完成多条操作，无需额外寄存器分配</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 03 WingGCC 编译器 -->
|
|
<div class="bg-darkCard rounded-xl p-6 border-t-4 border-primary card-hover animate-fade-in group"
|
|
style="transition-delay: 200ms;">
|
|
<div
|
|
class="text-4xl font-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
|
|
03</div>
|
|
<h3 class="text-xl font-bold !text-white mb-3">WingGCC 编译器</h3>
|
|
<p class="!text-gray-400 text-sm leading-relaxed">
|
|
解决了 GCC 领域针对性不强的问题。完整匹配各种标准扩展指令和隼瞻自定义扩展指令，同时适配隼瞻<span
|
|
class="!text-primary">专用高效微架构</span>，充分发挥性能。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 04 WingLib 基础库 -->
|
|
<div class="bg-darkCard rounded-xl p-6 border-t-4 border-primary card-hover animate-fade-in group"
|
|
style="transition-delay: 300ms;">
|
|
<div
|
|
class="text-4xl font-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
|
|
04</div>
|
|
<h3 class="text-xl font-bold !text-white mb-3">WingLib 基础库</h3>
|
|
<ul class="!text-gray-400 text-sm space-y-2 list-disc pl-4">
|
|
<li>提供标准C库和数学库，专为 code size 和速度优化，优于竞品 <span
|
|
class="!text-white font-bold">5%~20%</span>。</li>
|
|
<li>提供优化的 DSP 库，结合 DSA 技术，性能达竞品数倍。</li>
|
|
<li>提供优化的第三方中间件。</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 优化成果数据 -->
|
|
<section class="py-20 bg-[#0f172a]">
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
|
<!-- 改为 items-stretch 和 justify-between，并增加 gap 以确保中间留空 -->
|
|
<div class="flex flex-col md:flex-row items-stretch justify-between gap-12 lg:gap-16">
|
|
|
|
<!-- 左边文字放在容器样式里 -->
|
|
<div
|
|
class="md:w-[45%] w-full bg-darkCard/20 p-8 md:p-10 rounded-2xl border border-gray-800 animate-fade-in flex flex-col shadow-lg relative overflow-hidden group">
|
|
<!-- 装饰光效 -->
|
|
<div
|
|
class="absolute -top-24 -left-24 w-64 h-64 bg-primary/10 rounded-full blur-3xl group-hover:bg-primary/20 transition-all duration-500 pointer-events-none">
|
|
</div>
|
|
|
|
<h2 class="text-3xl font-bold !text-white mb-6 relative z-10 flex items-center">
|
|
<span
|
|
class="w-1.5 h-8 bg-primary rounded-full mr-4 inline-block shadow-[0_0_10px_rgba(59,130,246,0.8)]"></span>
|
|
极致的密度优化
|
|
</h2>
|
|
<p class="!text-gray-300 mb-8 leading-relaxed text-lg relative z-10">
|
|
我们的优化路径清晰可见。从基础 GCC 出发，叠加 Zc/Zicond 扩展，再引入 Wing 独有的代码密度增强技术，最终实现大幅度的空间节省。
|
|
</p>
|
|
|
|
<!-- 底部信息同样放在深色容器内，增加对比度 -->
|
|
<div
|
|
class="mt-auto p-5 bg-[#1e293b]/80 backdrop-blur-sm border border-gray-700/50 rounded-xl relative z-10 shadow-inner group-hover:border-primary/30 transition-colors">
|
|
<p class="text-sm !text-primary flex items-start sm:items-center">
|
|
<i class="fa fa-info-circle mr-3 mt-1 sm:mt-0 text-lg"></i>
|
|
<span class="leading-snug">基于 Wing-M130, Wing IDE v1.0, embench 测试案例</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 柱状图部分 -->
|
|
<div
|
|
class="md:w-[50%] w-full bg-darkCard/20 p-8 md:p-10 rounded-2xl border border-gray-800 animate-fade-in relative z-10 shadow-lg">
|
|
<h3
|
|
class="text-xl font-semibold !text-white mb-8 flex flex-col sm:flex-row sm:items-end gap-2">
|
|
<span>代码密度百分比</span>
|
|
<span class="text-sm font-normal !text-gray-400">(数值越小越好)</span>
|
|
</h3>
|
|
|
|
<!-- 柱状图容器 -->
|
|
<div id="chart-container"
|
|
class="flex items-end justify-between space-x-2 md:space-x-4 pb-2 border-b border-gray-600"
|
|
style="height: 280px;">
|
|
<!-- Bar 1: GCC 100% -->
|
|
<div class="flex-1 flex flex-col items-center h-full group">
|
|
<div class="flex-1 w-full flex items-end justify-center">
|
|
<!-- 修改宽度使柱体变细 w-12 -->
|
|
<div class="w-10 sm:w-12 md:w-16 bg-blue-900/30 rounded-t-xl relative overflow-hidden transform group-hover:scale-x-105 transition-transform"
|
|
style="height: 100%;">
|
|
<div class="absolute bottom-0 w-full bg-secondary bar-animate shadow-[0_-5px_15px_rgba(14,66,210,0.3)]"
|
|
data-height="100" style="height: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mt-4 text-center flex-shrink-0 transition-transform group-hover:-translate-y-1">
|
|
<div class="!text-white font-bold text-lg">100%</div>
|
|
<div class="text-xs !text-gray-400 mt-1 font-medium">GCC</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bar 2: Zc/Zicond 80% -->
|
|
<div class="flex-1 flex flex-col items-center h-full group">
|
|
<div class="flex-1 w-full flex items-end justify-center">
|
|
<div class="w-10 sm:w-12 md:w-16 bg-blue-900/30 rounded-t-xl relative overflow-hidden transform group-hover:scale-x-105 transition-transform"
|
|
style="height: 100%;">
|
|
<div class="absolute bottom-0 w-full bg-blue-600 bar-animate shadow-[0_-5px_15px_rgba(37,99,235,0.3)]"
|
|
data-height="80" style="height: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mt-4 text-center flex-shrink-0 transition-transform group-hover:-translate-y-1">
|
|
<div class="!text-white font-bold text-lg">80%</div>
|
|
<div
|
|
class="text-xs !text-gray-400 mt-1 font-medium bg-darkCard/50 px-2 py-0.5 rounded-full inline-block">
|
|
Zc/Zicond Ext</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bar 3: Wing Code Density 75% -->
|
|
<div class="flex-1 flex flex-col items-center h-full group">
|
|
<div class="flex-1 w-full flex items-end justify-center">
|
|
<div class="w-10 sm:w-12 md:w-16 bg-blue-900/30 rounded-t-xl relative overflow-hidden transform group-hover:scale-x-105 transition-transform"
|
|
style="height: 100%;">
|
|
<div class="absolute bottom-0 w-full bg-blue-500 bar-animate shadow-[0_-5px_15px_rgba(59,130,246,0.4)]"
|
|
data-height="75" style="height: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mt-4 text-center flex-shrink-0 transition-transform group-hover:-translate-y-1">
|
|
<div class="!text-white font-bold text-lg">75%</div>
|
|
<div
|
|
class="text-xs !text-gray-400 mt-1 font-medium bg-darkCard/50 px-2 py-0.5 rounded-full inline-block">
|
|
Wing Code Density</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bar 4: 最终优化 70% -->
|
|
<div class="flex-1 flex flex-col items-center h-full group">
|
|
<div class="flex-1 w-full flex items-end justify-center">
|
|
<div class="w-10 sm:w-12 md:w-16 bg-blue-900/30 rounded-t-xl relative overflow-hidden transform group-hover:scale-x-105 transition-transform"
|
|
style="height: 100%;">
|
|
<div class="absolute bottom-0 w-full bg-gradient-to-t from-primary to-accent bar-animate shadow-[0_-5px_20px_rgba(105,177,255,0.5)]"
|
|
data-height="70" style="height: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mt-4 text-center flex-shrink-0 transition-transform group-hover:-translate-y-1">
|
|
<div
|
|
class="!text-white font-bold text-xl drop-shadow-[0_0_8px_rgba(105,177,255,0.8)] !text-accent">
|
|
70%</div>
|
|
<div
|
|
class="text-sm !text-gray-200 mt-1 font-bold bg-primary/20 border border-primary/30 px-2 py-0.5 rounded-full inline-block">
|
|
最终优化</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 流程箭头指示 -->
|
|
<div
|
|
class="mt-6 flex justify-between items-center text-xs sm:text-sm !text-gray-400 px-1 sm:px-2 pt-2">
|
|
<div class="text-center font-medium">基础编译器</div>
|
|
<div class="text-gray-600"><i class="fa fa-angle-right"></i></div>
|
|
<div class="text-center font-medium">标准扩展</div>
|
|
<div class="text-gray-600"><i class="fa fa-angle-right"></i></div>
|
|
<div class="text-center font-medium">Wing 专有扩展</div>
|
|
<div class="text-gray-600"><i class="fa fa-angle-right"></i></div>
|
|
<div class="text-center font-bold !text-primary">极致密度</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- 图片弹窗 Modal -->
|
|
<div id="imageModal" class="fixed inset-0 z-50 hidden" aria-labelledby="modal-title" role="dialog"
|
|
aria-modal="true">
|
|
<!-- 遮罩层 backdrop -->
|
|
<div class="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity" onclick="closeModal()"></div>
|
|
|
|
<div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0 pointer-events-none">
|
|
<div
|
|
class="relative transform overflow-hidden rounded-lg bg-darkCard text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-4xl pointer-events-auto border border-gray-700">
|
|
<!-- 关闭按钮 -->
|
|
<button onclick="closeModal()"
|
|
class="absolute top-4 right-4 text-gray-400 hover:text-white z-10 bg-black/50 rounded-full w-8 h-8 flex items-center justify-center transition-colors">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
|
|
<!-- 图片内容区 -->
|
|
<div class="p-1 bg-darkCard">
|
|
<!-- 这里 src 替换为您实际的对比图地址 -->
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2025/12/社区贡献2.png"
|
|
alt="Community Contribution Comparison" class="w-full h-auto rounded-md">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Modal 控制脚本
|
|
function openModal() {
|
|
const modal = document.getElementById('imageModal');
|
|
if (modal) {
|
|
modal.classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden'; // 禁止背景滚动
|
|
}
|
|
}
|
|
|
|
function closeModal() {
|
|
const modal = document.getElementById('imageModal');
|
|
if (modal) {
|
|
modal.classList.add('hidden');
|
|
document.body.style.overflow = ''; // 恢复滚动
|
|
}
|
|
}
|
|
|
|
// ESC 键关闭弹窗
|
|
document.addEventListener('keydown', function (event) {
|
|
if (event.key === "Escape") {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// 元素淡入动画
|
|
const animateElements = document.querySelectorAll('.animate-fade-in');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
animateElements.forEach(element => observer.observe(element));
|
|
|
|
// 柱状图动画
|
|
const chartContainer = document.getElementById('chart-container');
|
|
const bars = document.querySelectorAll('.bar-animate');
|
|
let chartAnimated = false;
|
|
|
|
const chartObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && !chartAnimated) {
|
|
chartAnimated = true;
|
|
setTimeout(() => {
|
|
bars.forEach((bar, index) => {
|
|
const targetHeight = bar.getAttribute('data-height');
|
|
setTimeout(() => {
|
|
bar.style.height = targetHeight + '%';
|
|
}, index * 200);
|
|
});
|
|
}, 100);
|
|
}
|
|
});
|
|
}, { threshold: 0.2 });
|
|
|
|
if (chartContainer) {
|
|
chartObserver.observe(chartContainer);
|
|
}
|
|
});
|
|
</script>
|
|
</div> |