276 lines
16 KiB
HTML
276 lines
16 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>WLink 仿真器 - 隼瞻科技产品详情</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;800&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3b82f6',
|
|
secondary: '#2563eb',
|
|
accent: '#60a5fa',
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.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);
|
|
}
|
|
|
|
#sj-product-page {
|
|
font-family: 'Inter', sans-serif;
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* 覆盖 a button focus */
|
|
#sj-product-page a, #sj-product-page button, #sj-product-page [role="button"] {
|
|
-webkit-tap-highlight-color: transparent !important;
|
|
}
|
|
|
|
#sj-product-page a:focus, #sj-product-page button:focus, #sj-product-page a:active, #sj-product-page button:active {
|
|
outline: none !important;
|
|
}
|
|
|
|
/* 渐变文本 */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #8b5cf6 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Scroll Animation */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.reveal-delay-1 { transition-delay: 0.1s; }
|
|
.reveal-delay-2 { transition-delay: 0.2s; }
|
|
</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="sj-product-page" class="relative z-10 w-full min-h-screen pb-16">
|
|
|
|
<!-- 产品页面头部 -->
|
|
<section class="pt-24 md:pt-32 pb-16 relative 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-4xl mx-auto text-center reveal visible">
|
|
<div 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">
|
|
<i class="fa fa-usb text-primary"></i>
|
|
<span class="text-sm font-bold text-blue-700">硬件调试平台</span>
|
|
</div>
|
|
|
|
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-extrabold text-slate-800 leading-tight mb-8 drop-shadow-sm">
|
|
WLink-v1 <span class="gradient-text">仿真器</span>
|
|
</h1>
|
|
|
|
<p class="text-lg md:text-xl text-slate-600 font-medium mb-10 max-w-2xl mx-auto leading-relaxed">
|
|
WLink-v1 仿真器是隼瞻科技推出的一款专业硬件调试设备，全面支持隼瞻各系列 RISC-V 处理器内核的高效调试验证。
|
|
</p>
|
|
|
|
<!-- 产品图片容器 -->
|
|
<div class="mb-12 max-w-2xl mx-auto">
|
|
<div class="glass-panel p-6 rounded-3xl shadow-lg border-2 border-white relative overflow-hidden group">
|
|
<!-- 虚线边框效果 -->
|
|
<div class="absolute inset-4 border-2 border-dashed border-blue-200 rounded-2xl pointer-events-none group-hover:border-blue-400 transition-colors"></div>
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/11/image-1.png" alt="WLink" class="w-full h-auto rounded-xl object-contain mx-auto relative z-10 max-h-80 group-hover:scale-105 transition-transform duration-500">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. 技术亮点 -->
|
|
<section id="features" class="py-16">
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8 max-w-5xl">
|
|
<div class="text-center mb-16 reveal">
|
|
<h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-slate-800 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="grid md:grid-cols-2 gap-8">
|
|
<!-- 亮点1 -->
|
|
<div class="glass-panel p-8 rounded-3xl shadow-sm border border-white hover:-translate-y-2 hover:shadow-lg hover:border-blue-200 transition-all reveal">
|
|
<div class="w-14 h-14 rounded-2xl bg-blue-50 border border-blue-100 flex items-center justify-center text-primary text-2xl mb-6 shadow-inner">
|
|
<i class="fa fa-file-text"></i>
|
|
</div>
|
|
<h4 class="text-xl font-extrabold mb-3 text-slate-800">标准兼容设计</h4>
|
|
<p class="text-slate-600 font-medium leading-relaxed">
|
|
严格按照 <span class="text-blue-600 font-bold bg-blue-50 px-2 py-0.5 rounded">RISC-V Debug Specification</span> 标准设计，全面支持 1.0.0、0.13 和 0.11 标准。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 亮点2 -->
|
|
<div class="glass-panel p-8 rounded-3xl shadow-sm border border-white hover:-translate-y-2 hover:shadow-lg hover:border-sky-200 transition-all reveal reveal-delay-1">
|
|
<div class="w-14 h-14 rounded-2xl bg-sky-50 border border-sky-100 flex items-center justify-center text-sky-500 text-2xl mb-6 shadow-inner">
|
|
<i class="fa fa-plug"></i>
|
|
</div>
|
|
<h4 class="text-xl font-extrabold mb-3 text-slate-800">协议与接口丰富</h4>
|
|
<p class="text-slate-600 font-medium leading-relaxed">
|
|
支持四线 JTAG 和两线 cJTAG (IEEE-1149.7)，灵活兼容各种目标板电压，满足不同场景。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 亮点3 -->
|
|
<div class="glass-panel p-8 rounded-3xl shadow-sm border border-white hover:-translate-y-2 hover:shadow-lg hover:border-indigo-200 transition-all reveal">
|
|
<div class="w-14 h-14 rounded-2xl bg-indigo-50 border border-indigo-100 flex items-center justify-center text-indigo-500 text-2xl mb-6 shadow-inner">
|
|
<i class="fa fa-laptop"></i>
|
|
</div>
|
|
<h4 class="text-xl font-extrabold mb-3 text-slate-800">IDE无缝集成</h4>
|
|
<p class="text-slate-600 font-medium leading-relaxed">
|
|
与隼瞻全自研图形化开发环境 <span class="text-indigo-600 font-bold bg-indigo-50 px-2 py-0.5 rounded">WingIDE</span> 深度集成，实现敏捷调试体验。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 亮点4 -->
|
|
<div class="glass-panel p-8 rounded-3xl shadow-sm border border-white hover:-translate-y-2 hover:shadow-lg hover:border-emerald-200 transition-all reveal reveal-delay-1">
|
|
<div class="w-14 h-14 rounded-2xl bg-emerald-50 border border-emerald-100 flex items-center justify-center text-emerald-500 text-2xl mb-6 shadow-inner">
|
|
<i class="fa fa-cube"></i>
|
|
</div>
|
|
<h4 class="text-xl font-extrabold mb-3 text-slate-800">紧凑小巧</h4>
|
|
<p class="text-slate-600 font-medium leading-relaxed">
|
|
工业级设计，紧凑小巧的外观能够轻松部署在各种复杂的测试台与实验室环境。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. 产品参数 -->
|
|
<section id="specifications" class="py-16">
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8 max-w-5xl">
|
|
<div class="text-center mb-16 reveal">
|
|
<h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-slate-800 drop-shadow-sm">详细技术参数</h2>
|
|
<p class="text-slate-600 font-medium">了解 WLink 仿真器全面的接口规格与支持能力</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 reveal">
|
|
<!-- 参数卡片1 -->
|
|
<div class="glass-panel-light p-8 rounded-3xl border border-white shadow-md relative overflow-hidden group">
|
|
<div class="absolute -right-16 -top-16 opacity-5 pointer-events-none group-hover:scale-110 transition-transform duration-500">
|
|
<i class="fa fa-cogs text-[150px]"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-extrabold mb-8 text-slate-800 relative z-10 flex items-center">
|
|
<div class="w-3 h-8 bg-blue-500 rounded-full mr-3"></div> 支持协议标准
|
|
</h3>
|
|
|
|
<div class="space-y-4 relative z-10">
|
|
<div class="flex items-center p-3 rounded-xl bg-white/50 border border-slate-100 shadow-sm hover:bg-blue-50/50 hover:border-blue-100 transition-colors">
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-4 flex-shrink-0">
|
|
<i class="fa fa-check text-sm"></i>
|
|
</div>
|
|
<span class="font-bold text-slate-700 text-sm">RISC-V Debug Spec 1.0.0, 0.13, 0.11</span>
|
|
</div>
|
|
<div class="flex items-center p-3 rounded-xl bg-white/50 border border-slate-100 shadow-sm hover:bg-blue-50/50 hover:border-blue-100 transition-colors">
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-4 flex-shrink-0">
|
|
<i class="fa fa-check text-sm"></i>
|
|
</div>
|
|
<span class="font-bold text-slate-700 text-sm">IEEE-1149.1 JTAG 标准支持</span>
|
|
</div>
|
|
<div class="flex items-center p-3 rounded-xl bg-white/50 border border-slate-100 shadow-sm hover:bg-blue-50/50 hover:border-blue-100 transition-colors">
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-4 flex-shrink-0">
|
|
<i class="fa fa-check text-sm"></i>
|
|
</div>
|
|
<span class="font-bold text-slate-700 text-sm">IEEE-1149.7 cJTAG 部分功能支持</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 参数卡片2 -->
|
|
<div class="glass-panel-light p-8 rounded-3xl border border-white shadow-md relative overflow-hidden group">
|
|
<div class="absolute -right-16 -top-16 opacity-5 pointer-events-none group-hover:scale-110 transition-transform duration-500">
|
|
<i class="fa fa-sliders text-[150px]"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-extrabold mb-8 text-slate-800 relative z-10 flex items-center">
|
|
<div class="w-3 h-8 bg-sky-500 rounded-full mr-3"></div> 硬体特性规格
|
|
</h3>
|
|
|
|
<div class="flex flex-col h-[calc(100%-4rem)] relative z-10">
|
|
<!-- 规格网格 -->
|
|
<div class="grid grid-cols-2 gap-4 flex-1">
|
|
<div class="bg-white/60 p-4 rounded-xl border border-slate-100 hover:border-sky-200 transition-colors flex flex-col justify-center text-center">
|
|
<span class="text-slate-500 text-xs font-bold mb-1 uppercase tracking-wider">Target Voltage</span>
|
|
<span class="font-black text-sky-600 text-lg">1.8 ~ 3.3V</span>
|
|
</div>
|
|
<div class="bg-white/60 p-4 rounded-xl border border-slate-100 hover:border-sky-200 transition-colors flex flex-col justify-center text-center">
|
|
<span class="text-slate-500 text-xs font-bold mb-1 uppercase tracking-wider">Speed Rate</span>
|
|
<span class="font-black text-sky-600 text-lg">10k - 3MHz</span>
|
|
</div>
|
|
<div class="bg-white/60 p-4 rounded-xl border border-slate-100 hover:border-sky-200 transition-colors flex flex-col justify-center text-center">
|
|
<span class="text-slate-500 text-xs font-bold mb-1 uppercase tracking-wider">USB Port</span>
|
|
<span class="font-black text-sky-600 text-lg">Type-C</span>
|
|
</div>
|
|
<div class="bg-white/60 p-4 rounded-xl border border-slate-100 hover:border-sky-200 transition-colors flex flex-col items-center justify-center text-center">
|
|
<span class="text-slate-500 text-xs font-bold mb-2 uppercase tracking-wider">Interface</span>
|
|
<div class="flex space-x-2">
|
|
<span class="bg-sky-50 text-sky-700 text-xs font-bold px-2 py-1 rounded border border-sky-100 shadow-sm">JTAG</span>
|
|
<span class="bg-sky-50 text-sky-700 text-xs font-bold px-2 py-1 rounded border border-sky-100 shadow-sm">cJTAG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div> <!-- end #sj-product-page -->
|
|
|
|
<!-- JavaScript 动画 -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: "0px 0px -50px 0px"
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |