509 lines
32 KiB
HTML
509 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<!-- 注意：在 WordPress 中不需要 html/head/body 标签，只需保留 script 和内容容器 -->
|
|
<div id="wingsemi-root" class="wingsemi-scope font-inter bg-slate-50 text-slate-800 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: '#2563eb',
|
|
accent: '#60a5fa',
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.text-shadow {
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.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(59, 130, 246, 0.1);
|
|
}
|
|
.bar-animate {
|
|
transition: height 1.5s ease-out;
|
|
}
|
|
}
|
|
.glass-panel {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.9);
|
|
box-shadow: 0 8px 32px -4px rgba(59, 130, 246, 0.1);
|
|
}
|
|
.glass-panel-light {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 1);
|
|
box-shadow: 0 4px 16px -2px rgba(59, 130, 246, 0.05);
|
|
}
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #8b5cf6 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
</style>
|
|
|
|
<!-- 固定在背景的全局毛玻璃淡蓝光晕 -->
|
|
<div class="fixed inset-0 z-0 pointer-events-none bg-slate-50">
|
|
<div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] rounded-full bg-blue-200/50 blur-[100px]"></div>
|
|
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-sky-200/40 blur-[100px]"></div>
|
|
<div class="absolute top-[40%] right-[10%] w-[30%] h-[30%] rounded-full bg-indigo-100/60 blur-[80px]"></div>
|
|
<div class="absolute bottom-[20%] left-[20%] w-[30%] h-[30%] rounded-full bg-blue-100/50 blur-[80px]"></div>
|
|
</div>
|
|
|
|
<div id="wingsemi-wrapper" class="relative z-10 w-full min-h-screen">
|
|
<main class="flex-1">
|
|
<!-- 头部 Hero Section -->
|
|
<section class="relative pt-20 md:pt-32 pb-20 overflow-hidden">
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[80%] h-64 bg-primary/10 blur-[120px] rounded-full pointer-events-none"></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-extrabold text-slate-800 leading-tight mb-8 text-shadow animate-fade-in drop-shadow-sm">
|
|
代码密度增强技术
|
|
</h1>
|
|
<div
|
|
class="inline-flex items-center space-x-2 px-4 py-1.5 rounded-full glass-panel-light border border-blue-200 mb-6 shadow-sm text-primary font-semibold text-xl animate-fade-in">
|
|
超越行业标杆 ARM 的技术突破
|
|
</div>
|
|
<p class="text-lg md:text-xl text-slate-600 font-medium 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="glass-panel text-slate-800 p-4 rounded-3xl border border-white hover:-translate-y-2 hover:shadow-lg hover:border-blue-200 transition-all">
|
|
<div class="text-3xl font-extrabold text-primary mb-1">30%</div>
|
|
<div class="text-xs text-slate-500 font-bold">代码空间节省</div>
|
|
</div>
|
|
<div class="glass-panel text-slate-800 p-4 rounded-3xl border border-white hover:-translate-y-2 hover:shadow-lg hover:border-blue-200 transition-all">
|
|
<div class="text-3xl font-extrabold text-primary mb-1">5-20%</div>
|
|
<div class="text-xs text-slate-500 font-bold">库体积优于竞品</div>
|
|
</div>
|
|
<div class="glass-panel text-slate-800 p-4 rounded-3xl border border-white hover:-translate-y-2 hover:shadow-lg hover:border-blue-200 transition-all">
|
|
<div class="text-3xl font-extrabold text-primary mb-1">Xwingc</div>
|
|
<div class="text-xs text-slate-500 font-bold">自主研发扩展</div>
|
|
</div>
|
|
<div class="glass-panel text-slate-800 p-4 rounded-3xl border border-white hover:-translate-y-2 hover:shadow-lg hover:border-blue-200 transition-all">
|
|
<div class="text-3xl font-extrabold text-primary mb-1">WingGCC</div>
|
|
<div class="text-xs text-slate-500 font-bold">深度定制编译器</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 背景痛点 -->
|
|
<section class="py-16 bg-slate-50 relative">
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
|
|
<div class="max-w-4xl mx-auto mb-12 text-center">
|
|
<h2 class="text-3xl font-extrabold text-slate-800 mb-4 drop-shadow-sm">技术背景与挑战</h2>
|
|
<div class="w-20 h-1.5 bg-gradient-to-r from-blue-500 to-sky-400 mx-auto rounded-full"></div>
|
|
</div>
|
|
|
|
<div class="glass-panel rounded-3xl p-8 md:p-12 border border-white animate-fade-in shadow-sm hover:shadow-lg transition-shadow">
|
|
<div class="flex flex-col lg:flex-row items-center gap-12">
|
|
<div class="lg:w-1/2">
|
|
<h3 class="text-2xl font-extrabold text-slate-800 mb-4">RISC-V 的双刃剑</h3>
|
|
<p class="text-slate-600 font-medium mb-6 leading-relaxed">
|
|
RISC-V 指令集以精简闻名，但在处理相同任务时，相较于 ARM 往往需要执行更多条指令。这种特性导致了<span
|
|
class="text-blue-600 font-bold bg-blue-50 px-2 py-0.5 rounded">代码密度较低</span>，进而要求更大的片上内存（Memory），最终导致芯片成本的增加。
|
|
</p>
|
|
<div class="flex flex-col space-y-2 text-sm text-slate-500 font-medium">
|
|
<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="glass-panel-light p-6 rounded-2xl border border-white shadow-sm relative">
|
|
<div
|
|
class="absolute -top-3 -right-3 bg-red-500 text-white font-bold text-xs px-3 py-1 rounded-full shadow-md">
|
|
高成本痛点</div>
|
|
<div class="grid grid-cols-2 gap-4 text-center">
|
|
<div class="space-y-2">
|
|
<div
|
|
class="h-24 bg-slate-100 rounded-xl flex items-center justify-center text-slate-500 font-bold border border-slate-200">
|
|
CPU</div>
|
|
<div
|
|
class="h-32 bg-slate-50 rounded-xl flex items-center justify-center text-slate-400 font-medium border-2 border-dashed border-slate-300">
|
|
Memory
|
|
</div>
|
|
<p class="text-sm text-slate-500 font-bold">普通 RISC-V</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div
|
|
class="h-24 bg-blue-50 border border-blue-200 rounded-xl flex items-center justify-center text-blue-600 font-bold">
|
|
Wing CPU</div>
|
|
<div
|
|
class="h-20 bg-blue-100/50 border border-blue-200 rounded-xl flex items-center justify-center text-blue-600 font-bold">
|
|
优化后 Memory
|
|
</div>
|
|
<p class="text-sm text-blue-600 font-bold">隼瞻方案</p>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-center text-sm text-slate-500 font-medium">通过提高代码密度，显著减少对 Memory 的需求，降低
|
|
Memory 面积与成本。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 四大技术手段 -->
|
|
<section class="py-20 relative">
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="max-w-4xl mx-auto mb-16 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-extrabold text-slate-800 mb-6 drop-shadow-sm">四大技术手段</h2>
|
|
<p class="text-slate-600 font-medium">全栈式优化策略，从指令集到工具链</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<!-- 01 社区贡献 -->
|
|
<div
|
|
class="glass-panel rounded-3xl p-6 border-t-4 border-t-primary border border-white card-hover animate-fade-in group">
|
|
<div
|
|
class="text-4xl font-extrabold text-slate-300 mb-4 group-hover:text-primary transition-colors">
|
|
01</div>
|
|
<h3 class="text-xl font-extrabold text-slate-800 mb-3">社区贡献</h3>
|
|
<p class="text-slate-600 font-medium text-sm leading-relaxed mb-4">
|
|
对 RISC-V 社区的 <span class="text-blue-600 font-bold">B 扩展、Zc 扩展、Zicond</span>
|
|
等一系列标准扩展提供了有效支持，并进行了进一步优化。
|
|
</p>
|
|
<!-- 触发弹窗按钮 -->
|
|
<button onclick="openModal()"
|
|
class="flex items-center text-sm text-blue-600 hover:text-blue-800 transition-colors font-bold cursor-pointer bg-blue-50 px-3 py-1.5 rounded-full border border-blue-100">
|
|
<i class="fa fa-bar-chart mr-2"></i> 查看对比
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 02 Xwingc 扩展 -->
|
|
<div class="glass-panel rounded-3xl p-6 border-t-4 border-t-primary border border-white card-hover animate-fade-in group"
|
|
style="transition-delay: 100ms;">
|
|
<div
|
|
class="text-4xl font-extrabold text-slate-300 mb-4 group-hover:text-primary transition-colors">
|
|
02</div>
|
|
<h3 class="text-xl font-extrabold text-slate-800 mb-3">Xwingc 扩展指令集</h3>
|
|
<p class="text-slate-600 font-medium text-sm leading-relaxed mb-4">
|
|
支持将自主研发的<span class="text-slate-800 font-bold bg-slate-100 px-1 rounded">代码密度增强指令 Xwingc 扩展</span>加入到处理器核中。
|
|
</p>
|
|
<div class="bg-slate-50 p-3 rounded-xl border border-slate-200 shadow-inner text-xs text-slate-600 font-medium">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span>Arm: </span> <span class="font-mono bg-white border border-slate-200 px-1.5 py-0.5 rounded shadow-sm text-slate-700">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-white border border-slate-200 px-1.5 py-0.5 rounded shadow-sm text-slate-700">sll a1,
|
|
a1, 2; add aO,</br> a1; lw a0, O(a0)</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-blue-600 font-bold">Wing Xc:</span> <span
|
|
class="font-mono bg-blue-50 border border-blue-100 px-1.5 py-0.5 rounded text-blue-700 font-bold shadow-sm">lwr a0, a1(a0)</span>
|
|
</div>
|
|
<div class="mt-3 text-[10px] text-center text-slate-500 font-bold border-t border-slate-200 pt-2">一条指令完成多条操作，无需额外寄存器</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 03 WingGCC 编译器 -->
|
|
<div class="glass-panel rounded-3xl p-6 border-t-4 border-t-primary border border-white card-hover animate-fade-in group"
|
|
style="transition-delay: 200ms;">
|
|
<div
|
|
class="text-4xl font-extrabold text-slate-300 mb-4 group-hover:text-primary transition-colors">
|
|
03</div>
|
|
<h3 class="text-xl font-extrabold text-slate-800 mb-3">WingGCC 编译器</h3>
|
|
<p class="text-slate-600 font-medium text-sm leading-relaxed">
|
|
解决了 GCC 领域针对性不强的问题。完整匹配各种标准扩展指令和隼瞻自定义扩展指令，同时适配隼瞻<span
|
|
class="text-blue-600 font-bold">专用高效微架构</span>，充分发挥性能。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 04 WingLib 基础库 -->
|
|
<div class="glass-panel rounded-3xl p-6 border-t-4 border-t-primary border border-white card-hover animate-fade-in group"
|
|
style="transition-delay: 300ms;">
|
|
<div
|
|
class="text-4xl font-extrabold text-slate-300 mb-4 group-hover:text-primary transition-colors">
|
|
04</div>
|
|
<h3 class="text-xl font-extrabold text-slate-800 mb-3">WingLib 基础库</h3>
|
|
<ul class="text-slate-600 font-medium text-sm space-y-2 list-disc pl-4 marker:text-blue-400">
|
|
<li>提供标准C库和数学库，专为 code size 和速度优化，优于竞品 <span
|
|
class="text-blue-600 font-bold bg-blue-50 px-1 rounded">5%~20%</span>。</li>
|
|
<li>提供优化的 DSP 库，结合 DSA 技术，性能达竞品数倍。</li>
|
|
<li>提供优化的第三方中间件。</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 优化成果数据 -->
|
|
<section class="py-20 relative">
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
|
|
<!-- 改为 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 glass-panel-light p-8 md:p-10 rounded-3xl border border-white animate-fade-in flex flex-col shadow-sm hover:shadow-lg transition-shadow relative overflow-hidden group">
|
|
<!-- 装饰光效 -->
|
|
<div
|
|
class="absolute -top-24 -left-24 w-64 h-64 bg-blue-100 rounded-full blur-3xl group-hover:bg-blue-200/50 transition-all duration-500 pointer-events-none">
|
|
</div>
|
|
|
|
<h2 class="text-3xl font-extrabold text-slate-800 mb-6 relative z-10 flex items-center">
|
|
<span
|
|
class="w-1.5 h-8 bg-blue-500 rounded-full mr-4 inline-block shadow-sm"></span>
|
|
极致的密度优化
|
|
</h2>
|
|
<p class="text-slate-600 font-medium mb-8 leading-relaxed text-lg relative z-10">
|
|
我们的优化路径清晰可见。从基础 GCC 出发，叠加 Zc/Zicond 扩展，再引入 Wing 独有的代码密度增强技术，最终实现大幅度的空间节省。
|
|
</p>
|
|
|
|
<!-- 底部信息同样放在深色容器内，增加对比度 -->
|
|
<div
|
|
class="mt-auto p-5 bg-white/80 backdrop-blur-sm border border-slate-200 rounded-2xl relative z-10 shadow-inner group-hover:border-blue-200 transition-colors">
|
|
<p class="text-sm text-blue-600 font-bold 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 glass-panel p-8 md:p-10 rounded-3xl border border-white animate-fade-in relative z-10 shadow-sm hover:shadow-lg transition-shadow">
|
|
<h3
|
|
class="text-xl font-extrabold text-slate-800 mb-8 flex flex-col sm:flex-row sm:items-end gap-2">
|
|
<span>代码密度百分比</span>
|
|
<span class="text-sm font-medium text-slate-500">(数值越小越好)</span>
|
|
</h3>
|
|
|
|
<!-- 柱状图容器 -->
|
|
<div id="chart-container"
|
|
class="flex items-end justify-between space-x-2 md:space-x-4 pb-2 border-b border-slate-200"
|
|
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-50/50 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-slate-300 bar-animate shadow-sm"
|
|
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-slate-700 font-extrabold text-lg">100%</div>
|
|
<div class="text-xs text-slate-500 mt-1 font-bold">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-50/50 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-400 bar-animate shadow-sm"
|
|
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-blue-600 font-extrabold text-lg">80%</div>
|
|
<div
|
|
class="text-xs text-blue-700 mt-1 font-bold bg-blue-50 border border-blue-100 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-50/50 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-sm"
|
|
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-blue-700 font-extrabold text-lg">75%</div>
|
|
<div
|
|
class="text-xs text-blue-800 mt-1 font-bold bg-blue-100 border border-blue-200 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-50/50 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-blue-600 to-blue-400 bar-animate shadow-md"
|
|
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-blue-800 font-extrabold text-xl">
|
|
70%</div>
|
|
<div
|
|
class="text-sm text-white mt-1 font-bold bg-blue-600 shadow-sm 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-slate-400 font-bold px-1 sm:px-2 pt-2">
|
|
<div class="text-center">基础编译器</div>
|
|
<div class="text-slate-300"><i class="fa fa-angle-right"></i></div>
|
|
<div class="text-center">标准扩展</div>
|
|
<div class="text-slate-300"><i class="fa fa-angle-right"></i></div>
|
|
<div class="text-center">Wing 专有扩展</div>
|
|
<div class="text-slate-300"><i class="fa fa-angle-right"></i></div>
|
|
<div class="text-center text-blue-600">极致密度</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-white/60 backdrop-blur-md 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-2xl bg-white text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-4xl pointer-events-auto border border-slate-200">
|
|
<!-- 关闭按钮 -->
|
|
<button onclick="closeModal()"
|
|
class="absolute top-4 right-4 text-slate-500 hover:text-slate-800 z-10 bg-slate-100 rounded-full w-8 h-8 flex items-center justify-center transition-colors shadow-sm">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
|
|
<!-- 图片内容区 -->
|
|
<div class="p-4 bg-white/50 backdrop-blur-sm">
|
|
<!-- 这里 src 替换为您实际的对比图地址 -->
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/12/社区贡献2.png"
|
|
alt="Community Contribution Comparison" class="w-full h-auto rounded-xl">
|
|
</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> |