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
interrupt_realtime_wingsemi.html
+123 -75
View File
@@ -1,20 +1,32 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>产品详情 - 隼瞻科技</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中断实时性增强技术 - 隼瞻科技解决方案</title>
<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 = {
theme: {
extend: {
colors: { primary: '#3b82f6', secondary: '#2563eb', accent: '#60a5fa' },
fontFamily: { inter: ['Inter', 'sans-serif'] }
colors: {
primary: '#165DFF', /* 隼瞻科技蓝 */
secondary: '#36CFC9', /* 辅助青色 */
accent: '#F7BA1E', /* 强调色 */
dark: '#111827', /* 统一底色 */
darker: '#0b1220',
'dark-card': '#1f2937',
'dark-text': '#94A3B8',
'code-bg': '#1e1e1e',
},
fontFamily: {
sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
mono: ['Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
},
boxShadow: {
'glow': '0 0 20px rgba(22, 93, 255, 0.3)',
}
}
}
}
@@ -23,38 +35,77 @@
@layer utilities {
.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);
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);
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);
}
.text-gradient {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #8b5cf6 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.section-padding {
@apply py-16 md:py-24;
}
.card-hover {
@apply transition-all duration-300 hover:translate-y-[-5px] hover:shadow-lg hover:shadow-primary/20;
}
/* 模拟代码高亮颜色 */
.token-keyword { color: #8e24aa; }
.token-reg { color: #0288d1; }
.token-val { color: #388e3c; }
.token-comment { color: #689f38; }
.token-instr { color: #1565c0; font-weight: bold; }
}
</style>
<style>
html {
scroll-behavior: smooth;
}
/* WordPress 兼容性样式 - 确保字体颜色不被覆盖 */
#wingsemi-interrupt-page,
#wingsemi-interrupt-page * {
color: inherit;
}
#sj-product-page { font-family: 'Inter', sans-serif; color: #1e293b; background-color: transparent !important; }
#sj-product-page a { color: #3b82f6; transition: color 0.3s ease; }
#sj-product-page a:hover { color: #2563eb; }
.section-active { color: #2563eb !important; border-bottom: 2px solid #2563eb !important; }
.hover-float { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-float:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 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); }
#wingsemi-interrupt-page { background-color: transparent !important; color: #1e293b !important; }
.bg-grid {
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
#wingsemi-interrupt-page .text-slate-500 font-bold {
color: #9ca3af !important;
}
#wingsemi-interrupt-page .text-slate-500 font-medium {
color: #6b7280 !important;
}
#wingsemi-interrupt-page .text-primary {
color: #165DFF !important;
}
#wingsemi-interrupt-page .text-secondary {
color: #36CFC9 !important;
}
#wingsemi-interrupt-page h1, #wingsemi-interrupt-page h2, #wingsemi-interrupt-page h3, #wingsemi-interrupt-page h4, #wingsemi-interrupt-page h5, #wingsemi-interrupt-page h6 { color: #1e293b !important; }
#wingsemi-interrupt-page p {
color: inherit !important;
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 font-inter antialiased overflow-x-hidden w-full">
<body class="bg-slate-50 text-slate-800 font-sans antialiased">
<!-- 固定在背景的全局毛玻璃淡蓝光晕 -->
<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>
@@ -62,15 +113,12 @@
<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-interrupt-page">
<div id="wingsemi-interrupt-page" class="relative z-10">
<!-- 1. 头部 Banner -->
<section class="relative overflow-hidden pt-20 pb-24 md:pt-32 md:pb-40">
<div class="absolute inset-0 bg-gradient-to-b from-primary/10 to-darker z-0"></div>
<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="absolute inset-0 opacity-20"
style="background-image: linear-gradient(#165DFF 1px, transparent 1px), linear-gradient(90deg, #165DFF 1px, transparent 1px); background-size: 50px 50px;">
</div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-4xl mx-auto text-center">
@@ -80,14 +128,14 @@
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight mb-6">
中断实时性<span class="text-gradient bg-gradient-to-r from-primary to-secondary">增强技术</span>
</h1>
<p class="text-lg md:text-xl text-dark-text mb-10 max-w-2xl mx-auto leading-relaxed">
<p class="text-lg md:text-xl text-slate-600 font-medium mb-10 max-w-2xl mx-auto leading-relaxed">
通过自定义指令集优化压栈出栈，并行处理上下文切换，打破传统 RISC-V 中断响应瓶颈，实现微秒级确定性响应。
</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="#cycle-comparison" class="px-8 py-3 bg-primary hover:bg-primary/90 text-slate-800 rounded-lg transition-all shadow-glow flex items-center gap-2 cursor-pointer">
<a href="#cycle-comparison" class="px-8 py-3 bg-primary hover:bg-primary/90 text-slate-800 font-bold rounded-lg transition-all shadow-glow flex items-center gap-2 cursor-pointer">
<i class="fa fa-flash"></i> 查看性能对比
</a>
<a href="#instruction-optimization" class="px-8 py-3 bg-white/5 border border-white/10 hover:bg-white/10 text-slate-800 font-medium rounded-lg transition-all cursor-pointer">
<a href="#instruction-optimization" class="px-8 py-3 bg-white/5 border border-slate-200 hover:bg-white/10 text-slate-800 font-medium rounded-lg transition-all cursor-pointer">
了解指令集优化
</a>
</div>
@@ -96,25 +144,25 @@
</section>
<!-- 2. 核心技术：指令集优化 (对应图片1上半部分) -->
<section id="instruction-optimization" class="section-padding bg-transparent">
<section id="instruction-optimization" class="section-padding relative z-10">
<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>
<p class="text-slate-600 font-medium 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="glass-panel 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="glass-panel-light border border-white rounded-xl border border-slate-200 overflow-hidden relative group">
<div class="absolute top-0 left-0 w-full h-1 bg-slate-200"></div>
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold text-slate-500">常规 RISC-V 处理</h3>
<span class="text-xs bg-gray-700 px-2 py-1 rounded">由于指令多，周期长</span>
<h3 class="text-lg font-bold text-slate-500 font-bold">常规 RISC-V 处理</h3>
<span class="text-xs bg-slate-100 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="bg-slate-50 border border-slate-200 p-4 rounded-lg font-mono text-sm leading-relaxed border border-slate-200">
<div class="flex gap-4">
<div class="text-gray-500 select-none text-right">
<div class="text-slate-500 font-medium select-none text-right">
1<br>2<br>3<br>4<br>5
</div>
<div>
@@ -135,20 +183,20 @@
</div>
<!-- 右侧：隼瞻优化 -->
<div class="glass-panel rounded-xl border border-primary/50 overflow-hidden relative shadow-glow">
<div class="glass-panel-light border border-white 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-secondary"></div>
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold text-slate-800">隼瞻增强技术</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="bg-slate-50 border border-slate-200 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-slate-800 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">
<div class="text-slate-500 font-medium select-none text-right">
1<br>2<br>3<br>4
</div>
<div>
@@ -166,12 +214,12 @@
</section>
<!-- 3. 工作原理与 Cycle 对比 (对应图片1下半部分) -->
<section id="cycle-comparison" class="section-padding bg-slate-50 relative">
<section id="cycle-comparison" class="section-padding relative z-10 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">
<p class="text-center text-slate-600 font-medium max-w-3xl mx-auto">
在嵌套中断服务中，通过<span class="text-primary font-bold">优化中断采样逻辑</span>、<span class="text-primary font-bold">优化中断接入逻辑</span>，并创造性地实现<span class="text-secondary font-bold">并行处理上下文切换</span>。
</p>
</div>
@@ -181,13 +229,13 @@
<!-- 左侧：流程步骤对比 -->
<div class="space-y-8">
<div>
<h4 class="text-dark-text mb-3 text-sm uppercase tracking-wider">常规中断处理步骤</h4>
<h4 class="text-slate-600 font-medium 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 class="bg-slate-100 py-3 px-1 w-1/3 rounded-l-lg border-r border-slate-200">中断发起<br>跳转时间</div>
<div class="bg-slate-100 py-3 px-1 w-1/3 border-r border-slate-200">中断处理<br>时间</div>
<div class="bg-slate-100 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 class="text-center mt-2 text-xs text-slate-500 font-medium">串行执行，耗时累加</div>
</div>
<div>
@@ -211,28 +259,28 @@
</div>
<!-- 右侧：Cycle 数对比柱状图 -->
<div class="glass-panel p-6 rounded-xl border border-white/10 flex flex-col justify-center">
<div class="glass-panel-light border border-white p-6 rounded-xl border border-slate-200 flex flex-col justify-center">
<h3 class="text-xl font-bold mb-6">进入中断所需 Cycle 数对比</h3>
<div class="space-y-6">
<!-- 常规 -->
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-500">常规中断处理</span>
<span class="text-slate-500 font-bold">常规中断处理</span>
<span class="font-mono font-bold">26 Cycles</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4 overflow-hidden">
<div class="bg-gray-500 h-full rounded-full" style="width: 100%"></div>
<div class="w-full bg-slate-100 rounded-full h-4 overflow-hidden">
<div class="bg-slate-300 h-full rounded-full" style="width: 100%"></div>
</div>
</div>
<!-- 隼瞻 -->
<div class="relative">
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-800">隼瞻实时性增强技术</span>
<span class="text-slate-800 font-bold">隼瞻实时性增强技术</span>
<span class="font-mono font-bold text-primary">12 Cycles</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4 overflow-hidden">
<div class="w-full bg-slate-100 rounded-full h-4 overflow-hidden">
<div class="bg-gradient-to-r from-primary to-secondary h-full rounded-full shadow-glow" style="width: 46%"></div>
</div>
@@ -253,16 +301,16 @@
</section>
<!-- 4. 实时性优势与确定性 (对应图片2) -->
<section class="section-padding bg-transparent">
<section class="section-padding relative z-10">
<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">同时达成 <span class="text-slate-800">中断时延的确定性</span> 和 <span class="text-slate-800">响应中断的及时性</span></p>
<p class="text-slate-600 font-medium text-lg">同时达成 <span class="text-slate-800 font-bold">中断时延的确定性</span> 和 <span class="text-slate-800 font-bold">响应中断的及时性</span></p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- 左侧：绝对时间优势 -->
<div class="glass-panel p-8 rounded-xl border border-white/10 hover:border-primary/30 transition-colors">
<div class="glass-panel-light border border-white p-8 rounded-xl border border-slate-200 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>
@@ -270,13 +318,13 @@
<div class="flex items-end justify-center gap-8 h-48">
<!-- 柱子1 -->
<div class="w-24 group relative">
<div class="absolute -top-8 w-full text-center text-slate-500 font-mono">常规</div>
<div class="h-40 bg-gray-600 rounded-t-lg w-full relative"></div>
<div class="absolute -top-8 w-full text-center text-slate-500 font-bold font-mono">常规</div>
<div class="h-40 bg-slate-200 rounded-t-lg w-full relative"></div>
</div>
<!-- 柱子2 -->
<div class="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-secondary rounded-t-lg w-full relative shadow-[0_0_20px_rgba(54,207,201,0.4)]">
<div class="h-16 bg-gradient-to-t from-primary to-secondary rounded-t-lg w-full relative shadow-lg">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap text-secondary font-bold">
-61.54%
</div>
@@ -287,12 +335,12 @@
</div>
</div>
</div>
<p class="text-center mt-6 text-slate-500 text-sm">中断响应周期大幅缩减</p>
<p class="text-center mt-6 text-slate-500 font-bold text-sm">中断响应周期大幅缩减</p>
</div>
</div>
<!-- 右侧：时间确定性 (Jitter对比) -->
<div class="glass-panel p-8 rounded-xl border border-white/10 hover:border-secondary/30 transition-colors">
<div class="glass-panel-light border border-white p-8 rounded-xl border border-slate-200 hover:border-secondary/30 transition-colors">
<h3 class="text-2xl font-bold mb-6 flex items-center gap-3">
<i class="fa fa-line-chart text-secondary"></i> 时间确定性 (Jitter)
</h3>
@@ -300,11 +348,11 @@
<div class="space-y-8">
<!-- 隼瞻表现 -->
<div>
<div class="text-sm text-slate-500 mb-2">隼瞻中断实时性技术</div>
<div class="text-sm text-slate-500 font-bold mb-2">隼瞻中断实时性技术</div>
<div class="flex gap-1 h-12">
<div class="flex-1 bg-primary rounded flex items-center justify-center text-slate-800 text-xs shadow-lg">10 Cycle</div>
<div class="flex-1 bg-primary rounded flex items-center justify-center text-slate-800 text-xs shadow-lg">12 Cycle</div>
<div class="flex-1 bg-primary rounded flex items-center justify-center text-slate-800 text-xs shadow-lg">10 Cycle</div>
<div class="flex-1 bg-primary rounded flex items-center justify-center text-slate-800 font-bold text-xs shadow-lg">10 Cycle</div>
<div class="flex-1 bg-primary rounded flex items-center justify-center text-slate-800 font-bold text-xs shadow-lg">12 Cycle</div>
<div class="flex-1 bg-primary rounded flex items-center justify-center text-slate-800 font-bold text-xs shadow-lg">10 Cycle</div>
</div>
<div class="text-right text-xs text-secondary mt-1">波动极小，稳定可控</div>
</div>
@@ -313,10 +361,10 @@
<!-- 常规表现 -->
<div>
<div class="text-sm text-slate-500 mb-2">常规 RISC-V IP</div>
<div class="text-sm text-slate-500 font-bold mb-2">常规 RISC-V IP</div>
<div class="flex gap-1 h-12 items-end">
<div class="w-1/2 bg-gray-700 h-8 rounded flex items-center justify-center text-slate-500 text-xs">24 Cycle</div>
<div class="w-1/2 bg-gray-700 h-full rounded flex items-center justify-center text-slate-500 text-xs border border-red-500/30">40 Cycle</div>
<div class="w-1/2 bg-slate-100 h-8 rounded flex items-center justify-center text-slate-500 font-bold text-xs">24 Cycle</div>
<div class="w-1/2 bg-slate-100 h-full rounded flex items-center justify-center text-slate-500 font-bold text-xs border border-red-500/30">40 Cycle</div>
</div>
<div class="text-right text-xs text-red-400 mt-1">波动巨大，不可预测</div>
</div>
@@ -327,10 +375,10 @@
</section>
<!-- 5. 底部 CTA -->
<section class="py-16 bg-gradient-to-t from-darker to-dark text-center">
<section class="py-16 relative z-10 border-t border-slate-200 text-center">
<div class="container mx-auto px-4">
<h2 class="text-2xl md:text-3xl font-bold mb-8">准备好提升您的处理器性能了吗？</h2>
<button class="px-10 py-4 bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-slate-800 text-lg rounded-full transition-all transform hover:scale-105 shadow-xl">
<button class="px-10 py-4 bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-slate-800 font-bold text-lg rounded-full transition-all transform hover:scale-105 shadow-xl">
联系隼瞻科技获取方案
</button>
</div>
@@ -352,7 +400,7 @@
});
}, observerOptions);
const elements = document.querySelectorAll('.glass-panel, h2, h3');
const elements = document.querySelectorAll('.glass-panel-light border border-white, h2, h3');
elements.forEach(el => {
el.classList.add('transition-all', 'duration-700', 'opacity-0', 'translate-y-8');
observer.observe(el);