516 lines
30 KiB
HTML
516 lines
30 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>
|
||
|
||
<!-- Wrapper with an ID so we can scope styles and avoid WP theme interference -->
|
||
<div id="sj-product-page" class="relative z-10 w-full min-h-screen">
|
||
|
||
<!-- 产品页面头部 -->
|
||
<section class="pt-24 md:pt-32 pb-16 md:pb-24 bg-gradient-to-br gradient-animate"
|
||
style="background: linear-gradient(135deg, rgba(248,250,252,0.95), rgba(239,246,255,1)); overflow:hidden;">
|
||
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||
<div class="max-w-4xl mx-auto text-center">
|
||
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-slate-800 leading-tight text-shadow mb-6">
|
||
通用处理器IP
|
||
</h1>
|
||
<div class="bg-primary-20 inline-block px-6 pt-4 rounded-full mb-6 animate-fade-in">
|
||
<h2 class="text-xl font-semibold text-primary">Wing-M Series</h2>
|
||
</div>
|
||
<h3 class="text-2xl md:text-3xl font-bold text-slate-800 mb-8">Wing-M050 Processor IP</h3>
|
||
<p class="text-lg md:text-xl text-slate-600 mb-8 max-w-2xl mx-auto" style="line-height:1.6;">
|
||
Wing-M050 是基于RISC-V架构的32位、单发射、2级流水的处理器，适用于极低功耗和极小面积的嵌入式应用
|
||
</p>
|
||
<div class="w-24 h-1 bg-primary mx-auto" style="background-color:var(--primary); height:4px;"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 1. 架构 -->
|
||
<section id="architecture" class="section-content py-16 bg-transparent text-slate-800" style="background-color:transparent;">
|
||
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||
<div class="max-w-4xl mx-auto mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-slate-800 text-center">架构</h2>
|
||
<div class="w-24 h-1 bg-primary mx-auto mb-12" style="background-color:var(--primary); height:4px;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 架构大图 -->
|
||
<div class="max-w-4xl mx-auto glass-panel text-slate-800 rounded-xl shadow-lg overflow-hidden animate-fade-in mb-12">
|
||
<div class="p-6"
|
||
style="background: linear-gradient(90deg, rgba(59,130,246,0.1) 0%, rgba(255,255,255,0.9) 100%); border-bottom: 1px solid rgba(59,130,246,0.1);">
|
||
<h3 class="text-2xl font-bold text-slate-800 text-center">Wing-M050 处理器IP架构</h3>
|
||
</div>
|
||
<div class="p-4">
|
||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/10/whiteboard_exported_image-7.png"
|
||
alt="Wing-M050 Processor IP架构图" class="w-full h-auto rounded-lg" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2. 产品参数 -->
|
||
<section id="specifications" class="section-content py-16 bg-transparent text-slate-800" style="background-color:transparent;">
|
||
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||
<div class="max-w-4xl mx-auto mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-slate-800 text-center">产品参数</h2>
|
||
<p class="text-slate-600 mb-6 text-center">
|
||
Wing-M050 Processor IP的详细技术参数，为您提供全面的产品信息
|
||
</p>
|
||
<div class="w-24 h-1 bg-primary mx-auto mb-12" style="background-color:var(--primary); height:4px;">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 rounded-xl shadow-md p-8 animate-fade-in">
|
||
<h3 class="text-2xl font-bold mb-6 text-slate-800">性能基准测试</h3>
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||
<span class="text-slate-500 text-2xl">Dhrystone</span>
|
||
<span class="font-medium text-2xl" style="color: #4cd6b4;">0.95 (legal)</span>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||
<span class="text-slate-500 text-2xl">Coremark</span>
|
||
<span class="font-medium text-2xl" style="color: #4cd6b4;">2.52</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 rounded-xl shadow-md p-8 animate-fade-in">
|
||
<h3 class="text-xl font-bold mb-6 text-slate-800">功能参数</h3>
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||
<span class="text-slate-500">ISA</span>
|
||
<span class="font-medium text-slate-800">RV32E(M)B_zce_zicond_xwingc</span>
|
||
</div>
|
||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||
<span class="text-slate-500">Micro Arch</span>
|
||
<span class="font-medium text-slate-800">2-stage,In-order one-issue</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-slate-500">Privilege Mode</span>
|
||
<span class="font-medium text-slate-800">Machine Mode, User Mode (optional)</span>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||
<span class="text-slate-500">Ext. Interrupts</span>
|
||
<span class="font-medium text-slate-800">Yes (Optional)</span>
|
||
</div>
|
||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||
<span class="text-slate-500">Debug</span>
|
||
<span class="font-medium text-slate-800">cJTAG/JTAG</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-slate-500">External Bus</span>
|
||
<span class="font-medium text-slate-800">AHB</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. 产品特点 -->
|
||
<section id="features" class="section-content py-16 bg-transparent text-slate-800" style="background-color:transparent;">
|
||
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||
<div class="max-w-4xl mx-auto mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-slate-800 text-center">产品特点</h2>
|
||
<div class="w-24 h-1 bg-primary mx-auto mb-12" style="background-color:var(--primary); height:4px;">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-6 max-w-4xl mx-auto">
|
||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in">
|
||
<div class="flex items-center">
|
||
<div class="bg-primary-10 p-2 rounded-lg shrink-0">
|
||
<i class="fa fa-check text-primary"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-xl font-bold text-slate-800">
|
||
支持RV32E（M）B_zce_zicond_xwingc指令集</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.1s">
|
||
<div class="flex items-center">
|
||
<div class="bg-primary-10 p-2 rounded-lg shrink-0">
|
||
<i class="fa fa-check text-primary"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-xl font-bold text-slate-800">支持多样化的在线/离线调试手段，可快速定位并解决故障</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.2s">
|
||
<div class="flex items-center">
|
||
<div class="bg-primary-10 p-2 rounded-lg shrink-0">
|
||
<i class="fa fa-check text-primary"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-xl font-bold text-slate-800">
|
||
支持基于处理器自动化设计平台扩展领域专用指令集，可快速迭代专用处理器解决方案</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.3s">
|
||
<div class="flex items-center">
|
||
<div class="bg-primary-10 p-2 rounded-lg shrink-0">
|
||
<i class="fa fa-check text-primary"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-xl font-bold text-slate-800">支持隼瞻科技自研中断实时性增强技术，提供优异的中断切换效率和中断处理实时性
|
||
</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.4s">
|
||
<div class="flex items-center">
|
||
<div class="bg-primary-10 p-2 rounded-lg shrink-0">
|
||
<i class="fa fa-check text-primary"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-xl font-bold text-slate-800">支持隼瞻科技自研代码压缩技术，直击RISC-V基础架构代码膨胀问题
|
||
</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.5s">
|
||
<div class="flex items-center">
|
||
<div class="bg-primary-10 p-2 rounded-lg shrink-0">
|
||
<i class="fa fa-check text-primary"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-xl font-bold text-slate-800">拥有超低功耗与极小面积，实现极优面效比与能效比</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.7s">
|
||
<div class="flex items-center">
|
||
<div class="bg-primary-10 p-2 rounded-lg shrink-0">
|
||
<i class="fa fa-check text-primary"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-xl font-bold text-slate-800">满足车规ISO26262 ASIL-D要求</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. 应用场景 -->
|
||
<section id="applications" class="section-content py-16 bg-transparent text-slate-800" style="background-color:transparent;">
|
||
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||
<div class="max-w-4xl mx-auto mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-slate-800 text-center">应用场景</h2>
|
||
<p class="text-slate-600 mb-6 text-center">
|
||
Wing-M050处理器IP凭借其高性能、低功耗特性，广泛应用于以下领域
|
||
</p>
|
||
<div class="w-24 h-1 bg-primary mx-auto mb-12" style="background-color:var(--primary); height:4px;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 应用场景标签 -->
|
||
<div class="flex flex-wrap justify-center gap-4 max-w-3xl mx-auto mb-16">
|
||
<span
|
||
class="bg-primary-20 text-primary px-6 py-3 rounded-full text-lg font-medium animate-fade-in flex items-center gap-2">
|
||
<i class="fa fa-wifi"></i> IoT
|
||
</span>
|
||
<span
|
||
class="bg-primary-20 text-primary px-6 py-3 rounded-full text-lg font-medium animate-fade-in flex items-center gap-2"
|
||
style="transition-delay: 0.1s">
|
||
<i class="fa fa-connectdevelop"></i> 物联网
|
||
</span>
|
||
<span
|
||
class="bg-primary-20 text-primary px-6 py-3 rounded-full text-lg font-medium animate-fade-in flex items-center gap-2"
|
||
style="transition-delay: 0.2s">
|
||
<i class="fa fa-mobile"></i> 消费电子
|
||
</span>
|
||
<span
|
||
class="bg-primary-20 text-primary px-6 py-3 rounded-full text-lg font-medium animate-fade-in flex items-center gap-2"
|
||
style="transition-delay: 0.3s">
|
||
<i class="fa fa-microchip"></i> 系统伴核
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 详细应用场景描述 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in">
|
||
<div class="flex items-start mb-4">
|
||
<div class="w-12 h-12 bg-primary-10 rounded-full flex items-center justify-center mr-4">
|
||
<i class="fa fa-wifi text-primary text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-xl font-bold mb-2 text-slate-800">IoT设备</h4>
|
||
<p class="text-slate-600">
|
||
为各类物联网终端提供高效可靠的计算能力，支持传感器数据采集、处理和传输，满足智能物联网设备的低功耗需求。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.1s">
|
||
<div class="flex items-start mb-4">
|
||
<div class="w-12 h-12 bg-primary-10 rounded-full flex items-center justify-center mr-4">
|
||
<i class="fa fa-connectdevelop text-primary text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-xl font-bold mb-2 text-slate-800">物联网网关</h4>
|
||
<p class="text-slate-600">
|
||
作为物联网网关的核心处理单元，负责设备管理、协议转换和数据分析，确保物联网系统的高效稳定运行。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.2s">
|
||
<div class="flex items-start mb-4">
|
||
<div class="w-12 h-12 bg-primary-10 rounded-full flex items-center justify-center mr-4">
|
||
<i class="fa fa-mobile text-primary text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-xl font-bold mb-2 text-slate-800">消费电子</h4>
|
||
<p class="text-slate-600">
|
||
广泛应用于智能家电、可穿戴设备、智能音箱等消费电子产品，提供卓越的用户体验和电池续航能力。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.3s">
|
||
<div class="flex items-start mb-4">
|
||
<div class="w-12 h-12 bg-primary-10 rounded-full flex items-center justify-center mr-4">
|
||
<i class="fa fa-microchip text-primary text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-xl font-bold mb-2 text-slate-800">系统伴核</h4>
|
||
<p class="text-slate-600">
|
||
作为主处理器的辅助核心，负责系统管理、电源控制、安全监控等任务，提升整个系统的性能和可靠性。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. 交付包 -->
|
||
<section id="documentation" class="section-content py-16 bg-transparent text-slate-800" style="background-color:transparent;">
|
||
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||
<div class="max-w-4xl mx-auto mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-slate-800 text-center">交付包</h2>
|
||
<p class="text-slate-600 mb-6 text-center">
|
||
隼瞻科技提供全面的技术文档，帮助客户快速了解和使用我们的产品
|
||
</p>
|
||
<div class="w-24 h-1 bg-primary mx-auto mb-12" style="background-color:var(--primary); height:4px;">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||
<div
|
||
class="glass-panel text-slate-800 rounded-xl border border-slate-200 shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden hover-float animate-fade-in">
|
||
<div class="p-6">
|
||
<div class="w-12 h-12 bg-primary-10 rounded-lg flex items-center justify-center mb-4">
|
||
<i class="fa fa-microchip text-primary text-xl"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold mb-3 text-slate-800">HDK</h4>
|
||
<ul class="space-y-3 mb-6">
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-pdf-o text-red-500 mr-2"></i>
|
||
<span>Wing-M050 RTL代码</span>
|
||
</li>
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-text-o text-blue-500 mr-2"></i>
|
||
<span>仿真验证环境</span>
|
||
</li>
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-code-o text-green-500 mr-2"></i>
|
||
<span>DC综合参考环境</span>
|
||
</li>
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-image-o text-purple-500 mr-2"></i>
|
||
<span>Formality形式验证参考环境</span>
|
||
</li>
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-video-o text-orange-500 mr-2"></i>
|
||
<span>FPGA配置文件</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 rounded-xl border border-slate-200 shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden hover-float animate-fade-in"
|
||
style="transition-delay: 0.2s">
|
||
<div class="p-6">
|
||
<div class="w-12 h-12 bg-primary-10 rounded-lg flex items-center justify-center mb-4">
|
||
<i class="fa fa-sitemap text-primary text-xl"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold mb-3 text-slate-800">SDK</h4>
|
||
<ul class="space-y-3 mb-6">
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-pdf-o text-red-500 mr-2"></i>
|
||
<span>Wing IDE</span>
|
||
</li>
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-text-o text-blue-500 mr-2"></i>
|
||
<span>编译工具链</span>
|
||
</li>
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-code-o text-green-500 mr-2"></i>
|
||
<span>调试器</span>
|
||
</li>
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-image-o text-purple-500 mr-2"></i>
|
||
<span>BSP</span>
|
||
</li>
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-video-o text-orange-500 mr-2"></i>
|
||
<span>IA/CA 仿真器</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-panel text-slate-800 rounded-xl border border-slate-200 shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden hover-float animate-fade-in"
|
||
style="transition-delay: 0.4s">
|
||
<div class="p-6">
|
||
<div class="w-12 h-12 bg-primary-10 rounded-lg flex items-center justify-center mb-4">
|
||
<i class="fa fa-code text-primary text-xl"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold mb-3 text-slate-800">文档</h4>
|
||
<ul class="space-y-3 mb-6">
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-pdf-o text-red-500 mr-2"></i>
|
||
<span>Wing-M050 处理器技术文档</span>
|
||
</li>
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-text-o text-blue-500 mr-2"></i>
|
||
<span>Wing-M050 处理器集成文档</span>
|
||
</li>
|
||
<li class="flex items-center text-sm">
|
||
<i class="fa fa-file-code-o text-green-500 mr-2"></i>
|
||
<span>Wing-M050 SDK手册</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div> <!-- end #sj-product-page -->
|
||
|
||
<!-- 咨询按钮 -->
|
||
<div class="fixed bottom-12 right-12 z-50 popupbox">
|
||
<button id="consult-button"
|
||
class="bg-primary hover:bg-primary/90 text-slate-800 py-5 px-8 rounded-full shadow-xl transform transition-all duration-300 hover:scale-110 flex items-center gap-3 text-lg">
|
||
<i class="fa fa-comments-o text-2xl"></i>
|
||
<span class="font-bold">立刻咨询</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- JavaScript - 仅保留滚动动画，移除标签页切换功能 -->
|
||
<script>
|
||
// 滚动动画 - scoped to the animate-fade-in elements inside #sj-product-page
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const root = document.getElementById('sj-product-page');
|
||
if (!root) return;
|
||
|
||
const animateElements = root.querySelectorAll('.animate-fade-in');
|
||
|
||
function checkScroll() {
|
||
animateElements.forEach(element => {
|
||
const elementTop = element.getBoundingClientRect().top;
|
||
const elementVisible = 150;
|
||
if (elementTop < window.innerHeight - elementVisible) {
|
||
element.classList.add('visible');
|
||
}
|
||
});
|
||
}
|
||
|
||
// initial check
|
||
checkScroll();
|
||
// add listener
|
||
window.addEventListener('scroll', checkScroll, { passive: true });
|
||
// also on resize/orientation change to catch changes
|
||
window.addEventListener('resize', checkScroll);
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |