337 lines
19 KiB
HTML
337 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<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">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3b82f6', /* 统一的亮蓝色 */
|
|
secondary: '#38bdf8', /* 浅一些的天蓝色，用于提亮硬件加速等模块 */
|
|
accent: '#60a5fa', /* 强调色 */
|
|
dark: '#1e293b', /* 整体底色变浅 (原来是 0f172a) */
|
|
darker: '#0f172a', /* 最深背景变浅 (原来是 0a0f1a) */
|
|
'dark-card': '#334155', /* 稍微提亮的模块背景 (原来是 1e293b) */
|
|
'dark-text': '#cbd5e1', /* 统一灰文本提亮 */
|
|
'code-bg': '#1e293b',
|
|
},
|
|
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(59, 130, 246, 0.3)',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.text-gradient {
|
|
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: #C586C0; }
|
|
.token-reg { color: #9CDCFE; }
|
|
.token-val { color: #B5CEA8; }
|
|
.token-comment { color: #6A9955; }
|
|
.token-instr { color: #DCDCAA; }
|
|
}
|
|
</style>
|
|
<style>
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
/* WordPress 兼容性样式 - 确保字体颜色不被覆盖 */
|
|
#wingsemi-interrupt-page,
|
|
#wingsemi-interrupt-page * {
|
|
color: inherit;
|
|
}
|
|
|
|
#wingsemi-interrupt-page {
|
|
background-color: #0f172a !important; /* 整体背景底色变亮 */
|
|
color: #f8fafc !important;
|
|
}
|
|
|
|
#wingsemi-interrupt-page .text-white {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
#wingsemi-interrupt-page .text-dark-text {
|
|
color: #cbd5e1 !important; /* 灰文本变亮 */
|
|
}
|
|
|
|
#wingsemi-interrupt-page .text-gray-400 {
|
|
color: #cbd5e1 !important; /* 灰文本变亮 */
|
|
}
|
|
|
|
#wingsemi-interrupt-page .text-gray-500 {
|
|
color: #94a3b8 !important; /* 灰文本变亮 */
|
|
}
|
|
|
|
#wingsemi-interrupt-page .text-primary {
|
|
color: #3b82f6 !important;
|
|
}
|
|
|
|
#wingsemi-interrupt-page .text-secondary {
|
|
color: #2563eb !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: #ffffff !important;
|
|
}
|
|
|
|
#wingsemi-interrupt-page p {
|
|
color: inherit !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-darker text-white font-sans antialiased">
|
|
<div id="wingsemi-interrupt-page">
|
|
<!-- 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 inset-0 opacity-20"
|
|
style="background-image: linear-gradient(#3b82f6 1px, transparent 1px), linear-gradient(90deg, #3b82f6 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">
|
|
<div class="inline-block px-3 py-1 mb-6 rounded-full bg-primary/20 border border-primary/40 text-primary text-sm font-medium">
|
|
WingSemi Technology 隼瞻科技
|
|
</div>
|
|
<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">
|
|
通过自定义指令集优化压栈出栈，并行处理上下文切换，打破传统 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-white 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-white font-medium rounded-lg transition-all cursor-pointer">
|
|
了解指令集优化
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. 核心技术：指令集优化 (对应图片1上半部分) -->
|
|
<section id="instruction-optimization" class="section-padding bg-dark">
|
|
<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 text-primary text-4xl animate-pulse px-6">
|
|
<i class="fa fa-long-arrow-right"></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-secondary"></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-secondary">csr.push</span> <span class="token-val">mcause</span>, -16<br>
|
|
<span class="token-instr font-bold text-secondary">csr.push</span> <span class="token-val">mstatus</span>, -12<br>
|
|
<span class="token-instr font-bold text-secondary">csr.push</span> <span class="token-val">mtval</span>, -8<br>
|
|
<span class="token-instr font-bold text-secondary">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-darker 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-secondary 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 text-primary/40 space-x-6 py-2">
|
|
<i class="fa fa-angle-double-down text-3xl animate-bounce"></i>
|
|
<i class="fa fa-angle-double-down text-4xl animate-bounce" style="animation-delay: 0.15s"></i>
|
|
<i class="fa fa-angle-double-down text-3xl animate-bounce" style="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-secondary 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-secondary 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 -->
|
|
<section class="py-16 bg-gradient-to-t from-darker to-dark 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-white font-bold text-lg rounded-full transition-all transform hover:scale-105 shadow-xl">
|
|
联系隼瞻科技获取方案
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
// 简单的滚动显现动画逻辑
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const observerOptions = {
|
|
threshold: 0.1
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('opacity-100', 'translate-y-0');
|
|
entry.target.classList.remove('opacity-0', 'translate-y-8');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
const elements = document.querySelectorAll('.bg-dark-card, h2, h3');
|
|
elements.forEach(el => {
|
|
el.classList.add('transition-all', 'duration-700', 'opacity-0', 'translate-y-8');
|
|
observer.observe(el);
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html> |