974 lines
56 KiB
HTML
974 lines
56 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',
|
|
'dark-card': '#334155',
|
|
'dark-text': '#cbd5e1',
|
|
'code-bg': '#1e293b',
|
|
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);
|
|
}
|
|
.text-gradient {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.section-padding {
|
|
@apply py-16 md:py-24;
|
|
}
|
|
.token-keyword { color: #C586C0; }
|
|
.token-reg { color: #9CDCFE; }
|
|
.token-val { color: #B5CEA8; }
|
|
.token-comment { color: #6A9955; }
|
|
.token-instr { color: #DCDCAA; }
|
|
.shadow-glow {
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
|
}
|
|
.bar-animate {
|
|
transition: height 1.5s ease-out;
|
|
}
|
|
}
|
|
|
|
|
|
/* 中断界面补齐样式 */
|
|
.bg-dark-card { background-color: #334155; }
|
|
.text-dark-text { color: #cbd5e1; }
|
|
.bg-code-bg { background-color: #1e293b; }
|
|
.text-gradient { background-clip: text; -webkit-background-clip: text; color: transparent; }
|
|
.section-padding { padding-top: 4rem; padding-bottom: 4rem; }
|
|
@media (min-width: 768px) { .section-padding { padding-top: 6rem; padding-bottom: 6rem; } }
|
|
.shadow-glow { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
|
|
|
|
|
|
|
|
/* 中断界面补齐样式 */
|
|
.bg-dark-card { background-color: #334155; }
|
|
.text-dark-text { color: #cbd5e1; }
|
|
.bg-code-bg { background-color: #1e293b; }
|
|
.text-gradient { background-clip: text; -webkit-background-clip: text; color: transparent; }
|
|
.section-padding { padding-top: 4rem; padding-bottom: 4rem; }
|
|
@media (min-width: 768px) { .section-padding { padding-top: 6rem; padding-bottom: 6rem; } }
|
|
.shadow-glow { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
|
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
/* WordPress 兼容性样式 - 去除主题侵入性颜色的影响 */
|
|
#wingsemi-root {
|
|
color: #f8fafc !important;
|
|
}
|
|
|
|
#wingsemi-root h1,
|
|
#wingsemi-root h2,
|
|
#wingsemi-root h3,
|
|
#wingsemi-root h4,
|
|
#wingsemi-root h5,
|
|
#wingsemi-root h6,
|
|
#wingsemi-root p,
|
|
#wingsemi-root div,
|
|
#wingsemi-root span,
|
|
#wingsemi-root li,
|
|
#wingsemi-root a,
|
|
#wingsemi-root td,
|
|
#wingsemi-root th,
|
|
#wingsemi-root ul {
|
|
color: inherit;
|
|
}
|
|
|
|
#wingsemi-root .\!text-white,
|
|
#wingsemi-root .text-white {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-gray-100,
|
|
#wingsemi-root .text-gray-100 {
|
|
color: #f3f4f6 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-gray-200,
|
|
#wingsemi-root .text-gray-200 {
|
|
color: #e2e8f0 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-gray-300,
|
|
#wingsemi-root .text-gray-300 {
|
|
color: #cbd5e1 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-gray-400,
|
|
#wingsemi-root .text-gray-400 {
|
|
color: #94a3b8 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-gray-500,
|
|
#wingsemi-root .text-gray-500 {
|
|
color: #64748b !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-primary,
|
|
#wingsemi-root .text-primary {
|
|
color: #3b82f6 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-secondary,
|
|
#wingsemi-root .text-secondary {
|
|
color: #0E42D2 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-\[\#38bdf8\],
|
|
#wingsemi-root .text-\[\#38bdf8\] {
|
|
color: #38bdf8 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-dark-text,
|
|
#wingsemi-root .text-dark-text {
|
|
color: #cbd5e1 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-red-500,
|
|
#wingsemi-root .text-red-500 {
|
|
color: #ef4444 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-green-400,
|
|
#wingsemi-root .text-green-400 {
|
|
color: #4ade80 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-cyan-400,
|
|
#wingsemi-root .text-cyan-400 {
|
|
color: #22d3ee !important;
|
|
}
|
|
</style>
|
|
|
|
|
|
<style>
|
|
/* WordPress 兼容性样式 - 去除主题侵入性颜色的影响 */
|
|
#wingsemi-root {
|
|
color: #f8fafc !important;
|
|
}
|
|
|
|
#wingsemi-root h1,
|
|
#wingsemi-root h2,
|
|
#wingsemi-root h3,
|
|
#wingsemi-root h4,
|
|
#wingsemi-root h5,
|
|
#wingsemi-root h6,
|
|
#wingsemi-root p,
|
|
#wingsemi-root div,
|
|
#wingsemi-root span,
|
|
#wingsemi-root li,
|
|
#wingsemi-root a,
|
|
#wingsemi-root td,
|
|
#wingsemi-root th,
|
|
#wingsemi-root ul {
|
|
color: inherit;
|
|
}
|
|
|
|
#wingsemi-root .\!text-white,
|
|
#wingsemi-root .text-white {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-gray-100,
|
|
#wingsemi-root .text-gray-100 {
|
|
color: #f3f4f6 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-gray-200,
|
|
#wingsemi-root .text-gray-200 {
|
|
color: #e2e8f0 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-gray-300,
|
|
#wingsemi-root .text-gray-300 {
|
|
color: #cbd5e1 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-gray-400,
|
|
#wingsemi-root .text-gray-400 {
|
|
color: #94a3b8 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-gray-500,
|
|
#wingsemi-root .text-gray-500 {
|
|
color: #64748b !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-primary,
|
|
#wingsemi-root .text-primary {
|
|
color: #3b82f6 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-secondary,
|
|
#wingsemi-root .text-secondary {
|
|
color: #0E42D2 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-\[\#38bdf8\],
|
|
#wingsemi-root .text-\[\#38bdf8\] {
|
|
color: #38bdf8 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-dark-text,
|
|
#wingsemi-root .text-dark-text {
|
|
color: #cbd5e1 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-red-500,
|
|
#wingsemi-root .text-red-500 {
|
|
color: #ef4444 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-green-400,
|
|
#wingsemi-root .text-green-400 {
|
|
color: #4ade80 !important;
|
|
}
|
|
|
|
#wingsemi-root .\!text-cyan-400,
|
|
#wingsemi-root .text-cyan-400 {
|
|
color: #22d3ee !important;
|
|
}
|
|
</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">
|
|
深入解析隼瞻科技底层核心能力
|
|
</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 架构的突破性创新，从超越行业标杆的<b>代码密度增强技术</b>，到实现微秒级响应的<b>中断实时性增强技术</b>，我们致力于从底层核心实现极致性能优化。
|
|
</p>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="flex flex-wrap justify-center gap-4 mb-12 animate-fade-in">
|
|
<a href="http://docs.wingsemitech.com"
|
|
class="px-8 py-3 bg-primary hover:bg-blue-600 !text-white rounded-full font-medium transition-colors shadow-lg shadow-blue-500/30">
|
|
应用案例
|
|
</a>
|
|
<button
|
|
class="popupbox px-8 py-3 bg-darkCard hover:bg-gray-700 border border-gray-600 hover:border-gray-500 !text-white rounded-full font-medium transition-all">
|
|
联系我们了解更多
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 核心指标 -->
|
|
<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-12 bg-[#0f172a] text-center" id="code-compression-section">
|
|
<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-2 animate-fade-in">
|
|
核心能力一：代码密度增强技术
|
|
</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>
|
|
|
|
|
|
<!-- ================== 第二部分 ================== -->
|
|
<div class="!text-white">
|
|
<div class="!text-white">
|
|
<section class="py-16 bg-[#1e293b] border-y border-gray-800 text-center relative overflow-hidden"
|
|
id="interrupt-realtime-section">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-[#0f172a] to-transparent opacity-50"></div>
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div
|
|
class="inline-block px-4 py-1.5 rounded-full bg-secondary/20 border border-secondary/30 !text-[#38bdf8] font-semibold text-xl mb-6 animate-fade-in">
|
|
核心能力二：中断实时性增强技术
|
|
</div>
|
|
<p class="text-lg !text-gray-300 max-w-2xl mx-auto animate-fade-in leading-relaxed">
|
|
通过自定义指令集优化压栈出栈，并行处理上下文切换，打破传统 RISC-V 中断响应瓶颈，实现微秒级确定性响应。
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. 核心技术：指令集优化 (对应图片1上半部分) -->
|
|
<section id="instruction-optimization" class="section-padding bg-[#1e293b]">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">指令级优化</h2>
|
|
<p class="!text-dark-text text-lg">通过增强指令优化压栈和出栈，大幅加速中断响应速度</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-8 items-center max-w-7xl mx-auto"
|
|
style="grid-template-columns: 1fr auto 1fr;">
|
|
<!-- 左侧：传统方式 -->
|
|
<div
|
|
class="bg-dark-card rounded-xl border border-white/10 overflow-hidden relative group">
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-gray-600"></div>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-bold !text-gray-400">常规 RISC-V 处理</h3>
|
|
<span class="text-xs bg-gray-700 px-2 py-1 rounded">由于指令多，周期长</span>
|
|
</div>
|
|
<div
|
|
class="bg-code-bg p-4 rounded-lg font-mono text-sm leading-relaxed border border-white/5">
|
|
<div class="flex gap-4">
|
|
<div class="!text-gray-500 select-none text-right">
|
|
1<br>2<br>3<br>4<br>5
|
|
</div>
|
|
<div>
|
|
<span class="token-instr">csrr</span> <span
|
|
class="token-reg">a0</span>, <span
|
|
class="token-val">mcause</span> <span
|
|
class="token-instr">sw</span> <span class="token-reg">a0</span>,
|
|
4*4(<span class="token-reg">sp</span>)<br>
|
|
<span class="token-instr">csrr</span> <span
|
|
class="token-reg">a1</span>, <span
|
|
class="token-val">mstatus</span> <span
|
|
class="token-instr">sw</span> <span class="token-reg">a1</span>,
|
|
3*4(<span class="token-reg">sp</span>)<br>
|
|
<span class="token-instr">csrr</span> <span
|
|
class="token-reg">a2</span>, <span
|
|
class="token-val">mtval</span>
|
|
<span class="token-instr">sw</span>
|
|
<span class="token-reg">a2</span>, 2*4(<span
|
|
class="token-reg">sp</span>)<br>
|
|
<span class="token-instr">csrr</span> <span
|
|
class="token-reg">a3</span>, <span class="token-val">mepc</span>
|
|
<span
|
|
class="token-instr">sw</span> <span class="token-reg">a3</span>,
|
|
1*4(<span class="token-reg">sp</span>)<br>
|
|
<span class="token-instr">addi</span> <span
|
|
class="token-reg">sp</span>, <span class="token-reg">sp</span>,
|
|
<span class="token-val">-5*4</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 中间箭头 (在移动端隐藏) -->
|
|
<div class="hidden lg:flex justify-center items-center animate-pulse px-6">
|
|
<i class="fa fa-long-arrow-right"
|
|
style="color: #ffffff !important; font-size: 48px !important;"></i>
|
|
</div>
|
|
|
|
<!-- 右侧：隼瞻优化 -->
|
|
<div
|
|
class="bg-dark-card rounded-xl border border-primary/50 overflow-hidden relative shadow-glow">
|
|
<div
|
|
class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-[#38bdf8]">
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-bold !text-white">隼瞻增强技术</h3>
|
|
<span
|
|
class="text-xs bg-primary/20 !text-primary px-2 py-1 rounded border border-primary/20">减少5条指令</span>
|
|
</div>
|
|
<div
|
|
class="bg-code-bg p-4 rounded-lg font-mono text-sm leading-relaxed border border-primary/20 relative">
|
|
<!-- 绿色云朵标签模拟 -->
|
|
<div
|
|
class="absolute -right-2 -top-2 bg-green-600/90 !text-white text-xs px-2 py-1 rounded-bl-lg shadow-lg z-10 transform rotate-2">
|
|
效率提升
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="!text-gray-500 select-none text-right">
|
|
1<br>2<br>3<br>4
|
|
</div>
|
|
<div>
|
|
<span class="token-instr font-bold !text-[#38bdf8]">csr.push</span>
|
|
<span class="token-val">mcause</span>, -16<br>
|
|
<span class="token-instr font-bold !text-[#38bdf8]">csr.push</span>
|
|
<span class="token-val">mstatus</span>, -12<br>
|
|
<span class="token-instr font-bold !text-[#38bdf8]">csr.push</span>
|
|
<span class="token-val">mtval</span>, -8<br>
|
|
<span class="token-instr font-bold !text-[#38bdf8]">csr.push</span>
|
|
<span class="token-val">mepc</span>, -4
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. 工作原理与 Cycle 对比 (对应图片1下半部分) -->
|
|
<section id="cycle-comparison" class="section-padding bg-[#0f172a] relative">
|
|
<div class="container mx-auto px-4">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-center">并行处理与硬件加速</h2>
|
|
<p class="text-center !text-dark-text max-w-3xl mx-auto">
|
|
在嵌套中断服务中，通过<span class="!text-primary font-bold">优化中断采样逻辑</span>、<span
|
|
class="!text-primary font-bold">优化中断接入逻辑</span>，并创造性地实现<span
|
|
class="!text-[#38bdf8] font-bold">并行处理上下文切换</span>。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 流程对比图表 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
|
|
<!-- 左侧：流程步骤对比 -->
|
|
<div class="flex flex-col justify-between space-y-8">
|
|
<div>
|
|
<h4 class="!text-dark-text mb-3 text-sm uppercase tracking-wider">常规中断处理步骤
|
|
</h4>
|
|
<div class="flex w-full text-xs md:text-sm text-center">
|
|
<div
|
|
class="bg-gray-700 py-3 px-1 w-1/3 rounded-l-lg border-r border-gray-600">
|
|
中断发起<br>跳转时间</div>
|
|
<div class="bg-gray-700 py-3 px-1 w-1/3 border-r border-gray-600">
|
|
中断处理<br>时间</div>
|
|
<div class="bg-gray-700 py-3 px-1 w-1/3 rounded-r-lg">上下文切换<br>时间</div>
|
|
</div>
|
|
<div class="text-center mt-2 text-xs !text-gray-500">串行执行，耗时累加</div>
|
|
</div>
|
|
|
|
<!-- 过渡图标 -->
|
|
<div class="flex justify-center items-center space-x-6 py-4">
|
|
<i class="fa fa-angle-double-down animate-bounce"
|
|
style="color: #ffffff !important; font-size: 40px !important;"></i>
|
|
<i class="fa fa-angle-double-down animate-bounce"
|
|
style="color: #ffffff !important; font-size: 56px !important; animation-delay: 0.15s"></i>
|
|
<i class="fa fa-angle-double-down animate-bounce"
|
|
style="color: #ffffff !important; font-size: 40px !important; animation-delay: 0.3s"></i>
|
|
</div>
|
|
|
|
<div class="pb-2">
|
|
<h4 class="!text-primary mb-3 text-sm uppercase tracking-wider font-bold">
|
|
隼瞻增强技术步骤</h4>
|
|
<div class="relative pt-6">
|
|
<!-- 连接线 -->
|
|
<div
|
|
class="flex w-full text-xs md:text-sm text-center relative z-10 font-medium">
|
|
<div
|
|
class="bg-blue-500 py-3 px-1 w-1/3 rounded-l-lg border-r border-blue-400 !text-white shadow-md">
|
|
中断发起<br>跳转时间</div>
|
|
<div
|
|
class="bg-sky-500 py-3 px-1 w-1/3 rounded-r-lg !text-white shadow-md">
|
|
中断处理<br>时间</div>
|
|
|
|
<!-- 虚线框 补满最后的1/3空间 -->
|
|
<div
|
|
class="w-1/3 ml-3 flex items-center justify-center border-2 border-dashed border-green-500/50 !text-green-400 rounded-lg shadow-sm bg-green-500/10 p-1">
|
|
大幅减少<br>处理时间
|
|
</div>
|
|
</div>
|
|
<!-- 并行块 -->
|
|
<div class="absolute top-0 mt-8 left-1/3 w-1/3 h-full -z-0">
|
|
<div
|
|
class="absolute top-16 -left-4 -right-4 lg:-left-2 lg:-right-2 bg-cyan-400 border border-cyan-300 text-slate-900 font-bold py-2 rounded text-xs text-center shadow-lg">
|
|
<i class="fa fa-random mr-1"></i> 并行处理上下文切换
|
|
</div>
|
|
<!-- 箭头示意并行 -->
|
|
<div
|
|
class="absolute top-[3.5rem] left-1/2 -translate-x-1/2 h-6 w-0.5 bg-cyan-400">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：绝对时间优势卡片 -->
|
|
<div
|
|
class="bg-dark-card p-6 flex flex-col justify-center rounded-xl border border-white/10 hover:border-primary/30 transition-colors">
|
|
<h3 class="text-2xl font-bold mb-6 flex items-center gap-3">
|
|
<i class="fa fa-clock-o !text-primary"></i> 绝对时间优势
|
|
</h3>
|
|
<div class="relative pt-10 pb-4">
|
|
<div class="flex items-end justify-center gap-8 h-48">
|
|
<!-- 柱子1 -->
|
|
<div class="w-20 lg:w-24 group relative">
|
|
<div
|
|
class="absolute -top-8 w-full text-center !text-gray-400 font-mono">
|
|
常规</div>
|
|
<div class="h-40 bg-gray-600 rounded-t-lg w-full relative"></div>
|
|
</div>
|
|
<!-- 柱子2 -->
|
|
<div class="w-20 lg:w-24 group relative">
|
|
<div
|
|
class="absolute -top-16 w-full text-center !text-primary font-mono font-bold">
|
|
增强版</div>
|
|
<div
|
|
class="h-16 bg-gradient-to-t from-primary to-[#38bdf8] rounded-t-lg w-full relative shadow-[0_0_20px_rgba(54,207,201,0.4)]">
|
|
<div
|
|
class="absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap !text-[#38bdf8] font-bold">
|
|
-61.54%
|
|
</div>
|
|
<!-- 红色下降箭头 -->
|
|
<div
|
|
class="absolute -top-4 left-1/2 -translate-x-1/2 !text-red-500">
|
|
↓
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-center mt-6 !text-gray-400 text-sm">中断响应周期大幅缩减</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. 底部 CTA -->
|
|
</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.wingsemitech.com/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>
|
|
</div>
|
|
</div> |