qwq/wig
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
qwq
2026-04-23 14:41:06 +08:00
parent 4d53815955
commit 498af9e2d6
16 changed files with 3540 additions and 2195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
code_compression_intro_V2.html
+142 -135
View File
@@ -1,15 +1,6 @@
<!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">
<!-- 固定在背景的全局毛玻璃淡蓝光晕 -->
<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-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>
@@ -31,14 +22,8 @@
extend: {
colors: {
primary: '#3b82f6',
secondary: '#0E42D2',
accent: '#69b1ff',
dark: '#0f172a',
light: '#f8fafc',
darkBg: '#1e293b',
darkerBg: '#0f172a',
darkCard: '#334155',
brandBlue: '#2563EB',
secondary: '#2563eb',
accent: '#60a5fa',
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
@@ -50,7 +35,7 @@
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.animate-fade-in {
opacity: 0;
@@ -66,57 +51,79 @@
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
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 relative z-10 w-full">
<main class="flex-1">
<!-- 头部 Hero Section -->
<section class="relative pt-20 md:pt-32 pb-20 overflow-hidden bg-transparent">
<!-- 背景装饰 -->
<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>
<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-bold !text-slate-800 leading-tight mb-8 text-shadow animate-fade-in">
<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-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">
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 mb-10 max-w-3xl mx-auto leading-relaxed animate-fade-in">
<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/50 backdrop-blur-sm p-4 rounded-lg border border-slate-200">
<div class="text-3xl font-bold !text-primary mb-1">30%</div>
<div class="text-xs !text-slate-500">代码空间节省</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">30%</div>
<div class="text-xs text-slate-500 font-bold">代码空间节省</div>
</div>
<div class="glass-panel/50 backdrop-blur-sm p-4 rounded-lg border border-slate-200">
<div class="text-3xl font-bold !text-primary mb-1">5-20%</div>
<div class="text-xs !text-slate-500">库体积优于竞品</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/50 backdrop-blur-sm p-4 rounded-lg border border-slate-200">
<div class="text-3xl font-bold !text-primary mb-1">Xwingc</div>
<div class="text-xs !text-slate-500">自主研发扩展</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/50 backdrop-blur-sm p-4 rounded-lg border border-slate-200">
<div class="text-3xl font-bold !text-primary mb-1">WingGCC</div>
<div class="text-xs !text-slate-500">深度定制编译器</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>
@@ -124,22 +131,22 @@
</section>
<!-- 背景痛点 -->
<section class="py-16 bg-slate-50 border-b border-slate-200">
<div class="container mx-auto px-4 md:px-6 lg:px-8">
<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-bold !text-slate-800 mb-4">技术背景与挑战</h2>
<div class="w-20 h-1 bg-primary mx-auto"></div>
<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/30 rounded-2xl p-8 md:p-12 border border-slate-200 animate-fade-in">
<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-bold !text-slate-800 mb-4">RISC-V 的双刃剑</h3>
<p class="!text-slate-600 mb-6 leading-relaxed">
<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-primary font-semibold">代码密度较低</span>，进而要求更大的片上内存（Memory），最终导致芯片成本的增加。
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">
<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
@@ -150,33 +157,33 @@
</div>
<!-- 示意图模拟 -->
<div class="lg:w-1/2 w-full">
<div class="bg-transparent p-6 rounded-xl border border-slate-200 relative">
<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-slate-800 text-xs px-3 py-1 rounded-full">
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-gray-700 rounded flex items-center justify-center !text-slate-500">
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-gray-700/50 rounded flex items-center justify-center !text-gray-500 border-2 border-dashed border-gray-600">
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">普通 RISC-V</p>
<p class="text-sm text-slate-500 font-bold">普通 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">
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-primary/10 border border-primary/30 rounded flex items-center justify-center !text-primary font-bold">
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-primary">隼瞻方案</p>
<p class="text-sm text-blue-600 font-bold">隼瞻方案</p>
</div>
</div>
<p class="mt-4 text-center text-sm !text-slate-500">通过提高代码密度，显著减少对 Memory 的需求，降低
<p class="mt-4 text-center text-sm text-slate-500 font-medium">通过提高代码密度，显著减少对 Memory 的需求，降低
Memory 面积与成本。</p>
</div>
</div>
@@ -186,82 +193,82 @@
</section>
<!-- 四大技术手段 -->
<section class="py-20 bg-transparent">
<div class="container mx-auto px-4">
<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-bold !text-slate-800 mb-6">四大技术手段</h2>
<p class="!text-slate-500">全栈式优化策略，从指令集到工具链</p>
<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-xl p-6 border-t-4 border-primary card-hover animate-fade-in group">
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-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
class="text-4xl font-extrabold text-slate-300 mb-4 group-hover:text-primary transition-colors">
01</div>
<h3 class="text-xl font-bold !text-slate-800 mb-3">社区贡献</h3>
<p class="!text-slate-500 text-sm leading-relaxed mb-4">
对 RISC-V 社区的 <span class="!text-primary">B 扩展、Zc 扩展、Zicond</span>
<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-primary hover:!text-accent transition-colors font-medium cursor-pointer">
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-xl p-6 border-t-4 border-primary card-hover animate-fade-in group"
<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-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
class="text-4xl font-extrabold text-slate-300 mb-4 group-hover:text-primary transition-colors">
02</div>
<h3 class="text-xl font-bold !text-slate-800 mb-3">Xwingc 扩展指令集</h3>
<p class="!text-slate-500 text-sm leading-relaxed mb-4">
支持将自主研发的<span class="!text-slate-800 font-semibold">代码密度增强指令 Xwingc 扩展</span>加入到处理器核中。
<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 text-xs !text-slate-600 border border-slate-200">
<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 glass-panel px-1 rounded">ldr r0, [r0, r1,
<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 glass-panel px-1 rounded">sll a1,
<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-primary">Wing Xc:</span> <span
class="font-mono bg-primary/20 px-1 rounded !text-primary">lwr a0, a1(a0)</span>
<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-2 text-[10px] text-center !text-gray-500">一条指令完成多条操作，无需额外寄存器分配</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-xl p-6 border-t-4 border-primary card-hover animate-fade-in group"
<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-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
class="text-4xl font-extrabold text-slate-300 mb-4 group-hover:text-primary transition-colors">
03</div>
<h3 class="text-xl font-bold !text-slate-800 mb-3">WingGCC 编译器</h3>
<p class="!text-slate-500 text-sm leading-relaxed">
<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-primary">专用高效微架构</span>，充分发挥性能。
class="text-blue-600 font-bold">专用高效微架构</span>，充分发挥性能。
</p>
</div>
<!-- 04 WingLib 基础库 -->
<div class="glass-panel rounded-xl p-6 border-t-4 border-primary card-hover animate-fade-in group"
<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-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
class="text-4xl font-extrabold text-slate-300 mb-4 group-hover:text-primary transition-colors">
04</div>
<h3 class="text-xl font-bold !text-slate-800 mb-3">WingLib 基础库</h3>
<ul class="!text-slate-500 text-sm space-y-2 list-disc pl-4">
<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-slate-800">5%~20%</span>。</li>
class="text-blue-600 font-bold bg-blue-50 px-1 rounded">5%~20%</span>。</li>
<li>提供优化的 DSP 库，结合 DSA 技术，性能达竞品数倍。</li>
<li>提供优化的第三方中间件。</li>
</ul>
@@ -271,32 +278,32 @@
</section>
<!-- 优化成果数据 -->
<section class="py-20 bg-slate-50">
<div class="container mx-auto px-4 md:px-6 lg:px-8">
<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/20 p-8 md:p-10 rounded-2xl border border-slate-200 animate-fade-in flex flex-col shadow-lg relative overflow-hidden group">
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-primary/10 rounded-full blur-3xl group-hover:bg-primary/20 transition-all duration-500 pointer-events-none">
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-bold !text-slate-800 mb-6 relative z-10 flex items-center">
<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-primary rounded-full mr-4 inline-block shadow-[0_0_10px_rgba(59,130,246,0.8)]"></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 mb-8 leading-relaxed text-lg relative z-10">
<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-transparent/80 backdrop-blur-sm border border-slate-200/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">
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>
@@ -305,48 +312,48 @@
<!-- 柱状图部分 -->
<div
class="md:w-[50%] w-full glass-panel/20 p-8 md:p-10 rounded-2xl border border-slate-200 animate-fade-in relative z-10 shadow-lg">
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-semibold !text-slate-800 mb-8 flex flex-col sm:flex-row sm:items-end gap-2">
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-normal !text-slate-500">(数值越小越好)</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-gray-600"
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-900/30 rounded-t-xl relative overflow-hidden transform group-hover:scale-x-105 transition-transform"
<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-secondary bar-animate shadow-[0_-5px_15px_rgba(14,66,210,0.3)]"
<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-800 text-lg">100%</div>
<div class="text-xs !text-slate-500 mt-1 font-medium">GCC</div>
<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-900/30 rounded-t-xl relative overflow-hidden transform group-hover:scale-x-105 transition-transform"
<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-600 bar-animate shadow-[0_-5px_15px_rgba(37,99,235,0.3)]"
<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-slate-800 text-lg">80%</div>
<div class="text-blue-600 font-extrabold text-lg">80%</div>
<div
class="text-xs !text-slate-500 mt-1 font-medium glass-panel/50 px-2 py-0.5 rounded-full inline-block">
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>
@@ -354,17 +361,17 @@
<!-- 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"
<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-[0_-5px_15px_rgba(59,130,246,0.4)]"
<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-slate-800 text-lg">75%</div>
<div class="text-blue-700 font-extrabold text-lg">75%</div>
<div
class="text-xs !text-slate-500 mt-1 font-medium glass-panel/50 px-2 py-0.5 rounded-full inline-block">
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>
@@ -372,19 +379,19 @@
<!-- 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"
<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-primary to-accent bar-animate shadow-[0_-5px_20px_rgba(105,177,255,0.5)]"
<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-slate-800 text-xl drop-shadow-[0_0_8px_rgba(105,177,255,0.8)] !text-accent">
class="text-blue-800 font-extrabold text-xl">
70%</div>
<div
class="text-sm !text-slate-800 mt-1 font-bold bg-primary/20 border border-primary/30 px-2 py-0.5 rounded-full inline-block">
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>
@@ -392,14 +399,14 @@
<!-- 流程箭头指示 -->
<div
class="mt-6 flex justify-between items-center text-xs sm:text-sm !text-slate-500 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>
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>
@@ -412,22 +419,22 @@
<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="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-lg glass-panel text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-4xl pointer-events-auto border border-slate-200">
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-black/50 rounded-full w-8 h-8 flex items-center justify-center transition-colors">
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-1 glass-panel">
<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-md">
alt="Community Contribution Comparison" class="w-full h-auto rounded-xl">
</div>
</div>
</div>