364 lines
23 KiB
HTML
364 lines
23 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">
|
|
<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'] }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@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);
|
|
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);
|
|
}
|
|
.text-gradient {
|
|
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #8b5cf6 100%);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
|
}
|
|
}
|
|
|
|
#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); }
|
|
|
|
.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;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-800 font-inter antialiased overflow-x-hidden w-full">
|
|
|
|
<!-- 固定在背景的全局毛玻璃淡蓝光晕 -->
|
|
<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-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(#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">
|
|
<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-slate-800 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. 核心技术：指令集优化 (对应图片1上半部分) -->
|
|
<section id="instruction-optimization" class="section-padding bg-transparent">
|
|
<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="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="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>
|
|
</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="glass-panel 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="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">
|
|
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-slate-50 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="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>
|
|
<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">
|
|
<div class="bg-primary/80 py-3 px-1 w-1/2 rounded-l-lg border-r border-blue-500/50 text-slate-800">中断发起<br>跳转时间</div>
|
|
<div class="bg-primary/80 py-3 px-1 w-1/2 rounded-r-lg text-slate-800">向量中断、缩短<br>接入服务时间</div>
|
|
</div>
|
|
<!-- 并行块 -->
|
|
<div class="absolute top-0 mt-8 right-0 w-1/2 h-full -z-0">
|
|
<div class="absolute top-16 left-4 right-4 bg-secondary/20 border border-secondary/50 text-secondary py-2 rounded text-xs text-center">
|
|
<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-secondary/50"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：Cycle 数对比柱状图 -->
|
|
<div class="glass-panel p-6 rounded-xl border border-white/10 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="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>
|
|
</div>
|
|
|
|
<!-- 隼瞻 -->
|
|
<div class="relative">
|
|
<div class="flex justify-between text-sm mb-2">
|
|
<span class="text-slate-800">隼瞻实时性增强技术</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="bg-gradient-to-r from-primary to-secondary h-full rounded-full shadow-glow" style="width: 46%"></div>
|
|
</div>
|
|
|
|
<!-- 下降箭头指示 -->
|
|
<div class="absolute right-[30%] top-[-1.5rem] hidden md:flex flex-row items-center gap-2">
|
|
<div class="flex flex-col items-center">
|
|
<div class="h-8 w-0.5 bg-red-500/50"></div>
|
|
<i class="fa fa-caret-down text-red-500 text-xl"></i>
|
|
</div>
|
|
<span class="text-2xl font-bold pb-1 text-red-500">-53.85%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. 实时性优势与确定性 (对应图片2) -->
|
|
<section class="section-padding bg-transparent">
|
|
<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>
|
|
</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">
|
|
<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-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>
|
|
<!-- 柱子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="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-slate-500 text-sm">中断响应周期大幅缩减</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：时间确定性 (Jitter对比) -->
|
|
<div class="glass-panel p-8 rounded-xl border border-white/10 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>
|
|
|
|
<div class="space-y-8">
|
|
<!-- 隼瞻表现 -->
|
|
<div>
|
|
<div class="text-sm text-slate-500 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>
|
|
<div class="text-right text-xs text-secondary mt-1">波动极小，稳定可控</div>
|
|
</div>
|
|
|
|
<div class="text-center font-bold text-2xl text-gray-600 italic">VS</div>
|
|
|
|
<!-- 常规表现 -->
|
|
<div>
|
|
<div class="text-sm text-slate-500 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>
|
|
<div class="text-right text-xs text-red-400 mt-1">波动巨大，不可预测</div>
|
|
</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-slate-800 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('.glass-panel, h2, h3');
|
|
elements.forEach(el => {
|
|
el.classList.add('transition-all', 'duration-700', 'opacity-0', 'translate-y-8');
|
|
observer.observe(el);
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html> |